css3
1.css用在导航的制作上:
<style>
*{margin:0px; padding:0px;} //最低级别的修饰
#heater{980px; height:100px; color:#099; margin:0px auto; background- color:#0CF; margin-bottom:15px;} //头部居中 下方留缝隙15个像素。
#nav{margin:0 auto; 980px; font-size:14px; font- weight:bold;} //导航条
#nav li{list-style:none; float:left; 77px; height:30px; text- align:center; margin-right:5px; line-height:30px;} //文字两个方向居中
#nav li a{background:url(images/bg1.gif) no-repeat 0 -50px; display:block; text-decoration:none;}
#nav li a:hover{ background:url(images/bg1.gif) no-repeat -200px -50px; color:#0F0;}
</style>
</head>
<body>
<div id="heater">top</div>
<div id="nav">
<ul>
<li><a href="#">儿童图书</a></li>
<li><a href="#">儿童图书</a></li>
<li><a href="#">儿童图书</a></li>
<li><a href="#">儿童图书</a></li>
<li><a href="#">儿童图书</a></li>
<li><a href="#">儿童图书</a></li>
<li><a href="#">儿童图书</a></li>
<li><a href="#">儿童图书</a></li>
</ul>
</div>
</body>
2.超链接：
超链接的四种状态： 可以改变的属性（颜色，大小，下划线等）
这四个称为伪类类型.
a：link未访问状态
a:visited已访问状态
a:hover鼠标移上状态
a;active激活选定状态
顺序不能乱 中间任意一个或两个不写
3.样式优先级（从低到高）
各类样式有继承
各类样式的优先级
浏览器默认设置 外部样式表文件
内部样式表
行内样式表
标签选择器 类选择器
ID选择器
4css符号总结
-------------------------------------------------------------------------------------------------------------------------------------
| 符号 中文 示例 含义 | ------|-------------------------------------------------------------------------------------------------------------------------------|
基 | 空格 div ul{list-style：none;} <div>内的<ul>元素样式 |
| |
本 | ， 逗号 div，ul{text-align：center;} <div>和<ul>元素采用相同的样式 |
| |
符 | # id标示符 #nav{width：100%;} id为“nav”的样式 |
| |
号 | . 类标示符 .p{ color:#33f;} 类名为p的元素样式 |
| |
| : 冒号 a:link{#ff0;} <a>标签的link伪类样式 |
| |
____|_______________________________________________________________________________________________________________________________|
组 | li. 标签+类 li.pic{29px;} 类名为pic的<li>标签样式 |
| |
| div# 标签+id div#nav{text-align：center;} id为“nav”的<div>标签样式 |
| |
| # . id+空格+类 #nav.pic{border：1px；} id为“nav”元素内的pic类样式 |
| |
| # ., id+空格+类+逗号 #nav .pic，#nav.text{height：26px;} id为“nav”元素内的pic和text类，都采用相同的样式 |
合 | |
----|-------------------------------------------------------------------------------------------------------------------------------|
| |
-------------------------------------------------------------------------------------------------------------------------------------