CSS 属性和值

属性 / 值	描述和注释
background 任何 background-attachment、background- color、background-image、background-repeat 和（或）background-position 值的组合，或 inherit	用于修改元素的背景颜色和背景图像初始值取决于单独的属性，不继承的 background-position 可使用百分数如果要显示多重背景，可使用逗号分隔组合背景值；如果要指定 background-color，应包含在最后一个背景中
background-attachment scroll、fixed 或 inherit	用于决定背景图像是否可以滚动，以及滚动的方式初始值：scroll; 不继承的如果要显示多重背景，可以为每个背景应用不同的 background- attachment 值（用逗号分隔不同的值）
background-color 颜色值、transparent 或 inherit	用于设置元素的背景颜色初始值：transparent; 不继承的
background-image URL、CSS 渐变、none 或 inherit	用于设置元素的背景图像初始值：none; 不继承的如果要显示多重背景，可使用逗号分隔图像值

属性 / 值	描述和注释
background-position 一个或两个百分数、长度（或一个百分数和一个长度），或 top、center、bottom 之一和（或）left、center、right 之一，或使用 inherit	用于设置指定的背景图像的物理位置初始值：0% 0%；如果仅设置一个百分数，它会用于水平位置，而垂直位置的初始值则被设为 50%；如果仅使用一个关键字，另一个的初始值则为 center；应用于块级和替换元素；不继承的；百分数相对于盒本身的尺寸如果要显示多重背景，可以为每个背景应用不同的 background- position 值（用逗号分隔不同的值）
background-repeat repeat、repeat-x、repeat-y、no-repeat 或 inherit 之一	用于确定背景图像是否重复及重复方式初始值：repeat；不继承的如果要显示多重背景图像，可以为每个背景图像应用不同的 background-repeat 值（用逗号分隔不同的值）
background-size 一个或两个百分数或长度，或 auto，或使用 cover 或 contain	用于指定背景图像的尺寸初始值：auto；不继承的如果要显示多重背景图像，可以为每个背景图像应用不同的 background-size 值（用逗号分隔不同的值）
border 任何 border-width、border-style 值和（或）颜色值的组合，或 inherit	用于定义元素四边边框的所有要素初始值取决于单独的属性；不继承的
border-color 一至四个颜色值、transparent 或 inherit	用于指定元素的一个或多个边的边框的颜色初始值：元素的 color 属性；不继承的
border-radius	用于为盒创建圆角初始值：0；不继承的
border-top-right-radius border-bottom-right-radius border-bottom-left-radius border-top-left-radius	用于为盒的一个角设置 border-radius 值初始值：0；不继承的注：Firefox 的旧版本使用与此不同的语法创建单独的圆角：-moz- border-radius-topright、-moz-border-radius-bottomright、-moz- border-radius-bottomleft、-moz-border-radius-topleft
border-spacing 一个或两个长度，或 inherit	用于指定表格边框之间的空隙大小初始值：0；仅可应用于表格元素；继承的
border-style 一至四个以下的值：none、dotted、dashed、 solid、double、groove、ridge、inset、 outset、inherit	用于为元素的一个或多个边设置边框样式初始值：none；不继承的
border-top 、 border-right 、 border- bottom、border-left 任何用于 border-width、border-style 的单个值和（或）颜色值的组合，或使用 inherit	用于为元素的一个边一次性定义全部三个边框属性初始值取决于单独的值；不继承的
border-top-color、border-right-color、 border-bottom-color、border-left-color 颜色值或 inherit	用于为元素的一个边定义边框颜色初始值：color 属性的值；不继承的
border-top-style、border-right-style、 border-bottom-style、border-left-style none、dotted、dashed、solid、double、 groove 、 ridge 、 inset 、 outset 或 inherit	用于为元素的一个边定义边框样式初始值：none；不继承的

属性 / 值	描述和注释
border-top-width、border-right-width、 border-bottom-width、border-left-width thin、medium、thick 或长度	用于为元素的一个边定义边框宽度初始值：mdeium；不继承的
border-width 一至四个以下的值：thin、medium、thick 或长度	用于为元素的一个或四个边定义边框宽度初始值：mdeium；不继承的
bottom 百分数、长度、auto 或 inherit	用于设置元素相对于其父元素底部边缘的位移大小初始值：auto；不继承的；百分数相对于包含块的高度
box-shadow 可选的 inset，接着是二至四个长度值，接着是颜色值	用于为盒添加一个或多个阴影。长度值（依次）表示相对于盒右侧的位置（负数则表示相对于盒左侧的位置）、相对于盒底部的位置（负数则表示相对于盒顶部的位置）、模糊半径（不可为负数）和伸展距离（负数会让阴影收缩）。每个 box-shadow 值之间用逗号分隔初始值：none；继承的
clear none、left、right、both 或 inherit	用于防止元素包围在浮动元素的一边或两边初始值：none；只能应用于块级元素；不继承的
clip auto、rect 或 inherit	用于仅显示元素的一部分初始值：auto；只能应用于绝对定位的元素
color 颜色值或 inherit	用于设置元素的文本颜色初始值：父元素的颜色；有的颜色是由浏览器设置的；继承的
cursor auto、 crosshair、 default、 pointer、 progress、move、e-resize、ne-resize、nw- resize、n-resize、se-resize、sw-resize、 s-resize、w-resize、text、wait、help、 URL 或 inherit 之一	用于设置指针的形状初始值：auto；继承的
display inline、block、inline-block、list-item、 run-in、compact、table、inline-table、 table-row-group、table-header-group、 table-footer-group、table-row、table- column-group、table-column、table-cell、 table-caption、ruby、ruby-base、ruby- text、ruby-base-group、ruby-text-group、 none、inherit 之一	用于确定元素如何显示，以及是否显示初始值：通常为 inline 或 block；不继承的
float left、right、none、inherit 之一	用于确定元素向父元素的哪一边浮动初始值：none；不可应用于定位过的元素①或生成的内容；不继承的
font 如果需要，任何 font-style、font-variant 和 font-weight 值的组合，接着是必需的 font-size、可选的 line-height 值和必需的 font-family，或使用 inherit	用于设置文本的字体系列、字体大小（这二者是必需的）及可选的字体样式、变体、粗细和行高初始值取决于单独的属性；继承的；font-size 和 line-height 可使用百分数；font-size 和 font-family 是必需的，否则 font 属性是无效的

属性 / 值	描述和注释
font-family 一个或多个由引号包着的字体名称，接着是可选的表示类属的字体名称，或使用 inherit	用于为文本选择字体系列初始值：取决于浏览器；继承的
font-size 绝对大小、相对大小、长度、百分数或 inherit	用于设置文本的大小初始值：medium；计算的值是继承的；百分数相对于父元素的字体大小
font-style normal、italic、oblique 或 inherit	用于将文本标记为斜体初始值：normal；继承的
font-variant normal、small-caps 或 inherit	用于设置小型大写字母初始值：normal；继承的
font-weight normal、bold、bolder、lighter、100、 200、300、400、500、600、700、800、900 或 inherit	用于应用、移除、调整粗体格式初始值：normal；数字值当做关键字而非整数进行处理（例如，不能使用 150）；继承的
height 长度、百分数、auto 或 inherit	用于设置元素的高度初始值：auto；可应用于除了非替换行内元素、表格列和列组以外的任何元素；不继承的
left 长度、百分数、auto 或 inherit	用于设置元素相对于其父元素左侧边缘的位移大小初始值：auto；只能用于定位过的元素；不继承的；百分数相对于包含块的宽度
letter-spacing normal、长度或 inherit	用于设置字母之间的间隙大小初始值：normal；继承的
line-height normal、数字、长度、百分数或 inherit	用于设置文本行之间的距离初始值：normal；继承的；百分数相对于元素自身的字体大小
list-style 任何 list-style-type、list-style-position 和（或）list-style-image 值的组合，或使用 inherit	用于设置列表的标识（常规的或定制的）及其位置初始值取决于单独元素的初始值；只能应用于列表元素；继承的
list-style-image URL、none 或 inherit	用于为列表指定定制的标识初始值：none；只能应用于列表元素；覆盖 list-style-type；继承的
list-style-position inside、outside 或 inherit	用于确定列表标识的位置初始值：outside；只能应用于列表元素；继承的
list-style-type disc、circle、square、decimal、lower- roman、upper-roman、lower-alpha、upper- alpha、none 或 inherit	用于设置列表的标识初始值：disc；只能应用于列表元素；如果 list-style-type 是有效的则不使用；继承的
margin 一至四个以下的值：长度、百分数、auto 或 inherit	用于设置元素与其父元素和（或）同胞元素之间在一个或多个边上的间隔大小初始值取决于浏览器和 width 值；不继承的；百分数相对于包含块的宽度

属性 / 值	描述和注释
margin-top 、 margin-right 、 margin- bottom、margin-left 长度、百分数、auto 或 inherit	用于设置元素与其父元素和（或）同胞元素之间在一个边上的间隔大小初始值：0；不继承的；百分数相对于包含块的宽度；如果 width、margin-right 和 margin-left 之和大于父元素的包含块，则 margin-right 和 margin-left 的值会被覆盖
max-height、max-width 长度、百分数、none 或 inherit	分别用于设置元素的最大高度和（或）最大宽度初始值：none；不能用于行内元素或表格元素；不继承的；百分数相对于包含块的高度 / 宽度
min-height、max-width 长度、百分数或 inherit	分别用于设置元素的最小高度和（或）最小宽度初始值：none；不能用于行内元素或表格元素；不继承的；百分数相对于包含块的高度 / 宽度
opacity 0.0（表示完全透明）至 1.0（表示完全不透明）之间的任何小数	用于让元素半透明或不可见初始值：1；不继承的
orphans 整数或 inherit	用于指定元素可以单独出现在页面底部的行数初始值：2；只能用于块级元素；继承的；仅用于打印媒体
overflow visible、hidden、scroll、auto 或 inherit	用于确定当内容超出元素内容区域时额外的内容如何显示初始值：visible；只能用于块级元素和替换元素；不继承的
padding 一至四个长度或百分数，或使用 inherit	用于指定元素内容区域和边框之间在一个或多个边上的距离初始值取决于浏览器；不继承的；百分数相对于包含块的宽度
padding-top、padding-right、padding- bottom、padding-left 长度、百分数或 inherit	用于指定元素内容区域和边框之间在一个边上的距离初始值：0；不继承的；百分数相对于包含块的宽度
page-break-after、page-break-before always、 avoid、 auto、 right、 left 或 inherit	用于指定什么时候应出现分页，什么时候不应出现初始值：auto；只能用于块级元素；不继承的；仅用于打印媒体
page-break-inside avoid、auto 或 inherit	阻止跨页的元素产生分页初始值：auto；只能用于块级元素；继承的；仅用于打印媒体
position static、relative、absolute、fixed 或 inherit	用于确定元素如何相对于文档流进行定位初始值：static；不继承的
right 长度、百分数、auto 或 inherit	用于设置元素相对于其父元素右侧边缘的位移大小初始值：auto；只能用于定位过的元素；不继承的；百分数相对于包含块的宽度
table-layout fixed、auto 或 inherit	用于选择确定单元格宽度的算法初始值：auto；不继承的
text-align left、right、center、justify、字符串或 inherit	用于指定文本对齐方式初始值取决于浏览器和书写方向；只能应用于块级元素；继承的
text-decoration 任何 underline、overline、line-through 和 blink 的组合，或 none、inherit	用于修饰文本（大多数为线条）初始值：none；不继承的

属性 / 值

描述和注释

text-indent

长度、百分数或 inherit

用于设置段落第一行的缩进量初始值：0；只能应用于块级元素；继承的；百分数相对于包含块的宽度

text-overflow

clip、ellipsis 或 "string"

用于指定文本不可见时处理溢出的方式初始值：clip

text-shadow

两个或四个长度值，接着是颜色值

用于为元素的文本添加一个或多个阴影。长度值（依次）表示相对于文本右侧的位置（负数则表示相对于文本左侧的位置）、相对于文本底部的位置（负数则表示相对于文本顶部的位置）、模糊半径（不可为负数）和伸展距离（负数会让阴影收缩）。每个 text-shadow 值之间用逗号分隔

初始值：none；继承的

text-transform capitalize、uppercase、lowercase、none 或 inherit

用于设置元素的文本的大小写初始值：none；继承的

transform

none 或一系列变形功能（matrix、translate、 tr ansl ate X 、 tr ansl ate Y 、 sc ale 、 scaleX、scaleY、rotate、skew、skewX、 skewY）

用于对元素进行形状、大小或方向上的变形初始值：none；不继承的；变形功能按照它们所列的顺序进行应用

transform-origin 一个或两个百分数或长度（或一个百分数和一个长度），或 top、center、bottom 之一和（或）left、center、right 之一

用于定义应用于元素的变形的起点

初始值：50% 50%；不继承的；只能应用于块级元素和行内元素；百分数相对于元素盒的大小

transition

依次定义 transition-property、transition- duration、transition-timing-function 和 transition-delay 的简记法（用空格分隔）

用于为元素定义变形效果初始值取决于单独的属性；可应用于所有的元素，包括 :before 和

:after 伪元素；值的顺序对此属性很重要

transition-property

none、all 或用逗号分隔的一组 CSS 属性

用于识别在应用了变形的元素上定义的 CSS 属性初始值：all；不继承的；可应用于所有的元素，包括 :before 和

:after 伪元素

transition-duration

以秒或毫秒为单位的时间值

用于确定完成变形所需的时间

初始值：0s（0 秒）；不继承的；可应用于所有的元素，包括

:before 和 :after 伪元素

transition-timing-function ease、linear、ease-in、ease-out、ease- in-out、 cubic-bezier( number, number, number, number)

描述用于变形计算过程的中间值的使用方法初始值：ease；可应用于所有的元素，包括 :before 和 :after 伪元素

transition-delay

以秒或毫秒为单位的时间值

用于定义变形开始的时间

初始值：0s（0 秒）；不继承的；可应用于所有的元素，包括

:before 和 :after 伪元素

top

长度、百分数、auto 或 inherit

用于设置元素相对于其父元素顶部边缘的位移大小初始值：auto；只能用于定位过的元素；不继承的；百分数相对于包含块的高度

属性 / 值	描述和注释
vertical-align baseline、sub、super、top、text-top、 middle、bottom、text-bottom、百分数、长度或 inherit	用于指定元素在垂直方向上的对齐方式初始值：baseline；不能应用于行内元素和表格单元格元素；不继承的；百分数相对于元素的 line-height 属性
visibility visible、hidden、collapse 或 inherit	用于在不将元素移出文档流的情况下让元素不可见初始值：inherit，事实上是不继承的（仍存争议）
white-space normal、pre、nowrap、pre-wrap、pre-lined 或 inherit	用于指定如何处理空格初始值：normal；只能用于块级元素；继承的
widows 整数或 inherit	用于指定元素可以单独出现在页面顶部的行数初始值：2；只能用于块级元素；继承的；仅用于打印媒体
width 长度、百分数、auto 或 inherit	用于设置元素的宽度初始值：auto；不能应用于行内元素、表格行或行组；不继承的；百分数相对于包含块的宽度
word-spacing normal、长度或 inherit	用于设置单词之间的距离初始值：normal；继承的
z-index auto、整数或 inherit	用于设置元素相对于重叠元素的深度初始值：auto；只能应用于定位了的元素；不继承的

CSS 选择器和结合符

模式	含义	CSS3	选择器类型
*	任何元素		通用选择器
E	类型为 E 的元素		类型选择器
E[foo]	带 "foo" 属性的 E 元素		属性选择器
E[foo="bar"]	"foo" 属性值恰为 "bar" 的 E 元素（引号是可选的）		属性选择器
E[foo ～ ="bar"]	"foo" 属性为一组空格分隔的值，且其中之一恰为 "bar" 的 E 元素（引号是可选的）		属性选择器
E[foo^="bar"]	"foo" 属性以 "bar" 开头的 E 元素（引号是是可选的）		属性选择器
E[foo$="bar"]	"foo" 属性以 "bar" 结束的 E 元素（引号是是可选的）		属性选择器

模式	含义	CSS3	选择器类型
E[foo*="bar"]	"foo" 属性值在某处包含 "bar" 的 E 元素（引号是可选的）	是	属性选择器
E[foo\|="en"]	"foo" 属性为一组连字符分隔的值且（从左边开始）以 "en" 开头的 E 元素（引号是可选的）		属性选择器
E:root	E 元素，文档根元素	是	结构伪类
E:nth-child(n)	E 元素，其父元素的第 n 个子元素	是	结构伪类
E:nth-last-child(n)	E 元素，其父元素的倒数第 n 个子元素	是	结构伪类
E:nth-of-type(n)	E 元素，该类型的第 n 个同胞元素	是	结构伪类
E:nth-last-of- type(n)	E 元素，该类型的倒数第 n 个同胞元素	是	结构伪类
E:first-child	E 元素，其父元素的第一个子元素		结构伪类
E:last-child	E 元素，其父元素的最后一个子元素	是	结构伪类
E:first-of-type	E 元素，该类型的第一个同胞元素	是	结构伪类
E:last-of-type	E 元素，该类型的最后一个同胞元素	是	结构伪类
E:only-child	E 元素，其父元素的唯一子元素	是	结构伪类
E:only-of-type	E 元素，该类型的唯一同胞元素	是	结构伪类
E:empty	没有子元素（含文本结点）的 E 元素	是	结构伪类
E:link, E:visited	作为目标尚未访问过（:link）或已经访问过（:visited）的超链接的 E 元素		链接伪类
E:focus, E:hover, E:active	处于特定用户操作下的 E 元素		用户操作伪类
E:target	作为引用 URI 目标的 E 元素	是	目标伪类
E:lang(fr)	语言为 "fr" 的 E 元素		:lang() 伪类
E:enabled E:disa-bled	状态为有效的或无效的用户界面 E 元素	是	UI 元素状态伪类
E:checked	选中了的用户界面 E 元素（如单选按钮或复选框）	是	UI 元素状态伪类
E::first-line	E 元素在格式上的第一行		::first-line 伪元素
E::first-letter	E 元素在格式上的第一个字母		::first-letter 伪元素
E::before	E 元素之前的生成内容		::before 伪元素
E::after	E 元素之后的生成内容		::after 伪元素
E.warning	类为 "warning" 的 E 元素		类选择器
E#myid	ID 等于 "myid" 的 E 元素		ID 选择器
E:not(s)	与简单选择器 s（例如 input:not(.warning)）不匹配的 E 元素	是	否定伪类

模式	含义	CSS3	选择器类型
E F	作为 E 元素后代的 F 元素		后代结合符
E > F	作为 E 元素子元素的 F 元素		子元素结合符
E + F	紧接 E 元素后面的 F 元素		相邻同胞元素结合符
E ～ F	位于 E 元素后面的 F 元素	是	通用同胞元素结合符

CSS3 颜色值

颜色值	描述和注释
rgb(red-value, green-value, blue-value)	RGB（红、绿、蓝）颜色模式值可以是 0 到 255 之间的数字或百分数（不能是数字和百分数的组合） rgb(0, 0, 0) 和 rgb(0%, 0%, 0%) 为黑色 rgb(255, 255, 255) 和 rgb(100%, 100%, 100%) 为白色
rgba(red-value, green-value, blue-value, alpha)	RGB 颜色模式，加上 alpha 透明度颜色值同 RGB 语法相同第四个参数 alpha 是大于等于 0.0（完全透明）且小于等于 1.0（完全不透明）的小数
hsl(hue-value, saturation-value, lightness-value)	HSL（色相、饱和度、亮度）颜色模式色相值用颜色环的角度（0 至 360 之间的数字）表示：0 和 360 为红色，120 为绿色，240 为蓝色，位于之间的其他值表示其他颜色饱和度值用百分数表示：0% 为灰色，100% 为完全饱和的颜色亮度值用百分数表示：0% 为黑色，100% 为白色，50% 为“正常”
hsla(hue-value, saturation-value, lightness-value, alpha)	HSL 颜色模式，加上 alpha 透明度颜色值同 HSL 语法相同第四个参数 alpha 是大于等于 0.0（完全透明）且小于等于 1.0（完全不透明）的小数

媒体查询

特性

描述和注释

width

min-width max-width 长度

输出设备的目标显示区域的宽度、最小宽度或最大宽度应用：可视媒体和触觉媒体

height min-height max-height 长度

输出设备的目标显示区域的高度、最小高度或最大高度应用：可视媒体和触觉媒体

特性

描述和注释

device-width

min-device-width max-device-width 长度

输出设备的呈现表面的宽度、最小宽度或最大宽度应用：可视媒体和触觉媒体

device-height

min-device-height max-device-height 长度

输出设备的呈现表面的高度、最小高度或最大高度应用：可视媒体和触觉媒体

orientation

portrait 或 landscape

当 height 特性值大于或等于 width 特性值时，方向为 portrait；否则为 landscape

应用：位图媒体

aspect-ratio

min-aspect-ratio

max-aspect-ratio例如(4/3或 16/9）

width 特性值与 height 特性值的比例、最小比例或最大比例应用：位图媒体

device-aspect-ratio

min-device-aspect-ratio max-device-aspect-ratio例如(4/3或 16/9）

device-width 特性值与 device-height 特性值的比例、最小比例或最大比例

应用：位图媒体

color min-color max-color 整数

输出设备每种颜色的位数、最小位数或最大位数；如果设备不是彩色的设备，则值为 0

应用：可视媒体

color-index

min-color-index max-color-index 整数

输出设备颜色查询表中项目的数量、最小数量或最大数量；如果设备不使用颜色查询表，则值为 0

应用：可视媒体

monochrome、

min-monochrome、 max-monochrome 整数

在单色帧缓冲中每像素的位数、最小位数或最大位数；如果设备不是单色的设备，则值为 0

应用：可视媒体

resolution

min-resolution max-resolution

分辨率（如 300dpi 或 118dpcm）

输出设备的分辨率、最小分辨率或最大分辨率（即像素密度）； resolution（不是 min-resolution 或 max-resolution）不会检测使用非方形像素的设备

scan

progressive 或 interlace

电视输出设备的扫描过程

应用：电视媒体

grid

0 或 1

设备是基于栅格的还是基于位图的；如果输出设备是基于栅格的

（如 TTY 终端）则值为 1，否则值为 0；这种媒体查询也可以使用不带值的形式表示（例如 @media grid）应用：可视媒体和触觉媒体