CSS 規則(zé)由(yóu)兩個主(zhǔ)要的部(bù)分構成:選擇(zé)器,以及一(yī)條或(huò)多條(tiáo)聲明(míng)。
選(xuǎn)擇器 {宣(xuān)言1; 宣言2; ... 宣(xuān)言(yán)N }
選(xuǎn)擇器(qì)通常是(shì)您需(xū)要改變(biàn)樣(yàng)式的(dí) HTML 元素(sù)。
每條(tiáo)聲明由一個(gè)屬性和(hé)一個值組成(chéng)。
屬性(property)是您希望(wàng)設(shè)置(zhì)的樣式屬(shǔ)性(style attribute)。每個(gè)屬(shǔ)性(xìng)有一個值。屬(shǔ)性和值(zhí)被(bèi)冒(mào)號(hào)分開。
選(xuǎn)擇(zé)器 {property: value}
下(xià)麵這(zhè)行(háng)代碼的(dí)作(zuò)用是將 h1 元素內(nèi)的文字顏(yán)色(sè)定義為紅色,同(tóng)時(shí)將(jiāng)字體大(dà)小(xiǎo)設置為 14 像素。
在(zài)這個例(lì)子中,h1 是(shì)選擇(zé)器,color 和 font-size 是(shì)屬(shǔ)性,red 和 14px 是值。
h1 {color:red; font-size:14px;}
下麵(miàn)的(dí)示(shì)意(yì)圖(tú)為(wéi)您(nín)展示了上麵這段代碼的(dí)結(jié)構:
值(zhí)的不(bù)同寫法(fǎ)和單位(wèi)
除(chú)了英(yīng)文單(dān)詞(cí) red,我們還可以使用十六(liù)進(jìn)製的顏(yán)色值 #ff0000:
p{
color:#ff0000;
}
為(wéi)了節(jié)約字(zì)節,我(wǒ)們可以(yǐ)使用 CSS 的(dí)縮(suō)寫(xiě)形(xíng)式(shì):
p{
color:#f00;
}
我們還可以通(tōng)過兩種方(fāng)法(fǎ)使(shǐ)用 “紅綠藍(lán)”RGB 值:
p{
color:rgb(255,0,0);
}
p{
color:rgb(100%,0%,0%);
}
請注意,當使用 RGB 百分比(bǐ)時,即使(shǐ)當值(zhí)為 0 時也要寫(xiě)百分比符號。但是在其他(tā)的情況下就(jiù)不(bù)需要(yào)這(zhè)麼(mó)做(zuò)了(liǎo)。比如說,當(dāng)尺寸為(wéi) 0 像(xiàng)素時,0 之(zhī)後不需(xū)要(yào)使用(yòng) px 單(dān)位(wèi),因(yīn)為 0 就(jiù)是 0,無(wú)論(lùn)單(dān)位是什麼。
值(zhí)為若幹詞(cí)須寫(xiě)引號
提示:如(rú)果(guǒ)值為(wéi)若幹詞,則(zé)要給值加引(yǐn)號,值為中文(wén)也(yě)建議(yì)加上引(yǐn)號:
p{
font-family:"sansserif";
}
多(duō)重聲(shēng)明(míng)
如(rú)果要(yào)定義(yì)不(bù)止一(yī)個聲(shēng)明(míng),則需要(yào)用分號(hào)將每(měi)個聲明分開。下(xià)麵的(dí)例子展(zhǎn)示出如何定義(yì)一個紅色(sè)文(wén)字的居(jū)中(zhōng)段落。最(zuì)後一(yī)條(tiáo)規則(zé)是不需要(yào)加(jiā)分號的(dí),因為(wéi)分號(hào)在(zài)英語中是一個分隔(gé)符號(hào),不(bù)是(shì)結束符(fú)號。然而(ér),大多數有經驗的設(shè)計(jì)師(shī)會(huì)在(zài)每條聲明的(dí)末(mò)尾都加上分(fēn)號,這(zhè)麼(mó)做的好(hǎo)處(chǔ)是(shì),當你(nǐ)從現(xiàn)有的(dí)規則(zé)中(zhōng)增(zēng)減(jiǎn)聲(shēng)明(míng)時,會(huì)盡可(kě)能(néng)地減(jiǎn)少(shǎo)出錯(cuò)的可能性。就(jiù)像(xiàng)這樣:
p{
text-align:center;
color:red;
}
你(nǐ)應該(gāi)在(zài)每(měi)行(háng)隻描述一(yī)個屬性,這樣(yàng)可以增(zēng)強樣(yàng)式(shì)定義(yì)的可讀性(xìng),就像這樣:
p{
text-align:center;
color:black;
font-family:arial;
}
空(kōng)格和大(dà)小寫(xiě)
大(dà)多數樣式(shì)表(biǎo)包含(hán)不(bù)止一條規(guī)則(zé),而(ér)大(dà)多數規(guī)則(zé)包含不止(zhǐ)一個聲明。多重(zhòng)聲明和空(kōng)格的使用使得(dé)樣式表(biǎo)更(gēng)容易被編(biān)輯:
body{
color:#000;
background:#fff;
margin:0;
padding:0;
font-family:Georgia,Palatino,serif;
}
是(shì)否(fǒu)包含(hán)空(kōng)格不(bù)會(huì)影響(xiǎng) CSS 在瀏覽器的(dí)工(gōng)作效果,同樣,與 XHTML 不(bù)同(tóng),CSS 對大小寫不敏感。不過存在(zài)一個例(lì)外:如(rú)果(guǒ)涉及到(dào)與(yǔ) HTML 文檔(dàng)一(yī)起工作的(dí)話,class 和(hé) id 名稱(chēng)對大小(xiǎo)寫是(shì)敏(mǐn)感(gǎn)的。
轉載請保(bǎo)留(liú)原(yuán)文地(dì)址: https://antelcom.cn/show-359.html

