CSS：修訂版本之間的差異

出自六年制學程
跳轉到： 導覽、 搜尋
（→‎CSS 簡表）
（→‎CSS 簡表）
第 846 行： 第 846 行：
 
   <tr>
 
   <tr>
 
     <td>font-stretch</td>
 
     <td>font-stretch</td>
−
     <td>收縮或拉伸當前的字體系列。</td>
+
     <td>收縮或拉伸當前的字體：<ul><li></li><li></li><li></li><li></li><li></li><li></li></ul></td>
 
     <td>2</td>
 
     <td>2</td>
 
   </tr>
 
   </tr>

2023年9月16日 (六) 12:48的修訂版本

Cascading Style Sheets(串接樣式表)

選擇器

一、多選擇器

(一)定義

  1. .one .two{}：兩個 class 之間有空格，必須要是在 one 裡面的 two，才會被選擇到。
  2. .one.two{}：兩個 class 中沒有空格，對象必須同時具有 one 和 two 的 class 時，才能被 CSS 選擇到到。
  3. .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 收縮或拉伸當前的字體：
 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)		 空格 基本拉丁 ] [
普通半形空格，同 ASCII 字元 0x20
U+00A0
(160)		 ✓ &nbsp; 不換行空格(No-Break Space) Latin-1 Supplement ] [
同 U+0020，但不換行
U+2002
(8194)		 &ensp; En 空格(En Space)或 Nut 一般標點 ] [
與 en 同寬(em之一半)。
U+2003 &emsp; Em 空格(Em Space)或 Mutton 一般標點 ] [
與 em 同寬。
U+2004 Em 三分之一空格(Three-Per-Em Space)或 Thick Space 一般標點 ] [
em 之三分之一寬
U+2005 Em 四分之一空格(Four-Per-Em Space)或 Mid Space 一般標點 ] [
em 之四分之一寬
U+2006 Em 六分之一空格(Six-Per-Em Space) 一般標點 ] [
em 之六分之一寬。電腦字型有時與 U+2009 等同。
U+2007 ✓ 數字空格(Figure Space) 一般標點 ] [
用於分隔數字之定位符，與單一數字同寬
U+2008 標點穴格 一般標點 ] [
與同字型之窄標點同寬，即句號或逗號(西方語文)之寬度
U+2009 &thinsp; 窄空格(Thin Space) 一般標點 ] [
em 之六分之一(有時設計成五分之一)寬。建議用作 SI 單位數字之千位分隔符。與 U+2002 至 U+2008 不同，其寬可根據排版調整
U+200A 髮寬空格(Hair Space) 一般標點 ] [
窄於窄空格(thin space)
U+200B 零寬空格(Zero Width Space，簡稱「ZWSP」) 一般標點 ]​[
U+200C ✓ &zwnj; 零寬不連字(Zero Width Non Joiner，簡稱「ZWNJ」) 一般標點 ]‌[
U+200D ✓ &zwj; 零寬連字(Zero Width Joiner，簡稱「ZWJ」) 一般標點 ]‍[
U+202F ✓ 窄式不換行空格(Narrow No-Break Space) 一般標點 ] [
U+205F 中數學空格(Medium Mathematical Space，簡稱「MMSP」) 一般標點 ] [
用於數學方程式。em 之 18 分之 4 寬在數學排版領域，空格寬度通常以十八份之幾的方式給定；4/18 em 可用於數個情況，例如數式 a + b 中 a 與 + 及 + 與 b 之間
U+2060 ✓ ✓ 文字連接符(Word Joiner) 一般標點 ]⁠[
同 U+200B，但該處不能換行。Unicode 3.2 新增，以代替 U+FEFF 字元廢止之零寬不換行空格功能
U+3000
(12288)		 表意文字空格 CJK 符號及標點 ]　[
與 CJK 文字同寬(全形)
U+FEFF ✓ ✓ 零寬不換行空格(Zero Width No-Break Space) = 位元組順序記號(Byte Order Mark，簡稱「BOM」) Arabic Presentation Forms-B ][
主要用作位元組次序標記字元。原來之不換行指示功能於 Unicode 3.2 起廢止，代之以 U+2060。
  1. 空格：
    • &#32;：十六進制20
    • &nbsp;：不換行空格(No-Break Space)，值160(十六進制A0)
  2. &#9;：TAB，只在<PRE>...</PRE>之間有效
  3. &#10;：換行，只在<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
  1. large 表示絕對大小，是瀏覽器預設字體大小的 1.5 倍(這點可能因瀏覽器而異)。
  2. larger 表示相對大小，是父元素字體大小的 1.2 倍(這點可能因瀏覽器而異)。

顏色

(一)十六進位顏色

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

#RRGGBB

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

例如：

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

(二)RGB顏色

RGB顏色值的規定格式是： 

RGB(x,x,x)

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

例如：

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

(三)基本色

ColorColor NameHEXRGB
 black#0000000,0,0
 silver#C0C0C0192,192,192
 gray#808080128,128,128
 white#FFFFFF255,255,255
 maroon#800000128,0,0
 red#FF0000255,0,0
 purple#800080128,0,128
 fuchsia#FF00FF255,0,255
 green#0080000,128,0
 lime#00FF000,255,0
 olive#808000128,128,0
 yellow#FFFF00255,255,0
 navy#0000800,0,128
 blue#0000FF0,0,255
 teal#0080800,128,128
 aqua#00FFFF0,255,255

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

ColorColor 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：假裝表格，其中的子元素可以輕易垂直置中

範例一：

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

範例二：

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

水平置中

  1. 樣式 margin:0px auto;(上下為 0，左右自動調整) 或 屬性 align=center，兩者作用一樣。對 img 沒用，要將 img 裝進以下容器中才能水平置中。
  2. 母元素 div 設 style='width:100%;' ，子元素 table 設 align='center' (不是 style='text-align:center;')
  3. 母元素 th ，子元素 table 設 align=center
  4. 母元素 text-align:center 子元素的 display 為 inline、inline-block
  5. 母子元素均為 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 設同值，文字自然會垂直置中

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

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

  1. <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 垂直方向的對齊，用於「圖照」或「表格欄位內的文字」垂直對齊效果，諸參數：

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

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

  1. <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%，那麼其他的方塊就會真正的垂直置中。

  1. <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>

但是：

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

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

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

(三)動態計算

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

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

依以上要領實作如下：

  1. <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; ，其子元素就會置中。

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

(五)margin:auto

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

  1. <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樣式，對子元素做如下操作：

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

依以上要領實作如下：

  1. <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：

  1. <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>
取自「http://well-being-ng.net/wiki1231/index.php?title=CSS&oldid=59059」