CSS

Cascading Style Sheets(串接樣式表)

語法

特殊字元

 ：空格，但不是值爲32(十六進制20)，是值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