校园第一站首页   校园   教育   考试   电脑   英语   读书   就业   论文   奥运   健康   QQ   游戏   下载 >>>最新偶像剧、台剧、韩剧、日剧在线收看!
XYDYZ-BBS  BLOG  WISH  ASK
本站
Google
网页
校园第一站
主页>电脑>网页设计>DIV+CSS> CSS网页样式设计攻略全集
  • 源于校园 服务于校园 进入校园第一站社区
  • CSS网页样式设计攻略全集
    http://www.xydyz.com 来源:网络收集 2008-07-12 阅读: 评论

    一.使用css缩写

      使用缩写可以帮助减少你CSS文件的大小,更加容易阅读。css缩写的主要规则请参看《常用css缩写语法结见附》,这里就不展开描述。

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

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

      三.区分大小写

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

      class和id的值在HTML和XHTML中也是区分大小写的,如果你一定要大小写旌闲矗胱邢溉啡夏阍贑SS的定义和XHTML里的标签是一致的。

      四.取消class和id前的元素限定
      当你写给一个元素定义class或者id,你可以省略前面的元素限定,因为ID在一个页面里是唯一的,而clas 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,又定义了一个class"update"

      p {
      margin:1em 0;
      font-size:1em;
      color:#333;
      }
      .update {
      font-weight:bold;
      color:#600;
      }

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

      八.多重class定义

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

      .one{width:200px;background:#666;}
      .two{border:10px solid #F00;}

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

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

      九.使用子选择器(descendant selectors)

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

      Item 1>

      Item 1

      Item 1

      这段代码的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.subnavitemselected { /* Some styling */ }
      div#subnav ul li.subnavitemselected a.subnavitemselected { /* Some styling */ }

    你可以用下面的方法替代上面的代码 合你,要看具体的情况,这里不再展开论述。另外关于float的应用,一些优秀的文章已经说得很清楚,推荐你阅读:《Floatutorial》、《Containing Floats》和《Float Layouts》  但是IE5/Win不能正确显示这个定义,我们采用一个非常有用的技巧来解决:用text-align属性。就象这样:

      Item 1

      Item 1

      Item 1

      样式定义是:

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

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

      十.不需要给背景图片路径加引号

      为了节省字节,我建议不要给背景图片路径加引号,因为引号不是必须的。例如:

      background:url("images/***.gif") #333;

      可以写为

      background:url(images/***.gif) #333;

      如果你加了引号,反而会引起一些浏览器的错误。

      十一.组选择器(Group selectors)

      当一些元素类型、class或者id都有共同的一些属性,你就可以使用组选择器来避免多次的重复定义。这可以节省不少字节。

      例如:定义所有标题的字体、颜色和margin,你可以这样写:

      h1,h2,h3,h4,h5,h6 {
      font-family:"Lucida Grande",Lucida,Arial,Helvetica,sans-serif;

    共3页: 上一页 1 [2] [3] 下一页

    上一篇:Div+CSS布局入门教程  
    下一篇:如何使用CSS来进行网页排版

    ·网友互动--用户名: (新注册) 密码: 匿名评论 [所有评论]
    评论内容:(用户发表意见仅代表其个人意见,评论内容与校园第一站立场无关,请自觉遵守互联网相关政策法规)
    关注此文读者还看过
    • ·Div+CSS布局入门教程
      ·如何使用CSS来进行网页排版
      ·DIV+CSS树型菜单
      ·css样式做细线表格
      ·CSS滤镜-Xray属性
      ·CSS滤镜-Wave属性
    最新更新
    • ·Div+CSS布局入门教程
      ·DIV CSS制作网页时易犯的错误总结
    文章关注度排行
    ·CSS+DIV网页样式与布局视频教程全集
    ·如何使用CSS来进行网页排版
    ·CSS滤镜-Xray属性
    ·Div+CSS布局入门教程
    ·CSS教程:li和ul标签
    ·DIV CSS制作网页时易犯的错误总结
    ·CSS滤镜-Shadow属性
    ·CSS滤镜-Gray属性
    ·CSS滤镜-Chroma属性
    ·CSS滤镜-Glow属性
    热点推荐
    如何使用CSS来进行网页排版
    如何使用CSS来进行网页
    CSS滤镜-Xray属性
    CSS滤镜-Xray属性
    Div+CSS布局入门教程
    Div+CSS布局入门教程
    CSS滤镜-Shadow属性
    CSS滤镜-Shadow属性
    CSS滤镜-Gray属性
    CSS滤镜-Gray属性
    CSS滤镜-Chroma属性
    CSS滤镜-Chroma属性
    最新文章
    ·如何使用CSS来进行网页排版
    ·Div+CSS布局入门教程
    ·DIV+CSS树型菜单
    ·css样式做细线表格
    ·CSS滤镜-Xray属性
    ·CSS滤镜-Wave属性
    ·CSS滤镜-Shadow属性
    ·CSS滤镜-Mask属性
    ·CSS滤镜-alphInvert属性
    ·CSS滤镜-Gray属性
    频道推荐
    • ·Div+CSS布局入门教程
    • ·DIV CSS制作网页时易犯的错误总结
    网站精华
    CSS滤镜-Xray属性
    CSS滤镜-Xray
    CSS快速入门
    CSS快速入门
    CSS属性
    CSS属性
    • ·Div+CSS布局入门教程
    • ·DIV CSS制作网页时易犯的错误
    Google ·高级搜索
    | 网站地图 | 关于我们 | 联系我们 | 广告服务 | 友情链接 | 版权声明 |
    版权所有:校园第一站 @2007-2008 未经授权禁止复制或建立镜像
    Site powered by hyperblue http://www.xydyz.com online services. all rights reserved. 鄂ICP备07009403号