XHTML+CSS基礎知識（四）：用CSS控制頁面

標籤：style   os   io   使用   ar   strong   檔案   div   問題   

1.CSS寫入頁面的方法有哪些？

行內式：直接在標籤當中利用style屬性來寫樣式表。

內嵌式：將所有的樣式表提取出來放到網頁頭部的style標籤當中。

連結式：將樣式表單獨寫成一個.css檔案，利用link標籤在網頁頭部引用，W3C標準推薦。

匯入式：利用@import來引入樣式表，由於效率等等問題已經被淘汰

2.CSS樣式表的優先順序？

理論上：行內樣式>內嵌樣式>連結樣式>匯入樣式

實際上：就近原則，內嵌、連結、匯入在同一個檔案的頭部，誰距離相應的代碼近，誰的優先順序別就更高一些。相當於在後面載入的樣式表會覆蓋掉在前面寫的，所以距離更近的會起作用。

3.CSS當中常用的選取器有哪些？

標籤選取器（div、p……）

ID選取器（#）

類別選取器（.）

通用選取器（*）

偽類別選取器（:link、:visited、:hover、:active）

其中IE6不支援除了a標籤以外，並不支援其他標籤的偽類，如果不考慮相容的話可以使用。

4.選取器的優先順序別是什嗎？

ID>類>標籤>通用

5.樣式的層疊和特殊性

即使是在不太複雜的樣式表當中，要尋找同一元素也可能由兩個或者更多規則。CSS通過一個稱作層疊的過程處理這種衝突。

層疊給每個規則分配一個重要度，層疊採用以下重要度次序。

標有!important的使用者樣式>標有!important的作者樣式>作者樣式>使用者樣式>瀏覽器/使用者代理程式應用的樣式

然後，根據選取器的特殊性決定規則的次序，具有更特殊選取器的規則優先於具有一般選取器的規則，如果兩個規則的特殊性相同，那麼後來定義的規則優先。

為了計算規則的特殊性，給每種選取器都分配一個數字值，並分為a,b,c,d四個等級，將對應等級上的數值分別放置在千位,百位,十位,個位，數值越大越特殊，也就表示其優先順序越高。

如果樣式是行內樣式，那麼a=1；b等於ID選取器的總數；c等於類、偽類和屬性選取器的數量；d等於類型選取器和為元素選取器的數量。

例如:#content .datePosted{}，它的特殊性為0,1,1,0，換算為110

　　 #wraper #content{}，它的特殊性為0,2,0,0，換算為200

那麼上面的例子當中，後者的特殊性就高於前者，因而其樣式表當中的規定就會起作用。

6.CSS中常見的命名方法

駱駝命名法：第一個字母小寫，後面的詞的第一個字母大寫，比如：headerBlock

帕斯卡命名法：第一個字母大寫，後面的詞的第一個字母大寫，比如：HeaderBlock

匈牙利命名法：在名稱的前面加上一個或多個小寫字母作為首碼，比如：header_Block

CSS中的命名規則

CSS中需要儘可能的進行語義化命名

頭：head/header

內容：content/container

尾：foot/footer

導航：nav/navigation

側欄：sidebar

7.CSS中樣式的縮寫

十六進位顏色格式"#RRGGBB"，在CSS代碼中可以縮寫為"#RGB"

正確縮寫#aabbcc=#abc，另外#abcabc!=#abc

內外邊距的格式一樣，現在以內邊距為例，一般情況下，若要定義某盒子模型的四個內邊距數值，代碼如下：padding-top:10px;padding-right:20px;padding-bottom:30px;padding-left:40px;

這種寫法如果大量使用，會使得代碼變得冗餘，現在才去下面寫法以縮寫代碼，四個方向的內邊距數值，以“上右下左”為順序書寫：padding:10px 20px 30px 40px;

如果四個方向的內邊距數值相同，就可以縮寫為一個數值：padding:10px 10px 10px 10px;=padding:10px;

如果四個方向的內邊距，方向相對的內邊距數值一樣，那麼就可以唯寫上面和右面的數值：padding:10px 20px 10px 20px;=padding:10px 20px;

如果左側的內邊距數值和右側的內邊距數值相同，那麼唯寫上、右、下三個數值即可：padding:10px 20px 30px 20px;=padding 10px 20px 30px;

內外邊距如果預設某一項，會自動補充為其對應的那一邊的距離，即如果寫了上邊距而缺失了下邊距，則下邊距與上邊距數值相同，如果寫了右邊距而缺失了左邊距，則左邊距與右邊距數值相同，通常要根據這個規則來縮寫代碼。

邊框的縮寫格式為：border:寬度 顏色 類型;冒號後面的三個屬性位置可以變換，對於最終效果沒有影響，但是建議大家還是按照這種書寫順序，以提高代碼的可讀性。

如果需要定義盒子不同寬度的邊框，可以採用border-width，屬性值同樣也是四個並且以“上右下左”的順序排列。

背景的縮寫格式為：background:背景圖片 背景顏色 平鋪類型 水平定位 垂直定位;

舉例：background:url(......) #ccc no-repeat 10px 5px;

定義盒子的背景圖片為該地址中的圖片，背景顏色為#ccc 不平鋪且舉例盒子左側的距離為10px、距離上側為5px。

另外後面的定位也可以用left，center，right，top，middle，bottom來代替。

文本的縮寫格式為：font:樣式 粗細 字型大小/行距 字型;

舉例：font:italic bold 12px/1.5 Verdana,Geneva,sans-serif;

定義盒子內的字型為斜體、加粗、文字大小為12px、1.5倍行高，字型從左至右依次備選。

font後面的所有屬性位置是不可調換的，這與邊框和北京並不相同。

XHTML+CSS基礎知識（四）：用CSS控制頁面