飞龙博客

妙法莲华经

CSS样式表书写基本规范飞龙的看法

feilong.org 修订于2009-08-15 10:53:00

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 于广州

加入收藏夹,查看更方便。

所在分类: 网站开发

新作:

旧文: