firefox推荐与个人理解的css书写顺序

最近的工作中,遇到不少问题,其中一个问题我觉得是最重要的,那就是css的书写顺序,他可以体现一个前端工作者的思续。如果您看到本文,请不要再想到哪个属性就写哪个属性。

先来看一下firefox推荐的书写顺序 
* 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
*
*/ 
从上面推荐的顺序可以看出,非常的有条理。上面推荐的顺序并没有把更加详细的属性写进去,比如:top,right,bottom,left等,也许有人会问,这样些对性能有什么影响吗?我非常遗憾的告诉你,我也不知道,但我想,有条理的做事才是正确的(也许你有更好的方法)。

我的理解:
1.显示属性:display||visibility||list-style(list-style-type、list-style-image、list-style-position)||overflow
2.定位及浮动属性:position||top||right||bottom||left||float||clear
3.盒模型:width||height||margin||padding||border
4.背景:background(background-image、background-position、background-repeat、background-attachment)
5.文字属性:font-style||font-variant||font-weight||font-size||font-family||color
6.文本属性:text-indent||text-align||vertical-align||letter-spacing||word-spacing||text-transform||text-decoration||text-shadow
7.其它

引用某位人的话,”不管你用不用这个顺序,反正我是用了”。欢迎大家指正

时间: 2006-09-22

Mozilla建议的CSS书写顺序

//显示属性 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

font和line-height之CSS代码书写顺序不同,导致显示效果不一样

无意中发现,针对同一HTML标记,在CSS中同时应用了font和line-height属性时,就得小心了,这二者的书写顺序不一样,会导致显示效果不同. 即: >>> 如果先写font,再写line-height,显示效果正常 >>> 如果先写line-height,再写font,则line-height定义的效果会丢失,在IE.Firefox.Opera下都出现这种BUG 具体效果请看以下代码: <p>h1:</p> <h1 style=&

小心:CSS代码书写顺序不同,导致显示效果不一样

无意中发现,针对同一HTML标记,在CSS中同时应用了font和line-height属性时,就得小心了,这二者的书写顺序不一样,会导致显示效果不同. 即: >>> 如果先写font,再写line-height,显示效果正常 >>> 如果先写line-height,再写font,则line-height定义的效果会丢失,在IE.Firefox.Opera下都出现这种BUG 具体效果请看以下代码: h1: IECN.Net - 专注Web技术,体验开发乐趣! IECN.N

兼容ie、firefox的图片自动缩放的css跟js代码分享

需求:图片width<=330px,height<=150. 1.利用max-width,max-height使图片等比例自动缩放,代码: 复制代码 代码如下: img{max-width: 330px;max-height: 150px;} 由于ie6不支持css max-width,max-height,所以在ie6中需要利用javascript脚本来控制大小. 2.用javascript脚本来兼容ie6,代码如: 复制代码 代码如下: var img_width = img.Offset

让用户自己控制网页字体的大小的css书写方法

现在国内绝大多数的站点都用CSS把字体大小设定为12px,像素虽然也是相对尺寸单位,但只是相对于屏幕的分辨率 ,当屏幕的分辨率一定时,如果你感到字太小,阅读有困难,在非标准浏览器中就无能为力了,所以说,如果把单位改成em,那么就可以用CTRL+鼠标滚动把字放大,或者用菜单上的查看>文字大小来改变字的大小. 如何设定 1.在body标签里将字体尺寸设为62.5%,如果在body里没有CSS设定,那么浏览器默认的大小是16px,设了62.5%,则字体尺寸=16px*62.5%=10px,这时你能用e

深入理解javascript的执行顺序

如果你不能理解javaScript语言的运行机制,或者简单地说,你不能掌握javascript的执行顺序,那你就犹如伯乐驾驭不了千里马,让千里马脱缰而出,四处乱窜. 那么JavaScript是怎么来进行解析的吗?它的执行顺序又是如何的呢?在了解这些之前,我们先来认识几个重要的术语: 1.代码块JavaScript中的代码块是指由<script>标签分割的代码段.例如: 复制代码 代码如下: <script type="text/javascript">     

div+CSS 兼容小摘

区别IE6与FF: background:orange;*background:blue; 区别IE6与IE7: background:green !important;background:blue; 区别IE7与FF: background:orange; *background:green; 区别FF,IE7,IE6: background:orange;*background:green !important;*background:blue; IE7,IE8兼容: <meta http

浏览器兼容解决FF/IE6/IE7背景专用CSS HACK

自从互联网开始的那一刻起,各浏览器间的争斗就没有停止过.当然其中最苦的就是网页制作人员了,为了达到用户体验以及可用性的标准,不得不在多个浏览器上为统一效果而奔波.真希望哪一天FF可以一统天下,虽然现在还是IE的大天下.特别是微软最新发布的IE7浏览器,其CSS的兼容性确实给一些网页制作人员又添加了一个沉重的新负担. 为了让各浏览器有同样的显示效果,我们不得不用到CSS HACK.当然在这篇文章中我们只谈现在使用率最高的IE6和FF,以及将来可能会成为主流的IE7的CSS HACK,至于IE6以下

欲练CSS ,必先解决IE的一些细节分析

更加坏的事情是,即使你仅仅针对IE设计,不考虑其它浏览器,由于IE模型绝对可以说是一只让人难以捉摸其脾气的怪物,所以你单纯为IE设计也会遇到众多难题,发现很多的效果总是绕来绕去都难以实现. 我们都知道,XHTML+CSS的目标就是实现内容与表现分离,理论上对于任何特定一份内容,我们都可以通过CSS实现任何我们想要的表现形式,或者细致地说是布局形式.虽然现实与这个目标有一定差距,但是CSS已经能够满足大多数常见的布局需求,这有CSS Zen Garden为证.然而如果你用的是IE,因为它难以捉摸,