第1章 CSS和文件

層疊樣式表（Cascading Style Sheets，CSS）的功能非常強大，可以影響一個或一組文件的表現。

1995年，W3C開始釋出一種正在進行的計劃，稱為CSS。到1996年，這已經成為了一個成熟的推薦草案，其地位與HTML同樣舉足輕重。

層疊：

CSS還規定了衝突規則，這些規則統稱為層疊。

替換元素：是指用來替換元素內容的部分並非由文件內容直接表示，例如img元素，它由文件本身之外的一個影象檔案來替換。

非替換元素：大多數HTML和XHTML元素都是非替換元素。

如何關聯樣式：

<link>標記連結外部樣式表；

style元素；

@import指令：出現在style容器中，並且放在開頭，

內聯樣式：HTML的style屬性；

第2章選擇器

規則結構：

每個規則都有兩個基本部分：選擇器和宣告塊。宣告塊由一個或多個宣告組成，每個宣告則是一個屬性-值對。

選擇器分組：

使用逗號分組，如h2,p{ }

（1）除了文件元素的選擇器之外，還有另外兩種型別的選擇器：類選擇器和ID選擇器。

（2）屬性選擇器：

簡單屬性選擇器：h1[class]{ }

部分值屬性選擇器：h1[class~=“warning”] {}

子串匹配屬性選擇器：

[foo^=“bar”]選擇foo屬性值以”bar”開頭的所有元素

[foo$=“bar”]選擇foo屬性值以”bar“結尾的所有元素

[foo*=“bar”]選擇foo屬性值中包含子串”bar”的所有元素

[lang|=“en”]選擇lang屬性等於en或者以en-開頭的所有元素

（3）後代選擇器：

用空格分隔，關於後代選擇器有一個常被忽視的方面，即兩個元素之間的層次間隔可以是無限的。

（4）選擇子元素：

可以使用子結合符，即大於號（>）；

（5）選擇相鄰兄弟元素：

可以使用相鄰兄弟結合符，即一個加號（+）；

（6）偽類選擇器：

所有偽類和偽元素關鍵字前面都有一個冒號。

:link，:visited，:focus，:hover，:active

選擇第一個字元素：

可以使用一個靜態偽類:first-child來選擇元素的第一個子元素。

（7）偽元素選擇器

就像偽類為錨指定幻象類一樣，偽元素能夠在文件中插入假想的元素，從而獲得某種效果。CSS2.1中定義了4個偽元素：設定首字母樣式:first-letter、設定第一行樣式:first-line、設定之前和之後元素的樣式。

所有偽元素都必須放在出現該偽元素的選擇器的最後面。

h2:before{content: “}}”; color: silver}

第3章結構和層疊

繼承是從一個元素向其後代元素傳遞屬性值所採用的機制。確定應當向一個元素應用哪些值時，使用者代理不僅要考慮繼承，還要考慮宣告的特殊性，另外需要考慮宣告本身的來源。這個過程就稱為層疊。

（1）特殊性：

對於選擇器中給定的ID屬性值，加0，1，0，0；

對於選擇器中給定的各個類屬性值、屬性選擇或偽類，加0，0，1，0；

對於選擇器中給定的各個元素或偽元素，加0，0，0，1；

內聯宣告的特殊性是1，0，0，0；

結合符和萬用字元選擇器對特殊性沒有任何貢獻。

重要宣告：

!important重要宣告總是勝出。

（2）繼承

一般地，大多數框模型屬性（包括外邊距、內邊距、背景和邊框）都不能繼承。

通配選擇器有0特殊性，繼承沒有特殊性，所以有時候通配選擇器會有一種短路繼承的效果。

（3）層疊

按權重和來源排序：讀者重要宣告>創作者重要宣告>創作者正常宣告>讀者正常宣告>使用者代理預設宣告；

按特殊性排序；

按出現順序排序：如果兩個規則的權重、來源和特殊性安全相同，那麼在樣式表中後出現的一個會勝出。

第4章值和單位

顏色：函式式RGB顏色、十六進位制RGB顏色

長度單位：絕對長度單位和相對長度單位。

相對長度單位：共有3種，em、ex和px。

em：1個em定義為一種給定字型的font-size值。如果一個元素的font-size為14畫素，那麼對於該元素，1em就等於14畫素。

ex：是指所用字型中小寫x的高度，一些瀏覽器的做法是取0.5em作為ex值。

px：非常適合用畫素來度量影象大小，因為影象的高度和寬度本身就是畫素數。

關鍵字inherit：inherit使一個屬性的值與其父元素的值相同。

第5章字型

（1）字體系列：font-family

除了各種特定字體系列外（如Times、Verdana、Helvetica或Arial），CSS還定義了5種通用字體系列（Serif字型、Sans-serif字型、Monospace字型、Cursive字型、Fantasy字型）。

（2）字型加粗：font-weight

（3）字型大小：font-size

絕對大小、相對大小（larger和smaller）、百分數和大小（百分數總是根據從父元素繼承的大小來計算）

（4）風格和變形：

風格：font-style（normal文字、italic文字、oblique文字）

變形：font-variant（normal、small-caps、inherit）

（5）拉伸和調整字型

拉伸：font-stretch

調整：font-size-adjust（這個屬性的目標是，當所用字型並非創作人員的首選時，仍然可以保持辨識）。

（6）font屬性：

它是涵蓋所有其他字型屬性的一個簡寫屬性。

前三個屬性順序任意：font-style、font-weight、font-variant。後兩個font-size、font-family

在font-size後加/斜槓可以補充行高line-height，儘管行高是文字屬性而不是字型屬性。

第6章文字屬性

（1）縮排文字：text-indent，應用於塊級元素，有繼承性。

（2）水平對齊：text-align，應用於塊級元素，有繼承性。

Left、right、center、justify（兩端對齊）

（3）垂直對齊

行高：line-height屬性是指文字行基線之間的距離，應用於所有元素，有繼承性，值為百分數時是相對於元素的字型大小，通常是字型大小的1.2倍。

垂直對齊文字：vertical-align屬性只應用於行內元素和表單元格，不能繼承。（baseline、sub、super、bottom、text-bottom、top、middle、百分數（相對於自身line-height計算）、px長度）；

注意：所有垂直對齊的元素都會影響行高，應該記得行框的描述，其高度要足以包含最高行內框的頂端和最低行內框的底端。

（4）字間隔和字母間隔

字間隔：word-spacing，應用於所有元素，有繼承性。

字母間隔：letter-spacing，應用於所有元素，有繼承性。

（5）文字轉換：

text-transform應用於所有元素，有繼承性。（uppercase和lowercase將文字轉換為全大寫或全小寫字元，capitalize只對每個單詞的首字母大寫）

（6）文字裝飾

Text-decoration：underline、overlain、line-through，不能繼承

（7）文字陰影

Text-shadow:green 5px 0.5em;

（8）處理空白符：white-space

使用這個屬性，它會影響使用者代理對源文件中的空格、換行和tab字元的處理。

取值pre：瀏覽器將會注意額外的空格，甚至回車；

nowrap：它會防止元素中的文字換行，除非使用了一個br元素。

第7章基本視覺格式化

（1）基本框：

內容區、內邊距、邊框、外邊距。

一般的：width被定義為內容區的寬度、height被定義為內容區的高度。

（2）塊級元素：

水平格式化：

Width、margin-left、margin-right可以設定為auto，會自動調整元素寬度為包含塊的width。

margin-left和margin-right都設定為auto時可以將元素居中。

margin區域會顯示父元素的背景顏色；

只有外邊距可以設定為負值；

垂直格式化：

可以對任何塊級元素設定顯示高度。

7個屬性中，height、margin-top、margin-bottom可以設定為auto，其他不行。

如果沒有顯示宣告包含塊的height，百分數高度會重置為auto。

auto高度：

1.如果塊級元素高度設為auto，而且只有塊級子元素，其高度將不會包含子元素的外邊距；

2.如果塊級元素高度設為auto，並且設了border或padding，其高度將會包含子元素的外邊距。

合併垂直外邊距：垂直相鄰的外邊距會合並。

（3）行內元素：

行內非替換元素：

匿名文字：未包含在行內元素中的字串；

內容區：

行間距：是font-size的值和line-height值之差；

行內框：對非替換元素行內框的高度剛好等於line-height的值，對於替換元素，行內框的高度等於內容區的高度；

行框：這是包含該行中出現的行內框的最高點和最低點的最小框。

內邊距、邊框、外邊距都可以應用於行內非替換元素，但根本不會影響行框的高度，可以影響左右兩端。

行內替換元素：

有固有高度的替換元素可能導致行框比正常要高，這不會改變行中任何元素的line-height值，包括替換元素本身。

內邊距和邊框會影響替換元素的行框的高度。

替換元素並沒有自己的基線，所以相對來講最好的辦法是將其行內框的底端與基線對齊。

（4）改變元素顯示

Display屬性：block、inline、inline-block、run-in

行內塊元素：

行內塊元素會作為替換元素放在行中，這說明，行內塊元素的底端預設地位於文字行的基線上，而且內部沒有行分隔符。

run-in：可以使某些塊級元素成為下一個元素的行內部分。

第8章內邊距、邊框和外邊距

（1）寬度和高度：

這兩個元素不能應用到行內非替換元素。

IE6之前這兩個屬性是指可見元素框的尺寸，而不是內容區尺寸。

（2）外邊距：

Margin：百分數時是相對於包含塊的width。

如果指定了3個值，則第4個值從第2個值複製；

為行內非替換元素設定外邊距不會影響行高，為行內替換元素設定外邊距會影響行高。

（3）邊框

預設的顏色是元素的前景色，如果沒有為邊框宣告顏色，它將與元素的文字顏色相同。

元素的背景會出現在邊框的可見部分（點線邊框或虛線邊框）。

border-style：solid dashed none dotted;（為none時表示邊框不存在，寬度也變為了0）

單邊樣式：border-top-style

border-width：1px;

單邊寬度：border-top-width

border-color:transparent;（透明邊框）

單邊顏色：border-top-color

簡寫屬性：border、border-top、border-right、border-bottom、border-left（值的順序沒有要求）

（4）內邊距

第9章顏色和背景

（1）顏色

可以為任何元素設定前景色和背景色。

（2）背景

Background-color：transparent（預設值為透明）

背景影象：background-image：url(bg23.gif);

預設會平鋪，即水平和垂直方向重複影象使得充滿整個背景；

影象放在所指定的背景顏色之上。

Background-repeat：repeat、repeat-x、repeat-y、no-repeat、inherit

Background-position：top、bottom、left、right、center成對出現

Background-attachment：scroll、fixed（相對於可視區是固定的）、inherit

彙總：

backgroud：這個屬性可以從其他各個背景屬性取一個值，而且可以採用任何順序。