更新時(shí)間:2020-12-23 來(lái)源:黑馬程序員 瀏覽量:
要想熟練地使用CSS對(duì)網(wǎng)頁(yè)進(jìn)行修飾,首先要了解CSS樣式規(guī)則。設(shè)置CSS樣式的具體語(yǔ)法規(guī)則如下。
選擇器{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; …}
在上面的樣式規(guī)則中,選擇器用于指定需要改變樣式的HTML標(biāo)簽,花括號(hào)內(nèi)部是一條或多條聲明。每條聲明由一個(gè)屬性和屬性值組成,以“鍵值對(duì)”的形式出現(xiàn)。
其中屬性是對(duì)指定的標(biāo)簽設(shè)置的樣式屬性,例如字體大小、文本顏色等。屬性和屬性值之間用英文冒號(hào)“:”連接,多個(gè)聲明之間用英文分號(hào)“;”進(jìn)行分隔。例如,圖1所示的CSS樣式規(guī)則的結(jié)構(gòu)示意圖。
圖1 CSS樣式規(guī)則的結(jié)構(gòu)示意圖
值得一提的是,在書(shū)寫(xiě)CSS樣式時(shí),除了要遵循CSS樣式規(guī)則,還必須注意CSS代碼結(jié)構(gòu)的特點(diǎn),具體如下。
● CSS樣式中的選擇器嚴(yán)格區(qū)分大小寫(xiě),而聲明不區(qū)分大小寫(xiě),按照書(shū)寫(xiě)習(xí)慣一般將選擇器、聲明都采用小寫(xiě)的方式。
● 多個(gè)屬性之間必須用英文狀態(tài)下的分號(hào)隔開(kāi),最后一個(gè)屬性后的分號(hào)可以省略,但是為了便于增加新樣式最好保留。
● 如果屬性的屬性值由多個(gè)單詞組成且中間包含空格,則必須為這個(gè)屬性值加上英文狀態(tài)下的引號(hào)。例如:
p {font-family:"Times New Roman";}
● 在編寫(xiě)CSS代碼時(shí),為了提高代碼的可讀性,可使用“/注釋語(yǔ)句/”來(lái)進(jìn)行注釋,例如上面的樣式代碼可添加如下注釋:
p {font-family:"Times New Roman";}/* 這是CSS注釋文本,有利于方便查找代碼,此文本不會(huì)顯示在瀏覽器窗口中 */
● 在CSS代碼中空格是不被解析的,花括號(hào)以及分號(hào)前后的空格可有可無(wú)。因此可以使用空格鍵、Tab鍵、回車(chē)鍵等對(duì)樣式代碼進(jìn)行排版,即所謂的格式化CSS代碼,這樣可以提高代碼的可讀性。例如:
代碼段1:
h1{ color:green; font-size:14px; }
代碼段2:
h1{ color:green; /* 定義顏色屬性 */ font-size:14px; /* 定義字體大小屬性 */ }
上述兩段代碼所呈現(xiàn)的效果是一樣的,但是“代碼段2”書(shū)寫(xiě)方式的可讀性更高。
需要注意的是,屬性值和單位之間是不允許出現(xiàn)空格的,否則瀏覽器解析時(shí)會(huì)出錯(cuò)。例如下面這行代碼就是錯(cuò)誤的。
h1{font-size:14 px; } /* 14和單位px之間有空格,瀏覽器解析時(shí)會(huì)出錯(cuò) */
猜你喜歡