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

千鋒武漢發表於2021-04-29

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

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

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

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

  

1

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

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

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

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

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

2

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

3

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

  程式碼段1:

4

  程式碼段2:

5

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

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

6

  希望以上的分享能幫到大家。

來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/31548651/viewspace-2770433/,如需轉載,請註明出處,否則將追究法律責任。

相關文章