CSS鏈接樣式在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用及分析

劉鵬

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

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

中圖分類(lèi)號(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)用來(lái)看，各種平臺(tái)上為了更好地實(shí)現(xiàn)網(wǎng)頁(yè)的兼容，都紛紛采用CSS技術(shù)，其編寫(xiě)簡(jiǎn)單，能夠統(tǒng)一管理多個(gè)頁(yè)面，在網(wǎng)頁(yè)設(shè)計(jì)中應(yīng)用廣泛。

1 CSS樣式表概述

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

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

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

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

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

a：link {color：#FF0000；}

a：visied {color：#000000；}

a：hover {color：#00FF00；}

a：active{color：#0173FF；}

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

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

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

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

比如鏈接標(biāo)題

鏈接標(biāo)題

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

表格外鏈接

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

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

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

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

......

......

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

4 結(jié)語(yǔ)

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