新手扎实基础之我如何学CSS网页制作技巧

    类别:新手问答  贡献者:admin  总点击:3000  受欢迎度:10  更新日期:2011年05月08日
简介:新手扎实基础之我如何学CSS网页制作技巧   本篇总结了一些css常用技巧,为网站重构打下基础,但愿您能学到一点有用的东西...
  • 新手扎实基础之我如何学CSS网页制作技巧

      本篇总结了一些css常用技巧,为网站重构打下基础,但愿您能学到一点有用的东西。 

      一.使用css缩写 

      使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则请参看《css基本语法》。 

      二.明确定义单位,除非值为0 

      忘记定义尺寸的单位是CSS新手普遍的错误。在HTML中你可以只写;100,但是在CSS中,你必须给一个准确的单位,比如:" width:100em。只有两个例外情况可以不定义单位:行高和0值。除此以外,其他值都必须紧跟单位,注意,不要在数值和单位之间加空格。 

      三.区分大小写 

      当在XHTML中使用CSS,CSS里定义的元素名称是区分大小写的。为了避免这种错误,我建议所有的定义名称都采用小写。 

      class和id的值在HTML和XHTML中也是区分大小写的,如果你一定要大小写混合写,请仔细确认你在CSS的定义和XHTML里的标签是一致的。 

      四.取消class和id前的元素限定 

      当你写给一个元素定义class或者id,你可以省略前面的元素限定,因为ID在一个页面里是唯一的,鸩las s可以在页面中多次使用。你限定某个元素毫无意义。例如: 

    div#content { /* declarations */ } 

    fieldset.details { /* declarations */ } 

      可以写成 

    #content { /* declarations */ } 

    .details { /* declarations */ } 

      这样可以节省一些字节。 

      五.默认值 

      通常padding的默认值为0,background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。如果怕有冲突,可以在样式表一开始就先定义所有元素的margin和padding值都为0,象这样: 

    * { 

    margin:0; 

    padding:0; 

      六.不需要重复定义可继承的值 

      CSS中,子元素自动继承父元素的属性值,象颜色、字体等,已经在父元素中定义过的,在子元素中可以直接继承,不需要重复定义。但是要注意,浏览器可能用一些默认值覆盖你的定义。 

      七.最近优先原则 

      如果对同一个元素的定义有多种,以最接近(最小一级)的定义为最优先,例如有这么一段代码 

    Update: Lorem ipsum dolor set 

    在CSS文件中,你已经定义了元素p,又定义了一个classupdate 

    p { 

    margin:1em 0; 

    font-size:1em; 

    color:#333; 

    .update { 

    font-weight:bold; 

    color:#600; 

      这两个定义中,class="update将被使用,因为class比p更近。你可以查阅W3C的《Calculating a sel ector’s specificity》 了解更多。

      八.多重class定义 

      一个标签可以同时定义多个class。例如:我们先定义两个样式,第一个样式背景为#666;第二个样式有10 px的边框。 

    .one{;background:#666;} 

    .two{border:10px solid #F00;} 

      在页面代码中,我们可以这样调用 

    <div class="one" two></div> 

      这样最终的显示效果是这个div既有#666的背景,也有10px的边框。是的,这样做是可以的,你可以尝试一下。 

      九.使用子选择器(descendant sel ectors) 

      CSS初学者不知道使用子选择器是影响他们效率的原因之一。子选择器可以帮助你节约大量的class定义。我们来看下面这段代码: 

    <div id="subnav>" 

    <ul> 

    <li class="subnavitem>" <a href=# class="subnavitem>"Item 1</a></li>> 

    <li class="subnavitemsel ected>" <a href=# class="subnavitemsel ected>" Item 1</a> </li>
     
    <li class="subnavitem>" <a href=# class="subnavitem>" Item 1</a> </li> 

    </ul> 

    </div> 

    这段代码的CSS定义是: 

    div#subnav ul { /* Some styling */ } 

    div#subnav ul li.subnavitem { /* Some styling */ } 

    div#subnav ul li.subnavitem a.subnavitem { /* Some styling */ } 

    div#subnav ul li.subnavitemsel ected { /* Some styling */ } 

    div#subnav ul li.subnavitemsel ected a.subnavitemsel ected { /* Some styling */ } 

      你可以用下面的方法替代上面的代码 

    <ul id="subnav>" 

    <li> <a href=#> Item 1</a> </li> 

    <li class="sel>" <a href=#> Item 1</a> </li> 

    <li> <a href=#> Item 1</a> </li> 

    </ul> 

      样式定义是: 

    #subnav { /* Some styling */ } 

    #subnav li { /* Some styling */ } 

    #subnav a { /* Some styling */ } 

    #subnav .sel { /* Some styling */ } 

    #subnav .sel a { /* Some styling */ } 

      用子选择器可以使你的代码和CSS更加简洁、更加容易阅读。

     

     

    补充本知识点暨快乐评论此文章:'做网页:新手扎实基础之我如何学CSS网页制作技巧.'

文章标签:CSS网页制作技巧 网页 
踩下去0
顶上来0
复制本页网址,与你QQ/MSN上的好友分享  温馨提示:如果您喜欢本站,请把她推荐给您的朋友们!
现在有0人对本文发表评论。  »马上发布评论
现在有0人对本文发表评论。  »查看所有评论
您的姓名: * 可选项,留空即为匿名发表
评论内容:
剩余字数:  * 按 Ctrl + Enter 直接发送.
           »»我要分享做网页知识
相关文章推荐
网友阅读排行
新手问答
本站会员贡献
合作伙伴: 百度站长平台 新浪读书频道 CSDN.Net YPState R灯具集 小金子学院 商录 全球网站推广库 搜狗站长平台 网页百科 更多» >>加入本站作者团
首页 | 关于我们 | 网站地图 | 合作伙伴 | 部分作者 | 会员注册 友情链接 | 联系方式 |
2004-2020 做网页学习网 鄂公网安备 42010402000280号 鄂ICP备13003030号