WEB設(shè)計中CSS技術(shù)的應用研究

WEB設(shè)計中CSS技術(shù)的應用研究

1 什么是CSS

CSS（Cascading Style Sheets），即層疊樣式表，是控制網(wǎng)頁布局樣式基礎(chǔ)的一種表現(xiàn)設(shè)計語言，能夠?qū)崿F(xiàn)對網(wǎng)頁的結(jié)構(gòu)、行為與表現(xiàn)進行分離的Web標準，進行網(wǎng)頁的風格設(shè)計。CSS可以支持眾多的瀏覽器，能與許多瀏覽器端的腳本語言一起應用，在網(wǎng)頁中做出動態(tài)的效果。

比起傳統(tǒng)的網(wǎng)頁設(shè)計技術(shù)，CSS具有語法相對簡單，編寫容易、排版和控制能力強、頁面瀏覽速度快、管理樣式集中、可隨意發(fā)布等優(yōu)點。

2 CSS在WEB設(shè)計中的應用

CSS的基本語句結(jié)構(gòu)是選擇符{屬性：屬性值}，HTML中的任意標識符都可以使用，由于CSS的代碼語句構(gòu)成都是最基本的，因為它可以在絕大多數(shù)的瀏覽器上使用。

2.1 CSS對Web網(wǎng)頁樣式的控制

Web設(shè)計中對于網(wǎng)頁樣式的控制常通過CSS技術(shù)來實現(xiàn)。CSS可以控制頁面的布局、字體、背景等信息，使用完全代碼控制，應用隨意方便，使網(wǎng)頁布局樣式靈活多樣，完美實現(xiàn)Web標準。

利用CSS進行Web布局樣式時，如在網(wǎng)頁中產(chǎn)生一個表格，可以直接用記事本創(chuàng)建一個CSS文件，對其進行編輯，完全拋開Table一層一層嵌套的冗余代碼。而利用CSS+HTML，在html代碼中加入相應的代碼即可實現(xiàn)表格的網(wǎng)頁布局，想要改變時，直接對CSS文件進行修改即可。

CSS控制字體的能力可以隨意改變字體的顏色、樣式等，使Web頁面的字體更加漂亮和容易編排，如想要為Web網(wǎng)頁中的一段文字產(chǎn)生模糊陰影的效果，只需要利用記事本直接將網(wǎng)頁打開，在中輸入相應的代碼即可。

2.2 CSS對Web網(wǎng)頁文件大小的控制

CSS技術(shù)可以將用HTML或其他相關(guān)語言寫成的文件內(nèi)容結(jié)構(gòu)與文件的顯示分離開來，簡單來說就是實現(xiàn)樣式與內(nèi)容的分離，這可以節(jié)約至少50%以上的文件尺寸，使構(gòu)成Web網(wǎng)頁的文件變小。

為了網(wǎng)頁的設(shè)計效果，需要使用大量的圖形，Web文件過大會導致網(wǎng)頁的下載速度變慢，而一個Web網(wǎng)站是否有可用性，速度才是關(guān)鍵指標，只有提高頁面的瀏覽速度，使頁面能夠更快地出現(xiàn)在訪問者的窗口中，才能增加訪問量，實現(xiàn)Web網(wǎng)站的目的。

2.3 CSS對Web網(wǎng)頁連接的控制

CSS文件形式的樣式表連接在Web網(wǎng)頁設(shè)計中不僅可以用于當前網(wǎng)頁文件，還可以進行隨意的連接。在將CSS樣式表應用到HTML頁面中時，最好也最常用的是外部連接。這種方式可以先將CSS樣式代碼放到一個外部文件中，再利用HTML中的LINK元素調(diào)用，只需要對幾個CSS文件進行簡單的修改就能重新設(shè)計一個有許多頁面的站點，縮短改版時間，更好地實現(xiàn)網(wǎng)站文件的的最優(yōu)化配置。具體的做法可以在HTML頁面的head標簽下輸入，使用LINK元素調(diào)用。

3 CSS在WEB設(shè)計中的常見問題

在進行Web網(wǎng)頁設(shè)計時使用CSS技術(shù)還需要注意一些常見的問題，這樣在使用CSS進行Web設(shè)計時才能更加得心應手。

在書寫CSS時應該具有好的書寫習慣，遵循一定的規(guī)范對CSS各個部分進行命名，并盡量縮寫CSS代碼，如可以將“#CCCCCC”簡寫成“#CCC”，這樣可以有效地提高書寫代碼的效率，減小文件體積。還應該注意class的多重定義，以及不同瀏覽器的屬性默認值，而由于瀏覽器的兼容問題，可以在一開始就將樣式表中所有元素的margin和padding設(shè)置為0。在使用不同的元素套用同一組樣式時應先定義類別名，后引用標識符 class=類別名。

在CSS設(shè)計網(wǎng)頁的校驗過程中常會出現(xiàn)通過了W3C校驗，但未通過CSS2.0校驗，這是由于W3C定義字體的原因，如果最后是以單獨某個字體而不是一個類別的字體結(jié)束，就會在有些操作系統(tǒng)中再定義時被漏掉。

另外，CSS還經(jīng)常會出現(xiàn)兼容的問題，“”在IE瀏覽器中可以被識別，在非IE瀏覽器中則不能，如“+html”，IE7瀏覽器能夠識別，F(xiàn)irefox則不能識別，這樣在書寫代碼時就應該注意所使用的瀏覽器類別，以防出現(xiàn)錯誤。

4 結(jié)語

使用CSS技術(shù)進行Web的設(shè)計，可以使頁面的布局更加合理和豐富，使網(wǎng)站的維護和更新更加方便快捷。但在使用CSS技術(shù)時也應該注意可能會出現(xiàn)的問題，不斷地了解新知識，并將其應用在實際中，這樣才能跟的上信息技術(shù)時代的潮流。

[1]范欣.淺談網(wǎng)頁制作中CSS技術(shù)[J].科技風，2012.（7）.238. [2]丁麗英.網(wǎng)頁中運用CSS的常見問題[J].職業(yè)技術(shù)，2012.（3）.137.

[3]錢海軍.基于CSS的可重構(gòu)WEB導航設(shè)計研究與實現(xiàn)[J].福建電腦，2012.（1）.

[4]佟歐，宋婷燕，鄭小松，王海燕.基于Web標準的CSS網(wǎng)頁布局應用分析[J].商情，2010.（10）.25.