顏色和背景

顏色

color設定前景色。

前景色

color：<color> | inherit
通過給元素新增class值，然後再通過class選擇器來改變它的顏色。

替換屬性

HTML3.2的BODY屬性：TEXT、LINK、ALINK和VLINK。
可以用color替換它們。

影響邊框

color值還可以影響元素周圍的邊框。
邊框顏色取自內容的顏色。
border-color的值會覆蓋color的值，對於邊框來說。

影響表單元素

可以為表單元素設定color值。
會不會同時改變邊框的顏色取決於使用者代理及其預設樣式。

繼承顏色

color屬性可以繼承。
由於先前版本的瀏覽器對table元素的color值有定義，瀏覽器的值會比繼承的值更優先，所以如果在body設定的color不會作用到table元素。現代瀏覽器已經修復這個bug。

背景

元素的背景區包括前景之下直到邊框外邊界的所有空間。

背景色

background-color：

• <color>
• transparent（預設，透明）
• inherit

如果希望背景色從元素中的文字向外稍有延伸，只需增加一些內邊距。
background-color不能繼承。

歷史問題

Navigator4對背景色的處理不會應用於整個內容框和內邊距。
解決：外面加一個border，border顏色和背景色一致。

特殊效果

結合color和background-color。

背景影象

background-image：

• <uri>
• none
• inherit

body {background-image: url(bg23.gif);}

允許向任何元素應用背景影象。
理論上，可以向textareas和select列表等替換元素的背景應用影象。
background-image不能繼承。

為什麼背景不能繼承

不雅觀

關於背景的良好實踐

在使用背景影象時最好同時設定背景色，達到一定效果。

有方向的重複

background-repeat：

• repeat（垂直和水平方向上都平鋪）
• repeat-x（水平上平鋪）
• repeat-y（垂直上平鋪）
• no-repeat（不允許影象在任何方向上平鋪）
• inherit

背景定位

background-position：決定原影象的位置（中心點）。

[[<percentage> | <length> | left | center | right ]
[<percentage> | <length> | top | center | bottom]?] ||
[[left | center | right] || [top | center | bottom]] |
inherit

例：

background-position:center center;

關鍵字

單個關鍵字		等價關鍵字
center			center center
top				top center
				center top
bottom			bottom center
				center bottom
right			center right
				right center
left			center left
				left center	

百分數

百分數值同時應用於元素和影象。
數值可以為負值（有意想不到的效果哦）。

長度值

從元素內邊距區左上角的偏移（偏移點為左上角）。
數值可以為負值（有意想不到的效果哦）。

有方向的重複（深入）

通過結合使用background-position和background-repeat。

關聯

background-attachment：可以使背景圖片隨文件滾動。

• scroll（預設值，隨文件滾動）
• fixed（固定在視窗的位置，不隨文件滾動）
• inherit

有意思的效果

實現背景的理想對齊：

body {
	background-image: url(grid1.gif);
	background-repeat: repeat;
	background-attachment: fixed;
}
h1 {
	background-image: url(grid2.gif);
	background-repeat: repeat;
	background-attachment: fixed;
}

復螺旋變形：
http://www.meyerweb.com/eric/css/edge/complexspiral/glassy.html

彙總

background：

[<background-color> || <background-image> || <background-repeat> ||
<background-attachment> || <background-position>] | inherit

限制：如果background-position有兩個值，它們必須一起出現，而且如果這兩個值是長度或百分數值，則必須按水平值在前垂直值在後的順序。

浮動和定位

定位的基本思想：允許定義元素框相對於正常位置、或父元素、或另一個元素、或瀏覽器視窗本身應該出現在哪裡。
浮動：脫離正常流佈局。

浮動

float：所有元素都可以浮動。

• left
• right
• none
• inherit

最先作用：文字環繞圖片。

浮動元素

一個元素浮動時，其他內容會“環繞”該元素。
浮動元素的外邊距不會合並。
如果確定要浮動一個非替換元素，則必須為該元素宣告一個width。

不浮動

float：none；
用於防止元素浮動。

浮動的詳細內幕

包含塊（containning block）
浮動元素的包含塊是其最近的塊級祖先元素。
浮動元素會生成一個塊級框，而不論這個元素本身是什麼。

浮動的一些規則：

• 浮動元素的左（或右）外邊界不能超過其包含塊的左（或右）內邊界。
• 浮動元素的左（或右）外邊界必須是源文件中之前出現的左浮動（或右浮動）元素的右（左）外邊界，除非後出現浮動元素的頂端在先出現浮動元素的底端下面。
• 左浮動元素的右外邊界不會在其右邊右浮動元素的左外邊界的右邊。一個右浮動元素的左外邊界不會在其左邊任何左浮動元素的右外邊界的左邊。
• 一個浮動元素的頂端不能比其父元素的內頂端更高。如果一個浮動元素在兩個合併外邊距之間，放置這個浮動元素時就好像在兩個元素之間有一個塊級父元素。
• 浮動元素的頂端不能比之前所有浮動元素或塊級元素的頂端更高。
• 如果源文件中一個浮動元素之前出現另一個元素，浮動元素的頂端不能比包含該元素所生成框的任何行框的頂端更高。
• 左（或右）浮動元素的左邊（右邊）有另一個浮動元素，前者的右外邊界不能在其包含塊的右（左）邊界的右邊（左邊）。
• 浮動元素必須儘可能高地放置。
• 左浮動元素必須向左儘可能遠，右浮動元素則必須向右儘可能遠。位置越高，就會向右或向左浮動得越遠。

實用行為

這些效果產生原因有兩方面：
1.規則中指出了一些要求。
2.規則中有些方面沒有談到。
比如：
浮動元素比父元素高時，浮動元素會超出其父元素的底端。
浮動元素會延伸，從而包含其所有後代浮動元素。

負外邊距

負外邊距可能導致浮動元素移到其父元素的外面。

浮動元素、內容和重疊

對於一個浮動元素於正常流中的內容發生重疊的處理方式：

• 行內框與一個浮動元素重疊時，其邊框、背景和內容都在該浮動元素“之上”顯示。
• 塊框與一個浮動元素重疊時，其邊框和背景在該浮動元素“之下”顯示，而內容在浮動元素“之上”顯示。

清除

clear：

• left
• right
• both
• none
• inherit

CSS2.1引入一個清除區域（clearance）：
清除區域是在元素上外邊距之上增加的額外間隔，不允許任何浮動元素進入這個範圍內。

定位

position：

• static（初始值，元素框正常生成。塊級元素生成一個矩形框，作為文件流的一部分，行內元素則會建立一個或多個行框，置於其父元素中。）
• relative（元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所佔的空間仍保留。）
• absolute（元素框從文件流完全刪除，並相對於其包含塊定位。）
• fixed（元素框的表現類似於將position設定為absolute，不過其包含塊是視窗本身。）
• inherit

包含塊

• ”根元素“的包含塊（也稱為初始包含塊）由使用者代理建立。（html或body）
• 對於一個非根元素，如果其position值是relative或static，包含塊則是由最近的塊級框、表單元格或行內塊祖先框的內容邊界構成。
• 對於一個非根元素，如果其position值是absolute，包含塊設定為最近的position值不是static的祖先元素（可以是任何型別）。

偏移屬性

top、right、bottom、left：

• <length>
• <percentage>
• auto
• inherit

正值向內偏移，負值向外偏移。
偏移定位元素的外邊距邊界時，帶來的影響是元素的所有一切（包括外邊距、邊框、內邊距和內容）都會在定位的過程中移動。

寬度和高度

不顯式設定width和height：

top: 0; bottom: 0; left: 0; right:50%;

限制寬度和高度

min-width、min-height：

• <length>
• <percentage>
• inherit

max-width、max-height：

• <length>
• <percentage>
• none
• inherit

內容溢位和剪裁

overflow和clip

溢位

overflow：

• visible（初始值，元素的內容在元素框之外也可見。）
• hidden（元素的內容會在元素框的邊界處剪裁，不通過滾動條等介面使使用者訪問超出剪裁區域的內容。）
• scroll（元素的內容會在元素框的邊界處剪裁，但是瀏覽器有提供滾動條來讓讀者可以訪問內容而不會改變元素本身的形狀。）
• auto（允許使用者代理來確定採用何種行為。）
• inherit

內容剪裁

clip：改變剪裁區域的形狀。

• rect(top,right,bottom,left)
• auto（預設值，表示元素的內容不應裁剪）
• inherit

rect(top,right,bottom,left)的值不是偏移量，而是距元素左上角的距離。只能是長度值和auto。
裁剪區域可以超越下邊界和右邊界，但是不能超越上邊界和左邊界。

元素可見性

visibility：

• visible（預設值，可見）
• hidden（”不可見“，元素還是會影響文件的佈局。與display: none有區別。）
• collapse（在CSS表顯示中使用）
• inherit

visibility屬性可以繼承。

絕對定位

絕對定位的具體細節

包含塊和絕對定位元素

元素絕對定位時，會從文件流中完全刪除。然後相對其包含塊定位，其邊界根據偏移屬性（top、left等）放置。
創作人員通常會選擇一個元素作為絕對定位元素的包含塊，將其position指定為relative而且沒有偏移：

p.contain {position: relative;}

元素絕對定位時，還會為其後代元素建立一個包含塊。
如果文件可滾動，定位元素會隨著它滾動。（絕對元素不是固定定位元素的後代。）

絕對定位元素的放置和大小

下面程式碼中的包含塊寬度必須是h1的font-size計算值的2.5倍，以下的值才能正確。

#masthead h1 {
	position: absolute;
	top: 0;
	left: 1em;
	right: 10%;
	bottom: 0;
	margin: 0;
	padding: 0;
	height: 1em;
	width: 50%;
	background: silver;
	}

自動邊偏移

元素絕對定位時，如果除bottom外某個任意偏移屬性設定為auto，會有一種特殊的行為。
left：auto；
元素的左邊界會相對於其包含塊的左邊界放置（可以假設其包含塊是初始包含塊）。
top：auto；
定位元素的頂端要相對於其未定位前本來的頂端位置對齊。

非替換元素的放置和大小

一般地，元素的大小和位置取決於其包含塊。各個屬性（width、right、padding-left等）的值也會有一些影響，不過最主要的還是其包含塊。
公式:
包含塊的width = left + margin-left + border-left-width + padding-left-width + padding-right + border-right-width + margin-right + right
當包含塊寬度有剩餘時，使用者代理會忽略right的值或left的值（從左向右的語言中忽略右，從右向左的語言中將忽略left）。
一般地，如果只有一個屬性設定為auto，就會修改這個屬性來滿足本節前面給出的等式。
在水平佈局中，如果值設定為auto，right或left都可以根據其靜態位置放置。
但在垂直佈局中，只有top可以取靜態位置，出於某種原因，bottom做不到。
另外，如果一個絕對定位元素的大小在垂直方向上過度受限，將忽略bottom。

替換元素的放置和大小

在替換元素定位中沒有“恰當收斂”行為的概念。
確定替換元素位置和大小時，所涉及的行為用以下規則描述：

1. 如果width設定為auto，width的實際使用值由元素內容的固有寬度決定。
2. 在從左向右讀的語言中，如果left值為auto，要把auto替換為靜態位置（反之，right）。
3. 如果left或right仍為auto（就是說，未在上一步中被替換），則將margin-left或margin-right的auto值替換為0。
4. 如果此時margin-left和margin-right都還定義為auto，則把它們設定為相等的值，從而將元素在其包含塊中居中。
5. 在此之後，如果只剩下一個auto值，則將其修改為等於等式的餘下部分（使等式滿足）。
6. height有畫素的規則

Z軸上的放置

z-index：

• <integer>
• auto
• inherit

利用z-index，可以改變元素相互覆蓋的順序。
數值可正可負。
各元素有自己“次級”的z-index。
比如：在div下有p和em，div、p、em的index為7、36、-42。則p和em的z-index是在div下的z-index。
作為body元素後代的一個絕對定位元素就不能疊放在body的背景之下，不過可以疊放在body的內容下面。

固定定位

固定定位的包含塊是視窗。
元素會完全從文件流中去除，不會有相對於文件中任何部分的位置。

相對定位

採用這種機制時，將通過使用偏移屬性移動定位元素。
當元素相對定位時，它會從其正常位置移走，不過，原來所佔的空間並不會因此消失。
如果遇到過度受限的相對定位，一個值會重置為另一個值的相反數。

表佈局

這種佈局已經不建議使用。

表格式化

表格式化（table formatting）：組裝的基本方法，瞭解表中的元素相互之間有什麼關係。

表的視覺編排

CSS對於表元素和內部表元素有很分明的界限。
在CSS中，內部表元素生成矩形框，這些框有內容、內邊距和邊框，但是沒有外邊距。

表編排規則

• 每個行框包含一行表格單元。表中的所有行框按其在源文件中出現的順序從上到下地填充表（表的標題行框和腳註行框例外，它們分別出現在表的最前面和最後面）。因此，有多少個行元素，表中就包含多少表格行。
• 一個行組包含多少個行框，該行組框就包含多少個表格單元。
• 列框包含一列或多列表格單元。所有列框都按其出現的順序依次相鄰放置。對於從左向右讀的語言，第一個列框放在左邊，而對於從右向左讀的語言，第一個列框則放在右邊。
• 列組中包含多少個列框，該列框中就包含多少個表格單元。
• 由文件語言來定義這種跨行或跨列。
• 單元格框不能超出表或行組的最後一個行框。如果表結構可能造成這種情況，單元格則必須縮小，使之能放在包含它的表或行組中。

表顯示值

使用一組display值
display：

• none（無，不顯示）
• inline（初始值，行內元素）
• block（塊級元素）
• inline-block（行內塊元素，塊級元素和行內元素的混合。作為一個行內框與其他元素和內容相關。效果類似img）
• list-item（列表項元素）
• run-in（塊/行內元素混合，可以使某些塊級元素成為下一個元素的行內部分。）
• table（這個值指定一個元素定義了一個塊級表。類似HTML的table）
• inline-table（這個值指定一個元素定義了一個行內級表。類似inline-block）
• table-row-group（這個值指定一個元素是一個或多個行的組。類似tbody）
• table-header-group（這個值與table-row-group非常相似，只是視覺格式化方面有所不同。類似thead）
• table-footer-group（這個值與 table-header-group很類似，類似tfoot。）
• table-row（這個值指定了一個元素是一個單元格的行。類似tr元素。）
• table-column-group（這個值宣告一個元素是一個或多個列的組。不顯示，類似colgroup）
• table-column（這個值宣告元素描述了一個單元格的列。不顯示，類似col元素）
• table-cell（這個值指定一個元素表示表中的單個單元格。類似th、td）
• table-caption（這個值定義一個表的總標題。類似caption）
• inherit

以行為主

第一列由各行中的第一個單元格組成，第二列則由各行中第二個單元格組成，依此類推。

列

在CSS中列和列組只能接受4種樣式：

• border（只有當border-collapse屬性值為collapse時才能為列和列組設定邊框。）
• background（只有當單元格及其行有透明背景時，列或列組的背景才可見。）
• width（width屬性定義了列或列組的最小寬度。）
• visibility（如果一個列或列組的visibility為collapse，則該列（或列組）中所有單元格都不顯示。）

匿名錶物件

缺少tr的HTML程式碼：

<table>
	<td>Name: </td>
	<td><input type="text"></td>
</table>

CSS定義了一種機制，可以將“遺漏的”元件作為匿名物件插入。

<table>
	[anonymous table-row object begins]
	<td>Name: </td>
	<td><input type="text"></td>
	[anonymous table-row object ends]
</table>

CSS表模型中可能出現7種不同的匿名物件插入。

物件插入規則

1. 如果一個table-cell元素的父元素不是table-row元素，則會在該table-cell元素及其父元素之間插入一個匿名table-row物件。所插入的這個物件將包含該table-cell元素的所有連續兄弟。
2. 如果一個table-row元素的父元素不是table、inline-table或table-row-group元素，則會在該table-row元素及其父元素之間插入一個匿名table元素。
3. 如果一個table-column元素的父元素不是table、inline-table或table-column-group元素，則會在該table-column元素及其父元素之間插入一個匿名table元素。
4. 如果一個table-row-group、table-header-group、table-footer-group、table-column-group或table-caption元素的父元素不是table元素，則會在該元素及其父元素之間插入一個匿名table元素。
5. 如果一個table或inline-table元素的子元素不是table-row-group、table-header-group、table-footer-group、table-row或table-caption元素，則在該table元素與其子元素之間插入一個匿名table-row物件。這個匿名物件將包含該子元素的所有不是table-row-group、table-header-group、table-footer-group、table-row或table-caption元素的連續兄弟。
6. 如果一個table-row-group、table-header-group或table-footer-group元素的子元素不是table-row元素，則在該元素及其子元素之間插入一個匿名table-row物件。這個匿名物件包含該子元素的所有本身非table-row物件的連續兄弟。
7. 如果一個table-row元素的子元素不是table-cell元素，則在該元素和其子元素之間插入一個匿名table-cell物件。這個匿名物件包含該子元素的所有本身非table-cell元素的連續兄弟。

表層

為了完成表的顯示，CSS定義了6個不同的“層”，可以分別放表的不同方面。
從上到下：

• 單元格
• 行
• 行組
• 列
• 列組
• 表

表標題

一小段文字，描述了表內容的本質。
CSS規範指出，表標題格式化為就好像它是直接放在表框之前（或之後）的一個塊框，只有兩個不同。

1. 表標題仍能從表繼承值。
2. 使用者代理在考慮如何處理表前面的run-in元素時會忽略表標題框。

caption-side：應用於display值為table-caption的元素。

• top
• bottom

表單元格邊框

CSS中兩種截然不同的邊框模型：

• 分隔邊框模型：單元格相會之間是分隔的。（預設模型）
• 合併邊框模型：單元格之間沒有可見的間隔，單元格邊框會相互合併。

border-collapse：

• collapse（合併邊框模型）
• separate（初始值，分隔邊框模型）
• inherit

分隔單元格邊框

表中的每個單元格都與其他單元格分開一定距離，而且單元格的邊框彼此不會合並。

邊框間隔

使用CSS改變單元格之間的間隔。
border-spacing：

• <length><length>?
• inherit

可以指定一個或兩個長度值：水平間隔、垂直間隔。
宣告一個border-spacing值，這會應用於表本身，而不是單個的單元格。
在分隔邊框模型中，不能為行、行組、列和列組設定邊框。

處理空單元格

empty-cells：

• show（會畫出空單元格的邊框和背景，就好像這些表單元格有內容一樣。）
• hide（不會畫出單元格的任何部分，就好像這個單元格被設定為visibility：hidden。）
• inherit

合併單元格邊框

遵從以下規則：

• display值為table或inline-table的元素不能有任何內邊距，不過它們可以有外邊距。因此，表的外圍邊框與其最外單元格的邊界之間不會有任何間隔。
• 邊框可以應用到單元格、行、行組、列和列組。表元素本身通常都有一個邊框。
• 單元格邊框之間絕對不會有任何間隔。
• 一旦合併，單元格之間的邊框會在單元格間的假想表格線上居中。

合併邊框佈局

border-widthi是指單元格i與下一個單元格之間的邊框。
如果左或右邊框比初始邊框寬度更寬，則會延伸到表的外邊距居中。

邊框合併

解決哪一個邊框佔上風的問題：

• 如果某個合併邊框的border-style為hidden，它會優先於所有其他合併邊框。這個位置上的所有邊框都隱藏。
• 如果某個合併邊框的border-style為none，它的優先順序最低，是預設值。
• 如果至少有一個合併邊框的border-style值不是none，而且所有合併邊框的border-style值都不是hidden，則窄邊框不敵更寬的邊框。
• 一樣寬，則按照這個順序：double、solid、dashed、dotted、ridge、outset、groove、inset。
• 如果合併邊框的樣式和寬度都一樣，但是顏色不同，則按照這個順序：cell、row、row group、table。
• 全部相同，只有顏色不同：取最上最右邊框的顏色。

表大小

兩種確定表的寬度的方法：

• 固定寬度佈局
• 自動寬度佈局

不論使用何種寬度演算法，高度都會自動計算。

寬度

table-layout：選擇採用哪種方法計算表的寬度。

• auto
• fixed
• inherit

固定佈局

固定佈局模型的速度之所以快的主要原因：
佈局不依賴於表單元格的內容。其佈局是根據該表以及表中列和單元格的width值決定的。
固定佈局模型的工作包括以下簡單步驟：

1. width屬性值不是auto的所有列元素會根據width值設定該列的寬度。
2. 如果一個列的寬度為auto（不過，表首行中位於該列的單元格width不是auto）則根據該單元格寬度設定此列的寬度。如果這個單元格跨多列，則寬度在這些列上平均分配。
3. 在以上兩步之後，如果列的寬度仍為auto，會自動確定其大小，使其寬度儘可能相等。

在使用固定寬度佈局模型時，沒有必要非得為表指定一個顯式寬度。

自動佈局

只要表的width為auto就會觸發使用自動佈局模型，而不論table-layout的值是什麼。
模型的詳細過程：

1. 對一列中的各個單元格，計算最小和最大單元格的寬度。
2. 對於各一列，計算最小和最大列寬。
3. 如果一個單元格跨多列，最小（大）列寬之和必須等於這個跨列單元格的最小（大）單元格寬度。

一個例項：

table {
	table-layout: auto;
	width: auto;
	border-collapse: collapse;
}
td {
	border: 1px solid;
}
col#c3 {
	width: 25%;
}
#r1c2 {
	width: 40%;
}
#r2c2 {
	width: 50px;
}
#r2c3 {
	width: 35px;
}
#r4c1 {
	width: 100px;
}
#r4c4 {
	width: 1px;
}

<table>
		<colgroup>
			<col id="c1"><col id="c2"><col id="c3"><col id="c4">
		</colgroup>
		<tr>
			<td id="r1c1">1-1</td>
			<td id="r1c2">1-2</td>
			<td id="r1c3">1-3</td>
			<td id="r1c4">1-4</td>
		</tr>
		<tr>
			<td id="r2c1">2-1</td>
			<td id="r2c2">2-2</td>
			<td id="r2c3">2-3</td>
			<td id="r2c4">2-4</td>
		</tr>
		<tr>
			<td id="r3c1">3-1</td>
			<td id="r3c2">3-2</td>
			<td id="r3c3">3-3</td>
			<td id="r3c4">3-4</td>
		</tr>
		<tr>
			<td id="r4c1">4-1</td>
			<td id="r4c2">4-2</td>
			<td id="r4c3">4-3</td>
			<td id="r4c4">4-4</td>
		</tr>
	</table>

1-2：最小寬度：50px，最大寬度40%；
3-3：最小列寬35px，最大寬度為最終表寬度的25%；
4-1：最大、最小都是100px；
4-4：最小和最大列寬都等於單元格的最小內容寬度，計算為25px。

高度

最容易的一種情況：直接由height屬性顯式設定高度。
若表的高度為auto：其高度則是表中所有行的行高再加上所有邊框和單元格間隔的總和。
CSS2.1中沒有定義的內容：

• 表單元格高度為百分數時的效果
• 錶行和行組高度為百分數時的效果
• 跨行單元格如何影響所跨行的高度

對齊

使用text-align屬性：

• top：單元格內容的頂端與其行頂端對齊，對於跨行單元格，單元格內容的頂端與其所跨的第一行的頂端對齊。
• bottom：單元格內容的底端與其行底端對齊，對於跨行單元格，單元格內容的底端與其所跨的最後一行的底端對齊。
• middle：單元格內容的中間與其行中間對齊；對於跨行單元格，單元格內容的中間與其所跨行的中間對齊。
• baseline：單元格的基線與其行的基線對齊，對於跨行單元格，該單元格的基線與其所跨的第一行的基線對齊。

行的基線由該行所有單元格中最低初始單元格基線定義（也就是第一個文字的基線）。

列表與生成內容

列表中的項其實就是塊框。

列表

就是ul和ol

列表型別

list-style-type：只能應用於display值為list-item的元素。

• disc（實心圓）
• circle（空心圓）
• square（方塊，實心或空心）
• decimal（1，2，3，4，5，·····）
• decimal-leading-zero（01，02，03，04，05，······）
• upper-alpha（A，B，C，D，E，······）
• lower-alpha（a，b，c，d，e，······）
• lower-roman（i，ii，iii，iv，v，······）
• upper-roman（I，II，III，IV，V，······）
• lower-greek（傳統小寫希臘符號）
• lower-latin
• upper-latin
• armenian（傳統亞美尼亞序號）
• georgian（傳統喬治序號）
• none
• inherit

list-style-type屬性可以繼承。

列表項影象

list-style-image：

• <uri>
• none
• inherit

列表標籤位置

list-style-position：

• inside（將標籤拉向內容，標誌放在列表項的內容“以內”。）
• outside（預設值，顯示與一般Web上列表項的顯示無二。）
• inherit

簡寫列表樣式

list-style：

• [ <list-style-type> || <list-style-image> || <list-style-position>]
• inherit

列表佈局

標誌和列表項內容之間的距離在CSS中未定義。
標誌總會相對於列表項的內容放置，因此可能會“掛”在文件主文字之外，甚至超出瀏覽器容器邊界。

生成內容

生成內容（generated content）的新特性：由瀏覽器建立的內容。

插入生成內容

使用:before和:after偽元素：會根據content屬性把生成內容放在一個元素內容的前面或後面。
CSS2和CSS2.1明確地禁止浮動或定位:before和:after內容，還禁止使用列表樣式屬性以及表屬性。有以下限制：

• 如果:before或:after選擇器的主體是塊級元素，則display屬性只接受值none、inline、block和marker。其他值都處理為block。
• 如果:before或:after選擇器的主體是行內元素，則display屬性只接受值none和inline。其他值都處理為inline。

例：下面display的值會被重置為inline

em:after { 
	content: " (!) ";
	display: block;
	}

指定內容

content：

• normal（預設值）

[<string> | <uri> | <counter> | attr(<identifier>) | open-quote |
close-quote | no-open-quote | no-close-quote ]

• inherit

<string>：串值會原樣顯示，即使其中包含某種標記也不例外。（可以識別CSS的轉義字元編碼）
<uri>：指向一個外部資源。
quote：引號。

插入屬性值

attr(<identifier>)：可以取出元素屬性的值。
比如：把連結的地址取出來放在連結的後面

a[href]:after {content: attr(href);}

這會導致生成內容與具體內容衝突，解決方法：

a[href]:after {content: “ [" attr(href) "]";}

如果一個屬性不存在，會在相應位置插入一個空串。

生成引號

quotes：

• [<string> <string>]+
• none
• inherit

前一個串定義開始引號（open-quote），第二個串定義結束引號（close-quote）。

quotes: '"' "'";

彎引號：\201C
no-close-quote：多段引用文字，忽略每一段的結束引號。
使用引用巢狀層次遞減。

計數器

有序列表中的列表項標誌就是計數器。

重置和遞增

建立計數器的基礎包括兩個方面：

1. 能設定計數器的起點（屬性counter-reset）
2. 能將其遞增一定的量

counter-reset：

• [<identifier><integer>?]+
• none
• inherit

計數器識別符號只是創作人員建立的一個標籤。
計數器chapter就在重置時定義

h1 {counter-reset: chapter;}

預設地，計數器重置為0，如果想重置為另一數，可以在識別符號後面說明這個數。

h1#ch4 {counter-reset: chapter 4;}

可以在識別符號-整數對中一次重置多個識別符號。

counter-increment：指示元素將計數器遞增。

• [<identifier><integer>?]+
• none
• inherit

整數部分可以是0、正數和負數。
整數預設值為1而不是0。

ol {counter-reset: ordered;} 	/*defaults to 0 */
ol li {counter-increment: ordered;} 		/*defaults to 1*/

使用者代理定義計數器生成有序列表傳統的1，2，3計數。

使用計數器

要具體顯示計數器，需要結合使用content屬性和一個與計數器有關的值。

h1:before {
	counter-reset: section subsec;
	counter-increment: chapter;
	content: counter(chapter) ". ";
}
h2:before {
	counter-reset: subsec;
	counter-increment: section;
	content: counter(chapter) ". " counter(section) ". ";
}
h3:before {
	counter-increment: subsec;
	content: counter(chapter) ". " counter(section) ". " counter(subsec) ". ";
}

沒有預期效果。。。
display為none的元素並不會遞增計數器。
visibility為hidden的元素會遞增計數器。

計數器和作用域

作用域（scope）：每層巢狀都會為給定計數器建立一個新的作用域。
用counters()替代counter()；

使用者介面樣式

CSS提供了很多有用的介面樣式工具，而不僅僅面向文件。

系統字型和顏色

讓文件能儘可能地模仿使用者的計算機環境。

系統字型

一個按鈕改變控制元件的外觀。

a.widget {font: caption;}

CSS2定義了6個系統字型關鍵字。

• caption：由標題控制元件使用的字型樣式，如按鈕和下拉控制元件。
• icon：作業系統圖示標籤所用的字型樣式，如硬碟驅動器、資料夾和檔案圖示。
• menu：下拉選單和選單列表中文字使用的字型樣式。
• message-box：對話方塊中文字使用的字型樣式
• small-caption：由標題小控制元件的標籤使用的字型樣式
• status-bar：視窗狀態中文字使用的字型樣式。

系統顏色

總共有28個系統顏色關鍵字：

• ActiveBorder：活動視窗的外邊框。
• ActiveCaption：活動視窗標題的背景色。
• AppWorkspace：支援多個文件的應用中使用的背景色。
• Background：桌面的背景色。
• ButtonFace：三維按鈕”面“上使用的顏色。
• 略

游標

指示裝置

改變游標

cursor：

[[<uri>,]* [auto | default | pointer | crosshair | move
| e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize
| s-resize | w-resize | text | wait | help | progress ]] | inherit

預設值：auto，只表示使用者代理應當確定最適合當前上下文的游標圖示。
default：作業系統的預設游標。

指示和選擇游標

pointer：把游標圖示改為與移過超連結時的游標相同。
IE6以前手是hand。
text：選擇文字出現“I”游標。
crosshair：把游標圖示變成一個十字元號。

移動游標

move：加粗的十字線，也可以是一個“拳頭”。
與move相關 cursor值：e-resize、ne-resize等等。

等待和前進

wait和progress都指示程式正在忙。
wait：表示使用者等待直到程式不忙為止。（一塊表）
progress：指示使用者完全可以繼續與程式互動，儘管它很忙。（旋轉的“沙灘球”）

提供幫助

help：可能是一個箭頭帶一個問號。

圖形游標

可以指定定製游標，使用URL值做到：

a.external {cursor: url(globe.cur), pointer;}

使用者代理必須支援儲存globe.cur所用的檔案格式，url值可多個。

輪廓

輪廓出現或消失時不會影響文件流，即不會導致文件的重新顯示。
使用者代理會“合併”部分輪廓，建立一個連續但非矩形的形狀。
輪廓和邊框可以共存，輪廓可以畫在邊框邊界的外面。

設定輪廓樣式

outline-style：

• none（預設值）
• dotted
• dashed
• solid
• double
• groove
• ridge
• inset
• outset
• inherit

只能為一個outline-style值指定一個關鍵字（邊框最多可以4個）。

輪廓寬度

outline-width：

• thin
• medium（預設值）
• thick
• <length>
• inherit

設定輪廓顏色

outline-color：

• <color>
• invert（初始值）
• inherit

反色輪廓（invert）：要對輪廓所在的畫素完成反色轉換。

彙總

outline：

• [<outline-color> || <outline-style> || <outline-width>]
• inherit

CSS沒有明確地拒絕定義兩個輪廓相互重疊時的行為。

非螢幕媒體

比如非視覺訪問。

設計特定於媒體的樣式表

1.提供media屬性對媒體做出限制。在link和style元素中的用法是一樣的。
2.使用@media塊，允許在同一個樣式表中為多個媒體定義樣式。

分頁媒體

paged medium：把文件表示處理為一系列離散“頁面”的媒體。

列印樣式

會應用於“列印預覽”模式的文件顯示。

螢幕與列印的區別

在背景、字型大小、佈局等方面都有不同。

定義頁面大小

CSS定義了描述頁面元件的頁框（page box）。基本由兩個區組成：

• 頁面區（page area），這是頁面中放內容的部分。
• 外邊距區（margin area），這是圍繞頁面區的部分。

CSS2中的屬性：size

• <length>{1,2}
• auto（預設值）
• portrait
• landscape（佈局旋轉90度）
• inherit

選擇頁面型別

提供@page規則建立不同的頁面型別。

@page normal {size: portrait;margin: 1in;}
@page rotate {size: landscape; margin: 0.5in;}

body {page: normal;}
table#moon-data {page: rotate;}

page：

• <identifier>
• inherit

分頁

使用屬性page-break-before和page-break-after影響分頁。

• auto：預設值，只是說明不要求在元素之前或之後分頁。
• always：導致在設定樣式的元素之前（或之後）放一個分頁符。
• avoid：使用者代理儘量避免在一個元素之前或之後放置分頁符。
• left：左邊放分頁符。
• right：右邊放分頁符。
• inherit

應用於position值為relative或static的非浮動塊級元素。

page-break-inside：在一個元素內部放置分頁符。

• auto
• avoid
• inherit

Orphans和widows

widows、orphans：

• <integer>
• inherit

widows：放在頁面頂部的元素在不導致前面增加分頁符的前提下所包含的最小行框數。
orphans：放在頁面底部的元素在不導致前面增加分頁符的前提下所包含的最小行框數。

分頁行為

• 第一個元素的page-break-after值或第二個元素的page-break-before值是always、left或right。不論其他元素的值是什麼（甚至可能是avoid），都必須在元素前放置分頁符（這是強制分頁符）。
• 第一個元素的page-break-after值為auto，第二個元素的page-break-before值也是auto，而且它們沒有一個page-break-inside值不為avoid的共同祖先元素。

CSS2定義了一組“最佳”分頁行為：

• 儘可能少分頁
• 讓所有不是強制分頁符結尾的頁面都有相同的高度。
• 避免在有邊框的塊內部分頁。
• 避免在表內部分頁。
• 避免在浮動元素內部分頁。

重複元素

頁頭（running head）：在每個頁面上都出現的一個元素。
實現：通過position: fixed;

頁面外的元素

對於一個非常寬的pre元素，使用者代理可能只是將該元素剪裁為適應頁框大小，並扔掉餘下的內容。
有空頁，使用者代理會跳過這些空頁。

投影樣式

投影（projection）：描述了投影到一個螢幕上的資訊。

建立幻燈片

使用分頁屬性。

定位元素

結合position製作美觀效果。

關於投影的考慮

投影不能保證顏色的真實性。

聲音樣式

CSS2.1廢棄了媒體型別aural以及與之相關的 所有屬性。

語音

speak：

• normal（預設值）
• none（禁聲）
• spell-out（通常於縮略語或應當讀出的其他內容結合使用）
• inherit

標點符號和數字

speak-punctuation：

• code（會把標點符號具體讀出）
• none（預設值）
• inherit

speak-numeral：定義瞭如何讀出數字。

• digits
• continuous（預設值，數字被讀作一個完整的數）
• inherit

表標題的聲音表現

speak-header：

• once
• always
• inherit

語速

speech-rate：

• <number>：按每分鐘單詞數指定語速。
• x-slow：相當於每分鐘80詞。
• slow：相當於每分鐘120詞。
• medium：相當於每分鐘180-200詞。
• fast：相當於每分鐘300詞。
• x-fast：相當於每分鐘500詞。
• faster：將當前語速提高每分鐘40詞。
• slower：將當前語速降低每分鐘40詞。

音量

volume：

• <number>（0-100）
• <percentage>
• silent（靜音）
• x-soft（ 0 ）
• soft（25）
• medium（50）
• loud（75）
• x-loud（100）
• inherit

指定聲音

voice-family：

• [[<specific-voice> | <generic-voice>],]* [<specific-voice> | <generic-voice>]
• inherit

改變聲音

CSS定義了一些屬性來影響聲音的所有方面。

改變音高

pitch：頻率

• <frequency>
• x-low
• low
• medium
• high
• x-high
• inherit

pitch-range：影響音高的變化範圍。

• <number>
• inherit

重音與音色

stress：

• <number>
• inherit

richness：

• <number>
• inherit

停頓和提示

停頓：pause-before、pause-after：

• <time>
• <percentage>
• inherit

pause：

• [[<time> | <percentage>]{1,2}]
• inherit

提示：cue-before、cue-after：

• <uri>
• none（預設值）
• inherit

cue：

• [<cue-before> || <cue-after>]
• inherit

停頓、提示和生成內容

h1 {cue: url(trumpet.mp3);}
h1:before {content: "Behold! ";}
h1:after {content: ". Verily!";}
<h1>The Beginning</h1>

背景聲音

play-during：

• <uri>
• [mix || repeat]?
• auto
• none
• inherit

聲音定位

azimuth：

• <angle>
• [[left-side | far-left | left | center-left | center | center-right | right | far-right | right-side] || behind]
• leftwards
• rightwards
• inherit

角度值可以有3種單位：deg（度）、grad（梯度）和rad（弧度）。

elevation：

• <angle>
• below
• level
• above
• higher
• lower
• inherit

結合azimuth和elevation

可以實現立體環繞了。