CSS技術在網(wǎng)頁設計中的應用

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

關鍵字：網(wǎng)頁設計 CSS

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

一、CSS的含義與分類

1.CSS的含義

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

2.CSS的分類

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

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

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

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

2.便于管理人員后期修改維護

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

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

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

4.利于被搜索引擎收錄

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

三、使用CSS技術應遵循的原則

1.語句盡量清晰明確，通俗易懂

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

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

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

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

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

4.盡量使用外部樣式表進行定義

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

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