注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

星期五

明天不上班

 
 
 

日志

 
 
关于我

一个特立独行的Java程序员,比较宅,上上网,写博客,听音乐,看电影。

网易考拉推荐

简化CSS样式  

2011-06-10 20:57:24|  分类: Css |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

.简化CSS写法。

1 (使用缩写)

.label {

   color: #000000; 

}

简化后

.label {

   color: #000;

}

2

.logs {

   margin-top: 5px;

   margin-right: 0;

   margin-bottom: 4px;

   margin-left: 10px;

}

简化后

.logs {

   margin: 5px 0 4px 10px;

}

二.使用继承(借用SASS思想)

SASS使CSS函数化,有诸如变量,嵌套,混合,继承等特性,需Ruby支持 

1

.box-1,.box-2 {padding:25px;border:1px solid #000;border-radius:5px;} //公共样式

.box-1 {background-color:#FFEE00;} //自己的样式

.box-2 {background-color:#00FFEE;}

(该例子来自YUI3 portal

div.mod h2 a.close, div.mod h2 a.min { //写公共样式

    background-color: #cccccc;

    background-image: url("layout_sprite.png");

    background-position: -20px -100px;

    border: 1px solid #808080;

    color: black;

    display: block;

    font-size: 80%;

    font-weight: bold;

    height: 13px;

    margin: 2px;

    padding: 0;

    position: absolute;

    right: 4px;

    text-decoration: none;

    top: 1px;

    width: 17px;

}

div.mod h2 a.min { //自己单独的样式

    background: url("layout_sprite.png") no-repeat scroll -20px -220px transparent;

    right: 25px;

}

div.mod h2 a.min样式继承div.mod h2 a.close 样式

三 面向对象的CSS OOCSS

.box {padding:25px;border:1px solid #000;border-radius:5px;} //公共样式

.box-1 {background-color:#FFEE00;}

.box-2 {background-color:#00FFee;}

使用时 <div ></div>

四 对CSS进行压缩使用CSS工具

例如  YUI Compressor


参考资料:

http://www.zhangxinxu.com/wordpress/2010/08/%E7%BF%BB%E8%AF%91-%E4%B8%8D%E5%90%8Ccss%E6%8A%80%E6%9C%AF%E5%8F%8A%E5%85%B6css%E6%80%A7%E8%83%BD/


 

  评论这张
 
阅读(201)| 评论(0)
推荐

历史上的今天

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017