CSS

Cascading Style Sheets(串接樣式表)

選擇器

選擇器	例子	例子描述	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 須依如上順序定義

語法

特殊字元

編碼	不換行	用於 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>之間有效

顏色

(一)十六進位顏色

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

#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>
元素一
元素二

水平置中

母元素 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