CSS技術在網頁設計中的應用

史春妹 遼寧省凌源市職業教育中心

關鍵字：網頁設計 CSS

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

一、CSS的含義與分類

1.CSS的含義

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

2.CSS的分類

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

二、在網頁設計中應用CSS樣式的優勢

1.減少網頁文件代碼量

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

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

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

3.使網頁保持統一的風格

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

4.利于被搜索引擎收錄

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

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

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

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

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

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

3.恰當地為代碼添加注釋

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

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

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

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