Meta CSS框架发布
作者 佚名技术
来源 CSS编程
浏览
发布时间 2012-05-26
| } .tal{text-align:left;}.tar{text-align:right;}.tac{text-align:center;} .c0,a.c0{color: #000; font-family:Arial;} .c6,a.c6{color:#666; font-family:Arial; /* 一段摘抄自163.com的css代码 */ /* Font */ .fB {font-weight: bold;} .f12px{ font-size:12px;} /* Other */ .left{ float: left;} .right{ float: right;} .clear{ clear: both; font-size:1px; width:1px; height:0; visibility: hidden; } .clearfix:after{content:"."; display:block; height: 0; clear: both; visibility: hidden;} /* only FF */ .hidden {display: none;} .blank3{ height:3px; clear:both;display:block; font-size:1px;overflow:hidden;} Meta CSS框架，就是为了满足这样的一个需求而设计的一个框架。 Meta CSS框架的实现参考了不少大型站点的css代码，分析代码里的共性而总结出来的，该框架可以整合yui css框架或者blueprints框架来使用。它的作用在于以一个明确的命名规则，提供一个通用的css类集。正如这个框架的名字Meta，它规划出最小的最通用的"元定义"。可以与目前了解的各类css框架共存。 框架的意义，其实就是提供一个良好的可遵循的规范以及底层功能，规范代码的开发，提高开发的效率。Meta CSS也是遵循这样的一个理念，先来看一个Meta CSS框架的代码片段： /* Font */ .fwb { font-weight: bold; } .fwn{ font-weight: normal; } .tdn{ text-decoration: none; } .tdu{ text-decoration: underline; } .tdl{ text-decoration: line-through; } .fs10p{ font-size: 10px; } .fs11p{ font-size: 11px; } Meta CSS框架的命名规则 Meta CSS框架提供了一个简单而有规律的命名。 规则1：非定义尺寸的css定义，以css属性名的首字母+属性值的首字母组合而成。例如：font-weight:bold，css类名就是fwb。text-align:center，css类名就是tac。float:left，css类名就是fl。 规则2：定义尺寸的css，以css属性名的首字母+属性值+属性值单位的首字母。例如font-size:10px，css类名就是fs10p。border:1px solid #cccccc; css类名为b1sc。特别的，%的数值，采用percent的首2个字母pe。 规则3：多个属性的定义，命名参考规则1与规则2，中间用-连接。例如font-size:10px,font-weight:bold。css类名就是fs10p-fwb。 为什么要这样定义呢?有些人可能比较偏好开心网的，极致简单的，float:left，css类名是l，float:right，css类名就是 r，非常简单。简单是非常简单，但是问题在于这样的定义显得很随意，没有规则。假设它定义的font-weight:bold的css类名是fb，那么新的开发者一定要去看代码才知道定义的名称叫fb，它没办法通过一个明确的规则来知道想要的属性是什么名称，有时候他还会很干脆的另外定义一个。 而我们规定的这个命名规则，如果想要左浮动，就可以马上得知是：fl。font-weight:bold，可以马上知道是fwb，毫无疑惑。敏捷开发的一个很重要的思想，就是约定胜于配置，meta css框架中很多css类名看起来很不优雅，甚至显得怪异，但是只要所有协同开发者了解这个约定，就可以大大减少记忆的工作量，所有的开发者都可以轻松的记住它。 Meta CSS框架的组成 对照w3c的手册，Meta CSS将css定义分成了几个部分，分别是：font字体，text文本，background背景，position位置，dimension元素尺寸，layout布局，margin外边距，border边框，padding内边距，other其他以及combine联合定义。 这里概况下各个部分的定义： font字体：定义了font-weight，text-decoration，font-size，color。 text文本：定义了text-align，text-indent background背景：定义了background-color position位置：定义了z-index
|
凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢! |
你可能对下面的文章感兴趣
上一篇: 12组免费的CSS3按钮强力推荐下一篇: 20种免费的Web设计流行字体
关于Meta CSS框架发布的所有评论
