快速业务通道

Meta CSS框架发布

作者 佚名技术 来源 CSS编程 浏览 发布时间 2012-05-26
dimension元素尺寸:定义了width,height

  layout布局:定义了float,overflow,display。特别的,有一个额外定义的css类c,可以在多浏览器环境下实现清除浮动。常常可以在一些css代码中见到,常常也命名为clearfix。

  margin外边距:定义margin

  border边框:定义了border

  padding内边距:定义了padding

  other其他:定义了cursor

  combine联合定义:用户自行扩展定义。联合定义规定了多个属性的定义方法,比如font-weight加上font-size,定义的css类名为fs10p-fwb。

Meta CSS框架扩展与裁减
Meta CSS说白了本质上就是一个css文件而已,要进行改动是一件很容易的事情,任何开发者都可以随意的往这个css文件里面添加或者删除任意属性与定义。随意的添加或删除当然不是我们希望看到的结果,遵循框架的约定进行增删改,才是真正意义上的扩展与裁减。
注意:根据你自己的项目,对Meta CSS进行扩展与裁减是非常正常的也是很有必要的。
扩展Meta CSS的方式很简单,就是遵循命名规则,添加新的css类定义。假设你要增加一个margin是20px的定义,默认框架中是margin:10px,你就可以添加一个m20p的css类就可以了。具体可以查看Meta CSS文件中的注释。
裁减Meta CSS同样简单,删除文件中你确实不需要用到的属性就可以了。大部分时候,默认的一些字体,内外边距之类的定义往往不一定符合你的需求。
Meta CSS 使用方法
从语法上,你当然可以通过class="fwb tar mr10p pt20p"来创建一个加粗的,右对齐的,右内边距10px,上外边距20px的元素,但是从框架本身的意义来说,这不是最佳的适用环境。Meta CSS框架适用的环境是:
的确是单一属性的定义。例如只是 class="fwb",加粗一个元素。
对某一个css定义给出特殊情况的补充。参考开头部分提到的例子3。
代码中使用的范例:
<style type="text/css">
.fwb{
font-weight:bold;
}
.tar{
text-align:right;
}
.div1{
border:1px solid #ccc;
padding:15px;
color:green;
width:200px;
margin-bottom:20px;
}
</style>
<div id="d1" class="div1">
第一个div
</div>
<div id="d2" class="div1 fwb">
第二个div,字体加粗
</div>
<div id="d3" class="div1 tar">
第三个div,右对齐
</div>
基本使用方法:下载metacss文件,放到你的css文件夹中,可以采用形如
<link rel="stylesheet" href="css/metacss.css" type="text/css" media="screen">
这样的css引用语句。你可以将metacss中所有的css定义copy到你的css文件中合并到一起,所有的css文件可以怎么做,你都可以怎么做。
Meta CSS框架的局限性
css优先级的影响,你不能保证定义总会生效,如果之前的css类已经包含某些要覆盖的定义,则有可能因为优先级的关系,不能生效。我们稍微修改下上面的例子:
<style type="text/css">
.fwb{
font-weight:bold;
}
.tar{
text-align:right;
}
.div1{
border:1px solid #ccc;
padding:15px;
color:green;
width:200px;
margin-bottom:20px;
text-align:left; /* 更高优先级,无法被tar覆盖 */
}
</style>
<div id="d1" class="div1">
第一个div
</div>
<div id="d2" class="div1 fwb">
第二个div,字体加粗
</div>
<div id="d3" class="div1 tar">
第三个div,预期右对齐,但是事实上不会生效。
</div>
像这个例子里,.div1的text-align有比tar更高的优先级,所以

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务,公司网站:http://www.lingzhong.cn 为了给广大客户了解更多的技术信息,本技术文章收集来源于网络,凌众科技尊重文章作者的版权,如果有涉及你的版权有必要删除你的文章,请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息,谢谢!

分享到: 更多

Copyright ©1999-2011 厦门凌众科技有限公司 厦门优通互联科技开发有限公司 All rights reserved

地址(ADD):厦门软件园二期望海路63号701E(东南融通旁) 邮编(ZIP):361008

电话:0592-5908028 传真:0592-5908039 咨询信箱:web@lingzhong.cn 咨询OICQ:173723134

《中华人民共和国增值电信业务经营许可证》闽B2-20100024  ICP备案:闽ICP备05037997号