CSS属性和值--备份

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） 应用：可视媒体和触觉媒体