網(wǎng)頁(yè)設(shè)計(jì)與制作教程Web前端開發(fā)（第7版）課件：CSS3基礎(chǔ)-CSS的基本語法

本節(jié)介紹CSS的基本語法。

CSS3基礎(chǔ)CSS的基本語法目錄

CSS3基礎(chǔ)4.1CSS設(shè)計(jì)與編寫原則4.2在HTML中使用CSS的方法4.3CSS的兩個(gè)主要特性4.4CSS的基本語法4.5CSS的選擇器4.6屬性值的寫法和單位4.7HTML文檔結(jié)構(gòu)與元素類型4.8實(shí)訓(xùn)——制作內(nèi)容詳情頁(yè)習(xí)題44.4CSS的基本語法4.41基本語法CSS的基本語法由兩部分組成，其格式為：selector{property1:value1;property2:value2;...}選擇器{

屬性1:

屬性的值1;

屬性2:

屬性的值2;

...}4.4CSS的基本語法Selector選擇器property:value為樣式聲明4.4CSS的基本語法例如，下面這行代碼的作用是將h3元素內(nèi)的文字顏色定義為藍(lán)色，同時(shí)將字體大小設(shè)置為18像素。h3{color:yellow;font-size:18px;}下圖的示意圖展示了上面這段代碼的結(jié)構(gòu)。4.4CSS的基本語法4.4.2注意事項(xiàng)1.屬性名和屬性值要正確property（屬性）是由官方CSS規(guī)范約定的，而不是自定義的。每個(gè)屬性有一個(gè)值value（屬性值），屬性和值用冒號(hào)分開。2.需要加引號(hào)如果值為若干單詞，單詞之間有空格，則要給值加引號(hào)。例如下面代碼：p{font-family:"sansserif";}4.4CSS的基本語法3.多重聲明如果要定義不止一個(gè)聲明，則需要用分號(hào)將每個(gè)聲明分開。p{text-align:center;

color:red;}4.4CSS的基本語法4.代碼的可讀性、每行只描述一個(gè)屬性，屬性末尾都需要加上分號(hào)。body{font-family:"華文中宋";

/*設(shè)置字體*/font-size:12px;/*設(shè)置文字大小為12px*/color:#000;/*設(shè)置文字顏色為黑色*/background-color:#fff;

/*設(shè)置背景顏色為白色*/}對(duì)于有一定基礎(chǔ)的Web設(shè)計(jì)人員可以將上述代碼改寫為如下：/*定義body的樣式為12px大小的黑色華文中宋字體，且背景顏色為白色*/body{font-family:"華文中宋";font-size:12px;color:#000;background-color:#fff;}4.4CSS的基本語法5.空格多重聲明和空格的使用使得樣式表更容易被編輯。body{color:#000;background:#fff;margin:0;padding:0;font-family:Georgia,Palatino,serif;}空格不會(huì)影響CSS樣式的效果。4.4CSS的基本語法6.大小寫CSS對(duì)大小寫不敏感，但在編寫樣式時(shí)，推薦屬性名和屬性值都用小寫。4.4CSS的基本語法7.選擇器的分組具有相同樣式的選擇器，可以將這一系列的選擇器分成一個(gè)組，用逗號(hào)將每個(gè)選擇器隔開。例如，定義h1~h6標(biāo)題的顏色都為藍(lán)色，對(duì)所有的標(biāo)