CSS樣式規則之CSS結構的特點

要想熟練地使用CSS對網頁進行修飾，首先要了解CSS樣式規則。設定CSS樣式的具體語法規則如下。

　　選擇器{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; …}

　　在上面的樣式規則中，選擇器用於指定需要改變樣式的HTML標籤，花括號內部是一條或多條宣告。每條宣告由一個屬性和屬性值組成，以“鍵值對”的形式出現。

　　其中屬性是對指定的標籤設定的樣式屬性，例如字型大小、文字顏色等。屬性和屬性值之間用英文冒號“:”連線，多個宣告之間用英文分號“;”進行分隔。例如，圖1所示的CSS樣式規則的結構示意圖。

　　

　　  圖1 CSS樣式規則的結構示意圖

　　值得一提的是，在書寫CSS樣式時，除了要遵循CSS樣式規則，還必須注意CSS程式碼結構的特點，具體如下。

　　● CSS樣式中的選擇器嚴格區分大小寫，而宣告不區分大小寫，按照書寫習慣一般將選擇器、宣告都採用小寫的方式。

　　● 多個屬性之間必須用英文狀態下的分號隔開，最後一個屬性後的分號可以省略，但是為了便於增加新樣式最好保留。

　　● 如果屬性的屬性值由多個單片語成且中間包含空格，則必須為這個屬性值加上英文狀態下的引號。例如：

　　● 在編寫CSS程式碼時，為了提高程式碼的可讀性，可使用“/註釋語句/”來進行註釋，例如上面的樣式程式碼可新增如下注釋：

　　● 在CSS程式碼中空格是不被解析的，花括號以及分號前後的空格可有可無。因此可以使用空格鍵、Tab鍵、Enter鍵等對樣式程式碼進行排版，即所謂的格式化CSS程式碼，這樣可以提高程式碼的可讀性。例如：

　　程式碼段1：

　　程式碼段2：

　　上述兩段程式碼所呈現的效果是一樣的，但是“程式碼段2”書寫方式的可讀性更高。

　　需要注意的是，屬性值和單位之間是不允許出現空格的，否則瀏覽器解析時會出錯。例如下面這行程式碼就是錯誤的。