编写css相关注意事项以及小技巧

时间:2022-10-23 21:09:08

一、小技巧

1.对于开始写网站css之前一般都要对css进行重置(养成写注释的习惯):

body,ul,ol,li,p,h1,h2,h3,h4,h5,h6,form,fieldset,table,td,img,div,dl,dt,dd,input{margin:0;padding:0;}
body
{font-size:16px;}
img
{border:none;}
li
{list-style:none;}
input,select,textarea
{outline:none;border:none;background:none}
textarea
{resize:none;}
a
{text-decoration:none;}
/*清除浮动*/
.clearfix:after
{content:"";display:block;clear:both;}
.clearfix
{zoom:1;}

 上面的红色标记为背景的css样式写法,主要是解决在IE6的浏览器中如果input标签的边框没有清掉的话,先清空其一个背景色,然后再把白色的背景色给它加上就可以解决了。

2.写css的时候,尽量把整个网页共同的东西写在上面的重置css里面,如果碰到几个标签有重复的css,可以将重复的css写在他们的父元素css里面,子元素是可以继承的。

3.能相同css尽量写在第一个里面css类名里面,不要用类似于:

.class1 .class1.1{/*css样式*/}

这样浏览器会去寻找两次css类名,降低了反应速度。

4.

二、注意事项

1.让input标签的文字居中,可以通过height+line-height+padding来设置,比如总的input标签的高度为36px,则css如下:

/*通过公式(36-16)/2来计算*/
input
{width:100px;height:16px;line-height:16px;padding:10px 0 10px;}

针对IE浏览器对input标签的padding不支持问题(光标不在中间),这样就不用去算了:

input{width:100px;height:35px;line-height:35px\9;/* css hack \9代表所以的ie浏览器*/padding:0 5px;}

2.在写数字的css时候,一般要加上text-align:right;文字右对齐,这样可以在数字位数增多的时候可以往左边递增位数。相反如何想在右边递增可写text-align:left;

3.在IE6中对于百分比的计算不是那么的好,会相对的小一点,所以最好是加上*,比如一般写为width:50%;但是在IE6中得写为*width:49.8%;