CSS总结

字体样式

1、font-size ： 设置字体的大小，最常用的值时长度（14px）
2、xx-small | x-small | small | medium | large | x-large | xx-large
通过上面的属性值把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-lage 。
3、large|smaller ： 把 font-size 设置为比父元素更大或更小的尺寸。
4、length ： 把 font-size 设置为一个固定的值。
5、percentage ：把 font-size 设置为基于父元素的一个百分比值。
6、font-family: ：设置字体，可以同时指定多种字体，以英文状态下的逗号隔开，表示如果浏览器不支持第一种字体，则会尝试下一个字体，直到找到合适的字体。中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当有英文字体名时必须位于中文字体名之前。如果字体名中包含空格、#、$ 等符号，则该字体必须加英文状态下的单引号或双引号，例如： font-family: "Times New Roman"; 。
各种字体：
<generic-family> 下表列出了各个字体家族以及家族中的字体成员:

generic-family	字体
serif	Times New Roman, Bodoni, Garamond, Minion Web, ITC Stone Serif, MS Georgia, Bitstream Cyberbit
sans-serif	Helvetica, MS Trebuchet, ITC Avant Garde Gothic, MS Arial, MS Verdana, Univers, Futura, ITC Stone Sans, Gill Sans, Akzidenz Grotesk
cursive	Zapf-Chancery, Caflisch Script, Adobe Poetica, Sanvito, Ex Ponto, Snell Roundhand
fantasy	Western, Alpha Geometrique, Critter, Cottonwood, FB Reactor, Studz
monospace	Courier, MS Courier New, Prestige, Everson Mono

font-style： 默认值为 normal，italic斜体版本，oblique强制将字体倾斜。
font-variant： 设置小号的大写字母，只对英文有效，作为了解内容。
font-weight： 设置字体的粗细。normal bold bolder lighter 100~900。
font： 综合写法，选择器{font: style weight size/line-height family;}

文本的样式

• 文本颜色： color : 十六进制的颜色值 / rgb(255, 0, 0) / 表示颜色的单词
• 文本对齐： text-align : left / center / right /justify
• 文本装饰： text-decoration: none / underline / line-through / overline
• 文本行高： line-height : 长度（20px）/ 数字 / 百分比 / normal
• 文本间距： letter-spacing: 长度(4px) / normal
• 字符间距： word-spacing：长度(4px) / normal
• 文本大小写： text-transform：capitalize | uppercase | lowercase | none
• capitalize： 将每个单词的第一个字母转换成大写
• uppercase： 将每个单词转换成大写
• lowercase： 将每个单词转换成小写
• none： 无转换

背景样式

• 设置背景颜色： background-color: 十六进制的颜色值 / rgb(255, 0, 0) / 表示颜色的单词
• 设置背景图片： background-image: url(./img/cat.jpg)
• 设置背景图片的重复方式： background-repeat: repeat / no-repeat / repeat-x /repeat-y
• 设置背景图片的位置： background-position: 20px 30px/ top right bottom left
• 设置背景图片是否固定： background-attachment: scroll / fixed
• 背景样式的简写属性： background：#ff0 url(./img/cat.jpg) no-repeat center fixed

超链接样式

• a:link： 选择未被点击过的链接。
• a:visited： 选择被点击过之后的链接。
• a:hover： 选择鼠标悬停在其上的超链接。
• a:active： 选择正在被点击的超链接（点着不放）。

样式的优先级

1. 基本选择器的优先级

ID 选择器 > Class 选择器 > 标签选择器 > 通配符（*）选择器

2. 引入方式的优先级

行内样式 > 内联样式 > 外部样式 > 用户样式（浏览网页的用户） > 浏览器样式（浏览器应用的默认样式）

伪类

:link	伪类将应用于未被访问过的链接
:hover	伪类将应用于有鼠标指针悬停于其上的元素。
:active	伪类将应用于被激活的元素，如被点击的链接、被按下的按钮等。
:visited	伪类将应用于已经被访问过的链接
:focus	伪类将应用于拥有键盘输入焦点的元素。（ie8以上支持）

注意：
链接伪类，他们规定执行有顺序的，不能随便更改位置：
要按照 :link --> :visited --> :hover --> :active 的顺序。 （LV包包 hao）

伪元素

属性	说明
:first-letter	向文本的第一个字母添加特殊样式。
:first-line	向文本的首行添加特殊样式。
:before	在元素的内容之前添加内容。
:after	在元素的内容之后添加内容。

透明度

1.opacity属性定义元素的不透明度

语法 : opacity: number (0-1之间的数值)
opacity 的值为1的元素是完全不透明的反之，值为0的是完全透明的。
opacity: 0.8;
2. IE的半透明滤镜
语法: filter:alpha(opacity=number);
number 的取值为100-0之间的数值
因为 ie 不支持 opacity ，只支持自己的滤镜filter:alpha(opacity=50);

改变光标的形状

属性值	说明	属性值	说明
default	默认光标	wait	等待效果
pointer	小手	help	问号
text	文本指示	crosshair	十字状