教育行業(yè)A股IPO第一股(股票代碼 003032)

全國咨詢/投訴熱線:400-618-4000

CSS結(jié)構(gòu)的特點有哪些?CSS樣式規(guī)則介紹

更新時間:2020年12月23日14時56分 來源:傳智教育 瀏覽次數(shù):

好口碑IT培訓(xùn)

  要想熟練地使用CSS對網(wǎng)頁進(jìn)行修飾,首先要了解CSS樣式規(guī)則。設(shè)置CSS樣式的具體語法規(guī)則如下。

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

  在上面的樣式規(guī)則中,選擇器用于指定需要改變樣式的HTML標(biāo)簽,花括號內(nèi)部是一條或多條聲明。每條聲明由一個屬性和屬性值組成,以“鍵值對”的形式出現(xiàn)。

  其中屬性是對指定的標(biāo)簽設(shè)置的樣式屬性,例如字體大小、文本顏色等。屬性和屬性值之間用英文冒號“:”連接,多個聲明之間用英文分號“;”進(jìn)行分隔。例如,圖1所示的CSS樣式規(guī)則的結(jié)構(gòu)示意圖。

  圖1 CSS樣式規(guī)則的結(jié)構(gòu)示意圖

  值得一提的是,在書寫CSS樣式時,除了要遵循CSS樣式規(guī)則,還必須注意CSS代碼結(jié)構(gòu)的特點,具體如下。

  ● CSS樣式中的選擇器嚴(yán)格區(qū)分大小寫,而聲明不區(qū)分大小寫,按照書寫習(xí)慣一般將選擇器、聲明都采用小寫的方式。

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

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

p {font-family:"Times New Roman";}

  ● 在編寫CSS代碼時,為了提高代碼的可讀性,可使用“/注釋語句/”來進(jìn)行注釋,例如上面的樣式代碼可添加如下注釋:

p {font-family:"Times New Roman";}/* 這是CSS注釋文本,有利于方便查找代碼,此文本不會顯示在瀏覽器窗口中  */

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

  代碼段1:

h1{ color:green; font-size:14px; }

  代碼段2:

h1{ 

color:green;           /* 定義顏色屬性  */

font-size:14px;         /* 定義字體大小屬性  */

}

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

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

h1{font-size:14 px; }      /* 14和單位px之間有空格,瀏覽器解析時會出錯 */



猜你喜歡:

Web前端培訓(xùn):如何使用CSS3實現(xiàn)瀑布流效果?

如何使用css讓圖片垂直居中?flex方法和display方法介紹

傳智播客H5教程:HTML5+CSS3視頻教程【百度云盤下載】

傳智web前端培訓(xùn)課程

0 分享到:
和我們在線交談!