CSS 笔记速查
使用CSS
外部样式表
文件内容：
hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}
内部样式表
内联样式
This is a paragraph
选择器
元素选择器
body {
color: #000;
background: #fff;
margin: 0;
padding: 0;
font-family: Georgia, Palatino, serif;
}
选择器分组
h1,h2,h3,h4,h5,h6 {
color: green;
}
通配符选择器
* {color:red;} // 文档中的每个元素都为红色
类选择器
.important {color:red;} // 实质上就是*.important {color:red;}
ID选择器
#intro {font-weight:bold;} // 实质上就是*#intro {font-weight:bold;}
属性选择器
*[title] {color:red;} // 包含title的所有元素
a[href][title] {color:red;} //同时有 href 和 title 属性的 HTML 超链接的文本
a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;} // 根据具体属性值选择,这种格式要求必须与属性值完全匹配,引申见文中选择器参考表格
a[href="http://www.w3school.com.cn/"][title="W3School"] {color: red;} //多个属性-值选择器链接在一起来选择
结合元素选择器
p.important {color:red;} //类名为important的p元素
后代选择器
h1 em {color:red;}
子元素选择器
h1 > strong {color:red;} //选择只作为 h1 元素子元素的 strong 元素
相邻兄弟选择器
h1 + p {margin-top:50px;} //紧跟h1元素的p元素,中间不允许有其他元素,即二者为相邻兄弟
h1 + p + p {margin-top:50px;} // 代表紧跟一个h1与一个p的p元素
伪类
伪类的语法：
selector : pseudo-class {property: value}
属性|描述|CSS版本
--|--
:active|向被激活的元素添加样式。|1
:focus|向拥有键盘输入焦点的元素添加样式。|2
:hover|当鼠标悬浮在元素上方时，向元素添加样式。|1
:link|向未被访问的链接添加样式。|1
:visited|向已被访问的链接添加样式。|1
:first-child|向元素的第一个子元素添加样式。|2
:lang|向带有指定 lang 属性的元素添加样式。|2
a标签的实例
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
提示：在 CSS 定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。
提示：在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。
first-child 伪类
p:first-child {font-weight: bold;} //一个p元素，必须是其父元素的第一个子元素。
li:first-child {text-transform:uppercase;}
伪元素
伪元素的语法：
selector:pseudo-element {property:value;}
属性|描述|CSS
--|--
:first-letter|向文本的第一个字母添加特殊样式。|1
:first-line|向文本的首行添加特殊样式。|1
:before|在元素之前添加内容。|2
:after|在元素之后添加内容。|2
first-line
"first-line" 伪元素用于向文本的首行设置特殊样式。
// p元素下的第一行，内容过长，浏览器自动换行的话自动换行的部分就已经不算第一行了
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
注释："first-line" 伪元素只能用于块级元素。
注释：下面的属性可应用于 "first-line" 伪元素：
font
color
background
word-spacing
letter-spacing
text-decoration
vertical-align
text-transform
line-height
clear
first-color
"first-letter" 伪元素用于向文本的首字母设置特殊样式：
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
注释："first-letter" 伪元素只能用于块级元素。
注释：下面的属性可应用于 "first-letter" 伪元素：
font
color
background
margin
padding
border
text-decoration
vertical-align (仅当 float 为 none 时)
text-transform
line-height
float
clear
before 伪元素
":before" 伪元素可以在元素的内容前面插入新内容。
下面的例子在每个 元素前面插入一幅图片：
h1:before
{
content:url(logo.gif);
}
:after 伪元素
":after" 伪元素可以在元素的内容之后插入新内容。
下面的例子在每个 元素后面插入一幅图片：
h1:after
{
content:url(logo.gif);
}
选择器参考表格
| 选择器 | 描述 | |
|---|---|---|
| [attribute] | 用于选取带有指定属性的元素。 | |
| [attribute=value] | 用于选取带有指定属性和值的元素。 | |
| [attribute~=value] | 用于选取属性值中包含指定词汇的元素。 | |
| [attribute | =value] | 用于选取带有以指定值开头的属性值的元素，该值必须是整个单词。 |
| [attribute^=value] | 匹配属性值以指定值开头的每个元素。 | |
| [attribute$=value] | 匹配属性值以指定值结尾的每个元素。 | |
| [attribute*=value] | 匹配属性值中包含指定值的每个元素。 |
CSS 样式
| 属性 | 描述 | 值 |
|---|---|---|
| opacity | 不透明度 | value 规定不透明度。从 0.0 （完全透明）到 1.0（完全不透明） inherit |
| cursor | 规定要显示的光标的类型（形状）。 | default 默认光标（通常是一个箭头） auto 默认。浏览器设置的光标。 crosshair 光标呈现为十字线。 pointer 光标呈现为指示链接的指针（一只手） move 此光标指示某对象可被移动。 text 此光标指示文本。 wait 此光标指示程序正忙（通常是一只表或沙漏）。 help 此光标指示可用的帮助（通常是一个问号或一个气球）。 示例： cursor:url('cursor.ico'),help;更多属性戳我 查看演示戳我 |
| resize | 规定是否可由用户对元素的尺寸进行调整。 如果希望此属性生效，需要设置元素的 overflow 属性，值可以是 auto、hidden 或 scroll。 | none 用户无法调整元素的尺寸。 both 用户可调整元素的高度和宽度。 horizontal 用户可调整元素的宽度。 vertical 用户可调整元素的高度。 |
背景
| 属性 | 描述 | 值 |
|---|---|---|
| background | 简写属性，作用是将背景属性设置在一个声明中。 | 在一个声明中设置所有背景属性 |
| background-attachment | 背景图像是否固定或者随着页面的其余部分滚动。 | scroll(默认) fixed inherit |
| background-color | 设置元素的背景颜色。 | color_name(red） hex_number(#ff0000) rgb_number(rgb(255,0,0)) transparent(默认，透明) inherit |
| background-image | 把图像设置为背景。 | background-image: url(bg1.gif),url(bg2.gif) none(默认) inherit |
| background-position | 设置背景图像的起始位置。 | top/center/bottom left/center/right x% y% xpos ypos 【可以混合使用 % 和 position 值。】 【默认0% 0%。仅规定一个值时，另一个默认为50%，即center】 |
| background-repeat | 设置背景图像是否及如何重复。 | repeat(默认) repeat-x repeat-y no-repeat inherit |
| background-size | 规定背景图像的尺寸 | length(100px 50px) percentage(100% 100%) cover contain |
| background-origin | 规定背景图片的定位区域 | padding-box border-box content-box |
| background-clip | 规定背景的绘制区域 | border-box padding-box content-box |
边框与轮廓
| 属性 | 描述 | 值 |
|---|---|---|
| border | 在一个声明中设置所有的边框属性。 | border-width border-style border-color inherit 示例： border:5px solid red;不能同分别设置四条边款 |
| border-color | 设置四条边框的颜色。 | color_name(red） hex_number(#ff0000) rgb_number(rgb(255,0,0)) transparent(默认，透明) inherit |
| border-style | 设置四条边框的样式。 | none 定义无边框。 hidden 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。 dotted 定义点状边框。 dashed 定义虚线。 solid 定义实线。 double 定义双线。双线的宽度等于 border-width 的值。 groove 定义3D凹槽边框。效果取决于 border-color 的值。 ridge 定义3D垄状边框。效果取决于 border-color 的值。 inset 定义3D inset 边框。效果取决于 border-color 的值。 outset 定义 3D outset 边框。效果取决于 border-color 的值。 inherit 戳我看效果 |
| border-width | 设置四条边框的宽度。 | thin 定义细的边框。 medium 默认值。定义中等的边框。 thick 定义粗的边框。 length 自定义边框的宽度。 inherit |
| border-top/right/bottom/left | 在一个声明中设置所有的上/右/下/左边框属性。 | border-top/right/bottom/left-width border-top/right/bottom/left-style border-top/right/bottom/left-color inherit |
| border-top/right/bottom/left-color | 设置边框的颜色。 | 见border-color |
| border-top/right/bottom/left-style | 设置边框的样式。 | 见border-style |
| border-top/right/bottom/left-width | 设置边框的宽度。 | 见border-width |
| border-radius | 简写属性，设置所有四个 border-*-radius 属性。 | length 定义圆角的形状。 % 以百分比定义圆角的形状。 示例： border-radius:25px 20px 15px 10px;分别是左上，右上，右下，左下。 |
| border-top-left-radius | 定义边框左上角的形状。 | 见 border-radius |
| border-top-right-radius | 定义边框右上角的形状。 | 见 border-radius |
| border-bottom-right-radius | 定义边框右下角的形状。 | 见 border-radius |
| border-bottom-left-radius | 定义边框左下角的形状。 | 见 border-radius |
| border-image | 简写属性，设置所有 border-image-* 属性。 | border-image-source border-image-slice border-image-width border-image-outset border-image-repeat 示例： border-image:url(border.png) 30 30 round;讲真，不会用。W3School戳我 |
| border-image-source | 规定用作边框的图片。 | none 不使用图像。 image 图像的路径 示例： border-image-source: url(border.png); |
| border-image-width | 规定图片边框的宽度。从区域的上、右、下、左侧向内的距离。 | number 对应的 border-width 的倍数。 % 参考边框图像区域的尺寸：区域的高度影响水平偏移，宽度影响垂直偏移。 auto 宽度为对应的图像切片的固有宽度。 |
| border-image-outset | 规定边框图像区域超出边框的量。 | length number对应的 border-width 的倍数。 |
| border-image-slice | 规定图像边框的向内偏移。 | number 数字值，代表图像中像素（如果是光栅图像）或矢量坐标（如果是矢量图像）。 % 相对于图像尺寸的百分比值：图像的宽度影响水平偏移，高度影响垂直偏移。 fill 保留边框图像的中间部分。 |
| border-image-repeat | 图像边框是否应平铺、铺满或拉伸。 | stretch 拉伸图像来填充区域 repeat 平铺（重复）图像来填充区域。 round 类似repeat值。如果无法完整平铺所有图像，则对图像进行缩放以适应区域。 |
| outline | 在一个声明中设置所有的轮廓属性。 | outline-color outline-style outline-width inherit 示例： outline:#00FF00 dotted thick; |
| outline-color | 设置轮廓的颜色。 | color_name(red） hex_number(#ff0000) rgb_number(rgb(255,0,0)) invert(默认，颜色反转（逆向的颜色）。使轮廓在不同背景颜色中都可见。) inherit |
| outline-style | 设置轮廓的样式。 | none 默认，定义无轮廓。 dotted 定义点状轮廓。 dashed 定义虚线轮廓。 solid 定义实线轮廓。 double 定义双线轮廓。双线的宽度等于 outline-width 的值。 groove 定义3D凹槽轮廓。效果取决于 outline-color 的值。 ridge 定义3D垄状轮廓。效果取决于 outline-color 的值。 inset 定义3D inset 轮廓。效果取决于 outline-color 的值。 outset 定义 3D outset 轮廓。效果取决于 outline-color 的值。 inherit 戳我看效果 |
| outline-width | 设置轮廓的宽度。 | thin 定义细的轮廓。 medium 默认值。定义中等的轮廓。 thick 定义粗的轮廓。 length 自定义轮廓的宽度。 inherit |
| outline-offset | 对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。 | length 轮廓与边框边缘的距离。 inherit |
| box-shadow | 向方框添加一个或多个阴影。 | h-shadow 必需。水平阴影的位置。允许负值。 v-shadow 必需。垂直阴影的位置。允许负值。 blur 可选。模糊距离。 spread可选。阴影的尺寸。 color 可选。阴影的颜色。请参阅 CSS 颜色值。 inset 可选。将外部阴影 (outset) 改为内部阴影。 戳我看效果 |
outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。outline 属性可设置元素周围的轮廓线。
注释：请始终在 border/outline-color 属性之前声明 border/outline-style 属性。元素只有获得边框/轮廓以后才能改变其边框/轮廓的颜色。
注释：轮廓线不会占据空间，也不一定是矩形。
尺寸
| 属性 | 描述 | 值 |
|---|---|---|
| height | 设置元素高度。 | auto 默认。浏览器会计算出实际的高度。 length % 基于包含它的块级对象的百分比高度。 inherit |
| width | 设置元素宽度。 | auto 默认。浏览器会计算出实际的宽度。 length % 基于包含它的块级对象的百分比宽度。 inherit |
| max-height | 设置元素的最大高度。 | none 默认。定义对元素被允许的最大高度没有限制。 length % 定义基于包含它的块级对象的百分比最大高度。 inherit |
| max-width | 设置元素的最大宽度。 | none 默认。定义对元素被允许的最大宽度没有限制。 length % 定义基于包含它的块级对象的百分比最大宽度。 inherit |
| min-height | 设置元素的最小高度。 | length 定义元素的最小高度。默认值是 0。 length %定义基于包含它的块级对象的百分比最小高度。 inherit |
| min-width | 设置元素的最小宽度。 | length 定义元素的最小宽度。默认取决于浏览器。 length %定义基于包含它的块级对象的百分比最小宽度。 inherit |
边距属性
内边距属性（Padding）
| 属性 | 描述 | 值 |
|---|---|---|
| padding | 在一个声明中设置所有内边距属性。 | auto 浏览器计算 length默认值是 0px。 % 基于父元素的百分比。 inherit |
| padding-top/right/bottom/left | 设置元素的某内边距。 | length默认值是 0px。 % 基于父元素的百分比。 inherit |
外边距属性（Margin）
| 属性 | 描述 | 值 |
|---|---|---|
| margin | 在一个声明中设置所有外边距属性。 | auto 浏览器计算 length默认值是 0px。 % 基于父元素的百分比。 inherit |
| margin-top/right/bottom/left | 设置元素的某外边距。 | auto 浏览器计算 length默认值是 0px。 % 基于父元素的百分比。 inherit |
外边距合并
外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
戳我看更多
定位（Positioning）布局定位，非地理定位
| 属性 | 描述 | 值 |
|---|---|---|
| position | 规定元素的定位类型。 | absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 relative 生成相对定位的元素，相对于其正常位置进行定位。 fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。 static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 inherit |
| top/right/bottom/left | 设置定位元素上/右/下/左外边距边界与其包含块上/右/下/左边界之间的偏移。 | auto 默认。浏览器计算 % 以包含元素的百分比计。可使用负值。 length可使用负值。 inherit |
| float | 规定框是否应该浮动。 | left right none 默认值。 inherit |
| display | 规定元素应该生成的框的类型。 | none block inline inline-block 更多属性值戳我W3School |
| visibility | 规定元素是否可见。会占据页面上的空间。 | visible 默认值。元素是可见的。 hidden 元素是不可见的。 collapse 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。 inherit |
| vertical-align | 设置元素的垂直对齐方式。 | baseline 默认。元素放置在父元素的基线上。 sub 垂直对齐文本的下标 super 垂直对齐文本的上标 top 把元素的顶端与行中最高元素的顶端对齐 middle 把此元素放置在父元素的中部。 bottom 把元素的顶端与行中最低的元素的顶端对齐。 text-top 把元素的顶端与父元素字体的顶端对齐 text-bottom 把元素的底端与父元素字体的底端对齐。 length % 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。 inherit |
| clip | 剪裁绝对定位元素。 | shape 设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left) auto 默认值。不应用任何剪裁。 inherit 实例： clip:rect(0px,60px,200px,0px); |
| z-index | 设置元素的堆叠顺序。 | auto 默认。堆叠顺序与父元素相等。 number 设置元素的堆叠顺序。 inherit |
| overflow | 规定当内容溢出元素框时发生的事情。 | visible 默认值。内容不会被修剪，会呈现在元素框之外。 hidden 内容会被修剪，并且其余内容是不可见的。 scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 inherit |
| overflow-x | 如果内容溢出了元素内容区域，是否对内容的左/右边缘进行裁剪。 | visible 不裁剪内容，可能会显示在内容框之外。 hidden 裁剪内容 - 不提供滚动机制。 scroll 裁剪内容 - 提供滚动机制。 auto 如果溢出框，则应该提供滚动机制。 no-display 如果内容不适合内容框，则删除整个框。 no-content 如果内容不适合内容框，则隐藏整个内容。 |
| overflow-y | 如果内容溢出了元素内容区域，是否对内容的上/下边缘进行裁剪。 | visible 不裁剪内容，可能会显示在内容框之外。 hidden 裁剪内容 - 不提供滚动机制。 scroll 裁剪内容 - 提供滚动机制。 auto 如果溢出框，则应该提供滚动机制。 no-display 如果内容不适合内容框，则删除整个框。 no-content 如果内容不适合内容框，则隐藏整个内容。 |
表格属性（Table）
| 属性 | 描述 | 值 |
|---|---|---|
| border-collapse | 规定是否合并表格边框。 | separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。 collapse 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。 inherit |
| border-spacing | 规定相邻单元格边框之间的距离。 | length length 规定相邻单元的边框之间的距离。如果定义一个 length 参数，那么定义的是水平和垂直间距。如果定义两个 length 参数，那么第一个设置水平间距，而第二个设置垂直间距。 inherit |
| caption-side | 规定表格标题的位置。 | top 默认值。把表格标题定位在表格之上。 bottom 把表格标题定位在表格之下。 inherit 戳我看示例 |
| empty-cells | 规定是否显示表格中的空单元格上的边框和背景。 | hide 不在空单元格周围绘制边框。 show 在空单元格周围绘制边框。默认。 inherit |
| table-layout | 设置用于表格的布局算法。 | automatic 默认。列宽度由单元格内容设定。 fixed 列宽由表格宽度和列宽度设定。 inherit |
列表属性（List）
| 属性 | 描述 | 值 |
|---|---|---|
| list-style | 在一个声明中设置所有的列表属性。 | list-style-type list-style-position list-style-image 示例： list-style:square inside url('/i/arrow.gif');inherit |
| list-style-image | 将图象设置为列表项标记。 | URL 图像的路径。 none 默认。无图形被显示。 inherit 示例： list-style-image:url("/i/arrow.gif"); |
| list-style-position | 设置列表项标记的放置位置。 | inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐。 outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。 inherit |
| list-style-type | 设置列表项标记的类型。 | none 无标记 disc 默认，实心圆。 circle 空心圆 square 实心方块 decimal 数字 decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。) lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。) upper-roman 大写罗马数字(I, II, III, IV, V, 等。) lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。) upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。) lower-greek 小写希腊字母(alpha, beta, gamma, 等。)lower-latin 小写拉丁字母(a, b, c, d, e, 等。) upper-latin 大写拉丁字母(A, B, C, D, E, 等。) hebrew 传统的希伯来编号方式 armenian 传统的亚美尼亚编号方式 georgian 传统的乔治亚编号方式(an, ban, gan, 等。) cjk-ideographic 简单的表意数字(测试显示是 一. 二. 三. 四. 五. ...) hiragana 标记是：a, i, u, e, o, ka, ki, 等。（日文片假名） katakana 标记是：A, I, U, E, O, KA, KI, 等。（日文片假名） hiragana-iroha 标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名） katakana-iroha 标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名） |
多列属性（Multi-column）
| 属性 | 描述 | 值 |
|---|---|---|
| column-count | 规定元素应该被分隔的列数。 | number 元素内容将被划分的最佳列数。【为什么是最佳？】 auto 默认。由其他属性决定列数，比如 "column-width"。 |
| column-gap | 规定列之间的间隔。 | length 把列间的间隔设置为指定的长度。 normal 规定列间间隔为一个常规的间隔。W3C 建议的值是 1em。 |
| column-rule | 设置所有 column-rule-* 属性的简写属性。 | column-rule-width column-rule-style column-rule-color 示例： column-rule:3px outset #ff00ff; |
| column-rule-color | 规定列之间规则的颜色。 | color 规定颜色规则。 |
| column-rule-style | 规定列之间规则的样式。 | none 定义没有规则。 hidden 定义隐藏规则。 dotted 定义点状规则。 dashed 定义虚线规则。 solid 定义实线规则。 double 定义双线规则。 groove 定义 3D grooved 规则。该效果取决于宽度和颜色值。 ridge 定义 3D ridged 规则。该效果取决于宽度和颜色值。 inset 定义 3D inset 规则。该效果取决于宽度和颜色值。 outset 定义 3D outset 规则。该效果取决于宽度和颜色值。 戳我看示例 |
| column-rule-width | 规定列之间规则的宽度。 | thin 定义纤细规则。 medium 定义中等规则。 thick 定义宽厚规则。 length 规定规则的宽度。 戳我看示例 |
| column-span | 规定元素应该横跨的列数。 | 1 元素应横跨一列。 all 元素应横跨所有列。 戳我看示例 |
| column-width | 规定列的宽度。 | auto 由浏览器决定列宽。 length 规定列的宽度。 戳我看示例 |
| columns | 规定设置 column-width 和 column-count 的简写属性。 | column-width 列的宽度。 column-count列数 经测试，同时定义的话按照最终列数少的显示 |
文本（Text）
| 属性 | 描述 | 值 |
|---|---|---|
| color | 设置文本的颜色。 | color_name(red） hex_number(#ff0000) rgb_number(rgb(255,0,0)) inherit |
| direction | 规定文本的方向 / 书写方向。 | ltr(默认，左到右) rtl(右到左) inherit 具体需要再试一下，基本用不到。单句内的话语顺序不变，感觉可以用于右对齐。 |
| letter-spacing | 设置字符间距。 | normal(默认) length(2px/-0.5em/0等价于默认) inherit |
| line-height | 设置行高。 | normal(默认，一般为110%-120%) number：乘上文字本身高度(0黏在一块/1) length(18px) %(0%/50%) inherit |
| text-align | 规定文本的水平对齐方式。 | left right center justify(两端对齐，貌似不支持了) 默认值：如果 direction 属性是 ltr，则默认值是 left；如果 direction 是 rtl，则为 right。 |
| text-decoration | 规定添加到文本的装饰效果。 | none(默认) underline：定义文本下的一条线。 overline：定义文本上的一条线。 line-through:定义穿过文本下的一条线。 blink:定义闪烁的文本。(弃用了吧) inherit |
| text-indent | 规定文本块首行的缩进。 | length默认：0 %：基于父元素宽度的百分比。 inherit |
| text-transform | 控制文本的大小写。 | none capitalize uppercase lowercase inherit |
| unicode-bidi | 设置文本方向。 | normal(默认) embed bidi-override initial inherit 参考示例 |
| white-space | 规定如何处理元素中的空白。 | normal 默认。空白会被浏览器忽略。 pre 空白会被浏览器保留。 nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 pre-wrap 保留空白符序列，但是正常地进行换行。 pre-line 合并空白符序列，但是保留换行符。 inherit |
| word-spacing | 设置单词间距。 | normal length inherit |
| text-overflow | 规定当文本溢出包含元素时发生的事情。 | clip 修剪文本。(默认) ellipsis 显示省略符号来代表被修剪的文本。 string使用给定的字符串来代表被修剪的文本。（只有FF支持） |
| text-shadow | 向文本添加阴影。 | h-shadow 必需。水平阴影的位置。允许负值。 v-shadow 必需。垂直阴影的位置。允许负值。 blur 可选。模糊的距离。 color 可选。阴影的颜色。 示例： 5px 5px 10px #00FF00 |
| word-break | 规定非中日韩文本的换行规则。 | normal 使用浏览器默认的换行规则。 break-all 允许在单词内换行。 keep-all 只能在半角空格或连字符处换行。 |
| word-wrap | 允许对长的不可分割的单词进行分割并换行到下一行。 | normal 只在允许的断字点换行（浏览器保持默认处理）。 break-word 在长单词或 URL 地址内部进行换行。 |
字体（Font）
| 属性 | 描述 | 值 |
|---|---|---|
| font | 在一个声明中设置所有字体属性。 | font-style font-variant font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar |
| font-family | 规定文本的字体系列。 | family-name generic-family inherit 示例： font-family:"Times New Roman",Georgia,Serif; |
| font-size | 规定文本的字体尺寸。 | xx-small/x-small/small/medium(默认)/large/x-large/xx-large smaller 比父元素更小的尺寸。 larger 比父元素更大的尺寸。 length 一个固定的值。 % 基于父元素的一个百分比值。 inherit |
| font-style | 规定文本的字体样式。 | normal(默认) italic(斜体) oblique(斜体) inherit |
| font-weight | 规定字体的粗细。 | normal bold bolder lighter 100-900，必须是100的倍数。400是normal，700是bold。 inherit |
| font-variant | 规定是否以小型大写字母的字体显示文本。 | normal(默认，标准) small-caps(小型大写字母) inherit |
| font-size-adjust | 为元素规定 aspect 值。 | 一脸懵逼,戳我看W3School |
CSS3 字体 @font-face
更多参考W3School
在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。
如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：
过渡
| 属性 | 描述 | 值 |
|---|---|---|
| transition | 简写属性，用于在一个属性中设置四个过渡属性。 | transition-property transition-duration transition-timing-function transition-delay 实例 |
| transition-property | 规定应用过渡的 CSS 属性的名称。 | none 没有属性会获得过渡效果。 all 所有属性都将获得过渡效果。 property 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。 示例： transitionProperty="width,height" |
| transition-duration | 定义过渡效果花费的时间。默认是 0。 | time 规定完成过渡效果需要花费的时间（以秒或毫秒计）。 示例： transitionDuration="5s" |
| transition-timing-function | 规定过渡效果的时间曲线。默认是 "ease"。 | linear 规定以相同速度开始至结束的过渡效果（cubic-bezier(0,0,1,1)）。 ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。 ease-in 规定以慢速开始的过渡效果（cubic-bezier(0.42,0,1,1)）。 ease-out 规定以慢速结束的过渡效果（cubic-bezier(0,0,0.58,1)）。 ease-in-out 规定以慢速开始和结束的过渡效果（cubic-bezier(0.42,0,0.58,1)）。 cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。 |
| transition-delay | 规定过渡效果何时开始。默认是 0。 | time 规定在过渡效果开始之前需要等待的时间，以秒或毫秒计。 |
动画 @keyframes
| 属性 | 描述 | 值 |
|---|---|---|
| @keyframes | 规定动画。 | 详细内容见下面 |
| animation | 所有动画属性的简写属性，除了 animation-play-state 属性。 | animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction |
| animation-name | 规定 @keyframes 动画的名称。 | keyframename 规定需要绑定到选择器的 keyframe 的名称。 none 规定无动画效果（可用于覆盖来自级联的动画）。 |
| animation-duration | 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 | time 规定完成动画所花费的时间。默认值是 0，意味着没有动画效果 |
| animation-timing-function | 规定动画的速度曲线。默认是 "ease"。 | linear 动画从头到尾的速度是相同的。 ease 默认。动画以低速开始，然后加快，在结束前变慢。 ease-in 动画以低速开始。 ease-out 动画以低速结束。 ease-in-out 动画以低速开始和结束。 cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。 |
| animation-delay | 规定动画何时开始。默认是 0。 | time 定义动画开始前等待的时间，以秒或毫秒计。 |
| animation-iteration-count | 规定动画被播放的次数。默认是 1。 | n 定义动画播放次数的数值。 infinite 规定动画应该无限次播放。 |
| animation-direction | 规定动画是否在下一周期逆向地播放。默认是 "normal"。 | normal 默认值。动画应该正常播放。 alternate 动画应该轮流反向播放。 |
| animation-play-state | 规定动画是否正在运行或暂停。默认是 "running"。 | paused 规定动画已暂停。 running 规定动画正在播放。 |
| animation-fill-mode | 规定对象动画时间之外的状态。 | none 不改变默认行为。 forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。 backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。 both 向前和向后填充模式都被应用。 |
@keyframes
语法：
@keyframes animationname {keyframes-selector {css-styles;}}
animationname 必需。定义动画的名称。
keyframes-selector 必需。动画时长的百分比。
合法的值：
0-100%
from（与 0% 相同）
to（与 100% 相同）
css-styles 必需。一个或多个合法的 CSS 样式属性。
【实例】
@keyframes mymove
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
@-moz-keyframes mymove /* Firefox */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
@-o-keyframes mymove /* Opera */
{
0% {top:0px; left:0px; background:red;}
25% {top:0px; left:100px; background:blue;}
50% {top:100px; left:100px; background:yellow;}
75% {top:100px; left:0px; background:green;}
100% {top:0px; left:0px; background:red;}
}
2D/3D转换
| 属性 | 描述 | 值 |
|---|---|---|
| transform | 向元素应用 2D 或 3D 转换。 | 戳我了解 |
| backface-visibility | 定义元素在不面对屏幕时是否可见。 | visible 背面是可见的。 hidden 背面是不可见的。 |
| transform-origin | 允许你改变被转换元素的位置。默认值： 50% 50% 0 | x-axis定义视图被置于 X 轴的何处。可能的值：left/center/right/length/% y-axis 定义视图被置于 Y 轴的何处。可能的值：top/center/bottom/length/% z-axis 定义视图被置于 Z 轴的何处。可能的值： length 戳我看示例 |
| transform-style | 规定被嵌套元素如何在 3D 空间中显示。该属性必须与 transform 属性一同使用。 | flat 子元素将不保留其 3D 位置。 preserve-3d 子元素将保留其 3D 位置。 |
内容生成（Generated Content）
| 属性 | 描述 | 值 |
|---|---|---|
| content | 与 :before 以及 :after 伪元素配合使用，来插入生成内容。 | 见选择器部分伪元素示例 |
| counter-reset | 创建或重置一个或多个计数器。 | none 默认。不能对选择器的计数器进行重置。 id number :id 定义重置计数器的选择器、id 或 class。 number 可设置此选择器出现次数的计数器的值。可以是正数、零或负数。 inherit |
| counter-increment | 递增或递减一个或多个计数器。 | none 默认。选择器无计数器增量。 id number :id 定义将增加计数的选择器、id 或 class。 number 定义增量。可以是正数、零或者负数。 inherit 规定应该从父元素继承 counter-increment 属性的值。 |
| quotes | 设置嵌套引用的引号类型。 | none 规定 "content" 属性的 "open-quote" 和 "close-quote" 的值不会产生任何引号。 string string string string 定义要使用的引号。前两个值规定第一级引用嵌套，后两个值规定下一级引号嵌套。 inherit |
content 与 counter 结合的相关实例
请戳我W3School
quotes实例
【代码】
q:lang(en)
{
quotes: '"' '"' "'" "'";
}
This is a big
quote
【输出】
"This is a 'big' quote"