下载中心┊文章中心┊软件分类┊更新软件┊推荐下载┊热门软件┊更新文章┊热门文章
 
《拓文asp.net网站内容管理系统》官方演示站。
  设为首页    
 收藏本站
 作者：黄振安
 
网站首页 开源拓文 .NET编程 网站编程 网页设计 图形图像 数据库 软件工程留言本
    站内搜索：   
您现在的位置： 拓文网络 → 文章中心 → 网页设计 → CSS → CSS的十八般技巧［正文］

热 门 文 章

相 关 文 章
  • CSS应用小技巧十四例
  • 用Css控制IE5.5浏览器中滚动条
  • 中文排版CSS心得
  • 简明 HTML CSS 开发规范
  • CSS手册简编
  • css中用expression实现js的onm...
  • expression的应用之 -- 用CSS...
  • 如何在网页中制作虚线表格
  • CSS样式切换技巧
  • CSS 标签属性/属性参考
    		•
    CSS的十八般技巧
     
    ［作者：不详    转贴自：不详    点击数：    字体:【大 中 小】    更新时间：2006-4-6 14:07:05］

    五.默认值

    通常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 class="one two"></div>

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

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

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

    <div id="subnav">
    <ul>
    <li class="subnavitem"> <a href="#" class="subnavitem">Item 1</a></li>>
    <li class="subnavitemselected"> <a href="#" class="subnavitemselected"> 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.subnavitemselected { /* Some styling */ }
    div#subnav ul li.subnavitemselected a.subnavitemselected { /* 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更加简洁、更加容易阅读。
    页次:2/5  1篇/页  首页   上一页   下一页   尾页  合计 5 篇 Go:

     
    上一篇:动态调用Webservice
    下一篇:中文排版CSS心得    		 winner 打印本页 关闭窗口

         文 章 评 论
    评论人 查看该文章的评论 发表时间
       笔 名* ： 0 50分 60分 70分 80分 90分 100分
    评论内容 *： （最多600字。当前字数：0）
    没有相关评论，欢迎您参与！

    - 关于本站 - 网站帮助 - 下载声明 - 友情连接 - 网站地图 -
    Copyright © 2005-2006 myTopWin.Com. All Rights Reserved . [桂ICP备06004496号]