What is CSS?
CSS 代表 Cascading Style Sheets (層疊樣式表)
CSS 描述了 HTML 元素應如何顯示
CSS 示例
<style>
body {background-color:lightblue; text-align:center;}
h1 {color:blue; font-size:40px;}
p {font-family:verdana; font-size:20px;}
</style>
自己動手試一試 »
單擊“Try it Yourself”按鈕檢視其工作原理。
CSS 語法
CSS 規則由一個選擇器和一個宣告塊組成
選擇器指向要樣式化的 HTML 元素 (h1)。
宣告塊（在花括號內）包含一個或多個由分號分隔的宣告。
每個宣告都包含一個 CSS 屬性名稱和一個值，由冒號分隔。
在下面的示例中，所有 <p> 元素都將居中對齊、顯示為紅色，並且字型大小為 32 畫素。
示例
<style>
p {font-size:32px; color:red; text-align:center;}
</style>
相同的示例也可以這樣編寫
<style>
p {
font-size: 32px;
color: red;
text-align: center;
}
</style>
自己動手試一試 »
外部樣式表
CSS 樣式表可以儲存在外部檔案中
mystyle.css
body {background-color: orange; font-family:verdana}
h1 {color: white;}
p {font-size: 20px;}
外部樣式表使用 <link> 標籤連結到 HTML 頁面
示例
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="mystyle.css">
<body>
<h1>我的第一個 CSS 示例</h1>
<p>這是一個段落。</p>
</body>
</html>
內聯樣式
示例
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="mystyle.css">
<body>
<h1>我的第一個 CSS 示例</h1>
<p>這是一個段落。</p>
<p style="font-size:25px">這是一個段落。</p>
<p style="font-size:30px">這是一個段落。</p>
</body>
</html>
層疊順序
如果為 HTML 元素指定了不同的樣式，則樣式將層疊成具有以下優先順序的較新樣式
- 優先順序 1：內聯樣式
- 優先順序 2：外部和內部樣式表
- 優先順序 3：瀏覽器預設樣式
- 如果在同一優先順序級別上定義了不同的樣式，則最後一個具有最高優先順序。
示例
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="mystyle.css">
<style>
body {background-color: lightblue;}
</style>
<body style="background-color: olivedrab">
<h1>多種樣式層疊為一種</h1>
<p>嘗試透過刪除樣式來實驗，看看層疊樣式表是如何工作的。</p>
<p>嘗試先刪除內聯樣式，然後是內部樣式，最後是外部樣式。</p>
</body>
</html>
CSS 演示 - 一個 HTML 頁面 - 多種樣式！
在這裡，我們將展示一個帶有 4 種不同樣式表的 HTML 頁面。
點選樣式表按鈕 (1-4) 即可檢視頁面使用不同樣式顯示。
完整 CSS 教程
以上是 CSS 的簡要介紹。
如需完整的 CSS 教程，請訪問 W3Schools CSS 教程。
如需完整的 CSS 參考，請訪問 W3Schools CSS 參考。
