檢視 CSS 的原始碼

[[分類:HTML]]
Cascading Style Sheets(串接樣式表)
==選擇器==
===一、多選擇器===
====(一)定義====
#.one .two{}：兩個 class 之間有空格，必須要是在 one <u>裡面</u>的 two，才會被選擇到。
#.one.two{}：兩個 class 中沒有空格，對象必須<u>同時具有</u> one 和 two 的 class 時，才能被 CSS 選擇到到。
#.one,.two{}：兩個 class 中出現逗號，是指對象有 class one 或有 class two，都會被 CSS 選擇到。
====(二)引用====
 &lt;div class='one two'&gt;同時有 one 和 two&lt;/div&gt;
 &lt;div class='one'&gt;&lt;div class='two'&gt;one 裡面的 two&lt;/div&gt;&lt;/div&gt;

===二、列表===
<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 之後。

==CSS 簡表==
<p>'CSS' 列指示該屬性是在哪個 CSS 版本（CSS1、CSS2 或 CSS3）中定義的。</p>

<h3>CSS3 動畫屬性（Animation）</h3>
<table class='nicetable'>
<tr>
<th style='width:30%;'>屬性</th>
<th>描述</th>
<th style='width:5%;'>CSS</th>
</tr>
<tr>
<td>@keyframes</td>
<td>規定動畫。</td>
<td>3</td>
</tr>
<tr>
<td>animation</td>
<td>所有動畫屬性的簡寫屬性，除了 animation-play-state 屬性。</td>
<td>3</td>
</tr>
<tr>
<td>animation-name</td>
<td>規定 @keyframes 動畫的名稱。</td>
<td>3</td>
</tr>
<tr>
<td>animation-duration</td>
<td>規定動畫完成一個週期所花費的秒或毫秒。</td>
<td>3</td>
</tr>
<tr>
<td>animation-timing-function</td>
<td>規定動畫的速度曲線。</td>
<td>3</td>
</tr>
<tr>
<td>animation-delay</td>
<td>規定動畫何時開始。</td>
<td>3</td>
</tr>
<tr>
<td>animation-iteration-count</td>
<td>規定動畫被播放的次數。</td>
<td>3</td>
</tr>
<tr>
<td>animation-direction</td>
<td>規定動畫是否在下一週期逆向地播放。</td>
<td>3</td>
</tr>
<tr>
<td>animation-play-state</td>
<td>規定動畫是否正在運行或暫停。</td>
<td>3</td>
</tr>
<tr>
<td>animation-fill-mode</td>
<td>規定對像動畫時間之外的狀態。</td>
<td>3</td>
</tr>
</table>

<h3>CSS 背景屬性（Background）</h3>
<table class='nicetable'>
  <tr>
    <th style='width:30%;'>屬性</th>
    <th style='width:65%;'>描述</th>
    <th style='width:5%;'>CSS</th>
  </tr>
  <tr>
    <td>background</td>
    <td>在一個聲明中設置所有的背景屬性。</td>
    <td>1</td>
  </tr>
  <tr>
    <td>background-attachment</td>
    <td>設置背景圖像是否固定或者隨著頁面的其餘部分滾動。</td>
    <td>1</td>
  </tr>
  <tr>
    <td>background-color</td>
    <td>設置元素的背景顏色。</td>
    <td>1</td>
  </tr>
  <tr>
    <td>background-image</td>
    <td>設置元素的背景圖像。</td>
    <td>1</td>
  </tr>
  <tr>
    <td>background-position</td>
    <td>設置背景圖像的開始位置。</td>
    <td>1</td>
  </tr>
  <tr>
    <td>background-repeat</td>
    <td>設置是否及如何重複背景圖像。</td>
    <td>1</td>
  </tr>
<tr>
<td>background-clip</td>
<td>規定背景的繪製區域。</td>
<td>3</td>
</tr>
<tr>
<td>background-origin</td>
<td>規定背景圖片的定位區域。</td>
<td>3</td>
</tr>
<tr>
<td>background-size</td>
<td>規定背景圖片的尺寸。</td>
<td>3</td>
</tr>
</table>

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

</table>

<h3>Box 屬性</h3>
<table class='nicetable'>
<tr>
<th style='width:30%;'>屬性</th>
<th style='width:65%;'>描述</th>
<th style='width:5%;'>CSS</th>
</tr>
<tr>
<td>overflow-x</td>
<td>如果內容溢出了元素內容區域，是否對內容的左/右邊緣進行裁剪。</td>
<td>3</td>
</tr>
<tr>
<td>overflow-y</td>
<td>如果內容溢出了元素內容區域，是否對內容的上/下邊緣進行裁剪。</td>
<td>3</td>
</tr>
<tr>
<td>overflow-style</td>
<td>規定溢出元素的首選滾動方法。</td>
<td>3</td>
</tr>
<tr>
<td>rotation</td>
<td>圍繞由 rotation-point 屬性定義的點對元素進行旋轉。</td>
<td>3</td>
</tr>
<tr>
<td>rotation-point</td>
<td>定義距離上左邊框邊緣的偏移點。</td>
<td>3</td>
</tr>
</table>

<h3>Color 屬性</h3>
<table class='nicetable'>
<tr>
<th style='width:30%;'>屬性</th>
<th style='width:65%;'>描述</th>
<th style='width:5%;'>CSS</th>
</tr>
<tr>
<td>color-profile</td>
<td>允許使用源的顏色配置文件的默認以外的規範。</td>
<td>3</td>
</tr>
<tr>
<td>opacity</td>
<td>規定元素的不透明級別。</td>
<td>3</td>
</tr>
<tr>
<td>rendering-intent</td>
<td>允許使用顏色配置文件渲染意圖的默認以外的規範。</td>
<td>3</td>
</tr>
</table>

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

<h3>CSS 尺寸屬性（Dimension）</h3>
<table class='nicetable'>
  <tr>
    <th style='width:30%;'>屬性</th>
    <th style='width:65%;'>描述</th>
    <th style='width:5%;'>CSS</th>
  </tr>
  <tr>
    <td>height</td>
    <td>設置元素高度。</td>
    <td>1</td>
  </tr>
  <tr>
    <td>max-height</td>
    <td>設置元素的最大高度。</td>
    <td>2</td>
  </tr>
  <tr>
    <td>max-width</td>
    <td>設置元素的最大寬度。</td>
    <td>2</td>
  </tr>
  <tr>
    <td>min-height</td>
    <td>設置元素的最小高度。</td>
    <td>2</td>
  </tr>
  <tr>
    <td>min-width</td>
    <td>設置元素的最小寬度。</td>
    <td>2</td>
  </tr>
  <tr>
    <td>width</td>
    <td>設置元素的寬度。</td>
    <td>1</td>
  </tr>
</table>

<h3>可伸縮框屬性（Flexible Box）</h3>
<table class='nicetable'>
<tr>
<th style='width:30%;'>屬性</th>
<th style='width:65%;'>描述</th>
<th style='width:5%;'>CSS</th>
</tr>
<tr>
<td>box-align</td>
<td>規定如何對齊框的子元素。</td>
<td>3</td>
</tr>
<tr>
<td>box-direction</td>
<td>規定框的子元素的顯示方向。</td>
<td>3</td>
</tr>
<tr>
<td>box-flex</td>
<td>規定框的子元素是否可伸縮。</td>
<td>3</td>
</tr>
<tr>
<td>box-flex-group</td>
<td>將可伸縮元素分配到柔性分組。</td>
<td>3</td>
</tr>
<tr>
<td>box-lines</td>
<td>規定當超出父元素框的空間時，是否換行顯示。</td>
<td>3</td>
</tr>
<tr>
<td>box-ordinal-group</td>
<td>規定框的子元素的顯示次序。</td>
<td>3</td>
</tr>
<tr>
<td>box-orient</td>
<td>規定框的子元素是否應水平或垂直排列。</td>
<td>3</td>
</tr>
<tr>
<td>box-pack</td>
<td>規定水平框中的水平位置或者垂直框中的垂直位置。</td>
<td>3</td>
</tr>
</table>

<h3>CSS 字體屬性（Font）</h3>
<table class='nicetable'>
  <tr>
    <th style='width:30%;'>屬性</th>
    <th style='width:65%;'>描述</th>
    <th style='width:5%;'>CSS</th>
  </tr>
  <tr>
    <td>font</td>
    <td>在一個聲明中設置所有字體屬性。</td>
    <td>1</td>
  </tr>
  <tr>
    <td>font-family</td>
    <td>規定文本的字體系列。</td>
    <td>1</td>
  </tr>
  <tr>
    <td>font-size</td>
    <td>規定文本的字體尺寸。</td>
    <td>1</td>
  </tr>
  <tr>
    <td>font-size-adjust</td>
    <td>為元素規定 aspect 值。</td>
    <td>2</td>
  </tr>
  <tr>
    <td>font-stretch</td>
    <td>收縮或拉伸當前的字體：<ul><li>normal:正常</li><li>wider:更寬</li><li>narrower:更窄</li><li>ultra-condensed:超瘦</li><li>extra-condensed:很瘦</li><li>condensed:瘦</li><li>semi-condensed:半瘦</li><li>semi-expanded:半擴大</li><li>expanded:擴大</li><li>extra-expanded:很脹</li><li>ultra-expanded:超脹</li></ul></td>
    <td>2</td>
  </tr>
  <tr>
    <td>font-style</td>
    <td>規定文本的字體樣式。</td>
    <td>1</td>
  </tr>
  <tr>
    <td>font-variant</td>
    <td>規定是否以小型大寫字母的字體顯示文本。</td>
    <td>1</td>
  </tr>
  <tr>
    <td>font-weight</td>
    <td>規定字體的粗細。</td>
    <td>1</td>
  </tr>
</table>

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

<h3>Grid 屬性</h3>
<table class='nicetable'>
<tr>
<th style='width:30%;'>屬性</th>
<th style='width:65%;'>描述</th>
<th style='width:5%;'>CSS</th>
</tr>
<tr>
<td>grid-columns</td>
<td>規定網格中每個列的寬度。</td>
<td>3</td>
</tr>
<tr>
<td>grid-rows</td>
<td>規定網格中每個列的高度。</td>
<td>3</td>
</tr>
</table>

<h3>Hyperlink 屬性</h3>
<table class='nicetable'>
<tr>
<th style='width:30%;'>屬性</th>
<th style='width:65%;'>描述</th>
<th style='width:5%;'>CSS</th>
</tr>
<tr>
<td>target</td>
<td>簡寫屬性，設置target-name、target-new以及target-position屬性。</td>
<td>3</td>
</tr>
<tr>
<td>target-name</td>
<td>規定在何處打開鏈接（鏈接的目標）。</td>
<td>3</td>
</tr>
<tr>
<td>target-new</td>
<td>規定目標鏈接在新窗口還是在已有窗口的新標籤頁中打開。</td>
<td>3</td>
</tr>
<tr>
<td>target-position</td>
<td>規定在何處放置新的目標鏈接。</td>
<td>3</td>
</tr>
</table>

<h3>CSS 列表屬性（List）</h3>
<table class='nicetable'>
  <tr>
    <th style='width:30%;'>屬性</th>
    <th style='width:65%;'>描述</th>
    <th style='width:5%;'>CSS</th>
  </tr>
  <tr>
    <td>list-style</td>
    <td>在一個聲明中設置所有的列表屬性。</td>
    <td>1</td>
  </tr>
  <tr>
    <td>list-style-image</td>
    <td>將圖像設置為列表項標記。</td>
    <td>1</td>
  </tr>
  <tr>
    <td>list-style-position</td>
    <td>設置列表項標記的放置位置。</td>
    <td>1</td>
  </tr>
  <tr>
    <td>list-style-type</td>
    <td>設置列表項標記的類型。</td>
    <td>1</td>
  </tr>
  <tr>
    <td>marker-offset</td>
    <td>&nbsp;</td>
    <td>2</td>
  </tr>
</table>

<h3>CSS 外邊距屬性（Margin）</h3>
<table class='nicetable'>
  <tr>
    <th style='width:30%;'>屬性</th>
    <th style='width:65%;'>描述</th>
    <th style='width:5%;'>CSS</th>
  </tr>
  <tr>
    <td>margin</td>
    <td>在一個聲明中設置所有外邊距屬性。</td>
    <td>1</td>
  </tr>
  <tr>
    <td>margin-bottom</td>
    <td>設置元素的下外邊距。</td>
    <td>1</td>
  </tr>
  <tr>
    <td>margin-left</td>
    <td>設置元素的左外邊距。</td>
    <td>1</td>
  </tr>
  <tr>
    <td>margin-right</td>
    <td>設置元素的右外邊距。</td>
    <td>1</td>
  </tr>
  <tr>
    <td>margin-top</td>
    <td>設置元素的上外邊距。</td>
    <td>1</td>
  </tr>
</table>

<h3>Marquee 屬性</h3>
<table class='nicetable'>
<tr>
<th style='width:30%;'>屬性</th>
<th style='width:65%;'>描述</th>
<th style='width:5%;'>CSS</th>
</tr>
<tr>
<td>marquee-direction</td>
<td>設置移動內容的方向。</td>
<td>3</td>
</tr>
<tr>
<td>marquee-play-count</td>
<td>設置內容移動多少次。</td>
<td>3</td>
</tr>
<tr>
<td>marquee-speed</td>
<td>設置內容滾動得多快。</td>
<td>3</td>
</tr>
<tr>
<td>marquee-style</td>
<td>設置移動內容的樣式。</td>
<td>3</td>
</tr>
</table>

<h3>多列屬性（Multi-column）</h3>
<table class='nicetable'>
<tr>
<th style='width:30%;'>屬性</th>
<th style='width:65%;'>描述</th>
<th style='width:5%;'>CSS</th>
</tr>
<tr>
<td>column-count</td>
<td>規定元素應該被分隔的列數。</td>
<td>3</td>
</tr>
<tr>
<td>column-fill</td>
<td>規定如何填充列。</td>
<td>3</td>
</tr>
<tr>
<td>column-gap</td>
<td>規定列之間的間隔。</td>
<td>3</td>
</tr>
<tr>
<td>column-rule</td>
<td>設置所有 column-rule-* 屬性的簡寫屬性。</td>
<td>3</td>
</tr>
<tr>
<td>column-rule-color</td>
<td>規定列之間規則的顏色。</td>
<td>3</td>
</tr>
<tr>
<td>column-rule-style</td>
<td>規定列之間規則的樣式。</td>
<td>3</td>
</tr>
<tr>
<td>column-rule-width</td>
<td>規定列之間規則的寬度。</td>
<td>3</td>
</tr>
<tr>
<td>column-span</td>
<td>規定元素應該橫跨的列數。</td>
<td>3</td>
</tr>
<tr>
<td>column-width</td>
<td>規定列的寬度。</td>
<td>3</td>
</tr>
<tr>
<td>columns</td>
<td>規定設置 column-width 和 column-count 的簡寫屬性。</td>
<td>3</td>
</tr>
</table>

<h3>CSS 內邊距屬性（Padding）</h3>
<table class='nicetable'>
  <tr>
    <th style='width:30%;'>屬性</th>
    <th style='width:65%;'>描述</th>
    <th style='width:5%;'>CSS</th>
  </tr>
  <tr>
    <td>padding</td>
    <td>在一個聲明中設置所有內邊距屬性。</td>
    <td>1</td>
  </tr>
  <tr>
    <td>padding-bottom</td>
    <td>設置元素的下內邊距。</td>
    <td>1</td>
  </tr>
  <tr>
    <td>padding-left</td>
    <td>設置元素的左內邊距。</td>
    <td>1</td>
  </tr>
  <tr>
    <td>padding-right</td>
    <td>設置元素的右內邊距。</td>
    <td>1</td>
  </tr>
  <tr>
    <td>padding-top</td>
    <td>設置元素的上內邊距。</td>
    <td>1</td>
  </tr>
</table>

<h3>Paged Media 屬性</h3>
<table class='nicetable'>
<tr>
<th style='width:30%;'>屬性</th>
<th style='width:65%;'>描述</th>
<th style='width:5%;'>CSS</th>
</tr>
<tr>
<td>fit</td>
<td>示意如何對width和height屬性均不是auto的被替換元素進行縮放。</td>
<td>3</td>
</tr>
<tr>
<td>fit-position</td>
<td>定義盒內對象的對齊方式。</td>
<td>3</td>
</tr>
<tr>
<td>image-orientation</td>
<td>規定用戶代理應用於圖像的順時針方向旋轉。</td>
<td>3</td>
</tr>
<tr>
<td>page</td>
<td>規定元素應該被顯示的頁面特定類型。</td>
<td>3</td>
</tr>
<tr>
<td>size</td>
<td>規定頁面內容包含框的尺寸和方向。</td>
<td>3</td>
</tr>
</table>

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

<h3>CSS 打印屬性（Print）</h3>
<table class='nicetable'>
  <tr>
    <th style='width:30%;'>屬性</th>
    <th style='width:65%;'>描述</th>
    <th style='width:5%;'>CSS</th>
  </tr>
  <tr>
    <td>orphans</td>
    <td>設置當元素內部發生分頁時必須在頁面底部保留的最少行數。</td>
    <td>2</td>
  </tr>
  <tr>
    <td>page-break-after</td>
    <td>設置元素後的分頁行為。</td>
    <td>2</td>
  </tr>
  <tr>
    <td class='no_wrap'>page-break-before</td>
    <td>設置元素前的分頁行為。</td>
    <td>2</td>
  </tr>
  <tr>
    <td>page-break-inside</td>
    <td>設置元素內部的分頁行為。</td>
    <td>2</td>
  </tr>
  <tr>
    <td>widows</td>
    <td>設置當元素內部發生分頁時必須在頁面頂部保留的最少行數。</td>
    <td>2</td>
  </tr>
</table>

<h3>CSS 表格屬性（Table）</h3>
<table class='nicetable'>
  <tr>
    <th style='width:30%;'>屬性</th>
    <th style='width:65%;'>描述</th>
    <th style='width:5%;'>CSS</th>
  </tr>

  <tr>
    <td>border-collapse</td>
    <td>規定是否合併表格邊框。separate(預設):分開，collapse:合併</td>
    <td>2</td>
  </tr>

  <tr>
    <td>border-spacing</td>
    <td>規定相鄰單元格邊框之間的距離。</td>
    <td>2</td>
  </tr>

  <tr>
    <td>caption-side</td>
    <td>規定表格標題的位置。</td>
    <td>2</td>
  </tr>

  <tr>
    <td>empty-cells</td>
    <td>規定是否顯示表格中的空單元格上的邊框和背景。</td>
    <td>2</td>
  </tr>

  <tr>
    <td>table-layout</td>
    <td>設置用於表格的佈局算法。</td>
    <td>2</td>
  </tr>
</table>

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

<h3>2D/3D 轉換屬性（Transform）</h3>
<table class='nicetable'>
<tr>
<th style='width:30%;'>屬性</th>
<th style='width:65%;'>描述</th>
<th style='width:5%;'>CSS</th>
</tr>
<tr>
<td>transform</td>
<td>向元素應用 2D 或 3D 轉換。</td>
<td>3</td>
</tr>
<tr>
<td>transform-origin</td>
<td>允許你改變被轉換元素的位置。</td>
<td>3</td>
</tr>
<tr>
<td>transform-style</td>
<td>規定被嵌套元素如何在 3D 空間中顯示。</td>
<td>3</td>
</tr>
<tr>
<td>perspective</td>
<td>規定 3D 元素的透視效果。</td>
<td>3</td>
</tr>
<tr>
<td>perspective-origin</td>
<td>規定 3D 元素的底部位置。</td>
<td>3</td>
</tr>
<tr>
<td>backface-visibility</td>
<td>定義元素在不面對屏幕時是否可見。</td>
<td>3</td>
</tr>

</table>

<h3>過渡屬性（Transition）</h3>
<table class='nicetable'>
<tr>
<th style='width:30%;'>屬性</th>
<th style='width:65%;'>描述</th>
<th style='width:5%;'>CSS</th>
</tr>
<tr>
<td>transition</td>
<td>簡寫屬性，用於在一個屬性中設置四個過渡屬性。</td>
<td>3</td>
</tr>
<tr>
<td>transition-property</td>
<td>規定應用過渡的 CSS 屬性的名稱。</td>
<td>3</td>
</tr>
<tr>
<td>transition-duration</td>
<td>定義過渡效果花費的時間。</td>
<td>3</td>
</tr>
<tr>
<td>transition-timing-function</td>
<td>規定過渡效果的時間曲線。</td>
<td>3</td>
</tr>
<tr>
<td>transition-delay</td>
<td>規定過渡效果何時開始。</td>
<td>3</td>
</tr>
</table>

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

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

==語法==
===特殊字元===
<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;之間有效

===文字===
<b>font-size 文字大小</b>
<table width='720px' class='nicetable'>
<tr><td bgcolor='#eeeeee'><b>屬性值</b></td><td bgcolor='#eeeeee'><b>語法</b></td><td bgcolor='#eeeeee'><b>呈現效果</b></td></tr>
<tr><td>px</td><td>&lt;span style='font-size:13px;'&gt;13px&lt;/span&gt;&lt;br&gt;<br>&lt;span style='font-size:16px;'&gt;16px&lt;/span&gt;&lt;br&gt;<br>&lt;span style='font-size:18px;'&gt;18px&lt;/span&gt;<br></td><td><span style='font-size:13px;'>13px</span><br> <span style='font-size:16px;'>16px</span><br> <span style='font-size:18px;'>18px</span></td></tr>
<tr><td>em<br></td><td>&lt;span style='font-size:1em;'&gt;1em&lt;/span&gt;&lt;br&gt;<br>&lt;span style='font-size:2em;'&gt;2em&lt;/span&gt;</td><td style='line-height:30px;'><span style='font-size:1em;'>1em</span><br><span style='font-size:2em;'>2em</span></td></tr>
<tr><td>cm</td><td>&lt;span style='font-size:1cm;'&gt;1cm&lt;/span&gt;&lt;br&gt;<br>&lt;span style='font-size:1.2cm;'&gt;1.2cm&lt;/span&gt;&lt;br&gt;<br></td><td style='line-height:52px;'><span style='font-size:1cm;'>1cm</span><br> <span style='font-size:1.2cm;'>1.2cm</span></td></tr>
<tr><td>xx-small</td><td>&lt;span style='font-size:xx-small;'&gt;xx-small&lt;/span&gt;</td><td><span style='font-size:xx-small;'>xx-small</span></td></tr>
<tr><td>x-small</td><td>&lt;span style='font-size:x-small;'&gt;x-small&lt;/span&gt;</td><td><span style='font-size:x-small;'>x-small</span></td></tr>
<tr><td>small</td><td>&lt;span style='font-size:small;'&gt;small&lt;/span&gt;</td><td><span style='font-size:small;'>small，比預設尺寸小</span></td></tr>
<tr><td>smaller</td><td>&lt;span style='font-size:smaller;'&gt;smaller&lt;/span&gt;</td><td><span style='font-size:smaller;'>smaller，父元素的 80%</span></td></tr>
<tr><td>medium</td><td>&lt;span style='font-size:medium;'&gt;medium&lt;/span&gt;</td><td><span style='font-size:medium;'>medium，預設尺寸</span></td></tr>
<tr><td>large</td><td>&lt;span style='font-size:large;'&gt;large&lt;/span&gt;</td><td><span style='font-size:large;'>large，比預設尺寸大</span></td></tr>
<tr><td>x-large</td><td>&lt;span style='font-size:x-large;'&gt;x-large&lt;/span&gt;</td><td><span style='font-size:x-large;'>x-large</span></td></tr>
<tr><td>xx-large</td><td>&lt;span style='font-size:xx-large;'&gt;xx-large&lt;/span&gt;</td><td><span style='font-size:xx-large;'>xx-large</span></td></tr>
<tr><td>larger</td><td>&lt;span style='font-size:larger;'&gt;larger&lt;/span&gt;</td><td><span style='font-size:larger;'>larger，父元素的 120%</span></td></tr>
<tr><td>%</td><td>&lt;span style='font-size:100%;'&gt;100%&lt;/span&gt;&lt;br&gt;<br>&lt;span style='font-size:120%;'&gt;120%&lt;/span&gt;&lt;br&gt;<br></td><td><span style='font-size:100%;'>100%</span><br> <span style='font-size:120%;'>120%</span><br></td></tr>
<tr><td>inherit</td><td>&lt;span style='font-size:inherit;'&gt;inherit&lt;/span&gt;</td><td><span style='font-size:inherit;'>inherit</span></td></tr>
</table>
#large 表示絕對大小，是瀏覽器預設字體大小的 1.5 倍(這點可能因瀏覽器而異)。
#larger 表示相對大小，是父元素字體大小的 1.2 倍(這點可能因瀏覽器而異)。

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

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

 #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>

===水平置中===
#樣式 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%&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>