CSS（Cascading Style Sheet，层叠样式表）——第四篇（CSS高级篇）
目录
1.CSS水平对齐
1、关于文本对齐
参见text-align属性
2、 使用 margin 属性来水平对齐
- 可通过将左和右外边距设置为 "auto"，来对齐块元素（margin:atuo）
- 把左和右外边距设置为 auto，规定的是均等地分配可用的外边距
- 如果宽度是 100%，则对齐没有效果
3、使用 position 属性进行左和右对齐
- 使用绝对定位:position:absolute
- left:0px;//距左边（相对[具体参见绝对定位]）0px，显示为左对齐
- right:0px;//显示为右对齐
4、使用 float 属性来进行左和右对齐
- float:left;//左对齐
- float:rigth;//右对齐
关于3、4两点的跨浏览器兼容性问题：
当像这样对齐元素时，对 <body> 元素的外边距和内边距进行预定义是一个好主意。这样可以避免在不同的浏览器中出现可见的差异。body { margin:0; padding:0; }
2.CSS尺寸
CSS 尺寸 属性允许控制元素的高度和宽度。同样，允许增加行间距。
3.CSS分类
CSS分类属性允许规定如何显示以及在哪显示元素。
1、clear:
2、cursor:http://www.w3school.com.cn/cssref/pr_class_cursor.asp
常用：
3、dispaly:http://www.w3school.com.cn/cssref/pr_class_display.asp
常用：
4、float:见第三篇
5、position:见第三篇
6、visibility:http://www.w3school.com.cn/cssref/pr_class_visibility.asp
*使用display:none和visibility:hidden的区别:
display:none是彻底消失，不在文档流中占位，浏览器也不会解析该元素；visibility:hidden是视觉上消失了，可以理解为透明度为0的效果，在文档流中占位，浏览器会解析该元素；
4.CSS导航栏
导航栏基本上是一个链接列表，因此使用 <ul> 和 <li> 元素
在这里补充一句：ul的宽度，高度都默认时，是以下效果：（高度取决于li，而块元素的宽度默认占用全部可用宽度）
下面举例说明两种导航栏，这是HTML部分：
4.1 垂直导航栏
只需要定义 <a> 元素的样式
4.2 水平导航栏
有两种创建水平导航栏的方法：使用行内或浮动列表项。
如果希望链接拥有相同的尺寸，就必须使用浮动方法。
4.2.1 使用行内列表项
将 <li> 元素规定为行内元素
4.2.2 使用浮动列表项
在上面的例子中，链接的宽度是不同的。
为了让所有链接拥有相等的宽度，浮动 <li> 元素并规定 <a> 元素的宽度
5.CSS图片库
HTML部分：
<div class="img">
<a target="_blank" href="images/pic1.jpg">
<img src="images/pic1.jpg" alt="pic1">
</a>
<hr/>
<div class="desc">在此处添加对图像的描述</div>
</div>
<div class="img">
<a target="_blank" href="images/pic2.jpg">
<img src="images/pic2.jpg" alt="pic2">
</a>
<hr/>
<div class="desc">在此处添加对图像的描述</div>
</div>
<div class="img">
<a target="_blank" href="images/pic3.jpg">
<img src="images/pic3.jpg" alt="pic3">
</a>
<hr/>
<div class="desc">在此处添加对图像的描述</div>
</div>CSS部分：
body{
margin: 0;
padding: 0;
}
div.img
{
margin:3px;
border:1px solid #bebebe;/*最外面的边框*/
height:auto;/*浏览器计算的实际高度*/
width:auto;/*浏览器计算的实际宽度*/
float:left;
text-align:center;
}
div.img img
{
display:inline;/*设置为行内元素，同行显示*/
margin:3px;
border:3px solid #bebebe;/*图片边框*/
width: 400px;
height: 300px;
}
div.img a:hover img
{
border:3px solid #333333;/*鼠标悬浮在图片上时的边框样式*/
}
div.desc
{
text-align:center;
font-weight:normal;
width:400px;
font-size:12px;
margin:10px 5px 10px 5px;
background-color: cornflowerblue;/*仅为观察效果*/
}
hr{
border:1px solid red;
}效果如下：（点击图片后显示图片原图）
6.CSS图像透明度
1、创建透明图像
2、图像透明度- Hover效果
上图透明度为40%的图片在鼠标悬浮在上面时，变为完全不透明
3、透明框中的文本
7.CSS2媒介类型
允许你定义以何种媒介来提交文档。文档可以被显示在显示器、纸媒介或者听觉浏览器等等
7.1 @media规则
可在相同的样式表中，使用不同的样式规则来针对不同的媒介
@media screen/*显示器*/
{
p{font-family:verdana,sans-serif; font-size:14px;}
}
@media print/*打印机*/
{
p{font-family:times,serif; font-size:10px;}
}
@media screen,print
{
p{font-weight:bold;}
}
上述样式：
告知浏览器在显示器上显示14像素的Verdana字体；但是假如页面需要被打印，将使用10个像素的Times字体。不论显示器还是纸媒介，font-weight都被设置为粗体