二.CSS样式

1.CSS 背景
(1)背景色background-color
可以使用 background-color 属性为元素设置背景色
如果您希望背景色从元素中的文本向外少有延伸，只需增加一些内边距 padding：
p {background-color: gray; padding: 20px;}
(2)背景图像  background-image
使用 background-image 属性，如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：
body {background-image: url(/i/eg_bg_04.gif);}
(3)背景重复background-repeat
如果需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。
属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。
repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。
body {
    background-image: url(/i/eg_bg_03.gif);
    background-repeat: repeat-y;
}
(4)背景定位
可以利用 background-position 属性改变图像在背景中的位置。
您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。
body {
    background-image: url('/i/eg_bg_03.gif');
    background-repeat: no-repeat;
    background-attachment:fixed;
    background-position: center;
}
三种设定方式:关键字、百分数值、长度值
关键字
图像放置关键字最容易理解，其作用如其名称所表明的。例如，top right 使图像放置在元素内边距区的右上角。
根据规范，位置关键字可以按任何顺序出现，只要保证不超过两个关键字 - 一个对应水平方向，另一个对象垂直方向。
如果只出现一个关键字，则认为另一个关键字是 center,所以，如果希望每个段落的中部上方出现一个图像，只需声明如下：
单一关键字   等价的关键字
center  center center
top     top center 或 center top
bottom  bottom center 或 center bottom
right   right center 或 center right
left    left center 或 center left
p {
    background-image: url('bgimg.gif');
    background-repeat: no-repeat;
    background-position: top;
}
百分数值
百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中，这很容易：
居中background-position:50% 50%;
左上角background-position:0% 0%;
右下角background-position:100% 100%;
水平方向 2/3、垂直方向 1/3 background-position:66% 33%;
长度值
长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。
background-position:50px 100px;
(5)背景关联
如果文档比较长，那么当文档向下滚动时，背景图像也会随之滚动。当文档滚动到超过图像的位置时，图像就会消失。
您可以通过 background-attachment 属性防止这种滚动。声明图像相对于可视区是固定的（fixed）。
background-attachment:fixed
background-attachment 属性的默认值是 scroll，也就是说，在默认的情况下，背景会随文档滚动。


2文本
(1)缩进text-indent
把 Web 页面上的段落的第一行缩进，这是一种最常用的文本格式化效果。
text-indent 属性，该属性可以方便地实现文本缩进。
悬挂缩进
如果对一个段落设置了负值，那么首行的某些文本可能会超出浏览器窗口的左边界。
为了避免出现这种显示问题，建议针对负缩进再设置一个外边距或一些内边距(em 文字/cm 厘米):
p {
    text-indent: -5em;
    padding-left: 5em;
}
text-indent 可以使用所有长度单位，包括百分比值。
p {text-indent: 20%;}
继承
text-indent 属性可以继承

(2)水平对齐text-align
text-align 是一个基本的属性，它会影响一个元素中的文本行互相之间的对齐方式。
取值: left、right、center和justify(两端对齐)

(3)字间隔word-spacing
word-spacing 属性可以改变字（单词）之间的标准间隔。其默认值 normal 与设置值为 0 是一样的。
word-spacing 属性接受一个正长度值或负长度值。间隔增加或拉近
p.spread {word-spacing: 30px;}
p.tight {word-spacing: -0.5em;}

(4)字母间隔letter-spacing
letter-spacing 属性与 word-spacing 的区别在于，字母间隔修改的是字符或字母之间的间隔。
h1 {letter-spacing: -0.5em}
h4 {letter-spacing: 20px}

(5)字符转换text-transform
text-transform 属性处理文本的大小写
none        默认值 none 对文本不做任何改动，将使用源文档中的原有大小写。
uppercase   全大写
lowercase   全小写
capitalize  每个单词的首字母大写

(6)文本装饰text-decoration
text-decoration 属性 有 5 个值：
none            关闭原本应用到一个元素上的所有装饰，例如去掉链接的下划线
underline       下划线
overline        上划线
line-through    贯穿线，等价于 HTML 中的 S 和 strike 元素
blink           文本闪烁(IE、Chrome 或 Safari 不支持 )

(7)处理空白符white-space
white-space 属性会影响到用户代理对源文档中的空格、换行和 tab 字符的处理。
默认的 XHTML 处理已经完成了空白符处理：它会把所有空白符合并为一个空格。
normal      默认各个字之间只会显示一个空格，同时忽略元素中的换行
pre         浏览器不会合并空白符，也不会忽略换行符(IE 7 以及更早版本的浏览器不支持该值)
pre-wrap    浏览器不仅会保留空白符并保留换行符，还允许自动换行。
white-space 浏览器会保留换行符，并允许自动换行，但是会合并空白符
值                           空白符         换行符     自动换行
pre-line    合并              保留          允许
normal      合并              忽略          允许
nowrap      合并              忽略          不允许
pre         保留              保留          不允许
pre-wrap    保留              保留          允许

(8)文本方向direction
direction影响块级元素中文本的书写方向、表中列布局的方向、内容水平填充其元素框的方向、以及两端对齐元素中最后一行的为止。
ltr 显示从左到右的文本
rtl 显示从右到左的文本
属性设置文本的方向
normal          元素不会对双向算法打开附加的一层嵌套。对于行内元素，顺序的隐式重排会跨元素边界进行。
embed           如果是一个行内元素，这个值对于双向算法会打开附件的一层嵌套。
bidi-override   这会为行内元素创建一个覆盖。对于块级元素，将为不在另一块中的行内后代创建一个覆盖。
注释：对于行内元素，只有当 unicode-bidi 属性设置为 embed 或 bidi-override 时才会应用 direction 属性。

(9)行间距line-height

2.CSS 字体
font 简写属性。作用是把所有针对字体的属性设置在一个声明中。

(1)CSS字体系列font-family
Serif 字体成比例，而且有上下短线。如果字体中的所有字符根据其不同大小有不同的宽度，则成该字符是成比例的。
Serif 字体的例子包括 Times、Georgia 和 New Century Schoolbook
Sans-serif 字体成比例的，而且没有上下短线。
Sans-serif 字体的例子包括 Helvetica、Geneva、Verdana、Arial 或 Univers。
指定字体系列
通过结合特定字体名和通用字体系列来解决用户代理上没有安装 字体,就只能使用用户代理的默认字体的问题
font: 26px Verdana,Arial,Helvetica,sans-serif
font-family:"Times New Roman",Georgia,Serif
使用引号
使用引号,只有当字体名中有一个或多个空格（比如 New York）,或者如果字体名包括 # 或 $ 之类的符号，
才需要在 font-family 声明中加引号。单引号或双引号都可以接受。
如果把一个 font-family 属性放在 HTML 的 style 属性中，则需要使用该属性本身未使用的那种引号
<p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia,
 'New York', serif;">...</p>
 
(2)字体风格font-style
font-style 属性最常用于规定斜体文本。
normal - 文本正常显示
italic - 文本斜体显示
oblique - 文本倾斜显示
p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}
italic 和 oblique 的区别
斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。
与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。
通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样。

(3)字体变形font-variant
font-variant 属性可以设定小型大写字母
小型大写字母不是一般的大写字母，也不是小写字母，这种字母采用不同大小的大写字母。
p {font-variant:small-caps;}

(4)字体加粗font-weight
font-weight 属性设置文本的粗细。
使用 bold 关键字可以将文本设置为粗体  p.thick {font-weight:bold;}
关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别。
100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。
p.thicker {font-weight:900;}

(5)字体大小font-size
font-size 属性设置文本的大小。
请始终使用正确的 HTML 标题，比如使用 <h1> - <h6> 来标记标题，使用 <p> 来标记段落。
font-size 值可以是绝对或相对值。
绝对值：
    将文本设置为指定的大小
    不允许用户在所有浏览器中改变文本大小（不利于可用性）
    绝对大小在确定了输出的物理尺寸时很有用
相对大小：
    相对于周围的元素来设置大小
    允许用户在浏览器改变文本大小
使用像素来设置字体大小,没有规定字体大小，普通文本（比如段落）的默认大小是 16 像素 (16px=1em)
h1 {font-size:60px;}
使用 em 来设置字体大小
如果要避免在 Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替 pixels,W3C 推荐使用 em 尺寸单位
h1 {font-size:3.75em;} [60px/16=3.75em ]
h2 {font-size:2.5em;}  [ 40px/16=2.5em ]
p {font-size:0.875em;} [ 14px/16=0.875em]
注：16 等于父元素的默认字体大小，假设父元素的 font-size 为 20px，那么公式需改为：pixels/20=em
结合使用百分比和 EM
在所有浏览器中均有效的方案是为 body 元素（父元素）以百分比设置默认的 font-size 值：
body {font-size:100%;}
h1 {font-size:3.75em;}

3.列表
(1)列表类型list-style-type
要修改用于列表项的标志类型，可以使用属性 list-style-type：
ul.circle {list-style-type:circle;} 空心圆
ul.square {list-style-type:square;} 方块
ol.upper-roman {list-style-type:upper-roman;} 大小罗马数字
ol.lower-alpha {list-style-type:lower-alpha;} 小写字母
(2)列表项图像list-style-image
标志使用一个图像，这可以利用 list-style-image
list-style-image:url("/i/arrow.gif");
注意:图标优先级高,优先输出图标
(3)列表标志位置 list-style-position
标志出现在列表项内容之外还是内容内部。这是利用 list-style-position 完成的
inside  列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside     默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
list-style-position:inside;
注释：任何的版本的 Internet Explorer （包括 IE8）都不支持属性值 "inherit"
(4)简写列表样式list-style
为简单起见，可以将以上 3 个列表样式属性合并为一个方便的属性：list-style
list-style: square inside url('/i/eg_arrow.gif')
list-style 的值可以按任何顺序列出，而且这些值都可以忽略。只要提供了一个值，其它的就会填入其默认值。
注意:图标优先

4.表格
(1)表格边框 border
设置表格边框，请使用 border 属性
为 table、th 以及 td 设置了蓝色边框
table,th,td {
    border: 1px solid blue; [边框像素/是否显示/边框颜色]
}
上例中的表格具有双线条边框。这是由于 table、th 以及 td 元素都有独立的边框。
如果需要把表格显示为单线条边框，请使用 border-collapse 属性。
(2)折叠边框 border-collapse
border-collapse 属性设置是否将表格边框折叠为单一边框
table {
    border-collapse: collapse; [collapse/separate:合并/拆分]
}
(3)表格宽度和高度width height
将表格宽度设置为 100%，同时将 th 元素的高度设置为 50px：
table {
    width: 100%;
}

th {
    height: 50px;
}
(4)表格文本对齐text-align 和 vertical-align 属性设置表格中文本的对齐方式
top bottom middle
默认th
th {
    text-align: center;
    vertical-align: middle; }
tr,td{
    text-align: left;
    vertical-align: middle;}

(5)表格内边距 padding
需控制表格中内容与边框的距离,为 td 和 th 元素设置 padding 属性  
td {
    padding: 15px;
}
(6)表格颜色
background-color : 表格背景颜色
color : 文字颜色
(7)内容换行
{word-break: break-all; word-wrap:break-word;}   
word-break : normal | break-all | keep-all    
normal : 　依照亚洲语言和非亚洲语言的文本规则，允许在字内换行
break-all : 　该行为与亚洲语言的normal相同。也允许非亚洲语言文本行的任意字内断开。该值适合包含一些非亚洲文本的亚洲文本
keep-all : 　与所有非亚洲语言的normal相同。对于中文，韩文，日文，不允许字断开。适合包含少量亚洲文本的非亚洲文本
word-wrap : normal | break-word
normal : 　允许内容顶开指定的容器边界
break-word : 　内容将在边界内换行。如果需要，词内换行（word-break）也行发生    

5.轮廓
轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
outline:#00ff00 dotted thick;
样式 outline-style:dotted;
颜色 outline-color:#00ff00;
宽度 outline-width:thick厚/thin薄/3px;