CSS 參考手冊
本教程的CSS 參考手冊在所有主流瀏覽器中測試通過.
CSS 屬性
CSS 屬性組：
"CSS" 列指示屬性是在哪個CSS 版本中定義的(CSS1, CSS2, 或者CSS3).
動畫屬性
| 属性 | 描述 | CSS |
|---|---|---|
| @keyframes | 定义一个动画,@keyframes定义的动画名称用来被animation-name所使用。 | 3 |
| animation | 复合属性。检索或设置对象所应用的动画特效。 | 3 |
| animation-name | 检索或设置对象所应用的动画名称 ,必须与规则@keyframes配合使用，因为动画名称由@keyframes定义 | 3 |
| animation-duration | 检索或设置对象动画的持续时间 | 3 |
| animation-timing-function | 检索或设置对象动画的过渡类型 | 3 |
| animation-delay | 检索或设置对象动画的延迟时间 | 3 |
| animation-iteration-count | 检索或设置对象动画的循环次数 | 3 |
| animation-direction | 检索或设置对象动画在循环中是否反向运动 | 3 |
| animation-play-state | 检索或设置对象动画的状态 | 3 |
背景屬性
| 属性 | 描述 | CSS |
|---|---|---|
| background | 复合属性。设置对象的背景特性。 | 1 |
| background-attachment | 设置或检索背景图像是随对象内容滚动还是固定的。必须先指定background-image属性。 | 1 |
| background-color | 设置或检索对象的背景颜色。 | 1 |
| background-image | 设置或检索对象的背景图像。 | 1 |
| background-position | 设置或检索对象的背景图像位置。必须先指定background-image属性。 | 1 |
| background-repeat | 设置或检索对象的背景图像如何铺排填充。必须先指定background-image属性。 | 1 |
| background-clip | 指定对象的背景图像向外裁剪的区域。 | 3 |
| background-origin | S设置或检索对象的背景图像计算background-position时的参考原点(位置)。 | 3 |
| background-size | 检索或设置对象的背景图像的尺寸大小。 | 3 |
邊框(Border)和輪廓(Outline)屬性
| 属性 | 描述 | CSS |
|---|---|---|
| border | 复合属性。设置对象边框的特性。 | 1 |
| border-bottom | 复合属性。设置对象底部边框的特性。 | 1 |
| border-bottom-color | 设置或检索对象的底部边框颜色。 | 1 |
| border-bottom-style | 设置或检索对象的底部边框样式。 | 1 |
| border-bottom-width | 设置或检索对象的底部边框宽度。 | 1 |
| border-color | 置或检索对象的边框颜色。 | 1 |
| border-left | 复合属性。设置对象左边边框的特性。 | 1 |
| border-left-color | 设置或检索对象的左边边框颜色。 | 1 |
| border-left-style | 设置或检索对象的左边边框样式。 | 1 |
| border-left-width | 设置或检索对象的左边边框宽度。 | 1 |
| border-right | 复合属性。设置对象右边边框的特性。 | 1 |
| border-right-color | 设置或检索对象的右边边框颜色。 | 1 |
| border-right-style | 设置或检索对象的右边边框样式。 | 1 |
| border-right-width | 设置或检索对象的右边边框宽度。 | 1 |
| border-style | 设置或检索对象的边框样式。 | 1 |
| border-top | 复合属性。设置对象顶部边框的特性。 | 1 |
| border-top-color | 设置或检索对象的顶部边框颜色 | 1 |
| border-top-style | 设置或检索对象的顶部边框样式。 | 1 |
| border-top-width | 设置或检索对象的顶部边框宽度。 | 1 |
| border-width | 设置或检索对象的边框宽度。 | 1 |
| outline | 复合属性。设置或检索对象外的线条轮廓。 | 2 |
| outline-color | 设置或检索对象外的线条轮廓的颜色。 | 2 |
| outline-style | 设置或检索对象外的线条轮廓的样式。 | 2 |
| outline-width | 设置或检索对象外的线条轮廓的宽度。 | 2 |
| border-bottom-left-radius | 设置或检索对象的左下角圆角边框。提供2个参数，2个参数以空格分隔，每个参数允许设置1个参数值，第1个参数表示水平半径，第2个参数表示垂直半径，如第2个参数省略，则默认等于第1个参数 | 3 |
| border-bottom-right-radius | 设置或检索对象的右下角圆角边框。 | 3 |
| border-image | 设置或检索对象的边框样式使用图像来填充。 | 3 |
| border-image-outset | 规定边框图像超过边框的量。 | 3 |
| border-image-repeat | 规定图像边框是否应该被重复（repeated）、拉伸（stretched）或铺满（rounded）。 | 3 |
| border-image-slice | 规定图像边框的向内偏移。 | 3 |
| border-image-source | 规定要使用的图像，代替 border-style 属性中设置的边框样式。 | 3 |
| border-image-width | 规定图像边框的宽度。 | 3 |
| 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 |
內邊距(Padding)屬性
| 屬性 | 說明 | CSS |
|---|---|---|
| padding | 在一個聲明中設置所有填充屬性 | 1 |
| padding-bottom | 設置元素的底填充 | 1 |
| padding-left | 設置元素的左填充 | 1 |
| padding-right | 設置元素的右填充 | 1 |
| padding-top | 設置元素的頂部填充 | 1 |
媒體頁面內容屬性
| 属性 | 说明 | CSS |
|---|---|---|
| bookmark-label | 指定书签的标签 | 3 |
| bookmark-level | 指定了书签级别 | 3 |
| bookmark-target | 指定了书签链接的目标 | 3 |
| float-offset | 在相反的方向推动浮动元素，他们一直具有浮动 | 3 |
| hyphenate-after | 指定一个断字的单词断字字符后的最少字符数 | 3 |
| hyphenate-before | 指定一个断字的单词断字字符前的最少字符数 | 3 |
| hyphenate-character | 指定了当一个断字发生时，要显示的字符串 | 3 |
| hyphenate-lines | 表示连续断字的行在元素的最大数目 | 3 |
| hyphenate-resource | 外部资源指定一个逗号分隔的列表，可以帮助确定浏览器的断字点 | 3 |
| hyphens | 设置如何分割单词以改善该段的布局 | 3 |
| image-resolution | 指定了正确的图像分辨率 | 3 |
| marks | 将crop and/or cross标志添加到文档 | 3 |
| string-set | 3 |
尺寸(Dimension)屬性
| 属性 | 描述 | CSS |
|---|---|---|
| height | 设置元素的高度 | 1 |
| max-height | 设置元素的最大高度 | 2 |
| max-width | 设置元素的最大宽度 | 2 |
| min-height | 设置元素的最小高度 | 2 |
| min-width | 设置元素的最小宽度 | 2 |
| width | 设置元素的宽度 | 1 |
彈性盒子模型（Flexible Box）屬性(新)
| 属性 | 说明 | CSS |
|---|---|---|
| flex | 复合属性。设置或检索弹性盒模型对象的子元素如何分配空间。 | 3 |
| flex-grow | 设置或检索弹性盒的扩展比率。 | 3 |
| flex-shrink | 设置或检索弹性盒的收缩比率。 | 3 |
| flex-basis | 设置或检索弹性盒伸缩基准值。 | 3 |
| flex-flow | 复合属性。设置或检索弹性盒模型对象的子元素排列方式。 | 3 |
| flex-direction | 该属性通过定义flex容器的主轴方向来决定felx子项在flex容器中的位置。 | 3 |
| flex-wrap | 该属性控制flex容器是单行或者多行，同时横轴的方向决定了新行堆叠的方向。 | 3 |
| align-content | 在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直）。 | 3 |
| align-items | 定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式。 | 3 |
| align-self | 定义flex子项单独在侧轴（纵轴）方向上的对齐方式。 | 3 |
| justify-content | 设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式。 | 3 |
| order | 设置或检索弹性盒模型对象的子元素出现的順序。 | 3 |
彈性盒子模型（Flexible Box）屬性(舊)
| 屬性 | 說明 | CSS |
|---|---|---|
| box-align | 指定如何對齊一個框的子元素 | 3 |
| box-direction | 指定在哪個方向，顯示一個框的子元素 | 3 |
| box-flex | 指定一個框的子元素是否是靈活的或固定的大小 | 3 |
| box-flex-group | 指派靈活的元素到Flex組 | 3 |
| box-lines | 每當它在父框的空間運行時，是否指定將再上一個新的行列 | 3 |
| box-ordinal-group | 指定一個框的子元素的顯示順序 | 3 |
| box-orient | 指定一個框的子元素是否在水平或垂直方向應鋪設 | 3 |
| box-pack | 指定橫向盒在垂直框的水平位置和垂直位置 | 3 |
字體（Font）屬性
| 屬性 | 說明 | CSS |
|---|---|---|
| font | 在一個聲明中設置所有字體屬性 | 1 |
| font-family | 規定文本的字體系列 | 1 |
| font-size | 規定文本的字體尺寸 | 1 |
| font-style | 規定文本的字體樣式 | 1 |
| font-variant | 規定文本的字體樣式 | 1 |
| font-weight | 規定字體的粗細 | 1 |
| @font-face | 一個規則，允許網站下載並使用其他超過"Web- safe"字體的字體 | 3 |
| font-size-adjust | 為元素規定aspect 值 | 3 |
| font-stretch | 收縮或拉伸當前的字體系列 | 3 |
內容生成屬性(Generated Content Properties)
| 屬性 | 說明 | CSS |
|---|---|---|
| content | 與:before 以及:after 偽元素配合使用，來插入生成內容 | 2 |
| counter-increment | 遞增或遞減一個或多個計數器 | 2 |
| counter-reset | 創建或重置一個或多個計數器 | 2 |
| quotes | 設置嵌套引用的引號類型 | 2 |
| crop | 允許replaced元素只是作為一個對象代替整個對象的矩形區域 | 3 |
| move-to | Causes an element to be removed from the flow and reinserted at a later point in the document | 3 |
| page-policy | 判定基於頁面的給定元素的適用於計數器的字符串值 | 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 |
線框(Linebox)屬性
| 屬性 | 說明 | CSS |
|---|---|---|
| alignment-adjust | 允許更精確的元素的對齊方式 | 3 |
| alignment-baseline | 其父級指定的內聯級別的元素如何對齊 | 3 |
| baseline-shift | 允許重新定位相對於dominant-baseline的dominant-baseline | 3 |
| dominant-baseline | 指定scaled-baseline-table | 3 |
| drop-initial-after-adjust | 設置下拉的主要連接點的初始對齊點 | 3 |
| drop-initial-after-align | 校準行內的初始行的設置就是具有首字母的框使用初級連接點 | 3 |
| drop-initial-before-adjust | 設置下拉的輔助連接點的初始對齊點 | 3 |
| drop-initial-before-align | 校準行內的初始行的設置就是具有首字母的框使用輔助連接點 | 3 |
| drop-initial-size | 控制局部的首字母下沉 | 3 |
| drop-initial-value | 激活一個下拉式的初步效果 | 3 |
| inline-box-align | 設置一個多行的內聯塊內的行具有前一個和後一個內聯元素的對齊 | 3 |
| line-stacking | 一個速記屬性設置line-stacking-strategy, line-stacking-ruby,和line-stacking-shift屬性 | 3 |
| line-stacking-ruby | 設置包含Ruby註釋元素的行對於塊元素的堆疊方法 | 3 |
| line-stacking-shift | 設置base-shift行中塊元素包含元素的堆疊方法 | 3 |
| line-stacking-strategy | 設置內部包含塊元素的堆疊線框的堆疊方法 | 3 |
| text-height | 行內框的文本內容區域設置block-progression維數 | 3 |
列表(List)屬性
| 屬性 | 說明 | CSS |
|---|---|---|
| list-style | 在一個聲明中設置所有的列表屬性 | 1 |
| list-style-image | 將圖像設置為列表項標記 | 1 |
| list-style-position | 設置列表項標記的放置位置 | 1 |
| list-style-type | 設置列表項標記的類型 | 1 |
外邊距(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 | 縮寫屬性設置列寬和列數 | 3 |
頁面媒體(Paged Media)屬性
| 屬性 | 思念 | CSS |
|---|---|---|
| fit | 如果其寬度和高度屬性都不是auto給出一個提示，如何大規模替換元素 | 3 |
| fit-position | 判定方框內對象的對齊方式 | 3 |
| image-orientation | 指定用戶代理適用於圖像中的向右或順時針方向的旋轉 | 3 |
| page | 指定一個元素應顯示的頁面的特定類型 | 3 |
| size | 指定含有BOX的頁面內容的大小和方位 | 3 |
定位（Positioning）屬性
| 屬性 | 說明 | CSS |
|---|---|---|
| bottom | 設置定位元素下外邊距邊界與其包含塊下邊界之間的偏移 | 2 |
| clear | 規定元素的哪一側不允許其他浮動元素 | 1 |
| clip | 剪裁絕對定位元素 | 2 |
| cursor | 規定要顯示的光標的類型（形狀） | 2 |
| display | 規定元素應該生成的框的類型 | 1 |
| float | 規定框是否應該浮動 | 1 |
| left | 設置定位元素左外邊距邊界與其包含塊左邊界之間的偏移 | 2 |
| overflow | 規定當內容溢出元素框時發生的事情 | 2 |
| position | 規定元素的定位類型 | 2 |
| right | 設置定位元素右外邊距邊界與其包含塊右邊界之間的偏移 | 2 |
| top | 設置定位元素的上外邊距邊界與其包含塊上邊界之間的偏移 | 2 |
| visibility | 規定元素是否可見 | 2 |
| z-index | 設置元素的堆疊順序 | 2 |
分頁（Print）屬性
| 屬性 | 說明 | CSS |
|---|---|---|
| orphans | 設置當元素內部發生分頁時必須在頁面底部保留的最少行數 | 2 |
| page-break-after | 設置元素後的分頁行為 | 2 |
| page-break-before | 設置元素前的分頁行為 | 2 |
| page-break-inside | 設置元素內部的分頁行為 | 2 |
| widows | 設置當元素內部發生分頁時必須在頁面頂部保留的最少行數 | 2 |
Ruby屬性
| 屬性 | 說明 | CSS |
|---|---|---|
| ruby-align | 控制Ruby文本和Ruby基礎內容相對彼此的文本對齊方式 | 3 |
| ruby-overhang | 當Ruby文本超過Ruby的基礎寬，確定ruby文本是否允許局部懸置任意相鄰的文本，除了自己的基礎 | 3 |
| ruby-position | 它的base控制Ruby文本的位置 | 3 |
| ruby-span | 控制annotation 元素的跨越行為 | 3 |
語音（Speech）屬性
| 屬性 | 說明 | CSS |
|---|---|---|
| mark | 縮寫屬性設置mark-before和mark-after屬性 | 3 |
| mark-after | 允許命名的標記連接到音頻流 | 3 |
| mark-before | 允許命名的標記連接到音頻流 | 3 |
| phonemes | 指定包含文本的相應元素中的一個音標發音 | 3 |
| rest | 一個縮寫屬性設置rest-before和rest-after屬性 | 3 |
| rest-after | 一個元素的內容講完之後，指定要休息一下或遵守韻律邊界 | 3 |
| rest-before | 一個元素的內容講完之前，指定要休息一下或遵守韻律邊界 | 3 |
| voice-balance | 指定了左，右聲道之間的平衡 | 3 |
| voice-duration | 指定應採取呈現所選元素的內容的長度 | 3 |
| voice-pitch | 指定平均說話的聲音的音調（頻率） | 3 |
| voice-pitch-range | 指定平均間距的變化 | 3 |
| voice-rate | 控制語速 | 3 |
| voice-stress | 指示著重力度 | 3 |
| voice-volume | 語音合成是指波形輸出幅度 | 3 |
表格（Table）屬性
| 屬性 | 說明 | CSS |
|---|---|---|
| border-collapse | 規定是否合併表格邊框 | 2 |
| border-spacing | 規定相鄰單元格邊框之間的距離 | 2 |
| caption-side | 規定表格標題的位置 | 2 |
| empty-cells | 規定是否顯示表格中的空單元格上的邊框和背景 | 2 |
| table-layout | 設置用於表格的佈局算法 | 2 |
文本（Text）屬性
| 屬性 | 說明 | CSS |
|---|---|---|
| color | 設置文本的顏色 | 1 |
| direction | 規定文本的方向/ 書寫方向 | 2 |
| letter-spacing | 設置字符間距 | 1 |
| line-height | 設置行高 | 1 |
| text-align | 規定文本的水平對齊方式 | 1 |
| text-decoration | 規定添加到文本的裝飾效果 | 1 |
| text-indent | 規定文本塊首行的縮進 | 1 |
| text-transform | 控製文本的大小寫 | 1 |
| unicode-bidi | 2 | |
| vertical-align | 設置元素的垂直對齊方式 | 1 |
| white-space | 設置怎樣給一元素控件留白 | 1 |
| word-spacing | 設置單詞間距 | 1 |
| hanging-punctuation | 指定一個標點符號是否可能超出行框 | 3 |
| punctuation-trim | 指定一個標點符號是否要去掉 | 3 |
| text-align-last | 當text-align 設置為justify 時，最後一行的對齊方式。 | 3 |
| text-justify | 當text-align 設置為justify 時指定分散對齊的方式。 | 3 |
| text-outline | 設置文字的輪廓。 | 3 |
| text-overflow | 指定當文本溢出包含的元素，應該發生什麼 | 3 |
| text-shadow | 為文本添加陰影 | 3 |
| text-wrap | 指定文本換行規則 | 3 |
| word-break | 指定非CJK文字的斷行規則 | 3 |
| word-wrap | 設置瀏覽器是否對過長的單詞進行換行。 | 3 |
2D/3D轉換屬性
| 屬性 | 說明 | 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 | 此屬性是transition-property、transition-duration、transition-timing-function、transition-delay 的簡寫形式。 | 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 | 指定用戶按向下鍵時向下導航的位置 | 3 |
| nav-index | 指定導航（tab）順序。 | 3 |
| nav-left | 指定用戶按向左鍵時向左導航的位置 | 3 |
| nav-right | 指定用戶按向右鍵時向左導航的位置 | 3 |
| nav-up | 指定用戶按向上鍵時向上導航的位置a | 3 |
| outline-offset | 設置輪廓框架在border 邊緣外的偏移 | 3 |
| resize | 定義元素是否可以改變大小 | 3 |