CSS属性值的分类
文档中属性值语法符号的意思：|（表示选择其中的一个属性值）、||（表示可以同时出现）、<>（表示该属性值包含多种赋值情况）、[]（表示可选值，可要可不要）、&&（两个都必须出现），还有与正则表达式相同的。
例如：font-style:normal|italic|oblique
background:[background-color] || [background-image] || [background-repeat] || [background-attachment] || [background-position]（复合属性）
font-size:<absolute-size> | <relative-size> | <length> | <percentage>
font-family：[ <family-name> | <generic-family> ] [, <family-name> | <generic-family>]*
text-shadow：none | <shadow> [ , <shadow> ]* <shadow> = <length>{2,3} && <color>?
与正则表达式相同的语法符号的意思：*（表示任意多个），{n1，n2}（表示匹配的次数：n1~n2），？（出现0次或1次，是对前面部分的修饰），+（至少一次）。
例如：background-image：<bg-image> [ , <bg-image> ]*
overflow：<overflow-style>{1,2}
font：[ [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family> ] | caption | icon | menu | message-box | small-caption |
counter-increment：none | [<identifier> <integer>]+
颜色属性
color 赋值的方式有HEX（十六进制赋值：#rrggbb或#rgb，最常用的方式）、RGBA（红绿蓝透明度，A是透明度在0~1之间取值，1表示不透明，0表示透明。使用方式：rgba（24,200,90,0.5））、transparent（全透明）、ColorName（基本不用）、RGB（使用方式：rgb(0,0,0)或者rgb(34%，50%，25%)）、HSL（CSS3有效,H表示色调，S表示饱和度，L表示亮度，语法：HSL（HSL），几乎不用）、HSLA。
opacity 元素的透明度。
语法：opacity:<number>
属性值在0.0到1.0范围内，0表示透明，1表示不透明，超过范围的取边界值。
一般情况下用在图片右下角对图片做一个说明的情况。
IE9之前的版本不支持opacity属性，但支持filter属性，filter是IE独有的滤镜属性，为的是兼容之前的版本。（只适用于早期的IE浏览器，语法：filter:alpha(opacity=20)）。
例如：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>元素透明度</title> 6 <meta charset="utf-8" /> 7 </head> 8 <body> 9 <ul> 10 <li> 11 opacity:元素透明度 12 <p style="background:gray url(../images/boy1.jpg);height:300px;opacity:.5;"> 13 </p> 14 </li> 15 </ul> 16 </body> 17 </html>
字体样式属性的使用
font-style：normal | italic | oblique。
默认值：normal（正体）斜体在网页中使用较少，一般使用<i>或者<em>标签来使用斜体。
font-weight：设置文本字体的粗细程度。
语法：font-weight：normal | bold（加粗） | bolder（相当于<strong>和<b>标签） | lighter | <integer>（以100的整数倍赋值，移植到900，400=normal，700=bold）
默认值：normal
font-size：设置字体的大小。
语法：font-size：<absolute-size> | <relative-size> | <length> | <percentage>
默认值：medium
<absolute-size>可选参数值：xx-small | x-small | small | medium | large | x-large | xx-large
<relative-size>相对于父对象中字体的尺寸进行调节，使用成比例的em单位计算。可选参数值：smaller | larger
<length>用长度值指定文字大小。不允许负值。
<percentage>百分比指定文字大小。
以像素值赋值的情况较多，像素值通常都是偶数。
font-family：字体名称。
语法：font-family：使用逗号隔开多种字体（优先级从前向后，如果系统中没有字体，则往后面寻找）。
font：字体的综合属性（对上面几种属性的综合使用）。
语法：参照帮助文档。font-size和字体一定要用。
使用频率一般。
简单的示例：font：14px（字体大小）/20px（行高） Times；（一定要在最后制定字体，否则字体大小等没有效果）
文本修饰
white-space 设置对象内空格的处理方式
语法：white-space：normal | pre | nowrap | pre-wrap | pre-line
normal：默认处理方式。
pre：用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字超出边界时不换行。（按照代码编辑时的样子显示，空格也会显示出来，即文本编写时产生的空格也被保留下来了，解决办法：文字与标签紧挨在一起写）
nowrap：强制在同一行内显示所有文本，直到文本结束或者遭遇br对象。（不会按照编辑形式呈现，会去掉空格，文字超出边界不换行）
pre-wrap：用等宽字体显示预先格式化的文本，不合并文字间的空白距离，当文字碰到边界时发生换行。（保留空格，当文字碰到边界时换行。）
pre-line：保持文本的换行，不保留文字间的空白距离，当文字碰到边界时发生换行。（不保留空格，保留文字的换行，当文字碰到边界时换行。）
text-indent 文本的缩进
注意：在块级元素下才有效。
属性值可以设置px也可以设置百分比。（如：百分比设置为50%时从屏幕的中间缩进）
采用负值的方式隐藏文字。
示例代码如下
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>文本修饰</title> 6 <meta charset="utf-8" /> 7 </head> 8 <body> 9 <ul> 10 <li> 11 <strong>没有white-space修饰的样式</strong> 12 <p> 13 没有white-space修饰的样式 14 </p> 15 </li> 16 <li> 17 <strong>white-space:pre</strong> 18 <p style="white-space:pre;">这是预格式的处理1 white-space:pre</p> 19 <p style="white-space:pre;"> 20 这是预格式的处理2 white-space:pre 21 按照代码编辑的格式来呈现 22 </p> 23 <p style="white-space:pre;200px;border:1px solid red;"> 24 文字超出边界的情况文字超出边界的情况文字超出边界的情况文字超出边界的情况文字超出边界的情况文字超出边界的情况 25 </p> 26 </li> 27 <li> 28 <strong>white-space:nowrap</strong> 29 <p style="white-space:nowrap;200px;border:1px solid red;"> 30 这是预格式的处理 white-space:nowrap 不会按照编辑形式呈现，会去掉空格，文字超出边界不换行。 31 这里换行了、 32 </p> 33 </li> 34 <li> 35 <strong>white-space:pre-wrap</strong> 36 <p style="white-space:pre-wrap;200px;border:1px solid red;"> 37 这是预格式的处理 white-space:pre-wrap 保留空格，当文字碰到边界时换行。 38 这里换行了、 39 </p> 40 </li> 41 <li> 42 <strong>white-space:pre-line</strong> 43 <p style="white-space:pre-line;200px;border:1px solid red;"> 44 这是预格式的处理 white-space:pre-line 不保留空格，保留文字的换行，当文字碰到边界时换行。 45 这里换行了、 46 </p> 47 </li> 48 <li> 49 <strong>文本的缩进</strong> 50 <p> 51 以上方式，务必本人保管好底稿，以便查证，即使自己的大作不被采用，将来可以修改后再次投递，自己不会蒙受丢稿的损失，还有提醒阁下：成名贵在坚持！ 52 </p> 53 <p style="text-indent:2em"> 54 以上方式，务必本人保管好底稿，以便查证，即使自己的大作不被采用，将来可以修改后再次投递，自己不会蒙受丢稿的损失，还有提醒阁下：成名贵在坚持！ 55 </p> 56 <p style="text-indent:50%"> 57 以上方式，务必本人保管好底稿，以便查证，即使自己的大作不被采用，将来可以修改后再次投递，自己不会蒙受丢稿的损失，还有提醒阁下：成名贵在坚持！ 58 </p> 59 <p style="text-indent:-150px"> 60 以上方式，务必本人保管好底稿，以便查证，即使自己的大作不被采用，将来可以修改后再次投递，自己不会蒙受丢稿的损失，还有提醒阁下：成名贵在坚持！ 61 </p> 62 </li> 63 </ul> 64 </body> 65 </html>
text-overflow 文本溢出样式，用一个省略标记“……”表示对象内文本的溢出。
语法：text-overflow：clip（当对象内文本溢出时不显示省略标记，而是将溢出的部分裁剪掉） | ellipsis（当对象内文本溢出时显示省略标记）
注意：通常要和white-space：nowrap（不能让它换行）和overflow：hidden属性（检索或设置当对象的内容超过其指定高度及宽度时如何管理内容）搭配使用。（如果没有这两个属性的话，文本溢出样式不会显示）
1 <li> 2 <strong>文本溢出样式 text-overflow</strong> 3 <p style="text-overflow:clip;border:1px solid red;200px;white-space:nowrap;overflow:hidden;"> 4 text-overflow:clip 样式的使用,溢出的内容不显示。通常要和white-space：nowrap和overflow：hidden属性搭配使用。（如果没有这两个属性的话，文本溢出样式不会显示） 5 </p> 6 <p style="text-overflow:ellipsis;border:1px solid red;400px;white-space:nowrap;overflow:hidden;"> 7 text-overflow:clip 样式的使用,溢出的内容被隐藏，使用省略标记。通常要和white-space：nowrap和overflow：hidden属性搭配使用。（如果没有这两个属性的话，文本溢出样式不会显示） 8 </p> 9 </li>
text-align 文本的水平对齐方式。
语法：text-align：left | center | right | justify（内容两端对齐，只有火狐浏览器能看到效果） | start（CSS3 内容对齐开始边界） | end（CSS3 内容对期结束边界）
text-decoration 文本的装饰，如下划线、闪烁等。
语法：text-decoration：[text-decoration-line] || [text-decoration-style] || [text-decoration-color] || blink（浏览器不全支持）
[text-decoration-line] 可取的值有：none（没有修饰）、underline（下划线修饰）、overline（上划线修饰）、line-through（贯穿线修饰）。
[text-decoration-style] 可取的值有：solid（默认，实线）、double（双线）、dotted（点状线条）、dashed（虚线）、wavy（波浪线）。
[text-decoration-color] 可取的值参看文档。
letter-spacing 文字之间的间隔。
语法：letter-spacing：normal | <length>
默认为normal。
1 <li> 2 <strong>文本对齐方式 text-align</strong> 3 <p style="text-align:center;border:1px solid red;200px;white-space:nowrap;overflow:hidden;"> 4 居中对齐 5 </p> 6 <p style="text-align:left;border:1px solid red;400px;white-space:nowrap;overflow:hidden;"> 7 左对齐 8 </p> 9 <p style="text-align:right;border:1px solid red;400px;white-space:nowrap;overflow:hidden;"> 10 右对齐 11 </p> 12 </li> 13 <li > 14 <strong>文本的修饰 text-decoration</strong> 15 <p> 16 没有文本修饰的内容 17 </p> 18 <p style="text-decoration:underline;"> 19 文本修饰:下划线修饰 underline 20 </p> 21 <p style="text-decoration:line-through"> 22 文本修饰：删除线 line-through 23 </p> 24 <p style="text-decoration:overline"> 25 文本修饰：上划线 overline 26 </p> 27 <p style="text-decoration:underline solid"> 28 文本修饰：下划线 实线修饰 浏览器不支持 29 </p> 30 <p> 31 <a href="http://www.baidu.com" style="text-decoration:none;">百度</a> 32 </p> 33 </li> 34 <li> 35 <strong>文字之间的距离 letter-spacing</strong> 36 <p style="letter-spacing:10px;"> 37 文字之间的距离为10px 38 </p> 39 </li>
line-height 元素所在行的高度。（使用频率很高）
语法：line-height：normal（默认与文字高度一致） | <length>（用长度指定行高，不允许负值） | <percentage>（用百分比指定行高，百分比取值是基于字体的高度尺寸的，不允许负值） | <number>（字体高度的倍数，不允许负值）。最常用的是length和number（乘积因子，即字体高度的倍数）
line-height属性设置的效果不那么显而易见，而且他在不同元素中有不同的表现。在按钮或者层中的表现都不一样。
重要概念的理解：文字的大小是由font-size和font-family来决定的，与所在容器的高度和宽度无关。在html中，文字是基于基线绘制而成的，基准线就是文字高度的中横线（仅限于相同字体大小）。在html中，基线是看不见的，但与line-height属性值有关系，基线位置=line-height/2（仅限于相同大小的字体）。默认的行高就是文字的高度，基线是行高的一半。如果设置line-height=0，基线也为0，文字将会以上边线为基准线。line-height=height时，文字将会在容器中垂直居中（在竖直方向上经常使用的一种方式）。line-height>height，文字将会向下移动（甚至会超出容器的边界）。
常见应用：垂直对齐。元素在容器中的垂直居中，或者按钮中文本位置的微调。
例如：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <title>line-height修饰的文本样式</title> 6 <meta charset="utf-8" /> 7 <style type="text/css"> 8 div { 9 border:1px solid red; 10 } 11 </style> 12 </head> 13 <body> 14 <div style="height:40px;line-height:100px;"> 15 文字:日 田 16 </div> 17 </body> 18 </html>