CSS

CSS属性

以下是开发中经常会用到的前缀。

-webkit：webkit核心浏览器，包括Chrome、Safari等。
-moz：火狐（Firefox）浏览器
-ms：IE浏览器。
-o：Opera浏览器。

背景属性

属性	描述	属性值
background	简化写法，可以在同一个声明中设置全部属性
background-attachment	背景图像是否固定	fixed（固定） scroll（默认值）
background-color	单独设置背景颜色
background-image	单独设置背景图像	url（地址）
background-position	设置背景图像位置	top center bottom right left
background-repeat	设置背景图像是否重复	repeat-x、y no-repeat

文本属性

属性	描述	属性值
color	设置文本颜色
line-height	设置行高。
letter-spacing	设置字符间距。letter-spacing 属性与 word-spacing 的区别在于，字母间隔修改的是字符或字母之间的间隔。
text-align	对齐元素中的文本。	left right center justify(实现两端对齐文本效果。)
text-decoration	向文本添加修饰。	none underline overline line-through blink
text-indent	缩进元素中文本的首行。
word-spacing	设置字间距。
text-transform	处理文本的大小写	capitalize（文本中的每个单词以大写字母开头。） uppercase (定义仅有大写字母。) lowercase

字体属性

属性	描述	属性值
font	把所有针对字体的属性设置在一个声明中。
font-family	设置字体系列。
font-size	设置字体的尺寸。
font-style	设置字体风格。	italic（斜体）oblique（倾斜）
font-weight	设置字体的粗细。	bold bolder

链接属性

属性	描述
a:link	普通的、未被访问的链接
a:visited	用户已访问的链接
a:hover	鼠标指针位于链接的上方
a:active	链接被点击的时刻

a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后

列表属性

属性	描述	属性值
list-style	简写属性。用于把所有用于列表的属性设置于一个声明中。
list-style-image	将图象设置为列表项标志。	url
list-style-position	设置列表中列表项标志的位置。	inside（列表项目标记放置在文本以内）outside（列表项目标记放置在文本以外）
list-style-type	设置列表项标志的类型。	disc \| circle \| square \| decimal \| decimal-leading-zero \| lower-roman \| upper-roman \| lower-greek \| lower-latin \| upper-latin \|

CSS Table 属性

属性	描述	属性值
border-collapse	设置是否把表格边框合并为单一的边框。	separate（边框会被分开）collapse（边框会合并为一个单一的边框）
border-spacing	设置分隔单元格边框的距离。
caption-side	设置表格标题的位置。	bottom（把表格标题定位在表格之下。）top（默认值。把表格标题定位在表格之上。）
empty-cells	设置是否显示表格中的空单元格。	hide（不在空单元格周围绘制边框。）
table-layout	设置显示单元、行和列的算法。	fixed（列宽由表格宽度和列宽度设定。） automatic（默认）

text-align 和 vertical-align 属性设置表格中文本的对齐方式

CSS边框属性

一切皆为框

CSS 内边距

属性	描述
padding	简写属性。作用是在一个声明中设置元素的所内边距属性。
padding-bottom	设置元素的下内边距。
padding-left	设置元素的左内边距。
padding-right	设置元素的右内边距。
padding-top	设置元素的上内边距。

CSS 外边距属性

属性	描述
margin	简写属性。在一个声明中设置所有外边距属性。
margin-bottom	设置元素的下外边距。
margin-left	设置元素的左外边距。
margin-right	设置元素的右外边距。
margin-top	设置元素的上外边距。

CSS 边框属性

属性	描述	属性值
border	简写属性，用于把针对四个边的属性设置在一个声明。
border-style	用于设置元素所有边框的样式，或者单独地为各边设置边框样式。	none hidden （对于表，hidden 用于解决边框冲突。） dashed虚线 solid实线
border-width	简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。
border-color	简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。	transparent默认值透明
border-bottom	简写属性，用于把下边框的所有属性设置到一个声明中。
border-bottom-color	设置元素的下边框的颜色。
border-bottom-style	设置元素的下边框的样式。
border-bottom-width	设置元素的下边框的宽度。
border-left	简写属性，用于把左边框的所有属性设置到一个声明中。
border-image	设置所有 border-image属性的简写属性。
border-radius	设置所有四个 border-radius 属性的简写属性
box-shadow	向方框添加一个或多个阴影	h-shadow（水平） v-shadow（垂直）

外边距合并

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

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

当一个元素出现在另一个元素上面时，第一个元素的下外边距与第二个元素的上外边距会发生合并

当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。

注意：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。

CSS 定位 (Positioning)

CSS 定位属性

属性	描述	属性值
position	把元素放置到一个静态的、相对的、绝对的、或固定的位置中。	static relative absolute fixed（生成绝对定位的元素，相对于浏览器窗口进行定位。）
top	定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。	auto
right	定义了定位元素右外边距边界与其包含块右边界之间的偏移。	auto
bottom	定义了定位元素下外边距边界与其包含块下边界之间的偏移。	auto
left	定义了定位元素左外边距边界与其包含块左边界之间的偏移。	auto
overflow	设置当元素的内容溢出其区域时发生的事情。	visible hidden scroll(会显示滚动条) auto（会显示滚动条）
clip	设置元素的形状。元素被剪入这个形状之中，然后显示出来。	shape（设置元素的形状。唯一合法的形状值是：rect (top, right, bottom, left)） auto（默认值）
vertical-align	设置元素的垂直对齐方式。	sub super top middle bottom
z-index	设置元素的堆叠顺序。

CSS浮动

属性	描述
clear	清除浮动	left right both
cursor	设置指针类型
display	如何显示元素	inline block
float	设置元素浮动	left right

个性化的字体定义

@font-face的基本语法如下：

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