1. CSS裡有控制基本格式的屬性（如font-size和color等），有控制佈局的屬性（如position和float等），也有決定訪客列印時在哪裡換頁的列印控制元素。除此之外還有其他很多的屬性。
2. 樣式表中包含定義網頁外觀的規則，每條規則都有兩個主要部分：選擇器（selection）和宣告區塊（declaration）。選擇器決定哪些元素受影響，聲明區塊有一個或多個屬性-值對組成，制定應該怎麼做。
3. 註解用'/*和*/'包圍。
1. 繼承可理解為當為某個元素應用CSS屬性時，這些屬性不僅會影響該元素，還會影響其下的分支元素。
程式一
<body> <p> <h1>The Ephemeral Blue Flax</h1> <img src="img/blueflax.jpg" width="300" height="175" alt="Blue Flax (Linum lewisii)" /> <p>I am continually <em>amazed</em> at the beautiful, delicate Blue Flax that somehow took hold in my garden. They are awash in color every morning, yet not a single flower remains by the afternoon. They are the very definition of ephemeral.</p> <p><small>© Blue Flax Society.</small></p> </p> </body>
如程式一，所有的內容元素都是body元素的後代，用一個p包住了所有的內容，進一步，em和small元素都包含在一個p元素裡，因此它們是p的後代（同時也是p和body的後代）。
程式二
body {
font-family: Verdana, Geneva, sans-serif;
}
p {
border: 1px solid black;
overflow: hidden;
padding: 0 1em .25em;
}
p {
color: #36c; /* a blue color */
font-weight: bold;
}
img {
float: left;
margin-right: 1em;
} 程式二是CSS樣式設置，這段樣式表為程式一中的HTML進行樣式設置，設定時體現了繼承的特性。你可以看到，程式二隻有body、p和p元素的樣式規則，而沒有h1、 em和small元素的規則。那麼在頁面顯示的時候在則在h1、em和small元素中就會體現繼承特性。
2. 以下是會被繼承的CSS屬性，在此系統性的列出：
##文字
| 屬性作用 | |
|---|---|
| 顏色，a元素除外 | |
| direction | 方向|
| 字體系列 | |
| 字體大小 | |
| 用於設定斜體 | |
| 用於設定小型大寫字母 | |
| 用於設定粗體 | ##letter-spacing |
| 字母間距 | line-height |
| #行高 | |
| 用於設定對齊方式 | |
| 用於設定首行縮排 | |
| #用於修改大小寫 | |
| 可見性 | |
| 用於指定如何處理空格 |
字間距
| 清單 | |
|---|---|
| 屬性作用 | |
| 清單樣式 | |
| 用於為清單制定客製化的標記 | |
| #用於決定清單標記的位置 |
| #屬性名稱 | #屬性作用 |
|---|---|
| border-collapse | 用於控製表格相鄰單元格的邊框是否合併為單一邊方塊 |
| border-spacing | 用於指定表格邊框之間的間隙大小 |
| caption-side | 用於設定表格標題的位置 |
| #empty-cells | 用於設定是否顯示表格中的空白單元格 |
#頁面設定（對於印刷物）
| #屬性名稱 | 屬性作用 |
|---|---|
| #orphans | 用於設定當元素內部發生分頁時在頁面底部需要保留的最少行數 |
| page-break-inside | 用於設定元素內部的分頁方式 |
| widows | 用於設定當元素內部發生分頁時在頁面頂部需要保留的最少行數 |
其他
| #屬性名稱 | ##屬性作用|
|---|---|
| 滑鼠指標 | |
| 用於指定引號樣式 |
列出一些選擇器：(依照特殊性由低到高排列)
| #對應的HTML | |
|---|---|
|
... |
<a href="http://www.php.cn/wiki/164.html" target="_blank">.some</a>Class { ... } |
... |
|
... ... #... ... |
當特殊性不足以判斷在相互衝突的規則中應該優先選擇應用哪一個。此時順序規則起作用，即晚出現的優先級高。
如果以上的規則還不夠用，那麼可以宣告一條特殊的規則覆寫整個系統中的規則。也可以在某條聲明的最後加上！ important,例如p{ color: o<a href="http://www.php.cn/wiki/1078.html" target="_blank">range</a> !important; }（除非特殊情況，否則不建議使用這種方法）。
對任何屬性，如果希望顯示地指出該屬性的值與對應元素的父元素對該屬性設定的值相同，就可以使用inherit值。例如假設有一個article元素，其中包括幾個段落。 article元素設定了一個邊框，通常邊框不會被繼承，因此p { border: inherit; }這條規則可以讓這些段落得到相同的邊框樣式。
#1. 很多CSS屬性的值是長度。有的長度是相對於其他值的。一個em的長度大約與對應元素的字號相等。例如設定元素<a href="http://www.php.cn/wiki/937.html" target="_blank">margin-left</a>: 2em就代表將元素的左邊距設為元素字號的兩倍。當em用於設定元素的font-size屬性本身時，它的值繼承自對應元素的父元素的字號。 em的這種相對性對如今的網站建立工作來說是至關重要的，尤其是對那些需要適應不同螢幕尺寸的網站來說（這種做法被稱為響應式Web設計）。
2. 百分數的運作方式很像em，百分數通常是相對於父元素的。
只有極少數的CSS屬性接受不帶單位的數字，最常見的就是line -height、<a href="http://www.php.cn/wiki/903.html" target="_blank">z-index</a>和opacity，eg:line-height: 1.5;這個範例中的值將與字號相乘，的到行高。
有的CSS屬性允許開發人員指定另一個檔案（特別是映像）的URL， background-image就是這樣一個屬性。在這種情況下，使用url（file.ext），其中file.ext是目標資源的路徑和檔案名稱。要注意，規範指出相對URL應該相對於樣式表的位置而不是相對於HTML文檔的位置，eg:background: url(bg-pattern.png)。註:CSS屬性中的URL無需使用引號包圍。
| #顏色 | 關鍵字 |
|---|---|
| #aqua（水綠） | #00FFFF |
| black（黑） | #000000 |
| #blue（藍色） | ##0000FF |
| #FF00FF | |
| ##808080 | |
| #green（綠） | |
| #lime（淺綠） | |
| #maroon（棕色） | |
| navy（深藍） | |
| #808000 |
可以透過指定紅、綠、藍的量來建立自己的顏色，可以使用百分數、0~255之間的數字來指定這三種顏色的值，eg:color: rgb(89, 0, 127);或color: rgb(35%, 0%, 50%);，因為89是255的35%。
這是CSS定義顏色最常用的方式，eg:color: #59007F 。若#FF3344則可縮寫為#F34。
RGBA、HSLA和HSL。
CSS3引進了指定顏色的方式HSL和透過RGBA和HSLA設定alpha透明度的能力。
RGBA在RGB的基礎上加了一個alpha透明度（alpha transparency）的A。可以在RGB後面加上0~1的小數來指定透明度。 eg:<a href="http://www.php.cn/wiki/894.html" target="_blank">background-color</a>: rgba(89,0,127,0.75)。
HSL和HSLA是CSS3中新增的。 HSLA是除了RGBA以外為顏色指定透明度的另一種方式。以HSLA指定透明度的方法與RGBA是一致的，eg:color: hsla(282,100%,25%,0.75)。
HSL代表色相（hue）、飽和度（saturation）和亮度（lightness），其色相的值範圍為0~360，飽和度和亮度的值均為百分數，範圍為0~100%。 0和360在頂部匯合即0和360代表同一種顏色：紅色，eg:color: hsl(282,100%,25%)###。 構想HSL，選擇一個0~360之間的色相，並將飽和度設為100%，亮度設為50%，就會得到這種顏色最純的形式。降低飽和度，顏色就會往灰色變化。增加亮度，顏色就會向保色變化；降低亮度，顏色就會像黑色變化。
| hsl資料 | |
|---|---|
| hsl(0,100%,50%); | |
| hsl(60,100%,50%); | |
| hsl(120,100%,50%); | |
| hsl(180,100 %,50%); | |
| hsl(240,100%,50%); | |
| hsl(300,100%,50%); |
以上是分析CSS樣式表、繼承、層疊和屬性的值的詳細內容。更多資訊請關注PHP中文網其他相關文章！
