CSS 学习笔记

CSS 全稱為 Cascading Style Sheets, 中文譯作層疊樣式表，是一種為結構化檔案（HTML / XML）添加樣式的電腦語言，由W3C定義和維護。

CSS 可以用於設定頁面佈局、元素樣式、全局樣式等。

CSS 的最重要的目的是分離檔案的的內容與顯示，簡化結構化檔案。

何為層疊？

CSS 可以有多種引入方式，一個網頁可以引入多個 CSS 檔案，同一種 CSS 規則可以被反覆多次添加。這使得 CSS 的使用方式非常靈活，但也會頻繁地出現規則衝突。同時對一個網頁元素設定無法並存的 2 種樣式時，就會引起衝突。CSS 的特色之一就是其解決規則衝突的方案。CSS 的規則衝突可以分為不同來源之間的規則衝突和同一來源內部的規則衝突。CSS 分層次、立體化的比較不同規則的優先級的方式，就是所謂層疊性(cascading)的體現。

主要內容

CSS 由多組「規則」組成。每個規則由「選擇器」（selector）、「屬性」（property）和「值」（value）組成：

選擇器（Selector）：多個選擇器可以半形逗號（,）隔開。
屬性（property）：CSS1、CSS2、CSS3規定了許多的屬性，目的在控制選擇器的樣式。
值（value）：指屬性接受的設定值，多個關鍵字時大都以空格隔開。

屬性和值之間用半形冒號（:）隔開，屬性和值合稱為「特性」(attribute)。多個特性間用「;」隔開，最後用「{ }」括起來。

選擇器

要針對沒有標籤定義範圍進行樣式設定時，可利用<div>與<span>標籤

CSS裡現在共有5種基本選擇器（Basic Selectors）和2種偽選擇器。不同選擇器的優先級別和運作效能往往存在差異。

基本選擇器

標籤選擇器（h1，p等，也叫類型選擇器、元素選擇器）——elementname
類別選擇器（class）——.elementname
ID選擇器（ID）——#elementname
萬用選擇器——* ns|* *|*
屬性選擇器（也翻譯為「萬用字元選擇器」）——[attribute]

屬性選擇器

屬性選擇器允許用戶自訂屬性名稱，而不僅僅限於id，class屬性。屬性選擇器共有7種：

[attribute] ==> 元素有attribute的屬性。
[attribute="value"] ==> 屬性attribute裡是value
[attribute~="value"] ==> 屬性attribute裡使用空白分開的字串裡其中一個是value
[attribute|="value"] ==> 屬性attribute裡是value或者以value-開頭的字串
[attribute^="value"] ==> 屬性attribute裡最前的是value
[attribute$="value"] ==> 屬性attribute裡最後的是value
[attribute*="value"] ==> 屬性attribute裡有value出現過至少一次屬性選擇器允許用戶自訂屬性名稱，而不僅僅限於id，class屬性。

組合選擇器

CSS里現在共有4種組合選擇符（Combinators）：

符號	標題文字
`A > B`	選擇A下一層的元素B
`A ~ B`	選擇與A同父層的元素B
`A + B`	選擇與A相鄰的元素B（不能被任何元素相隔）
`A B`	包含選擇符

選擇器使用範例

p {
    font-size: 110%;
    font-family: garamond, sans-serif;
}

h2 {
    color: red;
    background: white;
}

.highlight {
    color: red;
    background: yellow;
    font-weight: bold;
}

p.center {text-align:center;}
#paraID1 {
    text-align:center;
    color:red;
}

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

<head>
<style>
hr {color:sienna;}
p {margin-left:20px;}
body {background-image:url("images/back40.gif");}
</style>
</head>