CSS語法的介紹

CSS的定義是由三個部分構成:

#選擇符(selector)，

#屬性(properties)

屬性的取值(value)。

語法：selector {property：value} (選擇符號{屬性：值})

1、說明

選擇符是可以是多種形式，一般是你要定義樣式的HTML標記，例如BODY、P、TABLE，你可以透過此方法定義它的屬性和值，屬性和值要用冒號隔開：

#例：body {color：black}，此範例的效果是讓頁面中的文字為黑色。

如果屬性的值是多個單字組成，必須在值上加引號，例如字體的名稱經常是幾個單字的組合：

#範例：p {font-family: "sans serif"} (定義段落字體為sans serif)

如果需要對一個選擇符指定多個屬性時，使用分號將所有的屬性和值分開：

例：p {text-align：center;color： red} (段落居中排列；並且段落中的文字為紅色)

2、選擇符組

#可以把相同屬性和值的選擇子組合起來書寫，用逗號將選擇符分開，這樣可以減少樣式重複定義：

h1， h2， h3， h4， h5， h6 { color： green } (這個群組裡包括所有的標題元素，每個標題元素的文字都為綠色)

p，table{ font-size：9pt } (段落與表格裡的文字尺寸為9號字)

效果完全等效於：

p { font-size：9pt }

table { font-size：9pt }

3、類別選擇符

#用類別選擇符你能夠把相同的元素分類定義不同的樣式，定義類別選擇符時，在自定類別的名稱前面加一個點號。假如你想要兩個不同的段落，一個段落向右對齊，一個段落居中，你可以先定義兩個類別：

p.right {text-align： right}

p.center {text-align：center}

#然後用不在不同的段落裡，只要在HTML標記裡加入你定義的class參數：

right這個段落向右對齊的

center這個段落是居中排列的

類別選擇符還有一種用法，在選擇符中省略HTML標記名，這樣可以把幾個不同的元素定義成相同的樣式:

center {text-align: 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

{

#font-size:110%;

font-weight:bold;

color:#0000ff;

background-color:transparent

} (字體尺寸為預設尺寸的110%；粗體；藍色；背景顏色透明)

下面這個例子，ID屬性只符合id="intro"的段落元素：

p#intro

{

font-size：110%;

font-weight：bold;

##color:#0000ff;

background-color：transparent

}

table a

{

#font-size：12px

##}

在表格內的連結改變了樣式，文字大小為12像素，而表格外的連結的文字仍為預設大小。

6、樣式表的層疊性

#層疊性就是繼承性，樣式表的繼承規則是外部的元素樣式會保留下來繼承給這個元素所包含的其他元素。事實上，所有在元素中嵌套的元素都會繼承外層元素指定的屬性值，有時會把很多層嵌套的樣式疊在一起，除非另外更改。例如在DIV標記中嵌套P標記：

div { color: red；font-size：9pt}

##p {color: blue}

CSS圖冊

#這個段落的文字為藍色9號字。段落裡的文字大小為9號字是繼承div屬性的，而color屬性則是

。不同的選擇符定義相同的元素時，要考慮到不同的選擇符之間的優先權。 ID選擇符，類別選擇符和HTML標記選擇符，因為ID選擇符是最後加上元素上的，所以優先權最高，其次是類別選擇符。如果想超越這三者之間的關係，可以用!important提升樣式表的優先權，例如：#p { color：#FF0000!important }

#blue { color：#0000FF}

#id1 { color：#FFFF00}

#同時對頁面中的一個段落加上這三種樣式，它最後會依照被!important申明的HTML標記選擇符號樣式為紅色文字。如果去掉!important，則依優先權最高的ID選擇符號為黃色文字。

在CSS中插入註解來說明你程式碼的意思，註解有利於你或別人以後編輯和更改程式碼時理解程式碼的含義。在瀏覽器中，註釋是不顯示的。 CSS註解以"/*" 開頭，以"*/" 結尾，如下：

#/* 定義段落樣式表*/

p

{

text-align: center; /* 文字水平居中排列*/

color: black; /* 文字為黑色*/

font-family: arial /* 字體為arial */

}

CSS圖冊

css可以用任何寫文字的工具進行開發，如文字工具，dreamweaver開發。 css也是一種語言，這種語言要和html或xhtml語言結合才起作用，css簡單來說就是用來美化網頁用的，用CSS語言來控制網頁的外觀舉例xhtml部分：首頁、留言、論壇，此時在頁面上的表達形式是一個垂直列表，這樣不夠美觀，可以css來改善這個列表為一個橫向導航條和超鏈接：

css部分：

ul{

list-style:none;

margin:0px;/ *設定IE瀏覽器的縮排*/

padding:0px；/*設定標準瀏覽器的縮排*/

##}

ul li{margin:0px;padding:0px；float:left;}

ul li a{display:block；width: 100px；height:30px;background:#efefef；color:#333；text-decoration:none；text-align:center}

ul li a:hover{background:#333 ；color:#fff;}

加入上css後，這個清單變成橫向的導航條了，超級連結是淡色背景，灰色字體，沒有底線，高度是30像素，寬度是100像素當滑鼠經過這個超級連結時候，變成灰色背景，白色字體在主頁製作時採用CSS技術，可以有效地對頁面的佈局、字體、顏色、背景和其它效果實現更精確的控制。只要對對應的程式碼做一些簡單的修改，就可以改變同一頁的不同部分，或是頁數不同的網頁的外觀和格式。

它的作用可以達到：

（1）在幾乎所有的瀏覽器上都可以使用。

（2）以前一些非得透過圖片轉換實現的功能，現在只要用CSS就可以輕鬆實現，從而更快地下載頁面。

（3）讓頁面的字體變得更漂亮，更容易編排，讓頁面真正賞心悅目。

（4）你可以輕鬆控制頁面的佈局 。

（5）你可以將許多網頁的風格格式同時更新，不用再一頁一頁地更新了。你可以將網站上所有的網頁風格都使用一個CSS檔案來控制，只要修改這個CSS檔案中對應的行，那麼整個網站的所有頁面都會隨之改變。

沒有使用CSS前是如何控製字體的顏色和大小以及所使用的字體的？一般使用HTML標籤來實現，程式碼非常煩瑣。很難想像，如果在一個頁面裡需要頻繁地更替字體的顏色大小，最終產生的HTML程式碼的長度一定臃腫不堪。 CSS就是為了簡化這樣的工作而誕生的，當然其功能絕非這麼簡單。 CSS是透過對頁面結構的風格控制的思想，控制整個頁面的風格的。式樣單放在頁面中，透過瀏覽器的解釋執行，是完全的文本，任何懂得HTML的人都可以掌握，非常的容易。甚至對一些非常老的瀏覽器，也不會產生頁面混亂的現象。 CSS的一大優點是它的圖片傳輸速度比較完全的HTML網頁要快一點。