CSS 速查（几乎涵盖所有属性，用时三天整理）

CSS 笔记速查

使用CSS

外部样式表

<head>
    <link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

文件内容：

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

内部样式表

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

内联样式

<p style="color: sienna; margin-left: 20px">This is a paragraph</p>

选择器

元素选择器

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> 元素前面插入一幅图片：

h1:before
  {
  content:url(logo.gif);
  }

:after 伪元素

":after" 伪元素可以在元素的内容之后插入新内容。
下面的例子在每个 <h1> 元素后面插入一幅图片：

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（完全不透明）<br /><br />inherit
cursor 规定要显示的光标的类型（形状）。 default 默认光标（通常是一个箭头）<br /><br />auto 默认。浏览器设置的光标。<br /><br />crosshair 光标呈现为十字线。<br /><br />pointer 光标呈现为指示链接的指针（一只手）<br /><br />move 此光标指示某对象可被移动。<br /><br />text 此光标指示文本。<br /><br />wait 此光标指示程序正忙（通常是一只表或沙漏）。<br /><br />help 此光标指示可用的帮助（通常是一个问号或一个气球）。<br /><br />示例：cursor:url('cursor.ico'),help;<br /><br />更多属性戳我　　查看演示戳我
resize 规定是否可由用户对元素的尺寸进行调整。 如果希望此属性生效，需要设置元素的 overflow 属性，值可以是 auto、hidden 或 scroll。 none 用户无法调整元素的尺寸。<br /><br />both 用户可调整元素的高度和宽度。<br /><br />horizontal 用户可调整元素的宽度。<br /><br />vertical 用户可调整元素的高度。

背景

属性 描述 值
background 简写属性，作用是将背景属性设置在一个声明中。 在一个声明中设置所有背景属性
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。 scroll(默认)<br /><br />fixed<br /><br />inherit
background-color 设置元素的背景颜色。 color_name(red）<br /><br />hex_number(#ff0000)<br /><br />rgb_number(rgb(255,0,0))<br /><br />transparent(默认，透明)<br /><br />inherit
background-image 把图像设置为背景。 background-image: url(bg1.gif),url(bg2.gif)<br /><br />none(默认)<br /><br />inherit
background-position 设置背景图像的起始位置。 top/center/bottom left/center/right<br /><br />x% y%<br /><br />xpos ypos<br /><br />【可以混合使用 % 和 position 值。】<br /><br />【默认0% 0%。仅规定一个值时，另一个默认为50%，即center】
background-repeat 设置背景图像是否及如何重复。 repeat(默认)<br /><br />repeat-x<br /><br />repeat-y<br /><br />no-repeat<br /><br />inherit
background-size 规定背景图像的尺寸 length(100px 50px)<br /><br />percentage(100% 100%)<br /><br />cover<br /><br />contain
background-origin 规定背景图片的定位区域 padding-box<br /><br />border-box<br /><br />content-box
background-clip 规定背景的绘制区域 border-box<br /><br />padding-box<br /><br />content-box

边框与轮廓

属性 描述 值
border 在一个声明中设置所有的边框属性。 border-width<br /><br />border-style<br /><br />border-color<br /><br />inherit<br /><br />示例： border:5px solid red;不能同分别设置四条边款
border-color 设置四条边框的颜色。 color_name(red）<br /><br />hex_number(#ff0000)<br /><br />rgb_number(rgb(255,0,0))<br /><br />transparent(默认，透明)<br /><br />inherit
border-style 设置四条边框的样式。 none 定义无边框。<br /><br />hidden 与 "none" 相同。不过应用于表时除外，对于表，hidden 用于解决边框冲突。<br /><br />dotted 定义点状边框。<br /><br />dashed 定义虚线。<br /><br />solid 定义实线。<br /><br />double 定义双线。双线的宽度等于 border-width 的值。<br /><br />groove 定义3D凹槽边框。效果取决于 border-color 的值。<br /><br />ridge 定义3D垄状边框。效果取决于 border-color 的值。<br /><br />inset 定义3D inset 边框。效果取决于 border-color 的值。<br /><br />outset 定义 3D outset 边框。效果取决于 border-color 的值。<br /><br />inherit<br /><br />戳我看效果
border-width 设置四条边框的宽度。 thin 定义细的边框。<br /><br />medium 默认值。定义中等的边框。<br /><br />thick 定义粗的边框。<br /><br />length 自定义边框的宽度。<br /><br />inherit
border-top/right/bottom/left 在一个声明中设置所有的上/右/下/左边框属性。 border-top/right/bottom/left-width<br /><br />border-top/right/bottom/left-style<br /><br />border-top/right/bottom/left-color<br /><br />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 定义圆角的形状。<br /><br />% 以百分比定义圆角的形状。<br /><br />示例：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<br /><br />border-image-slice<br /><br />border-image-width<br /><br />border-image-outset<br /><br />border-image-repeat<br /><br />示例：border-image:url(border.png) 30 30 round;<br /><br />讲真，不会用。W3School戳我
border-image-source 规定用作边框的图片。 none 不使用图像。<br /><br />image 图像的路径<br /><br />示例：border-image-source: url(border.png);
border-image-width 规定图片边框的宽度。从区域的上、右、下、左侧向内的距离。 number 对应的 border-width 的倍数。<br /><br />% 参考边框图像区域的尺寸：区域的高度影响水平偏移，宽度影响垂直偏移。<br /><br />auto 宽度为对应的图像切片的固有宽度。
border-image-outset 规定边框图像区域超出边框的量。 length<br /><br />number对应的 border-width 的倍数。
border-image-slice 规定图像边框的向内偏移。 number 数字值，代表图像中像素（如果是光栅图像）或矢量坐标（如果是矢量图像）。<br /><br />% 相对于图像尺寸的百分比值：图像的宽度影响水平偏移，高度影响垂直偏移。<br /><br />fill 保留边框图像的中间部分。
border-image-repeat 图像边框是否应平铺、铺满或拉伸。 stretch 拉伸图像来填充区域<br /><br />repeat 平铺（重复）图像来填充区域。<br /><br />round 类似repeat值。如果无法完整平铺所有图像，则对图像进行缩放以适应区域。
outline 在一个声明中设置所有的轮廓属性。 outline-color<br /><br />outline-style<br /><br />outline-width<br /><br />inherit<br /><br />示例：outline:#00FF00 dotted thick;
outline-color 设置轮廓的颜色。 color_name(red）<br /><br />hex_number(#ff0000)<br /><br />rgb_number(rgb(255,0,0))<br /><br />invert(默认，颜色反转（逆向的颜色）。使轮廓在不同背景颜色中都可见。)<br /><br />inherit
outline-style 设置轮廓的样式。 none 默认，定义无轮廓。<br /><br />dotted 定义点状轮廓。<br /><br />dashed 定义虚线轮廓。<br /><br />solid 定义实线轮廓。<br /><br />double 定义双线轮廓。双线的宽度等于 outline-width 的值。<br /><br />groove 定义3D凹槽轮廓。效果取决于 outline-color 的值。<br /><br />ridge 定义3D垄状轮廓。效果取决于 outline-color 的值。<br /><br />inset 定义3D inset 轮廓。效果取决于 outline-color 的值。<br /><br />outset 定义 3D outset 轮廓。效果取决于 outline-color 的值。<br /><br />inherit<br /><br />戳我看效果
outline-width 设置轮廓的宽度。 thin 定义细的轮廓。<br /><br />medium 默认值。定义中等的轮廓。<br /><br />thick 定义粗的轮廓。<br /><br />length 自定义轮廓的宽度。<br /><br />inherit
outline-offset 对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。 length 轮廓与边框边缘的距离。<br /><br />inherit
box-shadow 向方框添加一个或多个阴影。 h-shadow 必需。水平阴影的位置。允许负值。<br /><br />v-shadow 必需。垂直阴影的位置。允许负值。<br /><br />blur 可选。模糊距离。<br /><br />spread可选。阴影的尺寸。<br /><br />color 可选。阴影的颜色。请参阅 CSS 颜色值。<br /><br />inset 可选。将外部阴影 (outset) 改为内部阴影。<br /><br />戳我看效果

outline （轮廓）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。outline 属性可设置元素周围的轮廓线。

注释：请始终在 border/outline-color 属性之前声明 border/outline-style 属性。元素只有获得边框/轮廓以后才能改变其边框/轮廓的颜色。

注释：轮廓线不会占据空间，也不一定是矩形。

尺寸

属性 描述 值
height 设置元素高度。 auto 默认。浏览器会计算出实际的高度。<br /><br />length<br /><br />% 基于包含它的块级对象的百分比高度。<br /><br />inherit
width 设置元素宽度。 auto 默认。浏览器会计算出实际的宽度。<br /><br />length<br /><br />% 基于包含它的块级对象的百分比宽度。<br /><br />inherit
max-height 设置元素的最大高度。 none 默认。定义对元素被允许的最大高度没有限制。<br /><br />length<br /><br />% 定义基于包含它的块级对象的百分比最大高度。<br /><br />inherit
max-width 设置元素的最大宽度。 none 默认。定义对元素被允许的最大宽度没有限制。<br /><br />length<br /><br />% 定义基于包含它的块级对象的百分比最大宽度。<br /><br />inherit
min-height 设置元素的最小高度。 length 定义元素的最小高度。默认值是 0。<br /><br />length<br /><br />%定义基于包含它的块级对象的百分比最小高度。<br /><br />inherit
min-width 设置元素的最小宽度。 length 定义元素的最小宽度。默认取决于浏览器。<br /><br />length<br /><br />%定义基于包含它的块级对象的百分比最小宽度。<br /><br />inherit

边距属性

内边距属性（Padding）

属性 描述 值
padding 在一个声明中设置所有内边距属性。 auto 浏览器计算<br /><br />length默认值是 0px。<br /><br />% 基于父元素的百分比。<br /><br />inherit
padding-top/right/bottom/left 设置元素的某内边距。 length默认值是 0px。<br /><br />% 基于父元素的百分比。<br /><br />inherit

外边距属性（Margin）

属性 描述 值
margin 在一个声明中设置所有外边距属性。 auto 浏览器计算<br /><br />length默认值是 0px。<br /><br />% 基于父元素的百分比。<br /><br />inherit
margin-top/right/bottom/left 设置元素的某外边距。 auto 浏览器计算<br /><br />length默认值是 0px。<br /><br />% 基于父元素的百分比。<br /><br />inherit

外边距合并

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

戳我看更多

定位（Positioning）布局定位，非地理定位

属性 描述 值
position 规定元素的定位类型。 absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。<br /><br />relative 生成相对定位的元素，相对于其正常位置进行定位。<br /><br />fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。<br /><br />static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。<br /><br />inherit
top/right/bottom/left 设置定位元素上/右/下/左外边距边界与其包含块上/右/下/左边界之间的偏移。 auto 默认。浏览器计算<br /><br />% 以包含元素的百分比计。可使用负值。<br /><br />length可使用负值。<br /><br />inherit
float 规定框是否应该浮动。 left<br /><br />right<br /><br />none 默认值。<br /><br />inherit
display 规定元素应该生成的框的类型。 none<br /><br />block<br /><br />inline<br /><br />inline-block<br /><br />更多属性值戳我W3School
visibility 规定元素是否可见。会占据页面上的空间。 visible 默认值。元素是可见的。<br /><br />hidden 元素是不可见的。<br /><br />collapse 当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 "hidden"。<br /><br />inherit
vertical-align 设置元素的垂直对齐方式。 baseline 默认。元素放置在父元素的基线上。<br /><br />sub 垂直对齐文本的下标<br /><br />super 垂直对齐文本的上标<br /><br />top 把元素的顶端与行中最高元素的顶端对齐<br /><br />middle 把此元素放置在父元素的中部。<br /><br />bottom 把元素的顶端与行中最低的元素的顶端对齐。<br /><br />text-top 把元素的顶端与父元素字体的顶端对齐<br /><br />text-bottom 把元素的底端与父元素字体的底端对齐。<br /><br />length<br /><br />% 使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。<br /><br />inherit
clip 剪裁绝对定位元素。 shape 设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left)<br /><br />auto 默认值。不应用任何剪裁。<br /><br />inherit<br /><br />实例：clip:rect(0px,60px,200px,0px);
z-index 设置元素的堆叠顺序。 auto 默认。堆叠顺序与父元素相等。<br /><br />number 设置元素的堆叠顺序。<br /><br />inherit
overflow 规定当内容溢出元素框时发生的事情。 visible 默认值。内容不会被修剪，会呈现在元素框之外。<br /><br />hidden 内容会被修剪，并且其余内容是不可见的。<br /><br />scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。<br /><br />auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。<br /><br />inherit
overflow-x 如果内容溢出了元素内容区域，是否对内容的左/右边缘进行裁剪。 visible 不裁剪内容，可能会显示在内容框之外。<br /><br />hidden 裁剪内容 - 不提供滚动机制。<br /><br />scroll 裁剪内容 - 提供滚动机制。<br /><br />auto 如果溢出框，则应该提供滚动机制。<br /><br />no-display 如果内容不适合内容框，则删除整个框。<br /><br />no-content 如果内容不适合内容框，则隐藏整个内容。
overflow-y 如果内容溢出了元素内容区域，是否对内容的上/下边缘进行裁剪。 visible 不裁剪内容，可能会显示在内容框之外。<br /><br />hidden 裁剪内容 - 不提供滚动机制。<br /><br />scroll 裁剪内容 - 提供滚动机制。<br /><br />auto 如果溢出框，则应该提供滚动机制。<br /><br />no-display 如果内容不适合内容框，则删除整个框。<br /><br />no-content 如果内容不适合内容框，则隐藏整个内容。

表格属性（Table）

属性 描述 值
border-collapse 规定是否合并表格边框。 separate 默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。<br /><br />collapse 如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。<br /><br />inherit
border-spacing 规定相邻单元格边框之间的距离。 length length <br /><br />规定相邻单元的边框之间的距离。如果定义一个 length 参数，那么定义的是水平和垂直间距。如果定义两个 length 参数，那么第一个设置水平间距，而第二个设置垂直间距。<br /><br />inherit
caption-side 规定表格标题的位置。 top 默认值。把表格标题定位在表格之上。<br /><br />bottom 把表格标题定位在表格之下。<br /><br />inherit<br /><br />戳我看示例
empty-cells 规定是否显示表格中的空单元格上的边框和背景。 hide 不在空单元格周围绘制边框。<br /><br />show 在空单元格周围绘制边框。默认。<br /><br />inherit
table-layout 设置用于表格的布局算法。 automatic 默认。列宽度由单元格内容设定。<br /><br />fixed 列宽由表格宽度和列宽度设定。<br /><br />inherit

列表属性（List）

属性 描述 值
list-style 在一个声明中设置所有的列表属性。 list-style-type<br /><br />list-style-position<br /><br />list-style-image<br /><br />示例：list-style:square inside url('/i/arrow.gif');<br /><br />inherit
list-style-image 将图象设置为列表项标记。 URL 图像的路径。<br /><br />none 默认。无图形被显示。<br /><br />inherit<br /><br />示例：list-style-image:url("/i/arrow.gif");
list-style-position 设置列表项标记的放置位置。 inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐。<br /><br />outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。<br /><br />inherit
list-style-type 设置列表项标记的类型。 none 无标记<br /><br />disc 默认，实心圆。<br /><br />circle 空心圆<br /><br />square 实心方块<br /><br />decimal 数字<br /><br />decimal-leading-zero 0开头的数字标记。(01, 02, 03, 等。)<br /><br />lower-roman 小写罗马数字(i, ii, iii, iv, v, 等。)<br /><br />upper-roman 大写罗马数字(I, II, III, IV, V, 等。)<br /><br />lower-alpha 小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)<br /><br />upper-alpha 大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)<br /><br />lower-greek 小写希腊字母(alpha, beta, gamma, 等。)lower-latin 小写拉丁字母(a, b, c, d, e, 等。)<br /><br />upper-latin 大写拉丁字母(A, B, C, D, E, 等。)<br /><br />hebrew 传统的希伯来编号方式<br /><br />armenian 传统的亚美尼亚编号方式<br /><br />georgian 传统的乔治亚编号方式(an, ban, gan, 等。)<br /><br />cjk-ideographic 简单的表意数字(测试显示是 一. 二. 三. 四. 五. ...)<br /><br />hiragana 标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）<br /><br />katakana 标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）<br /><br />hiragana-iroha 标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）<br /><br />katakana-iroha 标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）

多列属性（Multi-column）

属性 描述 值
column-count 规定元素应该被分隔的列数。 number 元素内容将被划分的最佳列数。【为什么是最佳？】<br /><br />auto 默认。由其他属性决定列数，比如 "column-width"。
column-gap 规定列之间的间隔。 length 把列间的间隔设置为指定的长度。<br /><br />normal 规定列间间隔为一个常规的间隔。W3C 建议的值是 1em。
column-rule 设置所有 column-rule-* 属性的简写属性。 column-rule-width<br /><br />column-rule-style<br /><br />column-rule-color<br /><br />示例：column-rule:3px outset #ff00ff;
column-rule-color 规定列之间规则的颜色。 color 规定颜色规则。
column-rule-style 规定列之间规则的样式。 none 定义没有规则。<br /><br />hidden 定义隐藏规则。<br /><br />dotted 定义点状规则。<br /><br />dashed 定义虚线规则。<br /><br />solid 定义实线规则。<br /><br />double 定义双线规则。<br /><br />groove 定义 3D grooved 规则。该效果取决于宽度和颜色值。<br /><br />ridge 定义 3D ridged 规则。该效果取决于宽度和颜色值。<br /><br />inset 定义 3D inset 规则。该效果取决于宽度和颜色值。<br /><br />outset 定义 3D outset 规则。该效果取决于宽度和颜色值。<br /><br />戳我看示例
column-rule-width 规定列之间规则的宽度。 thin 定义纤细规则。<br /><br />medium 定义中等规则。<br /><br />thick 定义宽厚规则。<br /><br />length 规定规则的宽度。<br /><br />戳我看示例
column-span 规定元素应该横跨的列数。 1 元素应横跨一列。<br /><br />all 元素应横跨所有列。<br /><br />戳我看示例
column-width 规定列的宽度。 auto 由浏览器决定列宽。<br /><br />length 规定列的宽度。<br /><br />戳我看示例
columns 规定设置 column-width 和 column-count 的简写属性。 column-width 列的宽度。<br /><br />column-count列数<br /><br />经测试，同时定义的话按照最终列数少的显示

文本（Text）

属性 描述 值
color 设置文本的颜色。 color_name(red）<br /><br />hex_number(#ff0000)<br /><br />rgb_number(rgb(255,0,0))<br /><br />inherit
direction 规定文本的方向 / 书写方向。 ltr(默认，左到右)<br /><br />rtl(右到左)<br /><br />inherit<br /><br />具体需要再试一下，基本用不到。单句内的话语顺序不变，感觉可以用于右对齐。
letter-spacing 设置字符间距。 normal(默认)<br /><br />length(2px/-0.5em/0等价于默认)<br /><br />inherit
line-height 设置行高。 normal(默认，一般为110%-120%)<br /><br />number：乘上文字本身高度(0黏在一块/1)<br /><br />length(18px)<br /><br />%(0%/50%)<br /><br />inherit
text-align 规定文本的水平对齐方式。 left<br /><br />right<br /><br />center<br /><br />justify(两端对齐，貌似不支持了)<br /><br />默认值：如果 direction 属性是 ltr，则默认值是 left；如果 direction 是 rtl，则为 right。
text-decoration 规定添加到文本的装饰效果。 none(默认)<br /><br />underline：定义文本下的一条线。<br /><br />overline：定义文本上的一条线。<br /><br />line-through:定义穿过文本下的一条线。<br /><br />blink:定义闪烁的文本。(弃用了吧)<br /><br />inherit
text-indent 规定文本块首行的缩进。 length默认：0<br /><br />%：基于父元素宽度的百分比。<br /><br />inherit
text-transform 控制文本的大小写。 none<br /><br />capitalize<br /><br />uppercase<br /><br />lowercase<br /><br />inherit
unicode-bidi 设置文本方向。 normal(默认)<br /><br />embed<br /><br />bidi-override<br /><br />initial<br /><br />inherit<br /><br />参考示例
white-space 规定如何处理元素中的空白。 normal 默认。空白会被浏览器忽略。<br /><br />pre 空白会被浏览器保留。<br /><br />nowrap 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。<br /><br />pre-wrap 保留空白符序列，但是正常地进行换行。<br /><br />pre-line 合并空白符序列，但是保留换行符。<br /><br />inherit
word-spacing 设置单词间距。 normal<br /><br />length<br /><br />inherit
text-overflow 规定当文本溢出包含元素时发生的事情。 clip 修剪文本。(默认)<br /><br />ellipsis 显示省略符号来代表被修剪的文本。<br /><br />string使用给定的字符串来代表被修剪的文本。（只有FF支持）
text-shadow 向文本添加阴影。 h-shadow 必需。水平阴影的位置。允许负值。<br /><br />v-shadow 必需。垂直阴影的位置。允许负值。<br /><br />blur 可选。模糊的距离。<br /><br />color 可选。阴影的颜色。<br /><br />示例：5px 5px 10px #00FF00
word-break 规定非中日韩文本的换行规则。 normal 使用浏览器默认的换行规则。<br /><br />break-all 允许在单词内换行。<br /><br />keep-all 只能在半角空格或连字符处换行。
word-wrap 允许对长的不可分割的单词进行分割并换行到下一行。 normal 只在允许的断字点换行（浏览器保持默认处理）。<br /><br />break-word 在长单词或 URL 地址内部进行换行。

字体（Font）

属性 描述 值
font 在一个声明中设置所有字体属性。 font-style<br /><br />font-variant<br /><br />font-weight<br /><br />font-size/line-height<br /><br />font-family<br /><br />caption<br /><br />icon<br /><br />menu<br /><br />message-box<br /><br />small-caption<br /><br />status-bar
font-family 规定文本的字体系列。 family-name<br /><br />generic-family<br /><br />inherit<br /><br />示例： font-family:"Times New Roman",Georgia,Serif;
font-size 规定文本的字体尺寸。 xx-small/x-small/small/medium(默认)/large/x-large/xx-large<br /><br />smaller 比父元素更小的尺寸。<br /><br />larger 比父元素更大的尺寸。<br /><br />length 一个固定的值。<br /><br />% 基于父元素的一个百分比值。<br /><br />inherit
font-style 规定文本的字体样式。 normal(默认)<br /><br />italic(斜体)<br /><br />oblique(斜体)<br /><br />inherit
font-weight 规定字体的粗细。 normal <br /><br />bold<br /><br />bolder<br /><br />lighter<br /><br />100-900，必须是100的倍数。400是normal，700是bold。<br /><br />inherit<br /><br /><br /><br />
font-variant 规定是否以小型大写字母的字体显示文本。 normal(默认，标准)<br /><br />small-caps(小型大写字母)<br /><br />inherit
font-size-adjust 为元素规定 aspect 值。 一脸懵逼,戳我看W3School

CSS3 字体 @font-face

更多参考W3School

在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。

如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (myFirstFont)：

<style> 
@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9+ */
}

div
{
font-family:myFirstFont;
}
</style>

过渡

属性 描述 值
transition 简写属性，用于在一个属性中设置四个过渡属性。 transition-property<br /><br />transition-duration<br /><br />transition-timing-function<br /><br />transition-delay<br /><br />实例
transition-property 规定应用过渡的 CSS 属性的名称。 none 没有属性会获得过渡效果。<br /><br />all 所有属性都将获得过渡效果。<br /><br />property 定义应用过渡效果的 CSS 属性名称列表，列表以逗号分隔。<br /><br />示例：transitionProperty="width,height"
transition-duration 定义过渡效果花费的时间。默认是 0。 time 规定完成过渡效果需要花费的时间（以秒或毫秒计）。<br /><br />示例：transitionDuration="5s"
transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。 linear 规定以相同速度开始至结束的过渡效果（cubic-bezier(0,0,1,1)）。<br /><br />ease 规定慢速开始，然后变快，然后慢速结束的过渡效果（cubic-bezier(0.25,0.1,0.25,1)）。<br /><br />ease-in 规定以慢速开始的过渡效果（cubic-bezier(0.42,0,1,1)）。<br /><br />ease-out 规定以慢速结束的过渡效果（cubic-bezier(0,0,0.58,1)）。<br /><br />ease-in-out 规定以慢速开始和结束的过渡效果（cubic-bezier(0.42,0,0.58,1)）。<br /><br />cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中定义自己的值。可能的值是 0 至 1 之间的数值。
transition-delay 规定过渡效果何时开始。默认是 0。 time 规定在过渡效果开始之前需要等待的时间，以秒或毫秒计。

动画 @keyframes

属性 描述 值
@keyframes 规定动画。 详细内容见下面
animation 所有动画属性的简写属性，除了 animation-play-state 属性。 animation-name<br /><br />animation-duration<br /><br />animation-timing-function<br /><br />animation-delay<br /><br />animation-iteration-count<br /><br />animation-direction
animation-name 规定 @keyframes 动画的名称。 keyframename 规定需要绑定到选择器的 keyframe 的名称。<br /><br />none 规定无动画效果（可用于覆盖来自级联的动画）。
animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 time 规定完成动画所花费的时间。默认值是 0，意味着没有动画效果
animation-timing-function 规定动画的速度曲线。默认是 "ease"。 linear 动画从头到尾的速度是相同的。<br /><br />ease 默认。动画以低速开始，然后加快，在结束前变慢。<br /><br />ease-in 动画以低速开始。 <br /><br />ease-out 动画以低速结束。<br /><br />ease-in-out 动画以低速开始和结束。<br /><br />cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值。
animation-delay 规定动画何时开始。默认是 0。 time 定义动画开始前等待的时间，以秒或毫秒计。
animation-iteration-count 规定动画被播放的次数。默认是 1。 n 定义动画播放次数的数值。<br /><br />infinite 规定动画应该无限次播放。
animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。 normal 默认值。动画应该正常播放。<br /><br />alternate 动画应该轮流反向播放。
animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。 paused 规定动画已暂停。<br /><br />running 规定动画正在播放。
animation-fill-mode 规定对象动画时间之外的状态。 none 不改变默认行为。<br /><br />forwards 当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。<br /><br />backwards 在 animation-delay 所指定的一段时间内，在动画显示之前，应用开始属性值（在第一个关键帧中定义）。<br /><br />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 背面是可见的。<br /><br />hidden 背面是不可见的。
transform-origin 允许你改变被转换元素的位置。默认值： 50% 50% 0 x-axis定义视图被置于 X 轴的何处。可能的值：left/center/right/length/%<br /><br />y-axis 定义视图被置于 Y 轴的何处。可能的值：top/center/bottom/length/%<br /><br />z-axis 定义视图被置于 Z 轴的何处。可能的值： length<br /><br />戳我看示例
transform-style 规定被嵌套元素如何在 3D 空间中显示。该属性必须与 transform 属性一同使用。 flat 子元素将不保留其 3D 位置。<br /><br />preserve-3d 子元素将保留其 3D 位置。

内容生成（Generated Content）

属性 描述 值
content 与 :before 以及 :after 伪元素配合使用，来插入生成内容。 见选择器部分伪元素示例
counter-reset 创建或重置一个或多个计数器。 none 默认。不能对选择器的计数器进行重置。<br /><br />id number :id 定义重置计数器的选择器、id 或 class。 number 可设置此选择器出现次数的计数器的值。可以是正数、零或负数。<br /><br />inherit
counter-increment 递增或递减一个或多个计数器。 none 默认。选择器无计数器增量。<br /><br />id number :id 定义将增加计数的选择器、id 或 class。 number 定义增量。可以是正数、零或者负数。<br /><br />inherit 规定应该从父元素继承 counter-increment 属性的值。
quotes 设置嵌套引用的引号类型。 none 规定 "content" 属性的 "open-quote" 和 "close-quote" 的值不会产生任何引号。<br /><br />string string string string 定义要使用的引号。前两个值规定第一级引用嵌套，后两个值规定下一级引号嵌套。<br /><br />inherit

content 与 counter 结合的相关实例

请戳我W3School

quotes实例

【代码】

q:lang(en)
  {
  quotes: '"' '"' "'" "'";
  }

<html lang="en">
<head>
</head>
<body>
<p><q>This is a <q>big</q> quote</q></p>
</body>
</html>

【输出】

"This is a 'big' quote"
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 216,240评论 6赞 498
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 92,328评论 3赞 392
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 162,182评论 0赞 353
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 58,121评论 1赞 292
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 67,135评论 6赞 388
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 51,093评论 1赞 295
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 40,013评论 3赞 417
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 38,854评论 0赞 273
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 45,295评论 1赞 310
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,513评论 2赞 332
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,678评论 1赞 348
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 35,398评论 5赞 343
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,989评论 3赞 325
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,636评论 0赞 22
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,801评论 1赞 268
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 47,657评论 2赞 368
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 44,558评论 2赞 352

推荐阅读更多精彩内容

  • 关于CSS
    学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 1,050评论 0赞 1
  • HTML+CSS(47-72)
    问答题47 /72 常见浏览器兼容性问题与解决方案？ 参考答案 (1)浏览器兼容问题一：不同浏览器的标签默认的外补...
    _Yfling阅读 13,748评论 1赞 92
  • CSS学习笔记
    1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表，主要用...
    寥寥十一阅读 1,831评论 0赞 6
  • Css专题总结
    选择qi：是表达式 标签选择器 类选择器 属性选择器 继承属性： color，font，text－align，li...
    love2013阅读 2,314评论 0赞 11
  • #每日一画 还不睡 我好困
    家有萌宝的妈妈都深有体会，自宝宝出现的那天起就没有睡过一个完整觉，今日国际睡眠日，给每一位妈妈一个大大的拥抱！ 此...
    温暖的冰珊阅读 360评论 6赞 9