| 域名空间 下载中心 社区论坛 信息公告 my小屋 |
![]() |
联系我们 设为首页 加入收藏 |
|
首页 | 新闻资讯 | 编程开发 | 网页设计 | 图形图象 | 网络媒体 | 网站模板 | 数 据 库 | 投稿 论坛 | 操作系统 | 系统优化 | 网络安全 | 黑客技术 | 硬件学堂 | 硬件报价 | 服 务 器 | 地图 专题 | 应用软件 | 聊天通讯 | q q 专栏 | 建站经验 | 在线工具 | 站长club | 注 册 表 | 旧版 社会 | 游戏娱乐 | 设计欣赏 | 疑难解答 | 社区论坛 | 韩国素材 | 素材图库 | 广告服务 | 服务 |
| 新版上线![旧版] | |||||
注:打开慢时请稍等
css的十八般技巧(1)http://www.iyit.net 日期:2006-5-27 9:16:35 来源:转载 点击: |
使用缩写可以帮助减少你css文件的大小,更加容易阅读。css缩写的主要规则请参看《常用css缩写语法总结》,这里就不展开描述。 二.明确定义单位,除非值为0忘记定义尺寸的单位是css新手普遍的错误。在html中你可以只写width="100",但是在css中,你必须给一个准确的单位,比如:width:100px width:100em。只有两个例外情况可以不定义单位:行高和0值。除此以外,其他值都必须紧跟单位,注意,不要在数值和单位之间加空格。 三.区分大小写当在xhtml中使用css,css里定义的元素名称是区分大小写的。为了避免这种错误,我建议所有的定义名称都采用小写。 class和id的值在html和xhtml中也是区分大小写的,如果你一定要大小写混合写,请仔细确认你在css的定义和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 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更加简洁、更加容易阅读。
编辑:黑鹰 [发送给好友] [打印本页] [关闭窗口] [返回顶部] 上一篇:css的十八般技巧(2) 下一篇:css代码缩写技巧 转载请注明来源:www.iyit.net 特别声明: 本站除部分特别声明禁止转载的专稿外的其他文章可以自由转载,但请务必注明出处和原始作者。文章版权归文章原始作者所有。对于被本站转载文章的个人和网站,我们表示深深的谢意。如果本站转载的文章有版权问题请联系编辑人员,我们尽快予以更正。 |
| 相关文章 | ||||
| 友情链接 | ||||||
| 设置首 页 - 版权声明 - 广告服务 - 关于我们 - 联系我们 - 友情连接 |
| |||||||