1. 基本語法
css的定義是由三個部分構成:選擇符(selector),屬性(properties)和屬性的取值(value).
基本格式如下:
selector
(選擇符 )
選擇符可以是多種形式,一般是你要定義樣式的html標記,例如body,p,table……,你可以通過此方法定義它的屬性和值,屬性和值要用冒號隔開:
body
選擇符body是指頁面主體部分,color是控制文字顏色的屬性,black是顏色的值,此例的效果是使頁面中的文字為黑色.
如果屬性的值是多個單詞組成,必須在值上加引號,比如字型的名稱經常是幾個單詞的組合:
p (定義段落字型為sans serif)
如果需要對乙個選擇符指定多個屬性時,我們使用分號將所有的屬性和值分開:
p (段落居中排列;並且段落中的文字為紅色)
為了使你定義的樣式表方便閱讀,你可以採用分行的書寫格式: p
(段落排列居中,段落中文字為黑色,字型是arial)
2. 選擇符組
你可以把相同屬性和值的選擇符組合起來書寫,用逗號將選擇符分開,這樣可以減少樣式重複定義:
h1, h2, h3, h4, h5, h6
(這個組裡包括所有的標題元素,每個標題元素的文字都為綠色)
p, table
(段落和**裡的文字尺寸為9號字)
效果完全等效於:
p table
3. 類選擇符
用類選擇符你能夠把相同的元素分類定義不同的樣式,定義類選擇符時,在自定類的名稱前面加乙個點號.假如你想要兩個不同的段落,乙個段落向右對齊,乙個段落居中,你可以先定義兩個類:
p.right
p.center
然後用不在不同的段落裡,只要在html標記裡加入你定義的class引數:
這個段落向右對齊的
? 這個段落是居中排列的
注意:類的名稱可以是任意英文單詞或以英文開頭與數字的組合,一般以其功能和效果簡要命名.
類選擇符還有一種用法,在選擇符中省略html標記名,這樣可以把幾個不同的元素定義成相同的樣式:
.center
(定義.center的類選擇符為文字居中排列)
這樣的類可以被應用到任何元素上.下面我們使h1元素(標題1)和p元素(段落)都歸為"center"類,這使兩個元素的樣式都跟隨".center"這個類選擇符:
這個段落也是居中排列的
注意:這種省略html標記的類選擇符是我們今後最常用的css方法,使用這種方法,我們可以很方便的在任意元素上套用預先定義好的類樣式.
4. id選擇符
在html頁面中id引數指定了某個單一元素,id選擇符是用來對這個單一元素定義單獨的樣式.
id選擇符的應用和類選擇符類似,只要把class換成id即可.將上例中類用id替代:
這個段落向右對齊
定義id選擇符要在id名稱前加上乙個"#"號.和類選擇符相同,定義id選擇符的屬性也有兩種方法.下面這個例子,id屬性將匹配所有id="intro"的元素:
#intro
(字型尺寸為預設尺寸的110%;粗體;藍色;背景顏色透明)
下面這個例子,id屬性只匹配id="intro"的段落元素:
p#intro
注意:id選擇符侷限性很大,只能單獨定義某個元素的樣式,一般只在特殊情況下使用.
5. 包含選擇符
可以單獨對某種元素包含關係定義的樣式表,元素1裡包含元素2,這種方式只對在元素1裡的元素2定義,對單獨的元素1或元素2無定義,例如:
table a
在**內的鏈結改變了樣式,文字大小為12象素,而**外的鏈結的文字仍為預設大小.
6. 樣式表的層疊性
層疊性就是繼承性,樣式表的繼承規則是外部的元素樣式會保留下來繼承給這個元素所包含的其他元素.事實上,所有在元素中巢狀的元素都會繼承外層元素指定的屬性值,有時會把很多層巢狀的樣式疊加在一起,除非另外更改.例如在div標記中巢狀p標記:
div
…… 這個段落的文字為紅色9號字
(p元素裡的內容會繼承div定義的屬性)
注意:有些情況下內部選擇符不繼承周圍選擇符的值,但理論上這些都是特殊的.例如,上邊界屬性值是不會繼承的,直覺上,乙個段落不會同文件body一樣的上邊界值.
另外,當樣式表繼承遇到衝突時,總是以最後定義的樣式為準.如果上例中定義了p的顏色:
div
p ……
這個段落的文字為藍色9號字
我們可以看到段落裡的文字大小為9號字是繼承div屬性的,而color屬性則依照最後定義的.
不同的選擇符定義相同的元素時,要考慮到不同的選擇符之間的優先順序.id選擇符,類選擇符和html標記選擇符,因為id選擇符是最後加到元素上的,所以優先順序最高,其次是類選擇符.如果想超越這三者之間的關係,可以用!important提公升樣式表的優先權,例如:
p .blue
#id1
我們同時對頁面中的乙個段落加上這三種樣式,它最後會依照被!important申明的html標記選擇符樣式為紅色文字.如果去掉!important,則依照優先權最高的id選擇符為黃色文字.
7. 注釋
你可以在css中插入注釋來說明你**的意思,注釋有利於你或別人以後編輯和更改**時理解**的含義.在瀏覽器中,注釋是不顯示的.css注釋以"/*" 開頭,以"*/" 結尾,如下:
/* 定義段落樣式表 */ p
CSS選擇符 屬性選擇符
使用屬性選擇器可以篩選出設定了特定屬性的標籤。例如選取所有設定了title屬性的 img title 這種選擇符的第一部分是標籤名 img 隨後是屬性名，放在方括號裡 title css不限制屬性選擇符只能使用標籤名，也可以使用類。例如 photo title 用於選取類為photo，而且設定了ti...
CSS選擇符 型別選擇符
h1用於選取特定html標籤的選擇符，叫型別選擇符或元素選擇符。這種選擇符的作用特別大。能把樣式應用到網頁中的每個目標標籤上。使用這種選擇符，只需少量工作就能大幅修改網頁的外觀。假如想讓網頁中每個段落都使用相同的字型 顏色和字型大小，只需編寫乙個選擇符為p 表示標籤 的樣式即可。html 最基本的佐...
CSS 選擇符大全（常用css選擇符）
e 某個元素,如p id 使用id，如 idname class 使用class，如.myclass 萬用字元 包含選擇符 e f e所有的f包含子代，孫代，子子孫孫等等 子選擇符 e相鄰選擇符 e f 和e相鄰的f，相隔乙個都不算 兄弟選擇符 e f 和e同級的f的算 e att e中帶有某個at...