6.1 CSS入門
6.1.1 什麼是CSS
CSS（Cascading Style Sheet，層疊樣式表）是一種格式化網頁的標準方式，它擴充了 HTML 的功能，使網頁設計者能夠以更有效設定網頁格式。
6.1.2 CSS的屬性單位
6.1.2.1 長度單位
在CSS中用於描述長度的單位包括：
6.1.2.2 百分比單位
在CSS中除了可以使用絕對數來指定單位（如上面所介紹的），還可以用相對數來指定單位。例如：
P{line-height:150%}
表示該段行高是標準行高的1.5倍。
6.1.2.3 顏色
層疊樣式表允許網頁設計者使用以下方式中的一種指定顏色：
6.2 CSS樣式定義
樣式表項的組成如下：
selector{property1:value1;property2:value2;......}
其中selector表示需要應用樣式的內容，property表示由CSS標準定義的樣式屬性，value表示樣式屬性的值。
Selector 類型：HTML 標籤符、使用者定義的 class 類樣式、自訂的 ID、虛類 等。
6.2.1 HTML標記符selector
HTML標記符是最典型的selector類型，網頁設計者可以為某個或某些具體的HTML元素應用樣式定義。例如：
H1{text-align:center;font-family:楷體_gb2312}
若將相同的樣式應用於不同的selector，可以採用編組的方法簡化樣式定義。例如：
H1 {color:#ff0000}
H2 {color:#ff0000}
H3 {color:#ff0000}
可以簡化為：
H1,H2,H3 {color:#ff0000}
6.2.2 具有上下文關係的HTML標記符selector
如果需要為位於某個標記符內的標記符設定特定的樣式規則，則應將selector指定為具有上下文關係的HTML標記符。例如：要使位於P標記符內的CODE標記符內的B元素具有紅色屬性，則應使用如下格式：
P CODE B {color:red}
6.2.3 使用者定義的類 selector
可以使用類（class）來為單一HTML標記符建立多個樣式。其文法格式如下：
selector.classname{property:value;...}
例如：H1.rr {color:red}
然後在網頁中需要處引用，所下所示：
<H1 class="rr">此標題為紅色</H1>
如果要定義應用於所有標記符的類，可以直接用句點後跟類名即可。其文法格式如下：
.classname{property:value;...}
例如：.rr{color:red} ， 然後在網頁中需要處引用，所下所示：
| <p class="rr">本段落文字為紅色</P> <H1 class="rr">本標題為紅色</H1> |
6.2.4 使用者定義ID selector
要將一個ID樣式包括在樣式定義中，應以一個井號“#”作為ID名稱的首碼，其文法格式如下：
#IDname{property:value;...}
定義了ID樣式後，在引用該樣式的標記符內使用id屬性。例如：
| #rr {color:red} <P id="rr">本段落文字為紅色</P> <H1 id="rr">本標題為紅色</H1> |
注意：使用.classname和使用#IDname這兩種方式在效果上沒有區別，但最好只使用其中之一，以免造成混淆。
6.2.5 虛類 selector
對於A標記符，可以用虛類的方式設定不同類型超連結的顯示方式。所謂不同類型超連結，是指訪問過的、未訪問過的、啟用的以及滑鼠指標懸停於其上的4種狀態的超連結。其虛類的selector如下：
6.3 在網頁中使用CSS
6.3.1 在標記符中直接嵌套樣式資訊
使用style屬性可以在HTML標記符中直接內建樣式定義。
<標記符 style="property1:value1;...">
例如：
| <p style="font-size:14pt;color:red"> 僅位於此標記符內的文本受樣式的影響 </p> |
6.3.2 在STYLE標記符中定義樣式資訊
CSS應用於網頁的最常用的方式是在HEAD標記符內使用STYLE標記符，然後在STYLE標記符中定義樣式。文法格式通常如下：
| <head> . . . . . . <style> [<!--] selector1{property1:value1;...} selector2{property1:value1;...} . . . . . . selectorN{property1:value1;...} [-->] </style> </head> |
6.3.3 連結外部樣式表中的樣式資訊
如果要在多個網頁中使用相同的樣式，最好的辦法是將網頁中要使用的樣式，單獨放在一個檔案中定義，然後通過連結的方式引用其中的樣式。
連結引用外部樣式表的方法為：在HEAD標記符內使用LINK標記符，通過指定相應屬性連結到外部樣式表。LINK標記符的用法如下：
<LINK rel="stylesheet" type="text/css" href=樣式表檔案的URL>
其中:rel屬性規定了被連結檔案的關係，在連結樣式表檔案(.css檔案)的情況下，取值永遠是“stylesheet”;type屬性規定了連結檔案的MIME類型，它的值永遠是“text/css”；href屬性指定了要連結的樣式表檔案的URL。
6.3.4 樣式的優先順序
如果有多個樣式同時修飾一個對象，樣式如果衝突，則採用高優先順序樣式；如果沒有衝突，則採用疊加的樣式效果。
樣式的優先順序遵循“就近優先”的原則，也就是說，距離所修飾對象越近的樣式，其優先順序越高。
6.4 CSS屬性
6.4.1 字型與文字屬性
6.4.1.1 字型屬性
CSS中字型屬性包括：
6.4.1.2 文字屬性
文字屬性用於控制文本段落格式。
6.4.2 顏色與背景屬性
6.4.3 布局屬性
6.4.3.1 頁面元素周圍的空白
在任何一個HTML元素的周圍，都包括邊框、邊界和填充這三種空白。最接近元素內容的是填充，接下一來是邊框，最外圍是邊界。CSS的margin、border和background屬性分別用於設定以上三個地區。
6.4.3.2 邊框屬性
CSS邊框屬性包括：
6.4.3.3 邊界屬性
CSS邊界屬性包括margin、margin-bottom、margin-left、margin-right以及margin-top。
6.4.3.4 填充屬性
CSS填充屬性包括padding、padding-left、padding-right、padding-top以及padding-bottom。
6.4.3.5 浮動屬性
CSS浮動屬性包括：
6.4.4 定位和顯示內容
6.4.4.1 定位屬性和寬高屬性
定位屬性包括：
width和height屬性可以控制元素的寬度和高度，此時position屬性必須指定為absolute。它們的取值可以是長度值，也可以是百分比。
6.4.4.2 顯示內容
在CSS中，有兩個屬性可以控制元素的顯示和隱藏。
與display不同之處在於當隱藏元素時，仍然為元素保留原有的顯示空間。
6.4.5 列表屬性
列表屬性用於設定網頁中列表的格式，CSS中的列表屬性包括：
6.4.6 滑鼠屬性
滑鼠屬性通過cursor屬性來設定在對象上移動的滑鼠指標的形狀，取值如下：
6.5 CSS過濾器效果
過濾器（filter）是CSS的一種擴充，它能夠將特定的效果應用於文本容器、圖片或其它對象。
6.5.1 過濾器屬性列表
過濾器效果是通過filter樣式表屬性定義的，其格式如下：
filter:過濾器名（參數）
其中參數用於控制特定的過濾效果。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
