4.1 CSS簡介

CSS的表現與HTML的結構相分離，CSS通過控制頁面結構的風格，進而控制整個頁面的風格。也就是說，將要在頁面中顯示的內容放在結構里，而將起修飾、美化作用的樣式放在表現里，做到結構（內容）與表現分開。這樣，當頁面使用不同的表現時，呈現的樣式是不一樣的，就像人穿了不同的衣服，表現就是結構的外衣，W3C推薦使用CSS來完成表現。

4.1.1 什么是CSS

CSS是用于控制網頁樣式并允許將樣式信息與網頁內容分離的一種標記性語言。樣式就是格式，在網頁中，像文字的大小、顏色以及圖片位置等，都是顯示內容的樣式。層疊是指當在HTML文檔中引用多個定義樣式的樣式文件（CSS文件）時，若多個樣式文件間所定義的樣式發生沖突，將依據層次順序處理。如果不考慮樣式的優先級，一般會遵循“最近優選原則”。

眾所周知，用HTML編寫網頁并不難，但對于一個由幾百個網頁組成的網站來說，要統一采用相同的格式就困難了。CSS能將樣式的定義與HTML文件內容分離，只要創建定義樣式的CSS文件，并且讓所有的HTML文件都調用這個CSS文件所定義的樣式即可。如果要改變HTML文件中任意部分的顯示風格，只要打開CSS文件并更改樣式就可以了。

CSS的編輯方法同HTML一樣，可以用任何文本編輯器或網頁編輯軟件，還可用專門的CSS編輯軟件。

4.1.2 CSS的開發環境

CSS的開發環境需要瀏覽器的支持，否則即使編寫出再漂亮的樣式代碼，如果瀏覽器不支持CSS，那么它也只是一段字符串而已。

1.CSS的顯示環境

瀏覽器是CSS的顯示環境。目前，瀏覽器的種類多種多樣，雖然IE、Opera、Chrome、Firefox等主流瀏覽器都支持CSS，但它們之間仍存在著符合標準的差異。也就是說，相同的CSS樣式代碼在不同的瀏覽器中的顯示效果可能有所不同。在這種情況下，設計人員只有不斷地測試，了解各主流瀏覽器的特性才能讓頁面在各種瀏覽器中正確地顯示。

2.CSS的編輯環境

能夠編輯CSS的軟件很多，例如HBuilder、Dreamweaver、Edit Plus和TopStyle等。這些軟件有些還具有“可視化”功能，但本書不建議讀者太依賴“可視化”。本書中所有的CSS樣式均采用在HBuilder中手工輸入的方法，不僅能夠使設計人員對CSS代碼有更深入的了解，還可以節省很多不必要的屬性聲明，效率反而比具有“可視化”功能的軟件還要快。

4.1.3 CSS編寫規則

雖然CSS的樣式設計功能很強大，但是如果設計人員管理不當，將導致樣式混亂、維護困難。本節學習CSS編寫中的一些技巧和規則，使讀者在今后設計頁面時胸有成竹，編寫的代碼可讀性高、結構良好。

1.目錄結構命名規則

存放CSS樣式文件的目錄一般被命名為style或css。

2.樣式文件的命名規則

在項目初期，會把不同類別的樣式放于不同的CSS文件中，這是為了CSS編寫和調試的方便；在項目后期，從網站性能考慮會把不同的CSS文件整合到一個CSS文件中，這個文件一般命名為style.css或css.css。

3.樣式的命名規則

所有樣式名由小寫英文字母或“_”下畫線組成，必須以字母開頭，不能為純數字。設計者要用有意義的單詞或縮寫組合來命名選擇符，做到“見其名，知其意”，這樣就節省了查找樣式的時間。樣式名必須能夠表示樣式的大概含義（禁止出現如Div1、Div2、Style1等命名），讀者可以參考表4-1中的樣式名。

當定義的樣式名比較復雜時用下畫線把層次分開，例如以下定義導航標志的樣式名的CSS代碼如下。

4.CSS代碼注釋

為代碼添加注釋是一種良好的編程習慣。注釋可以增強CSS文件的可讀性，后期維護也將更加便利。

在CSS中添加注釋非常簡單，它是以“/*”開始，以“*/”結尾。注釋可以是單行，也可以是多行，并且可以出現在CSS代碼的任何地方，但注釋內容不會被顯示或引用在網頁上。

（1）結構性注釋

結構性注釋僅僅是用風格統一的大注釋塊從視覺上區分被分隔的部分，如以下代碼所示。

（2）提示性注釋

在編寫CSS代碼時，可能需要某種技巧解決某個問題。在這種情況下，最好將這個解決方案簡要地注釋在代碼后面，如以下代碼所示。