Css总结-zhl.doc

总结_zhl
标签的默认样式
这些默认样式对我们是无用的,这时我们需要把标签重定义,简单的把全局的样式统一起来,
清除标签的默认样式:
Body,h1-h6,ul,li,p,form,dl,dt,dd { margin :0px; padding: 0px; font-size: 12px; font-weigth: normal; }
Ul { list-style: none; }
Img{ border-style: none; }
派生选择器
派生选择器的使用可一提高我们的编码效率;一般在使用ul中的li时使用派生选择器,也可在其他标签中使用,派生选择器相当于局部变量,不会影响全局的li标签,只是在某个指定的容器标签中使用,减少了很多li中class的使用,提高了效率。
例如:
.divSort_ItemShow_List ul { list-style: none; display: inline; margin:0px; padding:0px; }
.divSort_ItemShow_List ul li { float: left; margin-left: 0px; padding: 0px; text-align: center; background: url('images/') no-repeat left top; }
这里的ul,li只能在divSort_ItemShow这个层中使用,如果脱离了这个层想单独使用是不能用的,当然重新定义另说。
选择器的分组
可以对选择器进行分组,这样,被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。
例如:
h1, h2, h3, h4, h5, h6 { color: green; }
p, div, span{ font-size: 20px; }
纵向二级菜单
使用ul-li中嵌套使用ul
例如:
<ul>
<li><a href="#">全部热门学堂歌</a>
<ul>
<li><a href="#">周热门</a></li>
<li><a href="#">月热门</a></li>
<li><a href="#">年热门</a></li>
</ul>
</li>
</ul>
超链接的四种样式
这里涉及到伪类,伪类使得用户体验大大提高,比如我们可以设置鼠标移上时改变颜色或下划线等属性来告知用户这个是可以点击的,设置已访问过的链接的颜色变灰暗或加删除线告知用户这个链接的内容已访问过了。
例如:
a:link {color: #FF0000} /* 未访问的链接*/
a:visited {color: #00FF00} /* 已访问的链接*/
a:hover {color: #FF00FF} /* 鼠标移动到链接上*/
a:active {color: #0000FF} /* 选定的链接*/
Css Sprites技术
CSS Sprites在国内很多人叫css精灵或css雪碧。它是把网页中一些背景图片整合到一张图片文件中,再利用CSS的背景图片定位到要显示的位置。这样做可以减少文件体积,减少对服务器的请求次数,提高效率。
例如:
.div_Nav_Sel