CSS样式表书写基本规范飞龙的看法
feilong.org 修订于2009-08-15 10:53:00 416 次浏览CSS样式表可以有效地对控制页面布局、字体、颜色、背景和其它效果，实现网页皮肤的精确表现和变化。应该说每位网页制作朋友都有自己的CSS设计习惯和经验。那么有没有css书写规范呢？这里飞龙谈谈自己看法。修订地址：http://feilong.org/standard-css-abc 欢迎留言交流。
一、首先根据css样式位置不同，样式表类型有：
1.内联样式表
如：<body style=" color:#FF0000;font-family:"宋体";cursor:url(3151.ani);">
2.嵌入样式表
<style type="text/css">
<!--
hr {color: sienna}
-->
</style>
3.外部样式表
飞龙认为最好尽量用外部样式表，也就是把所有CSS外部调用，也就是形如：
<LINK href="feilong.css" rel="stylesheet" type="text/css">
二、其次根据CSS样式选择器(选择符)不同，也可以分为三种最主要的类型，他们可以根据需要进行组合，飞龙谈谈他们的顺序问题。
1.类：可应用于任何标签，css选择符一般带一个点点记号。页面里某个对象套用这个类css，需要用。
比如 .love .mo-bg
2.标签：重新定义特定标签的外观，css选择符没有前缀记号。页面里同名标签对象直接套用这个css样式属性。
比如 body p hr h1
3.高级：包括链接的4种状态，a:link a:visited，a:hover，a:active，还包括ID选择符，就是那些只适合网页特定内容的带#记号选择符。
4.一般地，重新定义特定标签css样式一般需要放在css样式表文件的最前面，作为网页的通用样式。
5.一般地，伪类其次，因为它的样式可以局部用于某一类的html标签
6.一般地，高级标签放css样式表最后，比如 a:link a:visited a:hover a:actived，和#。
7.以上三种选择符的顺序也不是绝对的，飞龙（feilong）觉得反而应该把他们的顺序反过来。因为通用css选择符属性一旦定好就不会时常改动。反而是是带#和带.记号的选择符需要常调整。放在css样式表文件的前头就不需要老拉动窗口的竖向滚动条了。
8.最后飞龙提醒，书写css样式表时，最好把首页css样式表单独分开，因为首页样式和布局、一般老板可能迟迟不能确定，修改次数多。而其它页面相对稳定。
三、css样式中关于字号的规范
为保证不同浏览器上字号一致，飞龙认为网页最佳字号单位用像素px或点数pt，优先用px。国外的css样式喜欢用em，飞龙认为不适合中国国情。
最合适的字体和字号大小分别是：
px一般使用中文宋体12px或14.7px
pt一般使用中文宋体的9pt和11pt
黑体字或宋体字需要加粗时，一般选用11pt和14.7px再加粗比较合适。
飞龙提示：以上尺寸使用不是绝对的，仅供你参考。
四、重新定义body标签背景色,保证浏览器兼容性
body{background-color:#fff;}
五、根据调整css时候出现的那个对话框，css声明包括8个类别：
1、类型：其实就是字体
2、背景：背景图片或颜色
3、区块：没有宽高尺寸的方块内容，包括文本对齐缩进等。
4、方框：宽高、浮动，边距边界，这里是css样式调节的重点，主要用在网页布局。
5、边框：边框颜色粗细等
6、列表：列表项的样式设置
7、定位：某布局对象的绝对定位等，用的较少。
8、扩展：光标、滤镜等，用的更少。
飞龙提示，不是每个css声明都需设置，看看别人写的css，就明白一般前6种声明比较常见。声明在{}里面的排列顺序可以不按照此8类顺序。
五、各种浏览器的默认解析不同导致的css不兼容,需要先行初始化。
body,div,dl,dt,dd,ol,h1,h2,h3,h4,h5,h6,form,input,p,th,td{margin:0;padding:0;}
img{border:0px;}
ul {margin:0px;padding:0px;}/
ul li {list-style:none;}
更新网址：https://feilong.org/standard-css-abc
最初发布：20090815 10:53:00 feilong.org 于广州
加入收藏夹，查看更方便。
所在分类： 网站开发