标签：
样式表分类：
1.内联样式表，
和html联合显示，例：<p style="font-size:14px;">内联样式表</p>
2.内嵌样式表
作为一个独立的区域内嵌在网页里，必须写在head里边。
<style type="text/css">
p //格式对p起作用
{样式；
}
</style>
3.外部样式表
新建一个CSS文件，用来放置样式表。如果要在HTML文件中调用样式表，需要在HTML文件中点右键→CSS样式表→附加样式表。一般用link连接方式。
有些标签有默认的边距，一般写样式表代码的时候都会先去除（也可以设置其他的样式），如下：
选择器：
标签选择器，用标签名做选择器。
<style type="text/css">
p //格式对p起作用
{样式；
}
</style>
2. class选择器，都是用“.”开头（类）
<head>
<style type="text/css">
.main
{样式
}
</style>
</head>
<body>
<div class="main">
</div>
</body>
3.id选择器以“#”开头，表示单独唯一。样式和class相同只是开头和body里的样式名不同即<div id="main">
链接的style：
a:link 超链接被点前状态
a:visited 超链接点击后状态
a:hover 悬停在超链接时
a:active 点击超链接时
在定义这些状态时，有一个顺序l v h a
样式：
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
.a1:link
{
color:black;
text-decoration:none;
font-size:24px;
}
.a1:visited
{
color:black;
text-decoration:none;
font-size:24px;
}
.a1:hover
{
color:red;
text-decoration:underline;
font-size:24px;
}
.a1:active
{
color:orange;
text-decoration:underline;
font-size:24px;
}
</style>
</head>
<body>
<div class="main"><p>1234567890</p></div>
<a class="a1" href="http://www.baidu.com">百度一下</a><br />
</body>
</html>
格式与布局
1.position:fixed
锁定位置（相对于浏览器的位置）
2.position：absolute
1.外层没有position：absolute（或relative）；那么div相对于浏览器定位，如下图中b（距离浏览器右边框为50像素，距离下边框为20像素）。
2.外层有position：absolute（或relative）；那么div相对于外层边框定位，如下图中bb（距离d的右边框50像素，距离d的下边框为20像素）。
三、position：relative
相对位置。相对于默认位置的移动，
相对于把此div包含住的div的某个位置进行固定。如果外层没有包含他的，那就相对于浏览器进行相对位置的固定
注意：绝对位置是在页面上进行定位，是浮动的。而相对位置是在页面里面占有某块位置，有上下左右的值的时候，只是进行形状上的平移，真实占有的位置不变。
四、分层（z-index）
在z轴方向分层，可以理解为分成一摞纸，层数越高越靠上。
在上面relative的示例中，我们看到了aa遮住了a，这是因为后写代码的显示级别越靠前，那么在不改变代码顺序的情况下如何让a盖住aa？如下：
五、float：left、right
Left、right时不用给他规定位置（left、top），直接相对于浏览器。若外部被包裹，相对于外部div的除去一行的位置的左上或右上显示。
overflow：hidden； //超出部分隐藏；scroll，显示出滚动条；
<div style="clear:both"></div> //截断流
<div class="box">透明区域<div>
在样式表中的代码为：
.box
{
opacity:0.5; -moz-opacity:0.5 ; filter:alpha(opacity=50)
}
标签：
原文地址：http://www.cnblogs.com/liuyanzeng/p/5794278.html
