Cascading Style Sheet（CSS，級聯樣式單）也被稱為層疊樣式單。

作用：主要用于網頁風格設計，控制HTML頁面中的元素大小、位置、背景、顏色等外觀，其提供了一種機制讓程序員開發時可以暫不考慮顯示和界面，顯示問題由美工或程序員在后期解決，也可以用于控制XML文檔的顯示。

樣式菜單的優勢：

1：表達效果豐富；

2：文檔小；

3：便于信息檢索；

4：可讀性好。

W3C給出了兩種樣式單語言的標準：

1：CSS；

2：XSL（eXtensible Stylesheet Language，可擴展樣式單語言）：主要用于控制XML文檔。

定義一個CSS樣式需要指定兩個部分：

1：Selector：指定對哪些HTML元素起作用；

2：屬性：其怎樣的作用效果。

在HTML中導入CSS的三種方式：

1：導入外部樣式文件

2：使用內部樣式定義

3：使用內聯樣式

外部導入的方法：

在<head.../>中使用<link.../>元素。

[html]view plaincopyprint?

使用內部樣式定義：

內部樣式只是把外部定義方式的文件內容拿到html文件中，其在<head.../>元素中是<style.../>元素來定義。

格式：

[html]view plaincopyprint?

[html]view plaincopyprint?

使用內聯樣式：

幾乎所有HTML元素都有一個style屬性，其屬性值就是N個CSS樣式，多個樣式用;隔開。

格式：

[html]view plaincopyprint?

[html]view plaincopyprint?

在XML中導入CSS樣式：

在XML只能使用外部導入的方法；

格式：

[html]view plaincopyprint?

CSS屬性分類：

背景、文本、字體、列表、表格、輪廓、定位、框模型。

選擇器定義：

一般格式：

[html]view plaincopyprint?

屬性選擇器格式：

Tag { ... }：對所有Tag元素起作用；

Tag[ attr ] { ... }：對具有attr屬性的Tag元素起作用；

Tag[ attr = value ]  { ... }：對具有attr屬性的Tag元素起作用，且attr=value；

Tag[attr ~= value ] { ... }：對具有attr屬性的Tag元素起作用，且attr屬性值為以空格為分隔符系列值，其中某個值為value。

Tag[attr |= value ] { ... }：對具有attr屬性的Tag元素起作用，且attr屬性值為以連字符為分隔符系列值，其中第一個值為value。

這5種選擇器的優先基本一次升高，建議只使用第一種，因為只有第一種在游覽器中得到了廣泛的支持。

[html]view plaincopyprint?

ID選擇器：

這是一種非常準確的選擇器，其作用于具有指定ID的元素。

格式：

#idValue { ... }：指定對id為idValue的元素起作用。

class選擇器：

其作用于具有指定class的屬性的元素。

格式：

Tag.classValue { ... }：指定對class為classValue的Tag元素起作用，若省略Tag，則對所有class為classValue的元素起作用。

后代選擇器：

作用于指定元素位于指定父元素之內的元素，兩元素之間可多層次間隔。

格式：

ancestorTag posterityTag{ ... }：只要posterityTag位于ancestorTag之內即可。

子元素選擇器：

作用于指定元素必須直接在特定父元素之內。

格式：

fatherTag>SonTag{ .. }

相鄰兄弟選擇器：

如果需要選擇緊接在另一個元素后的元素，而且二者有相同的父元素，可以使用相鄰兄弟選擇器（Adjacent sibling selector）。

格式：

Tag1 + Tag2 { ... }：指定Tag2必須與Tag1在相同的父元素內。

超級鏈接選擇器：

超級鏈接默認樣式都是藍色，通過CSS可改變這種效果，下面是關于超級連接的4個選擇器：

a:link{ ... }：超級鏈接未被訪問時的CSS樣式；

a:visited{ ... }：被訪問過的超級鏈接CSS樣式；

a:hover{ .. }：鼠標懸浮在超級鏈接上時的CSS樣式；

a:active{ ... }：超級鏈接被激活時的CSS樣式。

在腳本中修改CSS樣式：

步驟：

1：獲取需要更改CSS樣式的目標元素，可使用document對象的getElementById()方法。

2：更改目標元素的CSS樣式，其常用方式：

  修改內聯CSS屬性值：使用如“obj.style.attributeName=value”的JavaScript腳本。

  修改HTML元素的class屬性值：使用方法“obj.className=class選擇器”的JavaScript腳本。

注意事項：腳本中的CSS屬性名與頁面中的靜態CSS屬性名并不完全相同，例如：腳本中屬性名background-color，腳本中該屬性名為backgroudColor。