層疊次序
當同一個 HTML 元素被不止一個樣式定義時，會使用哪個樣式呢？
一般而言，所有的樣式會根據下面的規則層疊於一個新的虛擬樣式表中，其中數字 4 擁有最高的優先權。
因此，內聯樣式（在 HTML 元素內部）擁有最高的優先權，這意味著它將優先於以下的樣式聲明：<head> 標籤中的樣式聲明，外部樣式表中的樣式聲明，或者瀏覽器中的樣式聲明（預設值）。
CSS 文法
CSS 文法由三部分構成：選取器、屬性和值：
selector {property: value}
選取器 (selector) 通常是你希望定義的 HTML 元素或標籤，屬性 (property) 是你希望改變的屬性，並且每個屬性都有一個值。屬性和值被冒號分開，並由花括弧包圍，這樣就組成了一個完整的樣式聲明（declaration）：
body {color: blue}
值的不同寫法和單位除了英文單詞 red，我們還可以使用十六進位的顏色值 #ff0000：
p { color:#ff0000; }為了節約位元組，我們可以使用 CSS 的縮寫形式：
p { color:#f00; }我們還可以通過兩種方法是用 RGB 值：
p { color:rgb(255,0,0); }p { color:rgb(100%,0%,0%); }請注意，當使用 RGB 百分比時，即使當值為0時也要寫百分比符號。但是在其他的情況下就不需要這麼做了。比如說，當尺寸為 0 像素時，0 之後不需要使用 px 單位。
記得寫引號提示：如果值為若干單詞，則要給值加引號：
p {font-family:"sans serif";}多重聲明：提示：如果要定義不止一個聲明，則需要用分號將每個聲明分開。
選取器的分組你可以對選取器進行分組，這樣，被分組的選取器就可以分享相同的聲明。用逗號將需要分組的選取器分開。在下面的例子中，我們對所有的標題元素進行了分組。所有的標題元素都是綠色的。
h1,h2,h2,h3,h5,h6{color: green;}繼承及其問題根據 CSS，子項目從父元素繼承屬性。
派生選取器通過依據元素在其位置的上下文關係來定義樣式，你可以使標記更加簡潔。
比方說，你希望列表中的 strong 元素變為斜體字，而不是通常的粗體字，可以這樣定義一個派生選取器：
li strong{font-style: italic;font-weight: normal;}請注意標記為 <strong> 的藍色代碼的上下文關係：
<p><strong>我是粗體字，不是斜體字，因為我不在列表當中，所以這個規則對我不起作用</strong></p><ol><li><strong>我是斜體字。這是因為 strong 元素位於 li 元素內。</strong></li><li>我是正常的字型。</li></ol>id 選取器id 選取器可以為標有特定 id 的 HTML 元素指定特定的樣式。
id 選取器以 "#" 來定義。
下面的兩個 id 選取器，第一個可以定義元素的顏色為紅色，第二個定義元素的顏色為綠色：
#red{color:red;}#green{color:green;}下面的 HTML 程式碼中，id 屬性為 red 的 p 元素顯示為紅色，而 id 屬性為 green 的 p 元素顯示為綠色。
<pid="red">這個段落是紅色。</p><pid="green">這個段落是綠色。</p>在 CSS 中，類別選取器以一個點號顯示：
.center{text-align: center}<h1class="center">
This heading will be center-aligned
</h1>
<pclass="center">
This paragraph will also be center-aligned.
</p>外部樣式表術語翻譯<head>
<linkrel="stylesheet" type="text/css" href="mystyle.css" />
</head>內部樣式表
<head>
<style type="text/css">
hr {color: sienna}
p {margin-left: 20px}
body {background-image: url("images/back40.gif")}</style>
</head>
內聯樣式
<p
style="color: sienna; margin-left: 20px">
This is a paragraph
</p>CSS 框模型
| 屬性 | 描述 |
|---|---|
| background | 簡寫屬性，作用是將背景屬性設定在一個聲明中。 |
| background-attachment | 背景映像是否固定或者隨著頁面的其餘部分滾動。 |
| background-color | 設定元素的背景顏色。 |
| background-image | 把映像設定為背景。 |
| background-position | 設定背景映像的起始位置。 |
| background-repeat | 設定背景映像是否及如何重複。 |
CSS 文字屬性
| 屬性 | 描述 |
|---|---|
| color | 設定文本顏色 |
| direction | 設定文本方向。 |
| line-height | 設定行高。 |
| letter-spacing | 設定字元間距。 |
| text-align | 對齊元素中的文本。 |
| text-decoration | 向文本添加修飾。 |
| text-indent | 縮排元素中文本的首行。 |
| text-shadow | 設定文本陰影。CSS2 包含該屬性，但是 CSS2.1 沒有保留該屬性。 |
| text-transform | 控制元素中的字母。 |
| unicode-bidi | 設定文本方向。 |
| white-space | 設定元素中空白的處理方式。 |
| word-spacing | 設定字間距。 |
CSS 字型屬性
| 屬性 | 描述 |
|---|---|
| font | 簡寫屬性。作用是把所有針對字型的屬性設定在一個聲明中。 |
| font-family | 設定字型系列。 |
| font-size | 設定字型的尺寸。 |
| font-size-adjust | 當首選字型不可用時，對替換字型進行智能縮放。（CSS2.1 已刪除該屬性。） |
| font-stretch | 對字型進行水平展開。（CSS2.1 已刪除該屬性。） |
| font-style | 設定字型風格。 |
| font-variant | 以小型小寫字型或者正常字型顯示文本。 |
| font-weight | 設定字型的粗細。 |
CSS 邊框屬性
| 屬性 | 描述 |
|---|---|
| border | 簡寫屬性，用於把針對四個邊的屬性設定在一個聲明。 |
| border-style | 用於設定元素所有邊框的樣式，或者單獨地為各邊設定邊框樣式。 |
| border-width | 簡寫屬性，用於為元素的所有邊框設定寬度，或者單獨地為各邊邊框設定寬度。 |
| border-color | 簡寫屬性，設定元素的所有邊框中可見部分的顏色，或為 4 個邊分別設定顏色。 |
| border-bottom | 簡寫屬性，用於把下邊框的所有屬性設定到一個聲明中。 |
| border-bottom-color | 設定元素的下邊框的顏色。 |
| border-bottom-style | 設定元素的下邊框的樣式。 |
| border-bottom-width | 設定元素的下邊框的寬度。 |
| border-left | 簡寫屬性，用於把左邊框的所有屬性設定到一個聲明中。 |
| border-left-color | 設定元素的左邊框的顏色。 |
| border-left-style | 設定元素的左邊框的樣式。 |
| border-left-width | 設定元素的左邊框的寬度。 |
| border-right | 簡寫屬性，用於把右邊框的所有屬性設定到一個聲明中。 |
| border-right-color | 設定元素的右邊框的顏色。 |
| border-right-style | 設定元素的右邊框的樣式。 |
| border-right-width | 設定元素的右邊框的寬度。 |
| border-top | 簡寫屬性，用於把上邊框的所有屬性設定到一個聲明中。 |
| border-top-color | 設定元素的上邊框的顏色。 |
| border-top-style | 設定元素的上邊框的樣式。 |
| border-top-width | 設定元素的上邊框的寬度。 |
CSS 外邊距屬性
| 屬性 | 描述 |
|---|---|
| margin | 簡寫屬性。在一個聲明中設定所有外邊距屬性。 |
| margin-bottom | 設定元素的下外邊距。 |
| margin-left | 設定元素的左外邊距。 |
| margin-right | 設定元素的右外邊距。 |
| margin-top | 設定元素的上外邊距。 |
CSS 內邊距屬性
| 屬性 | 描述 |
|---|---|
| padding | 簡寫屬性。作用是在一個聲明中設定元素的所內邊距屬性。 |
| padding-bottom | 設定元素的下內邊距。 |
| padding-left | 設定元素的左內邊距。 |
| padding-right | 設定元素的右內邊距。 |
| padding-top | 設定元素的上內邊距。 |
CSS 列表屬性(list)
| 屬性 | 描述 |
|---|---|
| list-style | 簡寫屬性。用於把所有用於列表的屬性設定於一個聲明中。 |
| list-style-image | 將圖象設定為清單項目標誌。 |
| list-style-position | 設定列表中清單項目標誌的位置。 |
| list-style-type | 設定清單項目標誌的類型。 |
| marker-offset |
CSS Table 屬性
CSS 表格屬性允許你設定表格的布局。（請注意，本節介紹的不是如何使用表來建立布局，而是要介紹 CSS 中表本身如何布局。）
| 屬性 | 描述 |
|---|---|
| border-collapse | 設定是否把表格邊框合并為單一的邊框。 |
| border-spacing | 設定分隔儲存格邊框的距離。（僅用於 "separated borders" 模型） |
| caption-side | 設定表格標題的位置。 |
| empty-cells | 設定是否顯示表格中的空儲存格。（僅用於 "separated borders" 模型） |
| table-layout | 設定顯示單元、行和列的演算法。 |
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
