CSS入門教程 語法基礎

2021-06-29 14:29:48 字數 2818 閱讀 7017

本例為css入門系列教程,在這一課中我們將學習css的語法基礎,主要學習css的基本語法、選擇符組、類選擇符、id選擇符、包含選擇符、 樣式表的層疊性以及,希望能給對網頁製作感興趣的朋友

帶來幫助~~

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是 cascading style sheets 的簡稱,中文翻譯為 串接樣式表 也有人翻譯為 樣式表 css用以作為網頁的排版和風格設計,在web標準建站中,對css的熟悉和使用是相當重要的乙個內容。css的作用是彌補html的不足,讓網頁的設計更為靈活。這個文章只是為您介紹css的基礎應用...

CSS入門教程

css是 cascading style sheets 的簡稱,中文翻譯為 串接樣式表 也有人翻譯為 樣式表 css用以作為網頁的排版和風格設計,在web標準建站中,對css的熟悉和使用是相當重要的乙個內容。css的作用是彌補html的不足,讓網頁的設計更為靈活。這個文章只是為您介紹css的基礎應用...

CSS入門教程

一說學程式設計,大家都下意識覺得要 吃苦 熬夜 哪有那麼複雜,一定是你看錯了教程.這是我剛錄的教程,挑乙個陽光的午後,關掉手機,用6個小時,看看十八哥如何把乙個公司的保安教會html的.001.了解html 002.開發環境準備 003.認識html的組成結構 004.網頁布局之切切豆腐 005.c...