CSS
出自六年制學程
Cascading Style Sheets(串接樣式表)
目錄
- 1 選擇器
- 2 CSS 簡表
- 2.1 CSS3 動畫屬性（Animation）
- 2.2 CSS 背景屬性（Background）
- 2.3 CSS 邊框屬性（Border 和 Outline）
- 2.4 Box 屬性
- 2.5 Color 屬性
- 2.6 Content for Paged Media 屬性
- 2.7 CSS 尺寸屬性（Dimension）
- 2.8 可伸縮框屬性（Flexible Box）
- 2.9 CSS 字體屬性（Font）
- 2.10 內容生成（Generated Content）
- 2.11 Grid 屬性
- 2.12 Hyperlink 屬性
- 2.13 CSS 列表屬性（List）
- 2.14 CSS 外邊距屬性（Margin）
- 2.15 Marquee 屬性
- 2.16 多列屬性（Multi-column）
- 2.17 CSS 內邊距屬性（Padding）
- 2.18 Paged Media 屬性
- 2.19 CSS 定位屬性（Positioning）
- 2.20 CSS 打印屬性（Print）
- 2.21 CSS 表格屬性（Table）
- 2.22 CSS 文本屬性（Text）
- 2.23 2D/3D 轉換屬性（Transform）
- 2.24 過渡屬性（Transition）
- 2.25 用戶界面屬性（User-interface）
- 3 單位
- 4 語法
選擇器
一、多選擇器
(一)定義
- .one .two{}：兩個 class 之間有空格，必須要是在 one 裡面的 two，才會被選擇到。
- .one.two{}：兩個 class 中沒有空格，對象必須同時具有 one 和 two 的 class 時，才能被 CSS 選擇到到。
- .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 元素居中， |
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) |
✓ | | 不換行空格(No-Break Space) | Latin-1 Supplement | ] [ | ||
| 同 U+0020，但不換行 | |||||||
| U+2002 (8194) |
  | En 空格(En Space)或 Nut | 一般標點 | ] [ | |||
| 與 en 同寬(em之一半)。 | |||||||
| U+2003 |   | 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 |   | 窄空格(Thin Space) | 一般標點 | ] [ | |||
| em 之六分之一(有時設計成五分之一)寬。建議用作 SI 單位數字之千位分隔符。與 U+2002 至 U+2008 不同，其寬可根據排版調整 | |||||||
| U+200A | 髮寬空格(Hair Space) | 一般標點 | ] [ | ||||
| 窄於窄空格(thin space) | |||||||
| U+200B | 零寬空格(Zero Width Space，簡稱「ZWSP」) | 一般標點 | ][ | ||||
| U+200C | ✓ | ‌ | 零寬不連字(Zero Width Non Joiner，簡稱「ZWNJ」) | 一般標點 | ][ | ||
| U+200D | ✓ | ‍ | 零寬連字(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。 | |||||||
- 空格：
-  ：十六進制20
- ：不換行空格(No-Break Space)，值160(十六進制A0)
- 	：TAB，只在<PRE>...</PRE>之間有效
- ：換行，只在<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 |
- large 表示絕對大小，是瀏覽器預設字體大小的 1.5 倍(這點可能因瀏覽器而異)。
- larger 表示相對大小，是父元素字體大小的 1.2 倍(這點可能因瀏覽器而異)。
顏色
(一)十六進位顏色
這是最常用的一種顏色表現形式。十六進位顏色值的規定格式是：
#RRGGBB
RR表示紅色；GG表示綠色；BB表示藍色。它們的取值範圍都介於00～FF之間。
例如：
- 紅色的十六進位顏色表現形式為：#FF0000
RR為FF，GG為00，BB為00。 - 綠色的十六進位顏色表現形式為：#00FF00
RR為00，GG為FF，BB為00。 - 藍色的十六進位顏色表現形式為：#0000FF
RR為00，GG為00，BB為FF。
(二)RGB顏色
RGB顏色值的規定格式是：
RGB(x,x,x)
第一個x表示紅色；第二個x表示綠色；第三個x表示藍色。它們都可以定義為0～255之間的整數，或者百分比為0%～100%之間的整數。
例如：
- 紅色的RGB顏色值的表現形式為：RGB(255,0,0) 或者 RGB(100%,0%,0%)
- 綠色的RGB顏色值的表現形式為：RGB(0,255,0) 或者 RGB(0%,100%,0%)
- 藍色的RGB顏色值的表現形式為：RGB(0,0,255) 或者 RGB(0%,0%,100%)
(三)基本色
| Color | Color Name | HEX | RGB |
|---|---|---|---|
| black | #000000 | 0,0,0 | |
| silver | #C0C0C0 | 192,192,192 | |
| gray | #808080 | 128,128,128 | |
| white | #FFFFFF | 255,255,255 | |
| maroon | #800000 | 128,0,0 | |
| red | #FF0000 | 255,0,0 | |
| purple | #800080 | 128,0,128 | |
| fuchsia | #FF00FF | 255,0,255 | |
| green | #008000 | 0,128,0 | |
| lime | #00FF00 | 0,255,0 | |
| olive | #808000 | 128,128,0 | |
| yellow | #FFFF00 | 255,255,0 | |
| navy | #000080 | 0,0,128 | |
| blue | #0000FF | 0,0,255 | |
| teal | #008080 | 0,128,128 | |
| aqua | #00FFFF | 0,255,255 |
(四)系統色(CSS3後不建議再使用)
| Color | Color Name |
|---|---|
| activeborder | |
| activecaption | |
| appworkspace | |
| background | |
| buttonface | |
| buttonhighlight | |
| buttonshadow | |
| buttontext | |
| captiontext | |
| graytext | |
| highlight | |
| highlighttext | |
| inactiveborder | |
| inactivecaption | |
| inactivecaptiontext | |
| infobackground | |
| infotext | |
| menu | |
| menutext | |
| scrollbar | |
| threeddarkshadow | |
| threedface | |
| threedhighlight | |
| threedlightshadow | |
| threedshadow | |
| window | |
| windowframe | |
| windowtext |
表格(table)
display
- display:block：區塊，元素會以區塊方式呈現，除非設定 position 或 float。
- 可以設定高度(height)、寬度(width)、上方與下方距離
- div、p、ul、li 均屬 block。
- display:inline：所有文字或圖片均不換行，也就是全部都會是同一行的意思。
- 高度與寬度都不能設定，文字或圖片所佔的寬度就是他的寬度
- span、a、input、img、em 均屬 inline。
- display:table-cell：假裝表格，其中的子元素可以輕易垂直置中
範例一：
- <div style= 'display:block'>元素一</div>
<div style= 'display:block'>元素二</div> - 元素一元素二
範例二：
- <div style= 'display:inline'>元素一</div>
<div style= 'display:inline'>元素二</div> - 元素一元素二
水平置中
- 樣式 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% - 適當值px); ，calc()中的減號前後都要有空白
垂直置中
(一)設定行高 ( line-height )
適用於子元素「單行」的「行內元素」( inline、inline-block )，例如單行的標題，或是已經設為 inline-block 屬性的 div。若將母元素的 line-height 設成和高度一樣的數值，則母元素內部的行內元素就會被垂直置中。因為是行高，所以會在行內元素的上下都加上行高的 1/2 ，所以就垂直置中了！不過由此就可以看出，為什麼必須要單行的行內元素，因為如果多行，第二行與第一行的間距會變超大，就不是我們所期望的效果了。
範例一：Div設 height 、 line-height 設同值，文字自然會垂直置中
- <DIV style='width:200px;height:100px;line-height:100px;background:#CF9;text-align:center;'>
測試文字垂直置中
</DIV> - 測試文字垂直置中
範例二：外層 Div 的 height 、 line-height 設不同值，並不會置中
- <Div style='width:200px;height:100px;line-height:150px;border:1px solid #000;text-align:center;'>
<div style='display:inline-block;width:30px;height:30px;background:#c00;'></div>
</Div>
(二)vertical-align
vertical-align 垂直方向的對齊，用於「圖照」或「表格欄位內的文字」垂直對齊效果，諸參數：
- baseline：基礎線，約在文字的中間位置
- sub：下標
- super：上標
- top：該行元素的最高處
- text-top：該行文字的最高處
- middle：置中
- bottom：該行元素的最低處
- text-bottom：該行文字的最低處
- 百分比(%)：以百分比來讓圖片垂直對齊該行文字，可以有負值
vertical-align:middle 雖然是垂直置中，不過卻是指在外框內的所有元素垂直位置互相置中，並不是相對於外框的高度垂直置中。
- <Div style='width:200px;height:100px;border:1px solid #000;text-align:center;'>
<div style='width:30px;height:30px;background:#c00;display:inline-block;vertical-align:middle;'></div>
<div style='width:30px;height:60px;background:#0c0;display:inline-block;vertical-align:middle;'></div>
<div style='width:30px;height:40px;background:#00f;display:inline-block;vertical-align:middle;'></div>
</Div>
如果有一個方塊變成了高度 100%，那麼其他的方塊就會真正的垂直置中。
- <Div style='width:200px;height:100px;border:1px solid #000;text-align:center;'>
<div style='width:30px;height:30px;background:#c00;display:inline-block;vertical-align:middle;'></div>
<div style='width:30px;height:100%;background:#0c0;display:inline-block;vertical-align:middle;'></div>
<div style='width:30px;height:40px;background:#00f;display:inline-block;vertical-align:middle;'></div>
</Div>
但是：
- 我們總不能每次要垂直置中，都要添加一個奇怪的 div 在裏頭
- 所以我們就使用「偽元素」 ::before 和 ::after 添加 div 進到框框內，
- 讓這個「偽」div的高度 100% 就可以輕鬆地讓其他的 div 都置中。
- 偽 div 的 display 須為 inline-block，畢竟 vertical-align:middle; 是針對行內元素
依上述要領實作如下，添置偽元素 ::before ：
- .div0::before{
width:0;content:'';
vertical-align:middle;height:100%;
display:inline-block;position:relative;
}
(三)動態計算
不是處處都能用 inline-block，block也可使用 top 樣式來垂直置中，其值為 calc(50% - 半高px)：
- calc 為動態計算，50% 代表母元素高度之半，「-」是減號，前後都必須是空白，再減去自身高度之半。
- 自身元素的 position 必須為 relative，不然 top 失去作用
- 只能用 top 不能用 margin-top ，因為 margin-top 的 50% 代表的是母元素的寬度之半。
- float:left;是各相鄰區塊向左漂移靠攏；第一個區塊取適當的左距。
依以上要領實作如下：
- <Div style='width:200px;height:100px;border:1px solid #000;'>
<div style='width:30px;height:30px;background:#c00;position:relative;top:calc(50% - 15px);float:left;margin-left:calc(50% - 45px);'></div>
<div style='width:30px;height:60px;background:#0c0;position:relative;top:calc(50% - 30px);float:left;'></div>
<div style='width:30px;height:40px;background:#00f;position:relative;top:calc(50% - 20px);float:left;'></div>
</Div>
(四)假裝表格
td 中下一行 vertical-align:middle 就可以垂直置中，而其 display 樣式是 table-cell 。所以我們只要將母元素設為 display:table-cell;vertical-align:middle; ，其子元素就會置中。
- <Div style='width:200px;height:100px;display:table-cell;vertical-align:middle;border:1px solid #000;text-align:center;'>
假表格垂直置中
</Div> - 假表格垂直置中
(五)margin:auto
母元素設 position:relative; ，子元素設 position:absolute;margin:auto;自動置中
<Div style='position:relative;width:200px;height:100px;border:1px solid #000;'> <div style='position:absolute;margin:auto;top:0;right:0;bottom:0;left:0;width:100px;height:50px;background:#f60;'></div> </Div>
(六)垂直位移 CSS3
CSS3可以使用transform樣式，對子元素做如下操作：
- 用 top:50%; 下降母元素的 50% 。
- 用 transform:translateY(-50%) 上升子元素的 50% ， transform 管位移、旋轉、變形， translateY 為垂直位移
- position:relative
依以上要領實作如下：
- <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：
- <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>
