CSS：修訂版本之間的差異

2024年7月7日 (日) 16:40的最新修訂版本

Cascading Style Sheets(串接樣式表)

選擇器

一、多選擇器

(一)定義

.one .two{}：兩個 class 之間有空格，必須要是在 one 裡面的 two，才會被選擇到。
.one.two{}：兩個 class 中沒有空格，對象必須同時具有 one 和 two 的 class 時，才能被 CSS 選擇到到。
.one,.two{}：兩個 class 中出現逗號，是指對象有 class one 或有 class two，都會被 CSS 選擇到。

(二)引用

<div class='one two'>同時有 one 和 two</div>
<div class='one'><div class='two'>one 裡面的 two</div></div>

二、列表

選擇器	例子	例子描述	CSS
.class	.intro	選擇 class='intro' 的所有元素。	1
#id	#firstname	選擇 id='firstname' 的所有元素。	1
*	*	選擇所有元素。	2
element	p	選擇所有 <p> 元素。	1
element,element	div,p	選擇所有 <div> 元素和所有 <p> 元素。	1
element element	div p	選擇 <div> 元素內部的所有 <p> 元素。	1
element>element	div>p	選擇父元素為 <div> 元素的所有 <p> 元素。	2
element+element	div+p	選擇緊接在 <div> 元素之後的所有 <p> 元素。	2
[attribute]	[target]	選擇帶有 target 屬性所有元素。	2
[attribute=value]	[target=_blank]	選擇 target='_blank' 的所有元素。	2
[attribute~=value]	[title~=flower]	選擇 title 屬性包含單詞 'flower' 的所有元素。	2
[attribute\|=value]	[lang\|=en]	選擇 lang 屬性值以 'en' 開頭的所有元素。	2
:link	a:link	選擇所有未被訪問的鏈接。	1
:visited	a:visited	選擇所有已被訪問的鏈接。	1
:active	a:active	選擇活動鏈接。	1
:hover	a:hover	選擇鼠標指針位於其上的鏈接。	1
:focus	input:focus	選擇獲得焦點的 input 元素。	2
:first-letter	p:first-letter	選擇每個 <p> 元素的首字母。	1
:first-line	p:first-line	選擇每個 <p> 元素的首行。	1
:first-child	p:first-child	選擇屬於父元素的第一個子元素的每個 <p> 元素。	2
:before	p:before	在每個 <p> 元素的內容之前插入內容。	2
:after	p:after	在每個 <p> 元素的內容之後插入內容。	2
:lang(language)	p:lang(it)	選擇帶有以 'it' 開頭的 lang 屬性值的每個 <p> 元素。	2
element1~element2	p~ul	選擇前面有 <p> 元素的每個 <ul> 元素。	3
[attribute^=value]	a[src^='https']	選擇其 src 屬性值以 'https' 開頭的每個 <a> 元素。	3
[attribute$=value]	a[src$='.pdf']	選擇其 src 屬性以 '.pdf' 結尾的所有 <a> 元素。	3
[attribute=value*]	a[src*='abc']	選擇其 src 屬性中包含 'abc' 子串的每個 <a> 元素。	3
:first-of-type	p:first-of-type	選擇屬於其父元素的首個 <p> 元素的每個 <p> 元素。	3
:last-of-type	p:last-of-type	選擇屬於其父元素的最後 <p> 元素的每個 <p> 元素。	3
:only-of-type	p:only-of-type	選擇屬於其父元素唯一的 <p> 元素的每個 <p> 元素。	3
:only-child	p:only-child	選擇屬於其父元素的唯一子元素的每個 <p> 元素。	3
:nth-child(n)	p:nth-child(2)	選擇屬於其父元素的第二個子元素的每個 <p> 元素。	3
:nth-last-child(n)	p:nth-last-child(2)	同上，從最後一個子元素開始計數。	3
:nth-of-type(n)	p:nth-of-type(2)	選擇屬於其父元素第二個 <p> 元素的每個 <p> 元素。	3
:nth-last-of-type(n)	p:nth-last-of-type(2)	同上，但是從最後一個子元素開始計數。	3
:last-child	p:last-child	選擇屬於其父元素最後一個子元素每個 <p> 元素。	3
:root	:root	選擇文檔的根元素。	3
:empty	p:empty	選擇沒有子元素的每個 <p> 元素（包括文本節點）。	3
:target	#news:target	選擇當前活動的 #news 元素。	3
:enabled	input:enabled	選擇每個啟用的 <input> 元素。	3
:disabled	input:disabled	選擇每個禁用的 <input> 元素	3
:checked	input:checked	選擇每個被選中的 <input> 元素。	3
:not(selector)	:not(p)	選擇非 <p> 元素的每個元素。	3
::selection	::selection	選擇被用戶選取的元素部分。	3

a:link / a:visited / a:hover / a:active 須依如上順序定義，a:hover 需放置在 a:link 跟 a:visited 之後， a:active 放置在 a:hover 之後。

CSS 簡表

'CSS' 列指示該屬性是在哪個 CSS 版本（CSS1、CSS2 或 CSS3）中定義的。

CSS3 動畫屬性（Animation）

屬性	描述	CSS
@keyframes	規定動畫。	3
animation	所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。	3
animation-name	規定 @keyframes 動畫的名稱。	3
animation-duration	規定動畫完成一個週期所花費的秒或毫秒。	3
animation-timing-function	規定動畫的速度曲線。	3
animation-delay	規定動畫何時開始。	3
animation-iteration-count	規定動畫被播放的次數。	3
animation-direction	規定動畫是否在下一週期逆向地播放。	3
animation-play-state	規定動畫是否正在運行或暫停。	3
animation-fill-mode	規定對像動畫時間之外的狀態。	3

CSS 背景屬性（Background）

屬性	描述	CSS
background	在一個聲明中設置所有的背景屬性。	1
background-attachment	設置背景圖像是否固定或者隨著頁面的其餘部分滾動。	1
background-color	設置元素的背景顏色。	1
background-image	設置元素的背景圖像。	1
background-position	設置背景圖像的開始位置。	1
background-repeat	設置是否及如何重複背景圖像。	1
background-clip	規定背景的繪製區域。	3
background-origin	規定背景圖片的定位區域。	3
background-size	規定背景圖片的尺寸。	3

CSS 邊框屬性（Border 和 Outline）

屬性	描述	CSS
border	在一個聲明中設置所有的邊框屬性。	1
border-bottom	在一個聲明中設置所有的下邊框屬性。	1
border-bottom-color	設置下邊框的顏色。	2
border-bottom-style	設置下邊框的樣式。	2
border-bottom-width	設置下邊框的寬度。	1
border-color	設置四條邊框的顏色。	1
border-left	在一個聲明中設置所有的左邊框屬性。	1
border-left-color	設置左邊框的顏色。	2
border-left-style	設置左邊框的樣式。	2
border-left-width	設置左邊框的寬度。	1
border-right	在一個聲明中設置所有的右邊框屬性。	1
border-right-color	設置右邊框的顏色。	2
border-right-style	設置右邊框的樣式。	2
border-right-width	設置右邊框的寬度。	1
border-style	設置四條邊框的樣式。	1
border-top	在一個聲明中設置所有的上邊框屬性。	1
border-top-color	設置上邊框的顏色。	2
border-top-style	設置上邊框的樣式。	2
border-top-width	設置上邊框的寬度。	1
border-width	設置四條邊框的寬度。	1
outline	在一個聲明中設置所有的輪廓屬性。	2
outline-color	設置輪廓的顏色。	2
outline-style	設置輪廓的樣式。	2
outline-width	設置輪廓的寬度。	2
border-bottom-left-radius	定義邊框左下角的形狀。	3
border-bottom-right-radius	定義邊框右下角的形狀。	3
border-image	簡寫屬性，設置所有 border-image-* 屬性。	3
border-image-outset	規定邊框圖像區域超出邊框的量。	3
border-image-repeat	圖像邊框是否應平鋪(repeated)、鋪滿(rounded)或拉伸(stretched)。	3
border-image-slice	規定圖像邊框的向內偏移。	3
border-image-source	規定用作邊框的圖片。	3
border-image-width	規定圖片邊框的寬度。	3
border-radius	簡寫屬性，設置所有四個 border-*-radius 屬性。	3
border-top-left-radius	定義邊框左上角的形狀。	3
border-top-right-radius	定義邊框右下角的形狀。	3
box-decoration-break		3
box-shadow	向方框添加一個或多個陰影。	3

Box 屬性

屬性	描述	CSS
overflow-x	如果內容溢出了元素內容區域，是否對內容的左/右邊緣進行裁剪。	3
overflow-y	如果內容溢出了元素內容區域，是否對內容的上/下邊緣進行裁剪。	3
overflow-style	規定溢出元素的首選滾動方法。	3
rotation	圍繞由 rotation-point 屬性定義的點對元素進行旋轉。	3
rotation-point	定義距離上左邊框邊緣的偏移點。	3

Color 屬性

屬性	描述	CSS
color-profile	允許使用源的顏色配置文件的默認以外的規範。	3
opacity	規定元素的不透明級別。	3
rendering-intent	允許使用顏色配置文件渲染意圖的默認以外的規範。	3

Content for Paged Media 屬性

屬性	描述	CSS
bookmark-label	規定書籤的標記。	3
bookmark-level	規定書籤的級別。	3
bookmark-target	規定書籤鏈接的目標。	3
float-offset	將元素放在 float 屬性通常放置的位置的相反方向。	3
hyphenate-after	規定連字單詞中連字符之後的最小字符數。	3
hyphenate-before	規定連字單詞中連字符之前的最小字符數。	3
hyphenate-character	規定當發生斷字時顯示的字符串。	3
hyphenate-lines	指示元素中連續斷字連線的最大數。	3
hyphenate-resource	規定幫助瀏覽器確定斷字點的外部資源（逗號分隔的列表）。	3
hyphens	設置如何對單詞進行拆分，以改善段落的佈局。	3
image-resolution	規定圖像的正確分辨率。	3
marks	向文檔添加裁切標記或十字標記。	3
string-set		3

CSS 尺寸屬性（Dimension）

屬性	描述	CSS
height	設置元素高度。	1
max-height	設置元素的最大高度。	2
max-width	設置元素的最大寬度。	2
min-height	設置元素的最小高度。	2
min-width	設置元素的最小寬度。	2
width	設置元素的寬度。	1

可伸縮框屬性（Flexible Box）

屬性	描述	CSS
box-align	規定如何對齊框的子元素。	3
box-direction	規定框的子元素的顯示方向。	3
box-flex	規定框的子元素是否可伸縮。	3
box-flex-group	將可伸縮元素分配到柔性分組。	3
box-lines	規定當超出父元素框的空間時，是否換行顯示。	3
box-ordinal-group	規定框的子元素的顯示次序。	3
box-orient	規定框的子元素是否應水平或垂直排列。	3
box-pack	規定水平框中的水平位置或者垂直框中的垂直位置。	3

CSS 字體屬性（Font）

屬性	描述	CSS
font	在一個聲明中設置所有字體屬性。	1
font-family	規定文本的字體系列。	1
font-size	規定文本的字體尺寸。	1
font-size-adjust	為元素規定 aspect 值。	2
font-stretch	收縮或拉伸當前的字體： normal:正常 wider:更寬 narrower:更窄 ultra-condensed:超瘦 extra-condensed:很瘦 condensed:瘦 semi-condensed:半瘦 semi-expanded:半擴大 expanded:擴大 extra-expanded:很脹 ultra-expanded:超脹	2
font-style	規定文本的字體樣式。	1
font-variant	規定是否以小型大寫字母的字體顯示文本。	1
font-weight	規定字體的粗細。	1

內容生成（Generated Content）

屬性	描述	CSS
content	與 :before 以及 :after 偽元素配合使用，來插入生成內容。	2
counter-increment	遞增或遞減一個或多個計數器。	2
counter-reset	創建或重置一個或多個計數器。	2
quotes	設置嵌套引用的引號類型。	2
crop	允許被替換元素僅僅是對象的矩形區域，而不是整個對象。	3
move-to	從流中刪除元素，然後在文檔中後面的點上重新插入。	3
page-policy	確定元素基於頁面的 occurrence 應用於計數器還是字符串值。	3

Grid 屬性

屬性	描述	CSS
grid-columns	規定網格中每個列的寬度。	3
grid-rows	規定網格中每個列的高度。	3

Hyperlink 屬性

屬性	描述	CSS
target	簡寫屬性，設置target-name、target-new以及target-position屬性。	3
target-name	規定在何處打開鏈接（鏈接的目標）。	3
target-new	規定目標鏈接在新窗口還是在已有窗口的新標籤頁中打開。	3
target-position	規定在何處放置新的目標鏈接。	3

CSS 列表屬性（List）

屬性	描述	CSS
list-style	在一個聲明中設置所有的列表屬性。	1
list-style-image	將圖像設置為列表項標記。	1
list-style-position	設置列表項標記的放置位置。	1
list-style-type	設置列表項標記的類型。	1
marker-offset		2

CSS 外邊距屬性（Margin）

屬性	描述	CSS
margin	在一個聲明中設置所有外邊距屬性。	1
margin-bottom	設置元素的下外邊距。	1
margin-left	設置元素的左外邊距。	1
margin-right	設置元素的右外邊距。	1
margin-top	設置元素的上外邊距。	1

Marquee 屬性

屬性	描述	CSS
marquee-direction	設置移動內容的方向。	3
marquee-play-count	設置內容移動多少次。	3
marquee-speed	設置內容滾動得多快。	3
marquee-style	設置移動內容的樣式。	3

多列屬性（Multi-column）

屬性	描述	CSS
column-count	規定元素應該被分隔的列數。	3
column-fill	規定如何填充列。	3
column-gap	規定列之間的間隔。	3
column-rule	設置所有 column-rule-* 屬性的簡寫屬性。	3
column-rule-color	規定列之間規則的顏色。	3
column-rule-style	規定列之間規則的樣式。	3
column-rule-width	規定列之間規則的寬度。	3
column-span	規定元素應該橫跨的列數。	3
column-width	規定列的寬度。	3
columns	規定設置 column-width 和 column-count 的簡寫屬性。	3

CSS 內邊距屬性（Padding）

屬性	描述	CSS
padding	在一個聲明中設置所有內邊距屬性。	1
padding-bottom	設置元素的下內邊距。	1
padding-left	設置元素的左內邊距。	1
padding-right	設置元素的右內邊距。	1
padding-top	設置元素的上內邊距。	1

Paged Media 屬性

屬性	描述	CSS
fit	示意如何對width和height屬性均不是auto的被替換元素進行縮放。	3
fit-position	定義盒內對象的對齊方式。	3
image-orientation	規定用戶代理應用於圖像的順時針方向旋轉。	3
page	規定元素應該被顯示的頁面特定類型。	3
size	規定頁面內容包含框的尺寸和方向。	3

CSS 定位屬性（Positioning）

屬性	描述	CSS
bottom	設置定位元素下外邊距邊界與其包含塊下邊界之間的偏移。	2
clear	規定元素的哪一側不允許其他浮動元素。	1
clip	剪裁絕對定位元素。	2
cursor	規定要顯示的光標的類型（形狀）。	2
display	規定元素應該生成的框的類型。	1
float	規定框是否應該浮動。	1
left	設置定位元素左外邊距邊界與其包含塊左邊界之間的偏移。	2
overflow	規定當內容溢出元素框時發生的事情。	2
position	規定元素的定位類型。	2
right	設置定位元素右外邊距邊界與其包含塊右邊界之間的偏移。	2
top	設置定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。	2
vertical-align	設置元素的垂直對齊方式。	1
visibility	規定元素是否可見。	2
z-index	設置元素的堆疊順序。	2

CSS 打印屬性（Print）

屬性	描述	CSS
orphans	設置當元素內部發生分頁時必須在頁面底部保留的最少行數。	2
page-break-after	設置元素後的分頁行為。	2
page-break-before	設置元素前的分頁行為。	2
page-break-inside	設置元素內部的分頁行為。	2
widows	設置當元素內部發生分頁時必須在頁面頂部保留的最少行數。	2

CSS 表格屬性（Table）

屬性	描述	CSS
border-collapse	規定是否合併表格邊框。separate(預設):分開，collapse:合併	2
border-spacing	規定相鄰單元格邊框之間的距離。	2
caption-side	規定表格標題的位置。	2
empty-cells	規定是否顯示表格中的空單元格上的邊框和背景。	2
table-layout	設置用於表格的佈局算法。	2

CSS 文本屬性（Text）

屬性	描述	CSS
color	設置文本的顏色。	1
direction	規定文本的方向 / 書寫方向。	2
letter-spacing	設置字符間距。	1
line-height	設置行高。	1
text-align	規定文本的水平對齊方式。 text-align:center 只能讓 inline 元素居中，而不能讓 block 元素居中；設定 margin:auto 才可以讓內部的 block 元素居中。但 text-align:-webkit-center 或 -moz-center 或 -ms-center 可以讓其中的 block 元素也居中； ※webkit 是 Safari 的引擎	1
text-align	規定文本的水平對齊方式。	1
text-indent	規定文本塊首行的縮進。	1
text-shadow	規定添加到文本的陰影效果。	2
text-transform	控制文本的大小寫。	1
unicode-bidi	設置文本方向。	2
white-space	規定如何處理元素中的空白。	1
word-spacing	設置單詞間距。	1
hanging-punctuation	規定標點字符是否位於線框之外。	3
punctuation-trim	規定是否對標點字符進行修剪。	3
text-align-last	設置如何對齊最後一行或緊挨著強制換行符之前的行。	3
text-emphasis	向元素的文本應用重點標記以及重點標記的前景色。	3
text-justify	規定當 text-align 設置為 'justify' 時所使用的對齊方法。	3
text-outline	規定文本的輪廓。	3
text-overflow	規定當文本溢出包含元素時發生的事情。	3
text-shadow	向文本添加陰影。	3
text-wrap	規定文本的換行規則。	3
word-break	規定非中日韓文本的換行規則。	3
word-wrap	允許對長的不可分割的單詞進行分割並換行到下一行。	3

2D/3D 轉換屬性（Transform）

屬性	描述	CSS
transform	向元素應用 2D 或 3D 轉換。	3
transform-origin	允許你改變被轉換元素的位置。	3
transform-style	規定被嵌套元素如何在 3D 空間中顯示。	3
perspective	規定 3D 元素的透視效果。	3
perspective-origin	規定 3D 元素的底部位置。	3
backface-visibility	定義元素在不面對屏幕時是否可見。	3

過渡屬性（Transition）

屬性	描述	CSS
transition	簡寫屬性，用於在一個屬性中設置四個過渡屬性。	3
transition-property	規定應用過渡的 CSS 屬性的名稱。	3
transition-duration	定義過渡效果花費的時間。	3
transition-timing-function	規定過渡效果的時間曲線。	3
transition-delay	規定過渡效果何時開始。	3

用戶界面屬性（User-interface）

屬性	描述	CSS
appearance	允許您將元素設置為標準用戶界面元素的外觀	3
box-sizing	允許您以確切的方式定義適應某個區域的具體內容。	3
icon	為創作者提供使用圖標化等價物來設置元素樣式的能力。	3
nav-down	規定在使用 arrow-down 導航鍵時向何處導航。	3
nav-index	設置元素的 tab 鍵控制次序。	3
nav-left	規定在使用 arrow-left 導航鍵時向何處導航。	3
nav-right	規定在使用 arrow-right 導航鍵時向何處導航。	3
nav-up	規定在使用 arrow-up 導航鍵時向何處導航。	3
outline-offset	對輪廓進行偏移，並在超出邊框邊緣的位置繪製輪廓。	3
resize	規定是否可由用戶對元素的尺寸進行調整。	3

單位

單位	描述
%	百分比
in	英吋
cm	厘米
mm	毫米
em	1em 等於當前的字體尺寸。 2em 等於當前字體尺寸的兩倍。例如，如果某元素以 12pt 顯示，那麼 2em 是24pt。在 CSS 中，em 是非常有用的單位，因為它可以自動適應用戶所使用的字體。
ex	一個 ex 是一個字體的 x-height。 (x-height 通常是字體尺寸的一半。)
pt	磅 (1 pt 等於 1/72 英吋)
pc	12 點活字 (1 pc 等於 12 點)
px	像素 (計算機屏幕上的一個點)

語法

特殊字元

編碼	不換行	用於 URL	HTML	名稱	區域	顯示
U+0020 (32)				空格	基本拉丁	] [
U+0020 (32)	普通半形空格，同 ASCII 字元 0x20
U+00A0 (160)	✓			不換行空格(No-Break Space)	Latin-1 Supplement	] [
U+00A0 (160)	同 U+0020，但不換行
U+2002 (8194)			&ensp;	En 空格(En Space)或 Nut	一般標點	] [
U+2002 (8194)	與 en 同寬(em之一半)。
U+2003			&emsp;	Em 空格(Em Space)或 Mutton	一般標點	] [
U+2003	與 em 同寬。
U+2004				Em 三分之一空格(Three-Per-Em Space)或 Thick Space	一般標點	] [
U+2004	em 之三分之一寬
U+2005				Em 四分之一空格(Four-Per-Em Space)或 Mid Space	一般標點	] [
U+2005	em 之四分之一寬
U+2006				Em 六分之一空格(Six-Per-Em Space)	一般標點	] [
U+2006	em 之六分之一寬。電腦字型有時與 U+2009 等同。
U+2007	✓			數字空格(Figure Space)	一般標點	] [
U+2007	用於分隔數字之定位符，與單一數字同寬
U+2008				標點穴格	一般標點	] [
U+2008	與同字型之窄標點同寬，即句號或逗號(西方語文)之寬度
U+2009				窄空格(Thin Space)	一般標點	] [
U+2009	em 之六分之一(有時設計成五分之一)寬。建議用作 SI 單位數字之千位分隔符。與 U+2002 至 U+2008 不同，其寬可根據排版調整
U+200A				髮寬空格(Hair Space)	一般標點	] [
U+200A	窄於窄空格(thin space)
U+200B				零寬空格(Zero Width Space，簡稱「ZWSP」)	一般標點	][
U+200B
U+200C		✓	&zwnj;	零寬不連字(Zero Width Non Joiner，簡稱「ZWNJ」)	一般標點	]‌[
U+200C
U+200D		✓	&zwj;	零寬連字(Zero Width Joiner，簡稱「ZWJ」)	一般標點	]‍[
U+200D
U+202F	✓			窄式不換行空格(Narrow No-Break Space)	一般標點	] [
U+202F
U+205F				中數學空格(Medium Mathematical Space，簡稱「MMSP」)	一般標點	] [
U+205F	用於數學方程式。em 之 18 分之 4 寬在數學排版領域，空格寬度通常以十八份之幾的方式給定；4/18 em 可用於數個情況，例如數式 a + b 中 a 與 + 及 + 與 b 之間
U+2060	✓	✓		文字連接符(Word Joiner)	一般標點	]⁠[
U+2060	同 U+200B，但該處不能換行。Unicode 3.2 新增，以代替 U+FEFF 字元廢止之零寬不換行空格功能
U+3000 (12288)				表意文字空格	CJK 符號及標點	]　[
U+3000 (12288)	與 CJK 文字同寬(全形)
U+FEFF	✓	✓		零寬不換行空格(Zero Width No-Break Space) = 位元組順序記號(Byte Order Mark，簡稱「BOM」)	Arabic Presentation Forms-B	][
U+FEFF	主要用作位元組次序標記字元。原來之不換行指示功能於 Unicode 3.2 起廢止，代之以 U+2060。

空格：
-  ：十六進制20
-  ：不換行空格(No-Break Space)，值160(十六進制A0)
	：TAB，只在<PRE>...</PRE>之間有效

：換行，只在<PRE>...</PRE>之間有效

文字

font-size 文字大小

屬性值	語法	呈現效果
px	<span style='font-size:13px;'>13px</span><br> <span style='font-size:16px;'>16px</span><br> <span style='font-size:18px;'>18px</span>	13px 16px 18px
em	<span style='font-size:1em;'>1em</span><br> <span style='font-size:2em;'>2em</span>	1em 2em
cm	<span style='font-size:1cm;'>1cm</span><br> <span style='font-size:1.2cm;'>1.2cm</span><br>	1cm 1.2cm
xx-small	<span style='font-size:xx-small;'>xx-small</span>	xx-small
x-small	<span style='font-size:x-small;'>x-small</span>	x-small
small	<span style='font-size:small;'>small</span>	small，比預設尺寸小
smaller	<span style='font-size:smaller;'>smaller</span>	smaller，父元素的 80%
medium	<span style='font-size:medium;'>medium</span>	medium，預設尺寸
large	<span style='font-size:large;'>large</span>	large，比預設尺寸大
x-large	<span style='font-size:x-large;'>x-large</span>	x-large
xx-large	<span style='font-size:xx-large;'>xx-large</span>	xx-large
larger	<span style='font-size:larger;'>larger</span>	larger，父元素的 120%
%	<span style='font-size:100%;'>100%</span><br> <span style='font-size:120%;'>120%</span><br>	100% 120%
inherit	<span style='font-size:inherit;'>inherit</span>	inherit

large 表示絕對大小，是瀏覽器預設字體大小的 1.5 倍(這點可能因瀏覽器而異)。
larger 表示相對大小，是父元素字體大小的 1.2 倍(這點可能因瀏覽器而異)。

font-family 字形：分襯線、無襯線兩個大類，兩大類之下又可分手寫、夢幻、等寬。

襯線字(serif)：末端加粗、擴張或尖細末端，以文字末端的襯線結尾。在字號比較小時仍然好辨認，增強了可讀性。
典型的字型有：Times New Roman、MS Georgia、細明體……
衍生出兩種字型族：petit-serif(小襯線字型族，末端變化不明顯)、slab-serif(雕版襯線字型族，末端變化非常明顯)
無襯線字(sans-serif)：線條粗線均勻，末端圓滑，適合做藝術字、標題等，與「襯線字型」相比，如果字號比較小，看起來就會有些吃力。
典型的字型有：MS Trebuchet、MS Arial、MS Verdana、幼圓、隸書、楷體……
手寫字(cursive)：像手寫的。
典型的字型有：Caflisch Script、Adobe Poetica、迷你簡黃草、華文行草……
夢幻字(fantasy)：主要用在圖片中，字型看起來很藝術，實際網頁上用得不多。
典型的字型有：WingDings、WingDings 2、WingDings 3、Symbol……
等寬字(monospace)：英文字母不等寬， monospace 讓字母等寬，可以像中文一樣排版。
典型的字型有：Courier、MS Courier New、Prestige……

顏色

(一)十六進位顏色

這是最常用的一種顏色表現形式。十六進位顏色值的規定格式是：

#RRGGBB

RR表示紅色；GG表示綠色；BB表示藍色。它們的取值範圍都介於00～FF之間。

例如：

紅色的十六進位顏色表現形式為：#FF0000
RR為FF，GG為00，BB為00。
綠色的十六進位顏色表現形式為：#00FF00
RR為00，GG為FF，BB為00。
藍色的十六進位顏色表現形式為：#0000FF
RR為00，GG為00，BB為FF。

(二)RGB顏色

RGB顏色值的規定格式是：

RGB(x,x,x)

第一個x表示紅色；第二個x表示綠色；第三個x表示藍色。它們都可以定義為0～255之間的整數，或者百分比為0%～100%之間的整數。

例如：

紅色的RGB顏色值的表現形式為：RGB(255,0,0) 或者 RGB(100%,0%,0%)
綠色的RGB顏色值的表現形式為：RGB(0,255,0) 或者 RGB(0%,100%,0%)
藍色的RGB顏色值的表現形式為：RGB(0,0,255) 或者 RGB(0%,0%,100%)

(三)基本色

Color Name	HEX	RGB
black	#000000	0,0,0
silver	#C0C0C0	192,192,192
gray	#808080	128,128,128
white	#FFFFFF	255,255,255
maroon	#800000	128,0,0
red	#FF0000	255,0,0
purple	#800080	128,0,128
fuchsia	#FF00FF	255,0,255
green	#008000	0,128,0
lime	#00FF00	0,255,0
olive	#808000	128,128,0
yellow	#FFFF00	255,255,0
navy	#000080	0,0,128
blue	#0000FF	0,0,255
teal	#008080	0,128,128
aqua	#00FFFF	0,255,255

(四)系統色(CSS3後不建議再使用)

Color	Color Name
	activeborder
	activecaption
	appworkspace
	background
	buttonface
	buttonhighlight
	buttonshadow
	buttontext
	captiontext
	graytext
	highlight
	highlighttext
	inactiveborder
	inactivecaption
	inactivecaptiontext
	infobackground
	infotext
	menu
	menutext
	scrollbar
	threeddarkshadow
	threedface
	threedhighlight
	threedlightshadow
	threedshadow
	window
	windowframe
	windowtext

表格(table)

文件

display

display:block：區塊，元素會以區塊方式呈現，除非設定 position 或 float。
1. 可以設定高度(height)、寬度(width)、上方與下方距離
2. div、p、ul、li 均屬 block。
display:inline：所有文字或圖片均不換行，也就是全部都會是同一行的意思。
1. 高度與寬度都不能設定，文字或圖片所佔的寬度就是他的寬度
2. span、a、input、img、em 均屬 inline。
display:table-cell：假裝表格，其中的子元素可以輕易垂直置中

範例一：

<div style= 'display:block'>元素一</div>
<div style= 'display:block'>元素二</div>
元素一
元素二

範例二：

<div style= 'display:inline'>元素一</div>
<div style= 'display:inline'>元素二</div>
元素一
元素二

水平置中

樣式 margin:0px auto;(上下為 0，左右自動調整) 或屬性 align=center，兩者作用一樣。對 img 沒用，要將 img 裝進以下容器中才能水平置中。
母元素 div 設 style='width:100%;' ，子元素 table 設 align='center' (不是 style='text-align:center;')
母元素 th ，子元素 table 設 align=center
母元素 text-align:center 子元素的 display 為 inline、inline-block
母子元素均為 block ，第一個子元素設 float:left;margin-left:calc(50% - 適當值px); ，calc()中的減號前後都要有空白

垂直置中

(一)設定行高 ( line-height )

適用於子元素「單行」的「行內元素」( inline、inline-block )，例如單行的標題，或是已經設為 inline-block 屬性的 div。若將母元素的 line-height 設成和高度一樣的數值，則母元素內部的行內元素就會被垂直置中。因為是行高，所以會在行內元素的上下都加上行高的 1/2 ，所以就垂直置中了！不過由此就可以看出，為什麼必須要單行的行內元素，因為如果多行，第二行與第一行的間距會變超大，就不是我們所期望的效果了。

範例一：Div設 height 、 line-height 設同值，文字自然會垂直置中

<DIV style='width:200px;height:100px;line-height:100px;background:#CF9;text-align:center;'>
測試文字垂直置中
</DIV>
測試文字垂直置中

範例二：外層 Div 的 height 、 line-height 設不同值，並不會置中

<Div style='width:200px;height:100px;line-height:150px;border:1px solid #000;text-align:center;'>
<div style='display:inline-block;width:30px;height:30px;background:#c00;'></div>
</Div>

(二)vertical-align

vertical-align 垂直方向的對齊，用於「圖照」或「表格欄位內的文字」垂直對齊效果，諸參數：

baseline：基礎線，約在文字的中間位置
sub：下標
super：上標
top：該行元素的最高處
text-top：該行文字的最高處
middle：置中
bottom：該行元素的最低處
text-bottom：該行文字的最低處
百分比(%)：以百分比來讓圖片垂直對齊該行文字，可以有負值

vertical-align:middle 雖然是垂直置中，不過卻是指在外框內的所有元素垂直位置互相置中，並不是相對於外框的高度垂直置中。

<Div style='width:200px;height:100px;border:1px solid #000;text-align:center;'>
<div style='width:30px;height:30px;background:#c00;display:inline-block;vertical-align:middle;'></div>
<div style='width:30px;height:60px;background:#0c0;display:inline-block;vertical-align:middle;'></div>
<div style='width:30px;height:40px;background:#00f;display:inline-block;vertical-align:middle;'></div>
</Div>

如果有一個方塊變成了高度 100%，那麼其他的方塊就會真正的垂直置中。

<Div style='width:200px;height:100px;border:1px solid #000;text-align:center;'>
<div style='width:30px;height:30px;background:#c00;display:inline-block;vertical-align:middle;'></div>
<div style='width:30px;height:100%;background:#0c0;display:inline-block;vertical-align:middle;'></div>
<div style='width:30px;height:40px;background:#00f;display:inline-block;vertical-align:middle;'></div>
</Div>

但是：

我們總不能每次要垂直置中，都要添加一個奇怪的 div 在裏頭
所以我們就使用「偽元素」 ::before 和 ::after 添加 div 進到框框內，
讓這個「偽」div的高度 100% 就可以輕鬆地讓其他的 div 都置中。
偽 div 的 display 須為 inline-block，畢竟 vertical-align:middle; 是針對行內元素

依上述要領實作如下，添置偽元素 ::before ：

.div0::before{
width:0;content:'';
vertical-align:middle;height:100%;
display:inline-block;position:relative;
}

(三)動態計算

不是處處都能用 inline-block，block也可使用 top 樣式來垂直置中，其值為 calc(50% - 半高px)：

calc 為動態計算，50% 代表母元素高度之半，「-」是減號，前後都必須是空白，再減去自身高度之半。
自身元素的 position 必須為 relative，不然 top 失去作用
只能用 top 不能用 margin-top ，因為 margin-top 的 50% 代表的是母元素的寬度之半。
float:left;是各相鄰區塊向左漂移靠攏；第一個區塊取適當的左距。

依以上要領實作如下：

<Div style='width:200px;height:100px;border:1px solid #000;'>
<div style='width:30px;height:30px;background:#c00;position:relative;top:calc(50% - 15px);float:left;margin-left:calc(50% - 45px);'></div>
<div style='width:30px;height:60px;background:#0c0;position:relative;top:calc(50% - 30px);float:left;'></div>
<div style='width:30px;height:40px;background:#00f;position:relative;top:calc(50% - 20px);float:left;'></div>
</Div>

(四)假裝表格

td 中下一行 vertical-align:middle 就可以垂直置中，而其 display 樣式是 table-cell 。所以我們只要將母元素設為 display:table-cell;vertical-align:middle; ，其子元素就會置中。

<Div style='width:200px;height:100px;display:table-cell;vertical-align:middle;border:1px solid #000;text-align:center;'>
假表格垂直置中
</Div>
假表格垂直置中

(五)margin:auto

母元素設 position:relative; ，子元素設 position:absolute;margin:auto;自動置中

<Div style='position:relative;width:200px;height:100px;border:1px solid #000;'>
	<div style='position:absolute;margin:auto;top:0;right:0;bottom:0;left:0;width:100px;height:50px;background:#f60;'></div>
</Div>

(六)垂直位移 CSS3

CSS3可以使用transform樣式，對子元素做如下操作：

用 top:50%; 下降母元素的 50% 。
用 transform:translateY(-50%) 上升子元素的 50% ， transform 管位移、旋轉、變形， translateY 為垂直位移
position:relative