CSS的书写顺序规范
作者:荆棘鸟 来源:荆棘鸟's Blog 发布时间:2008-06-12 13:51:00
一个站点成功与否,不是在于所用的程序语言是PHP还是ASP,也不在于用BLOG建站或是CMS建站,内容和专业很重要。博客很好起步,CMS体系很完整。但最终还是要看用户的需要了,是否能在最短的时间找到他们最需要的东西。
“苦力王的蓝球视频”就是一个例子,原来是用z-blog建的,自从CEO换人之后,页面改成了CMS,增加一些资讯,用户就反映不能快速找到,他们最需要的NBA视频了,从而把优势变为劣势。这是盲目追求“大而全”的一个失败教训,期望新站长能够及早发现。
个人还比较欣赏“站酷”这个设计素材站点,主站和论坛发展都很好,大有超越“经典论坛”之势。一开始只是网上素材收集,现在原创内容也搞得非常火热。页面简洁大气,内容丰富。这是网站专业定向精准、内容和形式结合非常好,网站分阶段发展,一个非常成功的例子。
Visc在聊天时说过,分阶段性的实施计划,这点非常重要,一开始就想做全,非常难而且耗时耗精力,如果先走一步看看发展方向,然后再继续,还是比较可行。说真的,在我们博客话题群,虽是一些小站长,但里面人才济济,看他们聊天,能学到不少东西。
以上是一些题外话,算是总结吧,下面开始转载。
我们运用xhtml+css网页布局,实现表现与结构的分离,表现部分的css文件非常重要,也比较繁杂,我们在书写CSS文件时有很多属性和值,我们就考虑到了书写顺序的问题。
有时候是先写了margin或color,然后再写width和height等等。我们有没有必要让我们的编码更加的工整,更加的科学呢?实践证明,书写工整、按一定的规则进行书写是很有好处的。
下面是Mozilla Firefox所建议的CSS书写顺序,对我们的代码书写很有参考价值:
mozilla.org Base Styles
* maintained by fantasai
* (classes defined in the Markup Guide -http://mozilla.org/contribute/writing/markup)
*/
/* Suggested order:
//显示属性
* display
* list-style
* position
* float
* clear
//自身属性
* width
* height
* margin
* padding
* border
* background
//文本属性
* color
* font
* text-decoration
* text-align
* vertical-align
* white-space
* other text
* content
*
*/<--文章内容结束标识,勿删!!--> <--page-->
下面这段是52CSS自己总结的,对上面的书写顺序规则作出自己的理解,而且里面有一些例程进行对比,两厢比较,就可以看出CSS书写顺序重要性了。
想要编写出专业、易懂具有很好的编码思维的CSS样式文件,是需要花一定的精力来学习的。
现在需要强调的是编码的顺序问题,这是一个非常微小的细节问题,但涉及到团队协作以及让您的编码更加工整,强烈推荐以一定的顺序来进行编码。看下面的例子:
代码A:
#main {
font-size:13px;
width:500px;
background:url(http://www.zfnn.com/logo.jpg) no-repeat 20px 200px;
height:600px;
line-height:22px;
color:#c00;
float:left;
margin:10px 0 15px 0;
}
代码B:
#main {
float:left;
width:500px;
height:600px;
margin:10px 0 15px 0;
background:url(http://www.zfnn.com/logo.jpg) no-repeat 20px 200px;
color:#c00;
font-size:13px;
line-height:22px;
}
我们发现,代码B明显要比代码A工整很多,这样在修改样式时可以很快的找到相关属性,进而进行调整。而代码A看上去很杂乱,如果定义的属性足够多,根本不清楚写在了什么地方。以代码B的形式按一定的次序进行编码也有利于团队协作共同开发。
推荐的CSS编码顺序分为三类,分别如下:
1、显示与定位
display
position
float
list-style
2、元素自身
width
height
margin
padding
border
background
3、文本外观
color
font
line-height
text-align
text-decoration
other
这样编码或许短时间内察觉不出什么优势,但如果在大的项目开发中加以运用会发挥强大的作用,代码看起来很舒服,修改容易,团队成员或后续交接会很顺利的进行。在平常的编码中,应该良好的编码习惯。这非常重要!
猜你喜欢
- 普通卷积使用nn.Conv2d(),一般还会接上BN和ReLu参数量NNCin*Cout+Cout(如果有bias,相对来说表示对参数量影响
- 一、简介 Python的条件和循环语句,决定了程序的控制流程,体现结构的多样性。
- 饼图中的series有个avoidLabelOverlap属性,avoidLabelOverlap:是否启用防止标签重叠策略,默认开启,在标
- 如下所示:$ary = array( array('t'=>1,'y'=>2), &
- 下面都是我收集的一些比较常用的正则表达式,因为平常可能在表单验证的时候,用到的比较多。特发出来,让各位朋友共同使用。呵呵。匹配中文字符的正则
- 老师罚学生抄写英文单词,结果学生给抄成这样……
- <html> <head> <meta http-equiv="Content-Type"
- 本文实例讲述了Python中偏函数用法。分享给大家供大家参考,具体如下:python中偏函数当一个函数有很多参数时,调用者就需要提供多个参数
- ……最近在学习yolo1、yolo2和yolo3,事实上它们和SSD网络有一定的相似性,我准备汇
- 天天敲代码的朋友,有没有想过代码也可以变得很酷炫又浪漫?今天就教大家用Python模拟出绽放的烟花,工作之余也可以随时让程序为自己放一场烟花
- 在cmd下运行go程序或者是GOLAND的Terminal下运行go程序会出现中文乱码的情况。go run ttypemain.go����
- 准备必须环境:Python3开始先实现一个简单的版本,直接上代码:import urllib.requestimport urllib.er
- 本文实例讲述了Python中subprocess模块用法。分享给大家供大家参考。具体如下:执行命令:>>> subproc
- 说到转置操作,顺便提及矩阵与数组的区别:矩阵:数学里的概念,其元素只能是数值,这也是区别于数组的根本所在数组:计算机中的概念,代表一种数据组
- 本文实例讲述了python实现读取excel文件中所有sheet操作。分享给大家供大家参考,具体如下:表格是这样的 实现把此文件所
- 字符串在Python内部的表示是Unicode编码,因此,在做编码转换时,通常需要以Unicode作为中间编码,即先将其他编码的字符串解码(
- 将Timestamp转为datetime类型在Pandas中我们在处理时间序列的时候常用的方法有:pd.to_datetime()pd.da
- 一般我们是利用Session对象来防止通过“刷新”增加计数器的访问量的,看看下面的做法;<%If IsEmpty(Sessi
- 著名的老掉牙的IE6.0在我这里已经有六年工龄了,前几天朋友拿到个IE8.0新的Beta版本,我的Sever2003装不上,大为扫兴。Chr
- 今天是Firefox3的2008下载日(貌似北京时间是6.18的凌晨1:00),这就意味着Firefox3正式发布了。Firefox3有众多