css书写顺序（请教前辈们：css样式表先后顺序！！！）
本文目录
请教前辈们：css样式表先后顺序！！！
按照良好的CSS书写规范来写CSS代码，这样会提高代码的阅读体验。下面具体说几点。
CSS书写顺序
位置属性(position, top, right, z-index, display, float等)
大小(width, height, padding, margin)
文字系列(font, line-height, letter-spacing, color- text-align等)
背景(background, border等)
其他(animation, transition等)
使用CSS缩写属性
CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。
去掉小数点前的“0”
连字符CSS选择器命名规范
1.长名称或词组可以使用中横线来为选择器命名。
2.不建议使用“_”下划线来命名CSS选择器，为什么呢？
输入的时候少按一个shift键；
浏览器兼容问题 （比如使用_tips的选择器命名，在IE6是无效的）
能良好区分JavaScript变量命名（JS变量命名是用“_”）
如何定义CSS3属性的书写顺序
一、不同书写顺序示例
首先是比较聪明和值得推荐的写法：
.not-a-square {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
下面就是我们可能不怎么在意的，可能会产生问题的书写顺序：
.not-a-square {
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
实际上，按照我们的逻辑思考，后面的书写也应该不会产生问题啊。比如说，火狐即支持border-radius: 10px;又支持-moz-border-radius: 10px;属性，后面的overwrite前面的也没有问题啊。但是，事实上，事情不是我们想的那么简单的。
1. 很久很久以前：浏览器即不宠幸前缀CSS3也不宠幸纯情CSS3(border-radius)；
2. 不久之前：浏览器只宠幸前缀CSS3，不宠幸纯情的CSS3；
3. 现在：浏览器不仅宠幸前缀CSS3属性，还宠幸纯情CSS3属性；
4. 等到以后：前缀CSS3就回乡下带孩子了，浏览器只宠幸纯情CSS3属性。
下图就是这种趋势的生动写照。
二、实例说明
理想总是美好的，现实总是惨淡的。当下，webkit核心的浏览器不仅支持border-radius属性，也支持-webkit-border-radius属性，这本身没什么，只是见下面：
.not-a-square {
// 这两个家伙干的不是同一个活
border-radius: 30px 10px;
-webkit-border-radius: 30px 10px;
}
当属性超过一个参数值的时候，不同的属性产生的作用是不一样的。
纯情的那种写法(border-radius: 30px 10px)，是让box左上和右下角为30像素圆弧，左下角和右上是10像素圆弧。而那种杂碎的前缀写法(-webkit-border-radius)，则box渲染为每个角都是30像素宽10像素高的圆弧。
如果您现在使用的是最新的Chrome浏览器（我的是Chrome6.0.472.62），或者是（Safari4依旧扁平）Safari5，您就能看到效果了。
三、结语
其实Border radius不是唯一的实例，CSS3中的background-image 渐变貌似也有同样的遭遇。我想，以后会有人吧这些差异全部罗列出来的。但是，无论怎样，把“纯情”的写法放在最后压轴总是更明智的。
更多文章：
2026年7月14日 00:15
2025年12月12日 08:45
2025年9月10日 12:00
2026年7月8日 07:45
sqlite3数据库教程（怎么用asp来操作sqlite数据库，要求具体的完整例子）
2025年7月14日 17:00
2025年6月17日 18:45
2026年7月28日 08:45
display有哪些属性（如何理解CSS的display属性）
2025年9月16日 19:45
windows下nginx启动（windows下启动nginx为什么会有两个nginx.exe进程）
2026年1月10日 23:15
oracle 执行计划（oracle执行计划影响估值的因素）
2026年9月25日 15:00
2025年6月1日 07:00
2026年5月13日 13:45
scope and sequence（scope and sequence 是什么意思）
2025年6月21日 07:45
2025年6月22日 15:15
2025年11月9日 08:15
服务器系统server2008（windows server2008r2有哪些特点）
2025年10月18日 16:45
2025年8月12日 06:15
2026年9月11日 00:00
2026年3月2日 04:30
