您当前位置:七彩分享网 >> 网站运营 >> 正文内容

初学CSS应该注意的5个问题

2014/12/20 21:52:05 | 来自百度空间:agui | 阅读 次 | 【字体:
摘要:一些新手初学CSS,有以下5个很容易忽略或者出现错漏的地方,应该要引起注意:对于布局标签的定义;大小写和缩写的问题;少用限定,多用继承;多重class及就近优先原则;链接的正确写法。

一些新手初学CSS,有以下5个很容易忽略或者出现错漏的地方,应该要引起注意:

一、对于布局标签的定义

有时候写好了css,但是反复调试总发现效果差强人意,总是有那么一块空白,挥之不去。其实这就是对于标签定义的不严谨造成的。因为在xhtml的部分标签里,有一些的默认属性值不一定是为空或零的。例如form,p,他们的margin默?#29616;?#24182;不是0,所以在定义时定要多加注意。我?#24378;?#20197;这样来写更加严谨的定义:* { margin:0;padding:0 } /*注释:定义所有标签的margin值和padding值为0*/。

二、大小写和缩写的问题

css对于class和id是区分大小写的,所以当样式不生效的时候建议先检查一下大小写的问题。我建议所有名称统一小写,当然你有自己的编码风格?#37096;?#20197;用。例如第二单词大写,oneTwo。

在css里有很多缩写的习惯,推荐使用缩写格式。基本的缩写有“属?#36816;?#20889;”和“颜色缩写”等。属?#36816;?#20889;的例子:

“margin-top:1px;margin-left:1px;margin-right:1px;margin-bottom:1px;”可以简单的写成“marign:1px;”;它已经代表了以上四个属性,节约了很多字节。

顺便提一下,margin的缩写比较特殊,给不会的朋友看看:

margin x;代表四个方向都为 x ;margin x y;代表上下为 x ,左右为 y ;margin x y z n;是x代表上,y代表右,z代表下,n代表左。其它的这种表示上下左右的属性也同marign。

另一种缩写就是颜色缩写:比如 #aabbcc;可以简写为 #abc;

初学CSS应该注意的5个问题

三、少用限定,多用继承

(1)、少用限定:比如定义了一个类a,该类被用于一个id为b的div中,有人为?#25628;?#35880;,这样定义:#b.a {};这样定义就违备了class的初衷:灵活性!所以一般定义class尽量不要限定他们的应用范围,除非有特殊需要。

子选择是一种不错的方法,比如一个li,我?#24378;?#20197;不必为其定义id或class,一样可以设置它的属性。例子:

<div id="header">

<ul><li></li></ul>

</div>

这种情况我们?#37096;?#20197;这样写: #header ul li { 这里就是li的属性 }。

(2)、多用继承:有人刚开始写css写的很死,例如这样写:

#a { font-size:12px;font-weight:bold;color:#abc; }

#b { font-size:12px;font-weight:bold;color:#123; }

其实在两个样式有许多雷同的时候,我们完全可发挥css的继承特性,例如把上面的例子改成这样:

#a,#b { font-size:12px;font-weight:bold;color:#abc; }

#b { color:#123; }

一组标签也同样适用此方法:h1,h2,h3 {....};效果是完全一样的,是不是又节约了很多字节呢?

四、多重class及就近优先原则

如果一个标签相同时应用两个class,不要这样写:<div class="a" class="b">;这样是不对的,正确写法应该是:<div class="a b">。

如果同时定了两个p margin属性,后面的将覆盖前面的。还有定义了一个span的color属性,又定义了一个class,名为a的color属性,当<span class="a">时候,a的属性就会覆盖原span的属性。这就是就近优先原则……

五、链接的正确写法

?#25215;?#26159;很重要的,一定要正确::link :visited :hover :active;否则有可能会出现错误。


网友对【初学CSS应该注意的5个问题】的评论: