參見w3school/css
CSS 概述ascading S
tyle S
heets)
HTML 元素
中
可以極大提高工作效率
中
為一
一般而言，所有的樣式會根據下面的規則層疊於一個新的虛擬樣式表中，其中數字 4 擁有最高的優先權。
因此，內聯樣式（在 HTML 元素內部）擁有最高的優先權
，這意味著它將優先於以下的樣式聲明：<head> 標籤中的樣式聲明，外部樣式表中的樣式聲明，或者瀏覽器中的樣式聲明（預設值）。
CSS 基礎文法CSS 規則由兩個主要的部分構成：選取器
，以及一條或多條聲明
。
selector {declaration1; declaration2; ... declarationN }
。
"隔開,在每條聲明的末尾都加上分號
，這麼的好處是，當你從現有的規則中增減聲明時，會儘可能的減少出錯的可能性。
屬性（property）是您希望設定的樣式屬性（style attribute
）。每個屬性有一個值。屬性和值被冒號分開。
selector {property: value}
下面這行代碼的作用是將 h1 元素內的文字顏色定義為紅色，同時將字型大小設定為 14 像素。
在這個例子中，h1 是選取器，color 和 font-size 是屬性，red 和 14px 是值。
h1 {color:red; font-size:14px;}
下面的為您展示了上面這段代碼的結構：
提示：請使用花括弧來包圍聲明。
如果值為若干單詞，則要給值加引號：
p {font-family: "sans serif"
;}
繼承及其問題根據 CSS，子項目從父元素繼承屬性。
body { font-family: Verdana, sans-serif; }p, td, ul, ol, li, dl, dt, dd { font-family: Verdana, sans-serif; }
如果子項目需要特殊的樣式，則可以在父元素規則後直接定義一個子項目的樣式規則。
id 選取器
id 選取器可以為標有特定 id 的 HTML 元素指定特定的樣式。
id 選取器以 "#" 來定義。
下面的兩個 id 選取器，第一個可以定義元素的顏色為紅色，第二個定義元素的顏色為綠色：
#red
{color:red;}#green
{color:green;}
下面的 HTML 程式碼中，id 屬性為 red 的 p 元素顯示為紅色，而 id 屬性為 green 的 p 元素顯示為綠色。
<p id="red"
>這個段落是紅色。</p>
<p id="green"
>這個段落是綠色。</p>
在現代布局中，id 選取器常常用於建立派生選取器。
#sidebar p
{
font-style: italic;
text-align: right;
margin-top: 0.5em;
}
上面的樣式只會應用於出現在 id 是 sidebar 的元素內的段落。
在 CSS 中，類別選取器以一個點號顯示：
.center
{text-align: center}
在上面的例子中，所有擁有 center 類的 HTML 元素均為置中。
屬性選取器可以為擁有指定屬性的 HTML 元素設定樣式，而不僅限於 class 和 id 屬性。
注釋：Internet Explorer 7 （以及更高版本）在規定了 !DOCTYPE 的情況下支援屬性選取器。IE6 及更低的版本不支援屬性選取器。
下面的例子為帶有 title 屬性的所有元素設定樣式：
[title]{color:red;}當讀到一個樣式表時，瀏覽器會根據它來格式化 HTML 文檔。插入樣式表的方法有三種：
當樣式需要應用於很多頁面時，外部樣式表將是理想的選擇
。在使用外部樣式表的情況下，你可以通過改變一個檔案來改變整個網站的外觀。每個頁面使用 <link> 標籤連結到樣式表。<link> 標籤在（文檔的）頭部：
<head><linkrel="stylesheet" type="text/css" href="mystyle.css" /></head>
瀏覽器會從檔案 mystyle.css 中讀到樣式聲明，並根據它來格式文檔。
當單個文檔需要特殊的樣式
時，就應該使用內部樣式表。你可以使用 <style> 標籤在文檔頭部定義內部樣式表，就像這樣:
<head><style type="text/css">hr {color: sienna;} p {margin-left: 20px;} body {background-image: url("images/back40.gif");}</style></head>
由於要將表現和內容混雜在一起，內聯樣式會損失掉樣式表的許多優勢。要使用內聯樣式，你需要在相關的標籤內使用樣式（style）屬性。
注意：如果某些屬性在不同的樣式表中被同樣的選取器定義，那麼屬性值將從更具體的樣式表中被繼承過來
，其他的被內部樣式表中的規則取代
。
CSS 背景屬性
| 屬性 | 描述 |
|---|---|
| background | 簡寫屬性，作用是將背景屬性設定在一個聲明中。 |
| background-attachment | 背景映像是否固定或者隨著頁面的其餘部分滾動。 |
| background-color | 設定元素的背景顏色。 |
| background-image | 把映像設定為背景。 |
| background-position | 設定背景映像的起始位置。 |
| background-repeat | 設定背景映像是否及如何重複。 |
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
