日期:2014-05-17  浏览次数:20732 次

css样式归纳(二)——之总结

?

?

1、选择器声明
选择器集体声明用逗号隔开(例如:h1,h2,p,#one{});全局声明用*;选择器嵌套用空格隔开(例如:p?b{}意思是p下的b样式,.mycss?li{}意思是class值是mycss下的li,#idcss?li{}意思是id的值是idcss里面的li)注意:p.mycss和p?mycss的区别,一个是p中class值为mycss,最后的是p包含的元素中class的值为mycss

?

2、CSS继承
CSS一直贯穿整个CSS设计的始终,每个标记都遵守继承

3、段落水平对齐使用text-align(有左对齐,右对齐,两端对齐,居中对齐),垂直对齐使用vertical-align(注意不能对块级元素起作用);行间距使用line-height,letter-spacing是字间距,图片对齐使用其父元素的对齐方式

4、边框重叠使用border-collapse:collapse;去掉a标签链接的文字下划线使用text-decoration:none;a:link是正常状态a的样式,a:visited是访问过,a:hover是鼠标经过,a:active是单击时(平时不用这个状态)??注释:如果设置了a标签中有display:block那么这样鼠标进入该块的任何区域都可以点击连接

5、项目列表使用ol或者ul,其中list-style-type(可以取值disc实心圆、circle空心圆、square正方形、decimal数字、upper-alpha大写字母、lower-alpha小写字母、upper-roman罗马数字、lower-roman小写罗马数字、none不显示任何符号),可使用list-style-image来设置图片符号(浏览器兼容性有问题,建议使用list-style-type设置为none然后增加li的背景图设置padding-left的值来调整图片和文字的间隔),如果需要li水平显示需要li设置float:left即可。

6、定位
div和span的区别在于div是块级标记可以包含span但是span不可以包含div,span是行内元素
float定位:可以向左靠紧float:left、float:right向右靠紧、float:none默认不浮动,注意子块设置成左浮动那么距离左边的距离就是父块的padding-left+自己的margin-left
position定位:如果需要设置absolute需要设定一个参照物就是把那个块的div设置成relative
z-index:空间定位,z-index值大的在小的上面

7、CSS控制盒子模型
所有的div都可以看成盒子,其中内容(content)、边框(border)、间隙(padding,内容与边框的距离)、间隔(margin块和块的距离)

注意:设置的width和height的大小都指的是width+padding的值,IE不支持border-style,而且设置背景ie影响的是内容和间隙,而有的还带上了边框。注意margin如果设置行内元素就是相加,如果块级元素就是最大值,还有就是子块的margin将以父块的内容做参考就是实际大小就成了父块的padding加上子块的margin。

8、设计和编辑div+CSS心得
根据设计的ps图,先把页面划分成几个板块(越少越好),然后几个板块的关系以及margin和padding和边框都设计好(做到心中有图,胸有成竹),继续写成对的div进行命名和声明和注释(解决div不成对和注释少的问题),确定每个块的名字和样式(精确到大小和颜色),最后写代码调试(每个浏览器的方法不一样编写的css可能有不同的样式,需要进行深入研究)

9、 浏览器兼容问题

  对于IE6来说,不使用盒模型Hack。如果只针对流行浏览器的话,只需要很少的Hack就能实现同样的效果。

  我注意了一下网易新版主页的CSS,其中竟然 一个!important或者Hack都没有,可是在FF和IE里面显示效果都很好。合理的使用CSS可以避免Hack。当然,调试的时间会多一些。

  包含浮动 元素所有在容器 内的内容都应该被设计 为和容器保持一致。如果过大的话就会滑动到错误位置。使用负值margin调整到容器外同样会导致滑动。

  理解 Overflow如果