W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
×

CSS 参考手册

CSS 参考手册 CSS 选择器 CSS 函数参考手册 CSS 听觉参考手册 CSS Web安全字体 CSS 动画 CSS 单位 CSS 颜色 CSS3 浏览器支持

CSS 属性

align-content align-items align-self all animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function backface-visibility background background-attachment background-blend-mode background-clip background-color background-image background-origin background-position background-repeat background-size border border-bottom border-bottom-color border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-style border-left-width border-radius border-right border-right-color border-right-style border-right-width border-spacing border-style border-top border-top-color border-top-left-radius border-top-right-radius border-top-style border-top-width border-width bottom box-shadow box-sizing caption-side clear clip color column-count column-fill column-gap column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns content counter-increment counter-reset cursor direction display empty-cells filter flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap float font @font-face font-family font-size font-size-adjust font-stretch font-style font-variant font-weight hanging-punctuation height justify-content @keyframes left letter-spacing line-height list-style list-style-image list-style-position list-style-type margin margin-bottom margin-left margin-right margin-top max-height max-width @media min-height min-width nav-down nav-index nav-left nav-right nav-up opacity order outline outline-color outline-offset outline-style outline-width overflow overflow-x overflow-y padding padding-bottom padding-left padding-right padding-top page-break-after page-break-before page-break-inside perspective perspective-origin position quotes resize right tab-size table-layout text-align text-align-last text-decoration text-decoration-color text-decoration-line text-decoration-style text-indent text-justify text-overflow text-shadow text-transform top transform transform-origin transform-style transition transition-delay transition-duration transition-property transition-timing-function unicode-bidi vertical-align visibility white-space width word-break word-spacing word-wrap z-index

 

CSS 参考手册



Note W3C中文教程的 CSS 参考手册在所有主流浏览器中测试通过。


CSS 属性

CSS 属性组


"CSS" 列指示属性是在哪个 CSS 版本中定义的 (CSS1,CSS2,或者 CSS3)。

颜色属性

属性 描述 CSS
color 设置文本的颜色。 1
opacity 设置一个元素的透明度级别。 3

背景和边框属性

属性 描述 CSS
background 复合属性。设置对象的背景特性。 1
background-attachment 设置或检索背景图像是随对象内容滚动还是固定的。必须先指定 background-image 属性。 1
background-blend-mode 指定每个背景图层的混合模式(颜色/图像)。
background-color 设置或检索对象的背景颜色。 1
background-image 设置或检索对象的背景图像。 1
background-position 设置或检索对象的背景图像位置。 1
background-repeat 设置或检索对象的背景图像如何铺排填充。 1
background-clip 指定对象的背景图像向外裁剪的区域。 3
background-origin 设置或检索对象的背景图像计算background-position时的参考原点(位置)。 3
background-size 检索或设置对象的背景图像的尺寸大小。 3
border 设置对象边框的特性。 1
border-bottom 设置对象底部边框的特性。 1
border-bottom-color 设置或检索对象的底部边框颜色。
border-bottom-left-radius 定义左上角边框的形状。 3
border-bottom-right-radius 定义右上角边框的形状。 3
border-bottom-style 设置或检索对象的底部边框样式。 1
border-bottom-width 设置或检索对象的底部边框宽度。 1
border-color 设置或检索对象的边框颜色。 1
border-image 用于设置所有 border-image-* 属性的缩写属性。 3
border-image-outset 指定边框图像区域超出边框的范围。 3
border-image-repeat 指定边框图像是否应重复,铺满或拉伸。 3
border-image-slice 规定图像边框的向内偏移。 3
border-image-source 指定要用作边框的图像的路径。 3
border-image-width 规定图像边框的宽度。 3
border-left 设置对象左边边框的特性。 1
border-left-color 设置或检索对象的左边边框颜色。 1
border-left-style 设置或检索对象的左边边框样式。 1
border-left-width 设置或检索对象的左边边框宽度。 1
border-radius 是一个简写属性,用于设置四个 border-*-radius 属性。 3
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-left-radius 定义左上角边框的形状。 3
border-top-right-radius 定义右上角边框的形状。 3
border-top-style 设置或检索对象的顶部边框样式。 1
border-top-width 设置或检索对象的顶部边框宽度。 1
border-width 设置或检索对象的边框宽度。 1
box-decoration-break 规定行内元素被折行 3
box-shadow 向方框添加一个或多个阴影。 3

基础盒子属性

属性 描述 CSS
bottom 设置定位元素下外边距边界与其包含块下边界之间的偏移。 2
clear 规定元素的哪一侧不允许其他浮动元素。 1
clip 剪裁绝对定位元素。 2
display 规定元素应该生成的框的类型。 1
float 规定框是否应该浮动。 1
height 设置元素的高度。 1
left 设置定位元素左外边距边界与其包含块左边界之间的偏移。 2
margin 在一个声明中设置所有外边距属性。 1
margin-bottom 设置元素的下外边距。 1
margin-left 设置元素的左外边距。 1
margin-right 设置元素的右外边距。 1
margin-top 设置元素的上外边距。 1
max-height 设置元素的最大高度。 2
max-width 设置元素的最大宽度。 2
min-height 设置元素的最小高度。 2
min-width 设置元素的最小宽度。 2
overflow
规定当内容溢出元素框时发生的事情。 2
overflow-x 如果内容溢出了元素内容区域,是否对内容的左/右边缘进行裁剪。 3
overflow-y 如果内容溢出了元素内容区域,是否对内容的上/下边缘进行裁剪。 3
padding 在一个声明中设置所有填充属性。 1
padding-bottom 设置元素的底填充。 1
padding-left 设置元素的左填充。 1
padding-right 设置元素的右填充。 1
padding-top 设置元素的顶部填充。 1
position 指定用于元素(静态,相对,绝对或固定)的定位方法的类型。 2
right 设置定位元素右外边距边界与其包含块右边界之间的偏移。 2
top 设置定位元素的上外边距边界与其包含块上边界之间的偏移。 2
visibility 规定元素是否可见。 2
width 设置元素的宽度。 1
vertical-align 设置元素的垂直对齐方式。 1
z-index 设置元素的堆叠顺序。 2

弹性盒子

属性 描述 CSS
align-content 在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项(垂直)。 3
align-items 定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。 3
align-self 定义flex子项单独在侧轴(纵轴)方向上的对齐方式。 3
flex 设置或检索弹性盒模型对象的子元素如何分配空间。 3
flex-basis 设置或检索弹性盒伸缩基准值。 3
flex-direction 该属性通过定义flex容器的主轴方向来决定felx子项在flex容器中的位置。 3
flex-flow 设置或检索弹性盒模型对象的子元素排列方式。 3
flex-grow 设置或检索弹性盒的扩展比率。 3
flex-shrink 设置或检索弹性盒的收缩比率。 3
flex-wrap 该属性控制flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向。 3
justify-content 设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。 3
order 设置或检索弹性盒模型对象的子元素出现的順序。 3

文本属性

属性 描述 CSS
hanging-punctuation 指定一个标点符号是否可能超出行框。 3
hyphens 设置如何分割单词以改善该段的布局。 3
letter-spacing 设置字符间距。 1
line-break 指定如何(或是否)断行。 3
line-height 设置行高。 1
overflow-wrap 指定浏览器是否可以在单词中断行,以防止溢出(当一个字符串太长而不符合其包含框时)。 3
tab-size 指定标签字符的长度。 3
text-align 规定文本的水平对齐方式。 1
text-align-last 当 text-align 设置为 justify 时,最后一行的对齐方式。 3
text-combine-upright 指定单个字符空格中的多个字符的组合。 3
text-indent 规定文本块首行的缩进。 1
text-justify 当 text-align 设置为 justify 时指定分散对齐的方式。 3
text-transform 控制文本的大小写。 1
white-space 设置怎样给一元素控件留白。 1
word-break 指定非CJK文字的断行规则。 3
word-spacing 设置单词间距。 1
word-wrap 设置浏览器是否对过长的单词进行换行。 3

文本装饰属性

属性 描述 CSS
text-decoration 规定添加到文本的装饰效果。 1
text-decoration-color 指定文本装饰中的颜色。 3
text-decoration-line 指定文本装饰中的行类型。 3
text-decoration-style 指定文本装饰中的行样式。 3
text-shadow 为文本添加阴影。 3
text-underline-position 指定使用 text-decoration 属性设置的下划线的位置。 3

字体属性

属性 描述 CSS
@font-face 一个规则,允许网站下载并使用其他超过 "web-safe" 字体的字体。 3
@font-feature-values 允许作者在 font-variant-alternate 中使用通用名称,在 OpenType 中激活的功能不同。 3
font 在一个声明中设置所有字体属性。 1
font-family 规定文本的字体系列。 1
font-feature-settings 允许控制OpenType字体中的高级印刷功能。 3
font-kerning 控制字距信息的使用(字母间隔如何)。 3
font-language-override 控制字体中语言特定字形的使用。 3
font-size 规定文本的字体尺寸。 1
font-size-adjust 为某个元素规定一个 aspect 值,这样就可以保持首选字体的 x-height。 3
font-stretch 收缩或拉伸当前的字体系列。 3
font-style 规定文本的字体样式。 1
font-synthesis 控制哪些缺少类型的面(粗体或斜体)可以由浏览器合成。 3
font-variant 指定是否应以 small-caps 字体显示文本。 1
font-variant-alternates 控制与 @font-feature-values 中定义的替代名称相关联的替代字形的使用。 3
font-variant-caps 控制大写字母的替代字形的使用。 3
font-variant-east-asian 控制东亚脚本的替代字形的使用(例如日文和中文)。 3
font-variant-ligatures 控制哪些连字和上下文形式在其应用的元素的文本内容中使用。 3
font-variant-numeric 控制数字,分数和顺序标记的替代字形的使用。 3
font-variant-position 控制较小尺寸的替代字形的使用,定位为与字体基线相关的上标或下标。 3
font-weight 指定字体的宽度。 1

写作模式属性

属性 描述 CSS
direction 规定文本的方向/书写方向。 2
text-orientation 定义一行中文本的方向。 3
text-combine-upright 指定单个字符空格中的多个字符的组合。 3
unicode-bidi direction 属性一起使用以设置或返回是否应覆盖文本以支持同一文档中的多种语言。 2
writing-mode 3

表格属性

属性 描述 CSS
border-collapse 规定是否合并表格边框。 2
border-spacing 规定相邻单元格边框之间的距离。 2
caption-side 规定表格标题的位置。 2
empty-cells 规定是否显示表格中的空单元格上的边框和背景。 2
table-layout 设置用于表格的布局算法。 2

列表和计数器属性

属性 描述 CSS
counter-increment 递增或递减一个或多个计数器。 2
counter-reset 创建或重置一个或多个计数器。 2
list-style 在一个声明中设置所有的列表属性。 1
list-style-image 将图象设置为列表项标记。 1
list-style-position 设置列表项标记的放置位置。 1
list-style-type 设置列表项标记的类型。 1

动画属性

属性 描述 CSS
@keyframes 定义一个动画。 3
animation 所有动画属性的简写属性(animation-play-state 和 animation-fill-mode 除外)。 3
animation-delay 设置对象动画的延迟时间。 3
animation-direction 设置对象动画在循环中是否反向运动。 3
animation-duration 设置对象动画的持续时间。 3
animation-fill-mode 指定动画未播放时元素的样式(完成时或延迟时)。 3
animation-iteration-count 设置对象动画的循环次数。 3
animation-name 设置对象所应用的动画名称 ,必须与规则 @keyframes 配合使用,因为动画名称由 @keyframes 定义。 3
animation-play-state 设置对象动画的状态。 3
animation-timing-function 设置对象动画的过渡类型。 3

转换属性

属性 描述 CSS
backface-visibility 定义一个元素是否应该是可见的,不对着屏幕时。 3
perspective 指定3D元素是如何查看透视图。 3
perspective-origin 指定3D元素底部位置。 3
transform 适用于2D或3D转换的元素。 3
transform-origin 允许您更改转化元素位置。 3
transform-style 3D空间中的指定如何嵌套元素。 3

过渡属性

属性 描述 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

用户界面属性

属性 描述 CSS
box-sizing 允许您为了适应区域以某种方式定义某些元素。 3
content 与 :before 以及 :after 伪元素配合使用,来插入生成内容。 2
cursor 规定要显示的光标的类型(形状)。 2
ime-mode 控制文本字段的输入法编辑器的状态。 3
nav-down 指定用户按向下键时向下导航的位置。 3
nav-index 指定导航(tab)顺序。 3
nav-left 指定用户按向左键时向左导航的位置。 3
nav-right 指定用户按向右键时向左导航的位置。 3
nav-up 指定用户按向上键时向上导航的位置。 3
outline 设置或检索对象外的线条轮廓。 2
outline-color 设置或检索对象外的线条轮廓的颜色。 2
outline-offset 设置轮廓框架在 border 边缘外的偏移。 3
outline-style 设置或检索对象外的线条轮廓的样式。 2
outline-width 设置或检索对象外的线条轮廓的宽度。 2
resize 定义元素是否可以改变大小。 3
text-overflow 规定当文本溢出包含元素时发生的事情。 3

多列属性

属性 描述 CSS
break-after 指定生成框后的页面,列或区域中断行为。 3
break-before 指定生成框前的页面,列或区域中断行为。 3
break-inside 指定生成框内的页面,列或区域中断行为。 3
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
widows 设置当元素内部发生分页时必须在页面顶部保留的最少行数。 2

页面媒体

属性 描述 CSS
orphans 设置当元素内部发生分页时必须在页面底部保留的最少行数。 2
page-break-after 设置元素后的分页行为。 2
page-break-before 设置元素前的分页行为。 2
page-break-inside 设置元素内部的分页行为。 2

内容生成

属性 描述 CSS
marks 将裁剪和/或十字标记添加到文档。 3
quotes 设置嵌入式引号的引号类型。 2

过滤器属性

属性 描述 CSS
filter 在元素显示之前定义元素上的效果(例如模糊或颜色偏移)。 3

图片/替换内容

属性 描述 CSS
image-orientation 指定用户代理适用于图像中的向右或顺时针方向的旋转。 3
image-rendering 给浏览器一个提示,当图像缩放时,图像的哪些方面最重要。 3
image-resolution 指定元素中/中使用的所有光栅图像的固有分辨率。 3
object-fit 指定被替换的元素的内容应如何安装到由其使用的高度和宽度确定的框中。 3
object-position 指定替换元素在其框内的对齐方式。 3

遮罩属性

属性 描述 CSS
mask 3
mask-type 3

语音属性

属性 描述 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

字幕属性

属性 描述 CSS
marquee-direction 设置内容移动的方向。 3
marquee-play-count 设置内容移动多少次。 3
marquee-speed 设置内容滚动的速度有多快。 3
marquee-style 设置内容移动的样式。 3