您当前的位置: 首页 > 前端教程 > CSS教程 > 总结新手学CSS容易出现错误的内容

总结新手学CSS容易出现错误的内容

作者:不详 来源:网络 发布时间: 2013-10-06 10:12 点击:
一些新手容易忽略或者出现错漏的地方。 1.首先是对于布局标签的定义。 有时候写好了css,但是反复调试总发现效果差强人意,有那么一块空白,挥之不去。其实这就是对于标签定义的不严谨造成的。因为在xhtml的部分标签里,有一些的默认属性值不一定是为空或零的。例如for

总结新手学CSS容易出现错误的内容

     一些新手容易忽略或者出现错漏的地方。

  
  1.首先是对于布局标签的定义。
  
  有时候写好了css,但是反复调试总发现效果差强人意,有那么一块空白,挥之不去。其实这就是对于标签定义的不严谨造成的。因为在xhtml的部分标签里,有一些的默认属性值不一定是为空或零的。例如form,p,他们的margin默认值并不是0,所以在定义时定要多加注意。我们可以这样写来更加严谨的定义:* { margin:0;padding:0 } /*注释:定义所有的标签的margin和padding为0*/
  
  2.缩写和大小写问题
  
  css对于class和id是区分大小写的,所以当样式不生效的时候建议先检查一下大小写问题。我建议所有名称统一小写,当然你有自己的编码风格也可以用。例如第二单词大写,oneTwo在css里有很多缩写的习惯,推荐使用缩写格式。基本的缩写有 属性缩写和颜色缩写等。
  
  属性缩写的例子:
  
  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 a;x代表上,y代表右,z代表下,a代表左
  
  其他的这种表示上下左右的属性同marign.
  
  另一种缩写就是颜色缩写:比如 #aabbcc;可以简写为 #abc;
  
  3.少用限定,多用继承
  
  (1).少用限定:比如定义了一个类a,该类被用于一个id为b的div中,有人为了严谨,这样定义:#b.a {}
  
  这样定义就违备了class的初衷-灵活性.所以一般定义class尽量不要限定他们的应用范围,除非有特殊需要。
  
  子选择是一种不错的方法,比如一个li,我们可以不必为其定义id或class,一样可以设置它的属性。
  
  例子:
  
  <div id="header">
  
  <ul><li></li></ul>
  
  </div>
  
  这种情况我们也可以这样写: #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 {....}
  
  效果是完全一样的,是不是又节约了很多字节呢..
  
  4.多重class及就近优先原则
  
  如果一个标签相同时应用两个class,不要这样写:<div class="a" class="b">这样是不对的
  
  正确写法:<div class="a b">
  
  如果同时定了两个p margin属性,后面的将覆盖前面的。还有定义了一个span的color属性,又定义了一个class,名为a的color属性,当<span class="a">时候,a的属性就会覆盖原span的属性。这就是就近优先原则。。。。
  
  5.链接的正确写法:
  
  顺序是很重要的,一定要正确::link :visited :hover :active
  
  否则有可能会出现错误。
  
  学好css最需要的就是多动多实践,那样才能学的快。
分享到:
本文"总结新手学CSS容易出现错误的内容"由远航站长收集整理而来,仅供大家学习与参考使用。更多网站制作教程尽在远航站长站。
顶一下
(1)
100%
踩一下
(0)
0%
[点击 次] [返回上一页] [打印]
发表评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 密码: 验证码:
关于本站 - 联系我们 - 网站声明 - 友情连接- 网站地图 - 站点地图 - 返回顶部
Copyright © 2007-2013 www.yhzhan.com(远航站长). All Rights Reserved .
远航站长:为中小站长提供最佳的学习与交流平台,提供网页制作与网站编程等各类网站制作教程.
官方QQ:445490277 网站群:26680406 网站备案号:豫ICP备07500620号-4