CSS語法基礎CSS語法基礎1 基本語法

2021-04-15 06:04:22 字數 2723 閱讀 6299

css語法基礎css語法基礎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基礎語法

css 語法由三部分構成 選擇器 屬性和值 selector選擇器 selector 通常是你希望定義的 html 元素或標籤,屬性 property 是你希望改變的屬性,並且每個屬性都有乙個值。屬性和值被冒號分開,並由花括號包圍,這樣就組成了乙個完整的樣式宣告 declaration body上面...

CSS 基礎語法

css 規則由兩個主要的部分構成 選擇器,以及一條或多條宣告。selector選擇器通常是您需要改變樣式的 html 元素。每條宣告由乙個屬性和乙個值組成。屬性 property 是您希望設定的樣式屬性 style attribute 每個屬性有乙個值。屬性和值被冒號分開。selector下面這行 ...

css基礎語法

1.插入外部樣式表 2.內部樣式表 3.多重樣式 如果某些屬性在不同的樣式表中被同樣的選擇器定義,那麼屬性值將從更具體的樣式表中被繼承過來。例如,外部樣式表擁有針對 h3 選擇器的三個屬性 h3 而內部樣式表擁有針對 h3 選擇器的兩個屬性 h3 假如擁有內部樣式表的這個頁面同時與外部樣式表鏈結,那...