CSS（Cascading Style Sheet，叠层样式表），作用是美化HTML网页。
/*注释区域*/ 此为注释语法
一、样式表
（一）样式表的分类
1.内联样式表
和HTML联合显示，控制精确，但是可重用性差，冗余较多。
例：<p style="font-size:14px;">内联样式表</p>
2.内嵌样式表
作为一个独立区域内嵌在网页里，必须写在head标签里面。
<style type="text/css">
p //格式对p标签起作用
{
样式；
}
</style>
3.外部样式表
新建一个CSS文件，用来放置样式表。如果要在HTML文件中调用样式表，需要在HTML文件中点右键→CSS样式表→附加样式表。一般用link连接方式。
有些标签有默认的边距，一般写样式表代码的时候都会先去除（也可以设置其他的样式）
（二）选择器
1.标签选择器。用标签名做选择器。
<style type="text/css">//(格式对p标签起作用)
p
{
样式
}
</style>
2.class选择器。都是以“.”开头。
<head>
<style type="text/css">
.main
{
hright:42px;
width:100%;
}
</style>
</head>
<bady>
<div class="main"></div>
</bady>
3.ID选择器。以“#”开头。
<div id="样式名">
<head>
<style type="text/css">
#main
{
hright:42px;
width:100%;
}
</style>
</head>
<bady>
<div id="main"></div>
</bady>
4.复合选择器
（1）用“，”隔开，表示并列。
（2）用空格隔开，表示后代。
（3）筛选“.”。
二、样式属性
（一）背景与前景
1.背景：
2.前景字体：
（二）边界和边框
border（表格边框、样式等）、margin（表外间距）。padding（内容与单元格间距）。
（三）列表与方块
width、height、（top、bottom、left、right）只有在绝对坐标情况下才有用。
链接的style：
a:link 超链接被点前状态
a:visited 超链接点击后状态
a:hover 悬停在超链接时
a:active 点击超链接时
在定义这些状态时，有一个顺序l v h a
一、position：fixed
锁定位置（相对于浏览器的位置），例如有些网站的右下角的弹出窗口。
二、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> //截断流
附：cursor：pointer 鼠标指到上面时的形状
© 版权符号©
半透明效果：
<div class="box">透明区域<div>
在样式表中的代码为：
.box
{
opacity:0.5; -moz-opacity:0.5 ; filter:alpha(opacity=50)
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>360页面制作</title> * { margin:0px; padding:0px} #a { border:1px solid #9CF; width:1000px; height:160px; margin:1px; background-color:#FFF; left:140px; top:120px; position:absolute;} a:link { color:#000} a:visited { color:#000} a:hover { color:#F00} a:action { color:#FC0} #b { border:1px solid #9CF; width:250px; height:280px; margin:1px; background-color:#FFF; left:140px; top:300px; position:absolute;} b:link { color:#000} b:visited { color:#000} b:hover { color:#F00} b:action { color:#FC0} #c { border:1px solid #9CF; width:730px; height:280px; margin:1px; background-color:#FFF; left:410px; top:300px; position:absolute;} c:link { color:#000} c:visited { color:#000} c:hover { color:#F00} c:action { color:#FC0} #d { border:1px solid #9CF; width:250px; height:650px; margin:1px; background-color:#FFF; left:140px; top:600px; position:absolute;} d:link { color:#000} d:visited { color:#000} d:hover { color:#F00} d:action { color:#FC0} #e { border:1px solid #9CF; width:730px; height:230px; margin:1px; background-color:#FFF; left:410px; top:600px; position:absolute;} e:link { color:#000} e:visited { color:#000} e:hover { color:#F00} e:action { color:#FC0} #f { border:1px solid #9CF; width:730px; height:390px; margin:1px; background-color:#FFF; left:410px; top:850px; position:absolute;} f:link { color:#000} f:visited { color:#000} f:hover { color:#F00} f:action { color:#FC0} </head> <body> <form> <div id="a">a <table width="600" border="0" cellpadding="0" cellspacing="1" align="center"> <tr height="110"> <td width="100"> <select size="1" style=" height:55px; font-size:18px"> <option><a href="https://www.so.com/?src=zh" onclick="return flase">综合搜索</a></option> <option><a href="https://www.so.com/?src=hao_360so" onclick="return flase">360搜索</a></option> <option><a href="https://http://cn.bing.com/" onclick="return flase">必应搜索</a></option> <option><a href="http://www.google.com.hk/webhp?client=aff-360daohang" onclick="return flase">搜狗</a></option> </select></td> <td><input type="text" value="" style="width:500px; height:55px; font-size:24px; font-weight:100"></td> <td><a href="https://www.so.com/?src=hao_search"><input type="button" value="搜索" style="width:100px; height:55px; font-size:18px; font-weight:100"/></a></td> </tr> </table> </div> <div id="b">b <table width="250" border="0" cellpadding="0" cellspacing="0" align="center"> <tr align="center"> <td height="40"><a href="http://sh.qihoo.com/">新闻</a>.<a href="https://hao.360.cn/">视频</a></td> <td height="40"><a href="http://go.360.cn/flight">机票</a>.<a href="http://go.360.cn/train/">火车票</a></td> </tr> <tr align="center"> <td height="40"><a href="http://gouwu.360.cn/haitao/">海淘</a>.<a href="http://gouwu.360.cn/">购物</a></td> <td><a href="http://www.360kan.com/dianying/index.html">电影</a>.<a href="http://www.360kan.com/dianshi/index.html">电视剧</a></td> </tr> <tr align="center"> <td height="40"><a href="https://www.nicaifu.com/?bonus=1&from=dhhonghong">活期</a>.<a href="https://www.nicaifu.com/dq/?from=dh_honghongding">定期</a></td> <td><a href="http://cp.360.cn/hall/hall.html?agent=700015">彩票</a>.><a href="http://licai.360.cn/">理财</a></td> </tr> <tr align="center"> <td height="40"><a href="http://g.360.cn/index.html">游戏</a>.<a href="http://xiaoyouxi.360.cn/?src=youxi">小游戏</a></td> <td><a href="http://gouwu.360.cn/">动漫</a>.<a href="http://www.huajiao.com/?qd=daohang_hot">直播秀</a></td> </tr> <tr align="center"> <td height="40"><a href="http://hao.360.cn/tools.html">查询</a>.<a href="http://hao.360.cn/xingzuo.html">星座</a></td> <td><a href="http://xiaoshuo.360.cn//">小说</a>><a href="http://mall.360.com/?utm_source=zhinengkuanghuangou_360daohang_zuocemingzhan&utm_medium=inside">商城</a></td> <td</td> </tr> <tr align="center"> <td height="40"><a href="http://www.360shouji.com/">手机</a>.<a href="http://yule.360.cn/">娱乐</a></td> <td><a href="http://edu.360.cn/?=honghong">教育</a>.<a href="http://go.360.cn/holiday">度假</a></td> </tr> </table> </div> <div id="c">c</div> <div id="d">d</div> <div id="e">e</div> <div id="f">f</div> </form> </body> </html>
