首頁技術文章正文

CSS 樣式表代碼規(guī)則

更新時間:2019-07-18 來源:黑馬程序員 瀏覽量:


使用HTML進行標記網(wǎng)頁內(nèi)容時,需要遵從一定的規(guī)范,CSS亦如此。要想熟練地使用CSS對網(wǎng)頁進行修飾,首先要了解CSS樣式規(guī)則,具體格式如下


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


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


css樣式表

屬性是對指定的標記設置的樣式屬性,例如字體大小、文本顏色等。屬性和屬性值之間用英文冒號“:”連接,多個“鍵值對”之間用英文分號“;”進行分隔。

在書寫CSS樣式時候,除了要遵循CSS樣式規(guī)則,還必須注意CSS代碼結構中的幾個特點,具體介紹如下:

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

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

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

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


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

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

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

代碼段1:

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


代碼段2:

h1(
    color: green; /*定義顏色屬性*
    font-size: 14px; /*定義字體大小屬性*/
}


上述兩段代碼所呈現(xiàn)的效果是一樣的,但是第二種書寫方式的可讀性更高。需意的是,屬性值和單位之間是不允許出現(xiàn)空格的,否則瀏覽器解析時會出錯。例如這行代碼就是錯誤的。

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





推薦了解熱門學科

java培訓Python人工智能Web前端培訓PHP培訓
區(qū)塊鏈培訓影視制作培訓C++培訓產(chǎn)品經(jīng)理培訓
UI設計培訓新媒體培訓產(chǎn)品經(jīng)理培訓Linux運維
大數(shù)據(jù)培訓智能機器人軟件開發(fā)

分享到:
在線咨詢 我要報名
和我們在線交談!