檢視 CSS 的原始碼

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

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

#空格：
#*&amp;#32;：十六進制20
#*&amp;nbsp;：不換行空格(No-Break Space)，值160(十六進制A0)
#&amp;#9;：TAB，只在&lt;PRE&gt;...&lt;/PRE&gt;之間有效
#&amp;#10;：換行，只在&lt;PRE&gt;...&lt;/PRE&gt;之間有效

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

 #RRGGBB

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

例如：
#紅色的十六進位顏色表現形式為：#FF0000<br/>RR為FF，GG為00，BB為00。
#綠色的十六進位顏色表現形式為：#00FF00<br/>RR為00，GG為FF，BB為00。
#藍色的十六進位顏色表現形式為：#0000FF<br/>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%)

====(三)基本色====
<table class=nicetable>
<tr><th>Color</th><th>Color Name</th><th>HEX</th><th>RGB</th></tr>
<tr><td style='background:black;'>&nbsp;</td><td><dfn>black</dfn></td><td>#000000</td><td>0,0,0</td></tr>
<tr><td style='background:silver;'>&nbsp;</td><td><dfn>silver</dfn></td><td>#C0C0C0</td><td>192,192,192</td></tr>
<tr><td style='background:gray;'>&nbsp;</td><td><dfn>gray</dfn></td><td>#808080</td><td>128,128,128</td></tr>
<tr><td style='background:white;'>&nbsp;</td><td><dfn>white</dfn></td><td>#FFFFFF</td><td>255,255,255</td></tr>
<tr><td style='background:maroon;'>&nbsp;</td><td><dfn>maroon</dfn></td><td>#800000</td><td>128,0,0</td></tr>
<tr><td style='background:red;'>&nbsp;</td><td><dfn>red</dfn></td><td>#FF0000</td><td>255,0,0</td></tr>
<tr><td style='background:purple;'>&nbsp;</td><td><dfn>purple</dfn></td><td>#800080</td><td>128,0,128</td></tr>
<tr><td style='background:fuchsia;'>&nbsp;</td><td><dfn>fuchsia</dfn></td><td>#FF00FF</td><td>255,0,255</td></tr>
<tr><td style='background:green;'>&nbsp;</td><td><dfn>green</dfn></td><td>#008000</td><td>0,128,0</td></tr>
<tr><td style='background:lime;'>&nbsp;</td><td><dfn>lime</dfn></td><td>#00FF00</td><td>0,255,0</td></tr>
<tr><td style='background:olive;'>&nbsp;</td><td><dfn>olive</dfn></td><td>#808000</td><td>128,128,0</td></tr>
<tr><td style='background:yellow;'>&nbsp;</td><td><dfn>yellow</dfn></td><td>#FFFF00</td><td>255,255,0</td></tr>
<tr><td style='background:navy;'>&nbsp;</td><td><dfn>navy</dfn></td><td>#000080</td><td>0,0,128</td></tr>
<tr><td style='background:blue;'>&nbsp;</td><td><dfn>blue</dfn></td><td>#0000FF</td><td>0,0,255</td></tr>
<tr><td style='background:teal;'>&nbsp;</td><td><dfn>teal</dfn></td><td>#008080</td><td>0,128,128</td></tr>
<tr><td style='background:aqua;'>&nbsp;</td><td><dfn>aqua</dfn></td><td>#00FFFF</td><td>0,255,255</td></tr>
</table>
====(四)系統色(CSS3後不建議再使用)====
<table class='nicetable'>
<tr><th>Color</th><th>Color Name</th></tr>
<tr><td style='background:activeborder;'>&nbsp;</td><td><dfn>activeborder</dfn></td></tr>
<tr><td style='background:activecaption;'>&nbsp;</td><td><dfn>activecaption</dfn></td></tr>
<tr><td style='background:appworkspace;'>&nbsp;</td><td><dfn>appworkspace</dfn></td></tr>
<tr><td style='background:background;'>&nbsp;</td><td><dfn>background</dfn></td></tr>
<tr><td style='background:buttonface;'>&nbsp;</td><td><dfn>buttonface</dfn></td></tr>
<tr><td style='background:buttonhighlight;'>&nbsp;</td><td><dfn>buttonhighlight</dfn></td></tr>
<tr><td style='background:buttonshadow;'>&nbsp;</td><td><dfn>buttonshadow</dfn></td></tr>
<tr><td style='background:buttontext;'>&nbsp;</td><td><dfn>buttontext</dfn></td></tr>
<tr><td style='background:captiontext;'>&nbsp;</td><td><dfn>captiontext</dfn></td></tr>
<tr><td style='background:graytext;'>&nbsp;</td><td><dfn>graytext</dfn></td></tr>
<tr><td style='background:highlight;'>&nbsp;</td><td><dfn>highlight</dfn></td></tr>
<tr><td style='background:highlighttext;'>&nbsp;</td><td><dfn>highlighttext</dfn></td></tr>
<tr><td style='background:inactiveborder;'>&nbsp;</td><td><dfn>inactiveborder</dfn></td></tr>
<tr><td style='background:inactivecaption;'>&nbsp;</td><td><dfn>inactivecaption</dfn></td></tr>
<tr><td style='background:inactivecaptiontext;'>&nbsp;</td><td><dfn>inactivecaptiontext</dfn></td></tr>
<tr><td style='background:infobackground;'>&nbsp;</td><td><dfn>infobackground</dfn></td></tr>
<tr><td style='background:infotext;'>&nbsp;</td><td><dfn>infotext</dfn></td></tr>
<tr><td style='background:menu;'>&nbsp;</td><td><dfn>menu</dfn></td></tr>
<tr><td style='background:menutext;'>&nbsp;</td><td><dfn>menutext</dfn></td></tr>
<tr><td style='background:scrollbar;'>&nbsp;</td><td><dfn>scrollbar</dfn></td></tr>
<tr><td style='background:threeddarkshadow;'>&nbsp;</td><td><dfn>threeddarkshadow</dfn></td></tr>
<tr><td style='background:threedface;'>&nbsp;</td><td><dfn>threedface</dfn></td></tr>
<tr><td style='background:threedhighlight;'>&nbsp;</td><td><dfn>threedhighlight</dfn></td></tr>
<tr><td style='background:threedlightshadow;'>&nbsp;</td><td><dfn>threedlightshadow</dfn></td></tr>
<tr><td style='background:threedshadow;'>&nbsp;</td><td><dfn>threedshadow</dfn></td></tr>
<tr><td style='background:window;'>&nbsp;</td><td><dfn>window</dfn></td></tr>
<tr><td style='background:windowframe;'>&nbsp;</td><td><dfn>windowframe</dfn></td></tr>
<tr><td style='background:windowtext;'>&nbsp;</td><td><dfn>windowtext</dfn></td></tr>
</table>

===表格(table)===
*[http://css-teach.7happy.com.tw/css-table.php 文件]
===display===
*display:block：區塊，元素會以區塊方式呈現，除非設定 position 或 float。
*#可以設定高度(height)、寬度(width)、上方與下方距離
*#div、p、ul、li 均屬 block。
*display:inline：所有文字或圖片均不換行，也就是全部都會是同一行的意思。
*#高度與寬度都不能設定，文字或圖片所佔的寬度就是他的寬度
*#span、a、input、img、em 均屬 inline。
*display:table-cell：假裝表格，其中的子元素可以輕易垂直置中
範例一：
#&lt;div style= 'display:block'&gt;元素一&lt;/div&gt;<br/>&lt;div style= 'display:block'&gt;元素二&lt;/div&gt;
#<div style= 'display:block'>元素一</div><div style= 'display:block'>元素二</div>
範例二：
#&lt;div style= 'display:inline'&gt;元素一&lt;/div&gt;<br/>&lt;div style= 'display:inline'&gt;元素二&lt;/div&gt;
#<div style= 'display:inline'>元素一</div><div style= 'display:inline'>元素二</div>

===水平置中===
#母元素 text-align:center 子元素的 display 為 inline、inline-block
#母子元素均為 block ，第一個子元素設 float:left;margin-left:calc(50%&nbsp;-&nbsp;適當值px); ，calc()中的減號前後都要有空白

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

範例一：Div設 height 、 line-height 設同值，文字自然會垂直置中
#&lt;DIV style='width:200px;height:100px;line-height:100px;background:#CF9;text-align:center;'&gt;<br/>測試文字垂直置中<br/>&lt;/DIV&gt;
#<DIV style='width:200px;height:100px;line-height:100px;background-color:#CF9;text-align:center;'>測試文字垂直置中</DIV>
範例二：外層 Div 的 height 、 line-height 設不同值，並不會置中
#&lt;Div style='width:200px;height:100px;line-height:150px;border:1px solid #000;text-align:center;'&gt;<br/>&lt;div style='display:inline-block;width:30px;height:30px;background:#c00;'&gt;&lt;/div&gt;<br/>&lt;/Div&gt;
#<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 雖然是垂直置中，不過卻是指<b>在外框內的所有元素垂直位置互相置中</b>，並不是相對於外框的高度垂直置中。
#&lt;Div style='width:200px;height:100px;border:1px solid #000;text-align:center;'&gt;<br/>&lt;div style='width:30px;height:30px;background:#c00;display:inline-block;vertical-align:middle;'&gt;&lt;/div&gt;<br/>&lt;div style='width:30px;height:60px;background:#0c0;display:inline-block;vertical-align:middle;'&gt;&lt;/div&gt;<br/>&lt;div style='width:30px;height:40px;background:#00f;display:inline-block;vertical-align:middle;'&gt;&lt;/div&gt;<br/>&lt;/Div&gt;
#<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%，那麼其他的方塊就會真正的垂直置中。
#&lt;Div style='width:200px;height:100px;border:1px solid #000;text-align:center;'&gt;<br/>&lt;div style='width:30px;height:30px;background:#c00;display:inline-block;vertical-align:middle;'&gt;&lt;/div&gt;<br/>&lt;div style='width:30px;height:100%;background:#0c0;display:inline-block;vertical-align:middle;'&gt;&lt;/div&gt;<br/>&lt;div style='width:30px;height:40px;background:#00f;display:inline-block;vertical-align:middle;'&gt;&lt;/div&gt;<br/>&lt;/Div&gt;
#<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{<br/>  width:0;content:<nowiki>''</nowiki>;<br/>  vertical-align:middle;height:100%;<br/>  display:inline-block;position:relative;<br/>}
#<Div class=div0 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>

====(三)動態計算====
不是處處都能用 inline-block，block也可使用 top 樣式來垂直置中，其值為 calc(50%&nbsp;-&nbsp;半高px)：
#calc 為動態計算，50% 代表母元素高度之半，「-」是減號，前後都必須是空白，再減去自身高度之半。
#自身元素的 position 必須為 relative，不然 top 失去作用
#只能用 top 不能用 margin-top ，因為 margin-top 的 50% 代表的是母元素的寬度之半。
#float:left;是各相鄰區塊向左漂移靠攏；第一個區塊取適當的左距。
依以上要領實作如下：
#&lt;Div style='width:200px;height:100px;border:1px solid #000;'&gt;<br/>&lt;div style='width:30px;height:30px;background:#c00;position:relative;top:calc(50%&nbsp;-&nbsp;15px);float:left;margin-left:calc(50% - 45px);'&gt;&lt;/div&gt;<br/>&lt;div style='width:30px;height:60px;background:#0c0;position:relative;top:calc(50%&nbsp;-&nbsp;30px);float:left;'&gt;&lt;/div&gt;<br/>&lt;div style='width:30px;height:40px;background:#00f;position:relative;top:calc(50%&nbsp;-&nbsp;20px);float:left;'&gt;&lt;/div&gt;<br/>&lt;/Div&gt;<br/>
#<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; ，其子元素就會置中。
#&lt;Div style='width:200px;height:100px;display:table-cell;vertical-align:middle;border:1px solid #000;text-align:center;'&gt;<br/>假表格垂直置中<br/>&lt;/Div&gt;
#<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;自動置中
#<pre>&lt;Div style='position:relative;width:200px;height:100px;border:1px solid #000;'&gt;&#10;&#9;&lt;div style='position:absolute;margin:auto;top:0;right:0;bottom:0;left:0;width:100px;height:50px;background:#f60;'&gt;&lt;/div&gt;&#10;&lt;/Div&gt;</pre>
#<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
依以上要領實作如下：
#&lt;Div style='width:200px;height:100px;border:1px solid #000;text-align:center;'&gt;<br/>&lt;div style='top:50%;transform:translateY(-50%);position:relative;width:100px;height:50px;background:#095;display:inline-block;'&gt;&lt;/div&gt;<br/>&lt;/Div&gt;
#<Div style='width:200px;height:100px;border:1px solid #000;text-align:center;'><div style='top:50%;transform:translateY(-50%);position:relative;width:100px;height:50px;background:#095;display:inline-block;'></div></Div>

====(七)flexbox CSS3====
display 設 flex、垂直 align-items 設 center、水平 justify-content 設 center：
#&lt;Div style='display:flex;align-items:center;justify-content:center;width:200px;height:100px;border:1px solid #000;'&gt;<br/>&lt;div style='width:100px;height:50px;background:#099;'&gt;&lt;/div&gt;<br/>&lt;/Div&gt;
#<Div style='display:flex;align-items:center;justify-content:center;width:200px;height:100px;border:1px solid #000;'><div style='width:100px;height:50px;background:#099;'></div></Div>