劉鵬

摘要：本文在網(wǎng)頁設(shè)計(jì)中采用CSS鏈接樣式表進(jìn)行分析，針對(duì)CSS基本技術(shù)以及網(wǎng)頁設(shè)計(jì)中鏈接樣式的應(yīng)用進(jìn)行了具體的論述。

關(guān)鍵詞：CSS；鏈接樣式；網(wǎng)頁設(shè)計(jì)

中圖分類號(hào)：TP37 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1007-9416（2018）02-0162-02

隨著互聯(lián)網(wǎng)技術(shù)的發(fā)展，我國(guó)已經(jīng)全面進(jìn)入了網(wǎng)絡(luò)時(shí)代，從日常生活中的網(wǎng)絡(luò)運(yùn)用來看，各種平臺(tái)上為了更好地實(shí)現(xiàn)網(wǎng)頁的兼容，都紛紛采用CSS技術(shù)，其編寫簡(jiǎn)單，能夠統(tǒng)一管理多個(gè)頁面，在網(wǎng)頁設(shè)計(jì)中應(yīng)用廣泛。

1 CSS樣式表概述

（1）CSS的英文全稱為Cascading Style Sheets，中文名為層疊樣式表，可以將樣式信息與網(wǎng)頁內(nèi)容分離的一種語言。使用CSS能夠控制網(wǎng)頁樣式，彌補(bǔ)HTML語言的缺陷，實(shí)現(xiàn)行間距、字間距的調(diào)整，固定背景圖像和取消下劃線等HTML無法完成的樣式表現(xiàn)的效果，對(duì)于網(wǎng)頁外觀來說能夠更好地靈活控制布局和美化頁面。（2）CSS的作用主要表現(xiàn)在排版布局控制靈活，對(duì)網(wǎng)頁的顯示位置、風(fēng)格、文本間距、大小、行高、顏色等進(jìn)行規(guī)范設(shè)置；方便地為網(wǎng)頁中的任何元素設(shè)置不同的背景圖片和顏色，并且制作的鏈接效果多種多樣。（3）CSS的工作模式是建立外部樣式表文件（.css）然后調(diào)用該文件，比如：。這種形式是把css單獨(dú)寫到一個(gè)css文件內(nèi)，然后在源代碼中以link方式鏈接。它的好處是不但本頁面可以調(diào)用，其它頁面也可以調(diào)用，是最常用的一種形式。

2 CSS鏈接樣式的應(yīng)用

（1）在網(wǎng)頁制作中采用CSS鏈接樣式，可以用任何CSS屬性（如背景、顏色、字體等），同一個(gè)CSS設(shè)計(jì)方案設(shè)計(jì)多個(gè)網(wǎng)頁時(shí)，需要使用外部樣式鏈接，此種方法的結(jié)果是減少網(wǎng)頁的代碼，修改起來較為方便。

（2）CSS鏈接樣式表在網(wǎng)頁中存在混用的問題，如何做到混用而不亂。這需要按照從高到低的次序進(jìn)行執(zhí)行，保證優(yōu)先級(jí)次序。

（3）網(wǎng)頁中修改鏈接的顯示效果如何進(jìn)行，可以通過設(shè)置鏈接標(biāo)簽的樣式，改變鏈接的顯示，如下：

a：link {color：#FF0000；}

a：visied {color：#000000；}

a：hover {color：#00FF00；}

a：active{color：#0173FF；}

此種設(shè)置，會(huì)將頁面的所有鏈接的效果進(jìn)行修改。

（4）關(guān)于鏈接樣式還可以設(shè)置到ID或某個(gè)類上，再將樣式應(yīng)用某個(gè)元素，被應(yīng)用的元素不會(huì)受到整個(gè)頁面的鏈接樣式的影響，其他元素的鏈接樣式則不會(huì)改變。

.style1 a：link，.style1 a：visted{color：#000000；}

.style1 a：hover，.style1 a：active {color：#00FF00；}

比如鏈接標(biāo)題

鏈接標(biāo)題

（5）通過在標(biāo)簽上設(shè)置樣式，可控制住標(biāo)簽中鏈接的樣式，表格外的鏈接樣式不會(huì)被設(shè)置，此種樣式可以寫為：

表格外鏈接

（6）當(dāng)采用行內(nèi)樣式時(shí)，如果設(shè)置了多個(gè)鏈接樣式，不要把定義的類加在上，瀏覽器在解析的時(shí)候就會(huì)出現(xiàn)錯(cuò)誤，不顯示設(shè)置的效果。需要在的外面套個(gè)父元素，將類設(shè)置在父元素上，要確定設(shè)置的類是父級(jí)標(biāo)簽，而不是a標(biāo)簽。如：

3 網(wǎng)頁設(shè)計(jì)中CSS樣式實(shí)施

網(wǎng)頁設(shè)計(jì)的目的是滿足瀏覽者的需求，在確定網(wǎng)站性質(zhì)和定位后，根據(jù)需求，抓住要點(diǎn)進(jìn)行規(guī)劃，選擇相應(yīng)的網(wǎng)頁框架組織結(jié)構(gòu)內(nèi)容和形式。先將內(nèi)容分類列表，把各個(gè)項(xiàng)目分成邏輯組，形成網(wǎng)頁的總體結(jié)構(gòu)。其次，確定各級(jí)頁面主題、包含內(nèi)容以及各頁之間的層次結(jié)構(gòu)，搭建出合理的HTML結(jié)構(gòu)，使用HTML和CSS對(duì)頁面進(jìn)行布局并配合美工設(shè)計(jì)元素，為網(wǎng)頁增添交互效果，設(shè)計(jì)出具有良好視覺效果的頁面。

根據(jù)前期準(zhǔn)備開始設(shè)計(jì)草圖，確定出需要在首頁展示的信息。包括：網(wǎng)站標(biāo)志、導(dǎo)航欄、Banner大圖、項(xiàng)目版塊（一）、項(xiàng)目版塊（二）、相關(guān)鏈接、頁腳相關(guān)信息、版權(quán)信息等。以下為案例部分設(shè)計(jì)代碼：

......

......

首頁 聯(lián)系我們
文字標(biāo)題
文字說明 文字說明
鏈接標(biāo)題 鏈接標(biāo)題 鏈接標(biāo)題
版權(quán)

4 結(jié)語

終上所述，明確了CSS在網(wǎng)頁設(shè)計(jì)中的應(yīng)用。CSS鏈接樣式在網(wǎng)頁設(shè)計(jì)中使用靈活，有效簡(jiǎn)化了設(shè)計(jì)程序，使得網(wǎng)頁設(shè)計(jì)更易于維護(hù)和操作，更好的實(shí)現(xiàn)文本和色彩等元素設(shè)計(jì)，豐富了頁面樣式，滿足瀏覽者體驗(yàn)和審美需求。