Css总结-zhl.docVIP

总结_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/xtg_Sort_bg.gif) 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 lia href=#全部热门学堂歌/aullia href=#周热门/a/lilia href=#月热门/a/lilia 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_Select_bg { width: 91px; height:33px; float: left; padding-left: 50px; width: 92px; background: url(images/nav_selected.gif) 0 0 no-repeat; } （background: url(images/nav_selected.gif) no-repeat right top;） url表示背景的图片地址，第一个参数表示距左多少px，第二个参数表示距上多少，这和padding的简写方式是不一样，一定不要弄混。另外再强调一点css中值为0可以不带单位，其它数值都必须带单位（line-height值为多少倍时，zoom，z-index除外）；no-repeat表示背景图片向哪个方向重复，此时为不重复。还有定位图片位置的参数是以图片的左上角为原点的。 浮动的所在容器的高度调整 如果一个容器内的元素都浮动的话，那么它的高度将不会去适应内部元素的高度。解决办法是在容器层增加 overflow: autol; zoom:1;，这样就可以让它自动适应内部元素的高度了。为了更加保险，应该在header、nav、maincontent、footer之间增加如下一句代码并设置css样式如下，它的作用是清除浮动。 例如： .clearfloat {clear: both; height: 0;font-size: 1px; line-height: 0px;} div class=clearflo