CSS樣式語法基礎

2021-04-08 19:44:34 字數 3820 閱讀 1813

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的瀏覽器自動所識別的特殊選擇符。它的最大的用處就是可以對鏈結在不同狀態下定義不同的樣式效果。

1. 語法

偽類的語法是在原有的語法裡加上乙個偽類(pseudo-class):

selector:pseudo-class

(選擇符:偽類 )

偽類和類不同,是css已經定義好的,不能象類選擇符一樣隨意用別的名字,根據上面的語法可以解釋為物件(選擇符)在某個特殊狀態下(偽類)的樣式。

類選擇符及其他選擇符也同樣可以和偽類混用:

selector.class:pseudo-class

(選擇符.類:偽類 )

2. 錨的偽類

我們最常用的是4種a(錨)元素的偽類,它表示動態鏈結在4種不同的狀態:link、visited、active、hover(未訪問的鏈結、已訪問的鏈結、啟用鏈結和滑鼠停留在鏈結上)。我們把它們分別定義不同的效果:a:link /* 未訪問的鏈結 */

a:visited /* 已訪問的鏈結 */

a:hover /* 滑鼠在鏈結上 */

a:active /* 啟用鏈結 */(上面這個例子中,這個鏈結未訪問時的顏色是紅色並無下劃線,訪問後是綠色並無下劃線,啟用鏈結時為藍色並有下劃線,滑鼠在鏈結上時為紫色並有下劃線)

注意:有時這個鏈結訪問前滑鼠指向鏈結時有效果,而鏈結訪問後滑鼠再次指向鏈結時卻無效果了。這是因為你把a:hover放在了a:visited的前面,這樣的話由於後面的優先順序高,當訪問鏈結後就忽略了a:hover的效果。所以根據疊層順序,我們在定義這些鏈結樣式時,一定要按照a:link, a:visited, a:hover, a:actived的順序書寫。

3. 偽類和類選擇符

將偽類和類組合起來用,就可以在同乙個頁面中做幾組不同的鏈結效果了,例如,我們定義一組鏈結為紅色,訪問後為藍色;另一組為綠色,訪問後為黃色:a.red:link

a.red:visited

a.blue:link

a.blue:visited 現在應用在不同的鏈結上:這是第一組鏈結

這是第二組鏈結

4. 其他偽類

此外css2還定義了首字和首行(first-letter和first-line)的偽類,可以對元素的首字或首行設定不同的樣式。

下面看這個例子,我們在段落標記裡定義文字首字尺寸為預設大小的3倍:

……這是乙個段落,這個段落的首字被放大了。

我們再定義乙個首行樣式的例子:

……這是段落的第一行

這是段落的第二行

這是段落的第三行

(上例中段落的第一行為紅色,第

二、三行為預設顏色)

注意:首字和首行的偽類需要ie5.5以上的版本支援。

CSS樣式基礎語法

css的定義是由三個部分構成 選擇符 selector 屬性 properties 和屬性的取值 value 基本格式如下 selector 選擇符 選擇符是可以是多種形式,一般是你要定義樣式的html標記,例如body p table 你可以通過此方法定義它的屬性和值,屬性和值要用冒號隔開 bod...

CSS樣式語法

css樣式 由選擇符和宣告構成 選擇符 即包裹著需要修飾的內容的標籤,如包裹小猿圈的span 宣告 即屬性名和屬性值,如color是屬性名,red是屬性值 doctype html html lang en head meta charset utf 8 title css title style ...

CSS基礎樣式

css指層疊樣式表,它作用是控制頁面內容的外觀。這樣就可以將網頁的內容和表現形式分離。層疊的意思是 如果選擇器的權重相同,則後面元素的樣式會覆蓋前面樣式。css樣式表由選擇器和宣告兩個部分組成,其中選擇器是通過名字來標識元素的,宣告用於定義元素的樣式。a 樣式表比較常見的有三種引入方式 1.行內樣式...