css 樣式表學習和應用

2021-04-08 23:20:14 字數 3676 閱讀 1920

一般來說,樣式表的宣告分為選擇符(selector)和塊{}(block),塊裡包含屬性(properties)和屬性的取值(value),基本格式如下: 

基本格式: 選擇符  

其它格式1:  選擇符1,選擇符2,選擇符3   

有時候多個選擇符將使用相同的設定,為了簡化**,我們可以一次性為它們設定樣式,並在多個選擇符之間加上「,」來分隔它們。  當有多個屬性的時候,必須在兩個屬性之間用「;」來分隔。 

其它格式2:  選擇符1  選擇符2  

格式2與格式1非常相似,只是在選擇符之間少加了「,」,但作用卻大不相同。表示如果選擇符2包括的內容同時包括在選擇符1裡的時候,所設定的樣式規則才起作用。 

這個段落是居中排列的

注意:類的名稱可以是任意英文單詞或以英文開頭與數字的組合,一般以其功能和效果簡要命名。

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

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以上的版本支援。

三、參考

1、91技術庫 —— 有不少的css使用技巧 http://www.91duoduo.com/css.asp

2、中國大學生網 ——  樣式表屬性清單 http://www.chinaue.com/tool/css/

CSS層疊樣式表 定義樣式表

定義樣式表 1 html標記定義 p p可以叫做選擇器,定義那個標記中的內容執行其中的樣式 乙個選擇器可以控制若干個樣式屬性,他們之間需要用英語 隔開,最後乙個可以不應加 2 class定義 class定義是以 開始 p3 id 定義 id定義是 開始的 p4 優先順序問題 id class htm...

層疊樣式表 CSS 學習筆記

1.css的基本用法 1.1 如何在html內插入樣式表 從樣式表的插入形式來看基本分為三種 a.內聯式樣式表 直接寫在現有的html標籤中,如 這裡是紅色文字 b.嵌入式樣式表 使用 標籤嵌入到html檔案的頭部種,如 c.外部式樣式表 樣式表外部檔案以 css 為副檔名,在內 不是在 1.2 使...

CSS 學習筆記 插入樣式表

這些是以前學習做的筆記,現在整理一下放到部落格上,清理磁碟空間啦 1 內聯樣式 2 內部樣式表 3 外部樣式表內聯樣式將內容和樣式表現混合在一起,比較混亂,相比較於樣式表,優勢不足。所以盡量不要使用內聯樣式。1 時候可以使用內聯樣式?當樣式僅需要在乙個元素上應用一次時。2 使用內聯樣式的方法?標籤內...