前面讲解了CSS的各种规定，具体能应用到哪些方面呢？
（一）文字排版
1.字体
我们可以使用css样式为网页中的文字设置字体、字号、颜色等样式属性。下面我们来看一个例子，下面代码实现：为网页中的文字设置字体为宋体。
body{font-family:"宋体";} 选择器{font-family：“字体名称”}
这里注意不要设置不常用的字体，因为如果用户本地电脑上如果没有安装你设置的字体，就会显示浏览器默认的字体。（因为用户是否可以看到你设置的字体样式取决于用户本地电脑上是否安装你设置的字体。）
现在一般网页喜欢设置“微软雅黑”，如下代码：
body{font-family:"Microsoft Yahei";}
或
body{font-family:"微软雅黑";}
注意：第一种方法比第二种方法兼容性更好一些。
font-family:"microsoft yahei",simhei; 这句到底设置为微软雅黑还是黑体，为什么写2个字体？
解释：
字体设置都是设置集合。意思是：优先使用微软雅黑，如果客户端未安装雅黑则使用黑体，如果两者都找不到，则使用系统默认字体。像中文环境，只能指定：雅黑，黑体，宋体，楷体。其中宋体多为默认。雅黑只有VISTA及以上才预装。一般对中文最好不指定字体，非使用艺术字体的话可以使用图片形式。
2.字号、颜色
字号: 选择器{font-size：x px;}颜色:选择器{color：red;}
可以使用下面代码设置网页中文字的字号为12像素，并把字体颜色设置为#666(灰色)：
body{font-size:12px;color:#666;}
3.粗体
我们还可以使用css样式来改变文字的样式：粗体、斜体、下划线、删除线，可以使用下面代码实现设置文字以粗体样式显示出来。
p span{font-weight:bold;}
在这里大家可以看到，如果想为文字设置粗体是有单独的css样式来实现的，再不用为了实现粗体样式而使用h1-h6或strong标签了。
3.1
字符转换
text-transform 属性处理文本的大小写。这个属性有 4 个值：
noneuppercaselowercasecapitalize
默认值 none 对文本不做任何改动，将使用源文档中的原有大小写。顾名思义，uppercase 和 lowercase 将文本转换为全大写和全小写字符。最后，capitalize 只对每个单词的首字母大写。
作为一个属性，text-transform 可能无关紧要，不过如果您突然决定把所有 h1 元素变为大写，这个属性就很有用。不必单独地修改所有 h1 元素的内容，只需使用 text-transform 为你完成这个修改：
h1 {text-transform: uppercase}
使用 text-transform 有两方面的好处。首先，只需写一个简单的规则来完成这个修改，而无需修改 h1 元素本身。其次，如果您以后决定将所有大小写再切换为原来的大小写，可以更容易地完成修改。
4.
斜体
以下代码可以实现文字以斜体样式在浏览器中显示：
a{font-style:italic;}
文本装饰
text-decoration 属性，这是一个很有意思的属性，它提供了很多非常有趣的行为
text-decoration 有 5 个值：
noneunderlineoverlineline-throughblink
5.下划线
有些情况下想为文字设置为下划线样式，这样可以在视觉上强调文字，可以使用下面代码来实现：
p a{text-decoration:underline;}
6.
删除线
如果想在网页上设置删除线怎么办，这个样式在电商网站上常会见到：
上图中的原价上的删除线使用下面代码就可以实现：
.oldPrice{text-decoration:line-through;}
7.
blink会让文本闪烁，类似于 Netscape 支持的颇招非议的 blink 标记。
none值会关闭原本应用到一个元素上的所有装饰。通常，无装饰的文本是默认外观，但也不总是这样。例如，链接默认地会有下划线。如果您希望去掉超链接的下划线，可以使用以下 CSS 来做到这一点：
a {text-decoration: none;}
注意：如果显式地用这样一个规则去掉链接的下划线，那么锚与正常文本之间在视觉上的唯一差别就是颜色（至少默认是这样的，不过也不能完全保证其颜色肯定有区别）。
例如：
设置链接的样式
能够设置链接样式的 CSS 属性有很多种（例如 color, font-family, background 等等）。
链接的特殊性在于能够根据它们所处的状态来设置它们的样式。
链接的四种状态：
a:link - 普通的、未被访问的链接a:visited - 用户已访问的链接a:hover - 鼠标指针位于链接的上方a:active - 链接被点击的时刻
实例
a:link {color:#FF0000;}/* 未被访问的链接 */a:visited {color:#00FF00;}/* 已被访问的链接 */a:hover {color:#FF00FF;}/* 鼠标指针移动到链接上 */a:active {color:#0000FF;}/* 正在被点击的链接 */
亲自试一试
当为链接的不同状态设置样式时，请按照以下次序规则：
a:hover 必须位于 a:link 和 a:visited 之后a:active 必须位于 a:hover 之后
常见的链接样式
在上面的例子中，链接根据其状态改变颜色。
让我们看看其他几种常见的设置链接样式的方法：
文本修饰
text-decoration 属性大多用于去掉链接中的下划线：
实例
a:link {text-decoration:none;}a:visited {text-decoration:none;}a:hover {text-decoration:underline;}a:active {text-decoration:underline;}
亲自试一试
white-space（空白处理）
属性设置如何处理元素内的空白
通过使用该属性，可以影响浏览器处理字之间和文本行之间的空白符的方式。从某种程度上讲，默认的 XHTML 处理已经完成了空白符处理：它会把所有空白符合并为一个空格。所以给定以下标记，它在 Web 浏览器中显示时，各个字之间只会显示一个空格，同时忽略元素中的换行：
可以用以下声明显式地设置这种默认行为：
p {white-space: normal;}
上面的规则告诉浏览器按照平常的做法去处理：丢掉多余的空白符。如果给定这个值，换行字符（回车）会转换为空格，一行中多个空格的序列也会转换为一个空格。
值 pre
不过，如果将 white-space 设置为 pre，受这个属性影响的元素中，空白符的处理就有所不同，其行为就像 XHTML 的 pre 元素一样；空白符不会被忽略。
如果 white-space 属性的值为 pre，浏览器将会注意额外的空格，甚至回车。在这个方面，而且仅在这个方面，任何元素都可以相当于一个 pre 元素。
值 nowrap（不能换行，除非遇到<br/>）
与之相对的值是 nowrap，它会防止元素中的文本换行，除非使用了一个 br 元素。在 CSS 中使用 nowrap 非常类似于 HTML 4 中用 <td nowrap> 将一个表单元格设置为不能换行，不过 white-space 值可以应用到任何元素。
值 pre-wrap 和 pre-line
当 white-space 属性设置为 pre-wrap 时，浏览器不仅会保留空白符并保留换行符，还允许自动换行
缩进
中文文字中的段前习惯空两个文字的空白，这个特殊的样式可以用下面代码来实现：
p{text-indent:2em;} 2em的意思就是文字的2倍大小
注意：一般来说，可以为所有块级元素应用 text-indent，但无法将该属性应用于行内元素，图像之类的替换元素上也无法应用 text-indent 属性。不过，如果一个块级元素（比如段落）的首行中有一个图像，它会随该行的其余文本移动。
提示：如果想把一个行内元素的第一行“缩进”，可以用左内边距或外边距创造这种效果。
8.行间距（行高line-height和vertical-height 参考网址：/keyi/p/5841222.html）
line-height行高是指文本行基线之间的距离。行高line-height实际上只影响行内元素和其他行内内容，内联元素的高度由行高决定，如果设置font-size为36，但是line-height：0，该内联盒子的高度为0。如果设置font-size：0，line-height：36，该内联盒子的高度仍为，36而不会直接影响块级元素，也可以为一个块级元素设置line-height，但这个值只是应用到块级元素的内联内容时才会有影响
这一小节我们来学习一下另一个在段落排版中起重要作用的行间距（行高）属性（line-height），如下代码实现设置段落行间距为1.5倍。
p{line-height:1.5em;}
行高只是两行文字之间的基线距离。line-height-内容区域=行间距；内容区+两个 半行间距=行内框。行内框的最顶端与行内框最低端的距离为行框。
宋体font-size和内容区域大小一样，一般的都有些偏差、
这也明说行内框=line-height的高度值
总说基线基线，那么基线的位置在哪呢？
normal：行高和浏览器有关，不同的浏览器下，行高不一样。在同一浏览器下，字体大小不同或者不同的字体的行高也不一致，例如同样大小的24号字体的宋体和微软雅黑的行高也不一样。
因此，我们在实际开发中，为了避免这种不确定性，在body及其元素里面进行reset初始化
相当于重置
第二个 子元素的行高直接继承了父元素的行高
替换元素
行内替换元素需要使用line-height值，从而在垂直对齐时能正确地定位元素。因为vertical-align的百分数值是相对于元素的line-height来计算的。对于垂直对齐来说，图像本身的高度无关紧要，关键是line-height的值
默认地，行内替换元素位于基线上。如果向替换元素增加下内边距、外边距或边框，内容区会上移。替换元素的基线是正常流中最后一个行框的基线。除非，该替换元素内容为空或者本身的overflow属性值不是visible，这种情况下基线是margin底边缘
line-height
1.垂直居中-父元素高度确定的单行文本（父元素设定height的单行文本）
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的height和line-height高度一致来实现的。(height: 父类元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的基线间的距离)。
line-height与font-size的计算值之差，在CSS中成为“行间距”。分为两半，分别加到一个文本行内容的顶部和底部。由于上一半行间距+font-size+下一半行间距=line-height。因此，设置line-height，相当于设置了
上一半行间距+font-size+下一半行间距 的值，而该元素包含于父类元素中，因此，该元素垂直居中了。
这种文字行高与块高一致带来了一个弊端：当文字内容的长度大于块的宽时，就有内容脱离了块。
2.垂直居中-父元素高度确定的多行文本
（方法一）
垂直居中-父元素高度确定的多行文本（方法二）
vertical-align
vertical-align用来设置垂直对齐方式，所有垂直对齐的元素都会影响行高，vertical-align是用来对齐内联级元素的.
值: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <length> | <percentage> | inherit
初始值: baseline
应用于: 行内元素、替换元素、表单元格
百分数: 相对于元素的行高line-height
这样可以引申出，vertical-align不能用于float position等元素，因为float等已将元素块状化。
9.
中文字间距、字母间距
中文字间隔、字母间隔设置：
如果想在网页排版中设置文字间隔或者字母间隔就可以使用 letter-spacing来实现，如下面代码：
h1{letter-spacing:50px;}...<h1>了不起的盖茨比</h1>
注意：这个样式使用在英文单词时，是设置字母与字母之间的间距。
单词间距设置：
如果我想设置英文单词之间的间距呢？可以使用word-spacing来实现。如下代码：
h1{word-spacing:50px;}...<h1>welcome to imooc!</h1>
10.
段落排版--对齐
想为块状元素中的文本、图片设置居中样式吗？可以使用text-align样式代码，如下代码可实现文本居中显示。(那么什么是块状元素呢？在后面的11-1、11-2小节中会讲到。)
h1{text-align:center;}<h1>了不起的盖茨比</h1>
同样可以设置居左：
h1{text-align:left;}<h1>了不起的盖茨比</h1>
还可以设置居右：
h1{text-align:right;}<h1>了不起的盖茨比</h1>
提示：将块级元素或表元素居中，要通过在这些元素上适当地设置左、右外边距来实现.text-align仅仅针对文本。。。
CSS 背景
背景色
可以使用background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。
这条规则把元素的背景设置为灰色：
p {background-color: gray;}
可以为所有元素设置背景色，这包括 body 一直到 em 和 a 等行内元素。
background-color 不能继承，其默认值是 transparent。transparent 有“透明”之意。也就是说，如果一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。
背景图像
要把图像放入背景，需要使用background-image 属性。background-image 属性的默认值是 none，表示背景上没有放置任何图像。
如果需要设置一个背景图像，必须为这个属性设置一个 URL 值：
body {background-image: url(/i/eg_bg_04.gif);}
背景图片background-position 属性
定义和用法
background-position属性设置背景图像的起始位置。
注意对于这个工作在Firefox和Opera，background-attachment必须设置为 "fixed（固定）"。
语法
background-position: horizontal vertical//horizontal(水平) vertical（垂直）
水平是
percentage（百分比） | length | left | center | right
垂直是
percentage（百分比） | length | top | center | bottom
属性值
1.backround-position （xpos ypos） 容器的左上角为（0,0）。
当我们设置为（xpos ypos）时，意思为图片左上角距离容器左上角的距离。如下图所示：
当我们设置为两个负数：（-70px，-40px）
当为（0px,0px）
比如：left top，
背景图片的左上角和容器(container)的左上角对齐，超出的部分隐藏。
等同于 background-position:0,0;
也等同于background-position:0%,0%;
right bottom
背景图片的右下角和容器(container)的右下角对齐，超出的部分隐藏。
等同于background-positon:100%,100%;
也等同于background-positon:容器(container)的宽度-背景图片的宽度,容器(container)的高度-背景图片的高度
实例
背景重复
如果需要在页面上对背景图像进行平铺，可以使用background-repeat 属性。
属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不允许图像在任何方向上平铺。
默认地，背景图像将从一个元素的左上角开始。请看下面的例子：
body{ background-image: url(/i/eg_bg_03.gif);background-repeat: repeat-y;}
我们能够以不同的方法为链接设置样式。
背景色
background-color 属性规定链接的背景色：
实例
a:link {background-color:#B2FF99;}a:visited {background-color:#FFFF85;}a:hover {background-color:#FF704D;}a:active {background-color:#FF704D;}
vertical-align 属性
定义和用法
vertical-align 属性设置元素的垂直对齐方式。
我们知道display也有很多属性值，其中以inline/inline-block/block三个最常见，这代表了页面上三种不同水平的元素。我常常会以液态/固液混合态/固态加以形象化思考，对应于现实中的事物就是：牛奶/果冻/坚果。
我们都知道，每个人都有不同的嗜好，有的人喜欢吃甜食，有的人喜欢吃辣的东西，有的人不喜欢吃芹菜，有的人不喜欢吃羊肉等等。CSS中的有些元素也是这样，他们有的只对牛奶感兴趣，有的只喜欢吃坚果和果冻，而讨厌牛奶。而vertical-align呢，是个比较挑食的家伙，它只喜欢吃果冻，从小吃果冻长大，没有了果冻，它就会闹脾气，对你不理不睬。我称之为“果冻依赖型元素”，又称之为“inline-block依赖型元素”，也就是说，只有一个元素属于inline-block（table-cell也可以理解为inline-block水平）水平，，其身上的vertical-align属性才会起作用。所以，类似下面的代码就不会起作用：
span{vertical-align:middle;}div{vertical-align:middle;}
所谓inline-block水平的元素，就是既可以“吸”又可以“咬”的元素，既可以与inline水平元素混排，又能设置高宽属性的元素。哪些元素呢，例如图片，按钮，单复选框，单行/多行文本框等HTML控件，只有这些元素默认情况下会对vertical-align属性起作用。
虽然vertical-align属性只会在inline-block水平的元素上期作用，但是其影响到的元素涉及到inline属性的元素，这里千万记住，inline水平元素受vertical-align属性而位置改变等不是因为其对vertical-align属性敏感或起作用，而是受制于整个line box的变化而不得不变化的，这个后面会较为深入的分析。
display属性
显示或隐藏
我们可以通过使用visibility属性或display属性来显示或隐藏元素。
要隐藏元素，请将display属性设置为“none”或将visibility属性设置为“hidden”。
visibility：hidden隐藏元素，但是元素仍然占据空间并影响布局。
h1.hidden {visibility: hidden;}
display：none隐藏元素，并从布局中删除元素。
h1.hidden {display: none;}
block（块）和 inline（内联）元素
块元素尝试获取整个宽度，并在布局中开始新行。一些HTML元素是块元素或块级元素。
<h1>, <p>, <li>, <div>
内联元素与其他内联元素保持在同一行中，并且不会开始新行。
<a>, <span>是内联元素的示例。
我们可以使用display属性来更改块或内联函数。
以下代码使li元素显示为内联元素。不是开始一个新行作为正常li元素，它显示li元素在同一行。
li {display: inline;}
以下代码使span元素显示为块元素。现在每个span元素将像div元素，默认情况下它是一个块元素。
span {display: block;}
Inline-Block（内联块）
inline-block值混合块和内联特性。
盒子的外部被视为内联元素。因此，不会为元素创建新行。
框的内部被视为块元素，并应用诸如宽度，高度和边距的属性。
以下代码显示如何使用inline-block值。
<!DOCTYPE HTML> <html> <head> <style type="text/css"> p {display: inline; } span {display: inline-block;border: medium double black;margin: 2em;width: 10em;height: 2em; } </style> </head> <body> <p>This is a test.</p> <p>This is a test. <span>This is a test.</span> </p> </body> </html>
性定义及使用说明
display 属性规定元素应该生成的框的类型。
属性值
1. display:no
让该元素隐藏，不显示。
2. display:block
既是让不是块状元素的元素称为块状元素，又表示该元素显示。
举例：
我们要实现一个效果：
点击红色区域，显示一个下拉框，
当离开红色区域或者离开该下拉框时，该下拉框隐藏
1.在下拉框的父类中用overflow：hidden。当hover的时候，overflow：visible
<style type="text/css">.box{width: 100px;height: 30px;background-color: #6a6666;position: relative;overflow: hidden;}.box_1{width: 100%;height: 100%;background-color: red;text-align: center;line-height: 30px;}.box_2{border: 1px solid;width: 30px;height: 30px;}.box:hover {overflow: visible;}</style></head><body><div class="box"><div class="box_1">我的购物车</div><div class="box_2"></div></div>
2.下拉框中用display：none 父类：hover .下拉框类{ display：block}
<style type="text/css">.box{width: 100px;height: 30px;background-color: #6a6666;position: relative;/*overflow: hidden;*/}.box_1{width: 100%;height: 100%;background-color: red;text-align: center;line-height: 30px;}.box_2{border: 1px solid;width: 30px;height: 30px;display: none;}.box:hover .box_2{/*overflow: visible;*/display: block;}</style></head><body><div class="box"><div class="box_1">我的购物车</div><div class="box_2"></div></div>
z-index
特性：
z-index动画
将z-index=-1的元素，修改为z-index=51
z-index的生效
z-index的规则：
1.对于同级定位元素：
哪个z-index的值大，哪个在最上面。
2.对于不同级，则根据其具有定位属性的父类决定：
举例：
clear清除浮动
在开发中，从美工MM给你Html代码中，肯定能经常看”<divstyle="clear:both;"></div>”这样的代码，但是你真的能明白它是做什么用的吗？
如：
<divstyle="border:2pxsolidred;">
<divstyle="float:left;width:80px;height:80px;border:1pxsolidblue;">TEST DIV</div>
<divstyle="clear:both;"></div>
</div>
你可以将此部分代码放到一个HTML页面看看效果，然后在去掉”<divstyle="clear:both;"></div>”看一下效果,就知道这句话的作用了。
没有clear：both
添加clear：both
这样看，应该就一目了然了：原来后边的Clear:both;其实就是利用清除浮动来把外层的div撑开，所以有时候，我们在将内部div都设置成浮动之后，就会发现，外层div的背景没有显示，原因就是外层的div没有撑开，太小，所以能看到的背景仅限于一条线。
另一方法：
<style>
.dd:after{
content:"";
clear:both;
display:block
}
</style>
<divstyle="border:2pxsolidred;" class="dd">
<divstyle="float:left;width:80px;height:80px;border:1pxsolidblue;">TEST DIV</div>
<div></div>
</div>
可以实现同样的效果
CSS 列表
CSS 列表
从某种意义上讲，不是描述性的文本的任何内容都可以认为是列表。人口普查、太阳系、家谱、参观菜单，甚至你的所有朋友都可以表示为一个列表或者是列表的列表。
列表类型
要影响列表的样式，最简单（同时支持最充分）的办法就是改变其标志类型。
例如，在一个无序列表中，列表项的标志 (marker) 是出现在各列表项旁边的圆点。在有序列表中，标志可能是字母、数字或另外某种计数体系中的一个符号。
要修改用于列表项的标志类型，可以使用属性list-style-type：
ul {list-style-type : square}
上面的声明把无序列表中的列表项标志设置为方块。
list-style-type的可能值
列表项图像
有时，常规的标志是不够的。你可能想对各标志使用一个图像，这可以利用list-style-image属性做到：
ul li {list-style-image : url(xxx.gif)}
只需要简单地使用一个 url() 值，就可以使用图像作为标志。
list-style 属性
list-style 简写属性在一个声明中设置所有的列表属性
说明
该属性是一个简写属性，涵盖了所有其他列表样式属性。由于它应用到所有 display 为 list-item 的元素，所以在普通的 HTML 和 XHTML 中只能用于 li 元素，不过实际上它可以应用到任何元素，并由 list-item 元素继承。
可以按顺序设置如下属性：
list-style-typelist-style-positionlist-style-image
可以不设置其中的某个值，比如 "list-style:circle inside;" 也是允许的。未设置的属性会使用其默认值。
list-style-position 属性
CSS 表格
CSS 表格属性可以帮助您极大地改善表格的外观
表格边框
如需在 CSS 中设置表格边框，请使用 border 属性。
下面的例子为 table、th 以及 td 设置了蓝色边框：
table, th, td{border: 1px solid blue;}
请注意，上例中的表格具有双线条边框。这是由于 table、th 以及 td 元素都有独立的边框。
如果需要把表格显示为单线条边框，请使用 border-collapse 属性。
表格宽度和高度
通过 width 和 height 属性定义表格的宽度和高度。
下面的例子将表格宽度设置为 100%，同时将 th 元素的高度设置为 50px：
表格文本对齐
text-align 和 vertical-align 属性设置表格中文本的对齐方式。
表格内边距
如需控制表格中内容与边框的距离，请为 td 和 th 元素设置 padding 属性：
td{padding:15px;}
表格颜色
下面的例子设置边框的颜色，以及 th 元素的文本和背景颜色：
table, td, th{border:1px solid green;}th{background-color:green;color:white;}
overflow 属性规定当内容溢出元素框时发生的事情 这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。
1.默认值visible：里面的内容超出父类元素边框，如实展示
2.hidden：当内容超出父类元素边框，超出的部分会被隐藏，看不到
3.scroll,出现滚动条
4.auto，自动适应，根据需要是否出现滚动条，没有一开始就限制要滚动条还是不要滚动条。
由于滚动条的出现
overflow给布局带来的影响
1.尺寸对不上
2.水平居中跳动。由于滚动栏占据了一定的尺寸，所以auto的值发生了变化，所以会水平跳动。
