CSS技術(shù)在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用

史春妹 遼寧省凌源市職業(yè)教育中心

關(guān)鍵字：網(wǎng)頁(yè)設(shè)計(jì) CSS

目前，市面上流行的網(wǎng)頁(yè)設(shè)計(jì)軟件較多，如FrontPage、Dreamweaver等，這些軟件功能強(qiáng)大，操作簡(jiǎn)單，而在網(wǎng)頁(yè)設(shè)計(jì)中應(yīng)用CSS技術(shù)，能夠使網(wǎng)頁(yè)元素更加生動(dòng)，使網(wǎng)頁(yè)布局更加規(guī)范合理，更能起到吸引用戶的作用。

一、CSS的含義與分類

1.CSS的含義

CSS（Cascading Style Sheets）是層疊樣式表單的縮寫，是用于增強(qiáng)控制網(wǎng)頁(yè)樣式并允許將樣式信息與網(wǎng)頁(yè)內(nèi)容分離的一種標(biāo)記性語(yǔ)言。CSS不僅可以應(yīng)用于靜態(tài)網(wǎng)頁(yè)之中，還可以結(jié)合JavaScript等腳本語(yǔ)言實(shí)現(xiàn)動(dòng)態(tài)網(wǎng)頁(yè)的格式化。

2.CSS的分類

CSS可以分為三種，分別是外部樣式表、內(nèi)嵌樣式表和行內(nèi)樣式表。其中，外部樣式表是獨(dú)立于網(wǎng)頁(yè)文件之外的單獨(dú)的樣式文件，其擴(kuò)展名為.CSS，用戶可以使用記事本等文本編輯軟件對(duì)CSS文件進(jìn)行編輯修改。在網(wǎng)頁(yè)設(shè)計(jì)中，任何鏈接到該外部樣式表的網(wǎng)頁(yè)文件，均可以應(yīng)用該樣式。例如：＜link rel=”style sheet” href=”first.css”type=”text/css”＞。內(nèi)嵌樣式表是嵌套在網(wǎng)頁(yè)文件中的樣式，一般位于＜head＞和＜/head＞之間，內(nèi)嵌樣式表只在當(dāng)前網(wǎng)頁(yè)中起作用，其格式為：＜head＞＜style type=”text/css”＜！--樣式表的具體內(nèi)容--＞＜/stype＞＜/head＞。行內(nèi)樣式表是位于HTML語(yǔ)句中的樣式，它僅僅是一條HTML標(biāo)記，是通過網(wǎng)頁(yè)“屬性”中的“樣式”按鈕定義添加的，例如：＜table style=”color：red；font-size：10pt”＞。這三種樣式中，行內(nèi)樣式表優(yōu)先級(jí)最高，內(nèi)嵌樣式表次之，外部樣式表最低。

二、在網(wǎng)頁(yè)設(shè)計(jì)中應(yīng)用CSS樣式的優(yōu)勢(shì)

1.減少網(wǎng)頁(yè)文件代碼量

CSS樣式表具有強(qiáng)大的功能，不僅可以對(duì)網(wǎng)頁(yè)中的文字字體、字號(hào)、顏色、字符間距、對(duì)齊方式等字符屬性進(jìn)行設(shè)置，還可以對(duì)圖片屬性、背景顏色、表格屬性、頁(yè)面布局等進(jìn)行統(tǒng)一定義，避免了在每個(gè)網(wǎng)頁(yè)中進(jìn)行分別定義的重復(fù)操作，可以有效減少網(wǎng)頁(yè)文件的代碼量，提高網(wǎng)頁(yè)的訪問速度。

2.便于管理人員后期修改維護(hù)

很多網(wǎng)站在建成以后會(huì)進(jìn)行修改或改版操作，對(duì)于應(yīng)用了CSS樣式的網(wǎng)站來(lái)說(shuō)，修改起來(lái)會(huì)相對(duì)方便很多，修改時(shí)只需要修改對(duì)應(yīng)的.CSS文件中的定義就能實(shí)現(xiàn)，而不必對(duì)每個(gè)網(wǎng)頁(yè)文件進(jìn)行逐一修改，從而節(jié)省修改維護(hù)的成本及時(shí)間。

3.使網(wǎng)頁(yè)保持統(tǒng)一的風(fēng)格

一般情況下，一個(gè)網(wǎng)站中的所有網(wǎng)頁(yè)應(yīng)具有統(tǒng)一的風(fēng)格，在文字字體顏色大小、導(dǎo)航條的位置、表格屬性的設(shè)置等方面都要保持一致，因此，可以將這些屬性定義在一個(gè)CSS外部樣式表中，網(wǎng)站的所有網(wǎng)頁(yè)文件均鏈接到此CSS文件中，既能實(shí)現(xiàn)網(wǎng)頁(yè)風(fēng)格的統(tǒng)一，又可以有效地減少設(shè)計(jì)人員的工作量。

4.利于被搜索引擎收錄

精煉的網(wǎng)站可以增加搜索關(guān)鍵字在網(wǎng)站中的比重，在網(wǎng)頁(yè)中加入大量的格式化腳本語(yǔ)言，勢(shì)必增加網(wǎng)頁(yè)的代碼量。而CSS樣式具有簡(jiǎn)潔明了的特點(diǎn)，運(yùn)用CSS技術(shù)設(shè)計(jì)網(wǎng)頁(yè)可以縮小網(wǎng)站的體積，減少訪問網(wǎng)站的帶寬與流量，更加有利于被搜索引擎收錄。

三、使用CSS技術(shù)應(yīng)遵循的原則

1.語(yǔ)句盡量清晰明確，通俗易懂

CSS樣式的定義一定要簡(jiǎn)單明確，保持網(wǎng)頁(yè)樣式的簡(jiǎn)潔明了，既有利于后期的修改，又有利于網(wǎng)頁(yè)運(yùn)行。

2.不要過多地定義CSS樣式

CSS樣式的優(yōu)勢(shì)就在于一個(gè)CSS文件可以應(yīng)用到多個(gè)網(wǎng)頁(yè)之中，實(shí)現(xiàn)網(wǎng)頁(yè)的統(tǒng)一設(shè)計(jì)管理。在定義CSS樣式時(shí)，要盡可能多的將其應(yīng)用于多個(gè)網(wǎng)頁(yè)中，如果一個(gè)網(wǎng)頁(yè)定義一個(gè)CSS文件，則會(huì)使網(wǎng)站變得繁瑣，CSS樣式定義也變得毫無(wú)意義。

3.恰當(dāng)?shù)貫榇a添加注釋

網(wǎng)站建設(shè)是一項(xiàng)龐大的工程，往往由多人組成的團(tuán)隊(duì)來(lái)完成，為了讓其他網(wǎng)頁(yè)設(shè)計(jì)人員更好地了解網(wǎng)頁(yè)樣式的功能與作用，在進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)時(shí)要養(yǎng)成添加HTML注釋的習(xí)慣，可以方便地進(jìn)行查找、對(duì)比，方便團(tuán)隊(duì)中的其他人員對(duì)代碼的理解。添加注釋的方法很簡(jiǎn)單，如：＜！--這是一條注釋--＞，注釋的內(nèi)容不會(huì)在瀏覽器中顯示出來(lái)。

4.盡量使用外部樣式表進(jìn)行定義

外部樣式表是獨(dú)立于網(wǎng)頁(yè)文件之外的.CSS文件，在一個(gè)網(wǎng)站中可以將一個(gè).CSS文件應(yīng)用于多個(gè)甚至所有的網(wǎng)頁(yè)文件，這樣不僅可以節(jié)省網(wǎng)站空間，在修改網(wǎng)頁(yè)樣式時(shí)也可以通過修改CSS文件實(shí)現(xiàn)多個(gè)網(wǎng)頁(yè)格式的修改，從而保持網(wǎng)站整體一致，同時(shí)可以提高工作效率。

CSS在網(wǎng)頁(yè)設(shè)計(jì)中具有重要的作用，合理恰當(dāng)?shù)剡\(yùn)用CSS技術(shù)進(jìn)行網(wǎng)頁(yè)設(shè)計(jì)，可以使網(wǎng)頁(yè)文件代碼更加簡(jiǎn)潔，節(jié)省網(wǎng)站帶寬，同時(shí)CSS技術(shù)具有良好的兼容性，可以確保網(wǎng)頁(yè)在不同的瀏覽器中得以正常顯示，專業(yè)網(wǎng)頁(yè)設(shè)計(jì)人員應(yīng)靈活運(yùn)用這一工具進(jìn)行頁(yè)面布局與美化。