CSS样式规则-CSS结构的特点
要想熟練地使用CSS對網頁進行修飾,首先要了解CSS樣式規則。設置CSS樣式的具體語法規則如下。
選擇器{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; …}
在上面的樣式規則中,選擇器用于指定需要改變樣式的HTML標簽,花括號內部是一條或多條聲明。每條聲明由一個屬性和屬性值組成,以“鍵值對”的形式出現。
其中屬性是對指定的標簽設置的樣式屬性,例如字體大小、文本顏色等。屬性和屬性值之間用英文冒號“:”連接,多個聲明之間用英文分號“;”進行分隔。例如,圖1所示的CSS樣式規則的結構示意圖。
圖1 CSS樣式規則的結構示意圖
值得一提的是,在書寫CSS樣式時,除了要遵循CSS樣式規則,還必須注意CSS代碼結構的特點,具體如下。
● CSS樣式中的選擇器嚴格區分大小寫,而聲明不區分大小寫,按照書寫習慣一般將選擇器、聲明都采用小寫的方式。
● 多個屬性之間必須用英文狀態下的分號隔開,最后一個屬性后的分號可以省略,但是為了便于增加新樣式最好保留。
● 如果屬性的屬性值由多個單詞組成且中間包含空格,則必須為這個屬性值加上英文狀態下的引號。例如:
● 在編寫CSS代碼時,為了提高代碼的可讀性,可使用“/注釋語句/”來進行注釋,例如上面的樣式代碼可添加如下注釋:
● 在CSS代碼中空格是不被解析的,花括號以及分號前后的空格可有可無。因此可以使用空格鍵、Tab鍵、回車鍵等對樣式代碼進行排版,即所謂的格式化CSS代碼,這樣可以提高代碼的可讀性。例如:
代碼段1:
代碼段2:
上述兩段代碼所呈現的效果是一樣的,但是“代碼段2”書寫方式的可讀性更高。
需要注意的是,屬性值和單位之間是不允許出現空格的,否則瀏覽器解析時會出錯。例如下面這行代碼就是錯誤的。
本文來自千鋒教育,轉載請注明出處。
總結
以上是生活随笔為你收集整理的CSS样式规则-CSS结构的特点的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: XML和HTML有什么区别?两者之间有什
- 下一篇: CSS元素高度塌陷的几种常见解决办法!