CSS制作规范

01. 一般常用CSS样式的范本：

* { background:#fff; margin:0; padding:0; font-family: Arial, Helvetica, sans-serif; color: #000; }
ul, ol, menu, dl { list-style:none; }
p {text-indent:2em;}
a:link { color:#333; text-decoration:none; } /* 访问前 */
a:visited { color:#333; text-decoration:none; } /* 访问后 */
a:hover { color:#C60; text-decoration:underline; } /* 鼠标悬停 */
a:active { color:# C60; text-decoration:underline; } /* 鼠标点击 */

02. 常用CSS缩写形式：
字体缩写：
font : font-style || font-variant || font-weight || font-size || line-height || font-family
font:normal normal normal 12px/18px 宋体;

背景缩写：
Background : background-color || background-image || background-repeat || background-attachment || background-position
background:red url(images/bg.gif) repeat-y top right;

列表缩写：
list-style : list-style-image || list-style-position || list-style-type
list-style:url(images/icon.gif) 0 0;

边框缩写：
border : border-width || border-style || border-color
border:1px solid black;
Box模形缩写：
(上)(右)(下)(左) | (上)(左右)(下) | (上下)(左右) 这几种表现方式。

color缩写：
如果使用216安全色，就可以使用 #FFF, #F06这样的表达形式了。

03. 常用布局形式：

为了兼容IE6、Firefox，在布局的时候请使用以下格式：
居中：margin:0 auto;
居右：margin:0 0 0 auto;
居左：margin:0 auto 0;
左浮动：float:left; clear:left;
右浮动：float:right; clear:right;

04. CSS语意性设置：

<h1>可以设置为与网页的 title 一样，不过可以通过 display:none; 隐藏，这样做可以方便搜索引擎的提取；
<h2>可以设置文章的标题；
<h3>可以用于分栏目的标题；
<p>可以放置文章的内容；
<label>可以与表单框对应使用；
<menu>可以用来做一层的菜单；
<dl>可以用来做二层的菜单；

05. CSS常用命名规则：

命名 含义

header 头部
container 内容部分
footer 尾部
nav 导航
menu 菜单
crumb 当前位置
left 左侧部分
center 中间部分
right 右侧部分
login 登录
regsiter 注册
search 搜索

06. CSS设置的注意事项：

Hack的问题：您永远也不知道下一次浏览器升级，它是否还不支持或支持原来的hack代码，所以为了考虑兼容的问题，请不要使用hack来设置CSS。
!important的问题：同上，现ie7已经支持!important了。
应当十分注意兼容性，应当在ie6、ie7、firefox、opera浏览器上测验通过。(需要解决ie7与ie6共存的问题)
可以多使用ＣＳＳ的子对象的继承关系，但希望继承关系不超出三层。

07. CSS设置小技巧：

在使用border来设置box的时候，在ie中会出现外边框消失的问题，所以请在xhtml中设置box的高度，这样就可以解决这个问题。另外box设置高度也可以解决原来需要通过数据来撑开box的问题。
在使用padding来设置box的时候，其实际宽度 = width + padding[左右]。
在图片的菜单中，可以放入文字的内容，并通过text-indent:-999 隐藏，这样可以让不使用CSS的浏览器也可以使用菜单的内容，同时也方便了搜索引擎的提取。
可以在使用span标签来实现一些排版的辅助，如：
<ul>
<li>商务新版上线测试<span>2007.03.09</span></li>
<li>商务新版上线测试<span>2007.03.09</span></li>
</ul>
然后在CSS定义span为右浮动，来实现日期与标题的分栏显示效果。

原文：CSS制作规范|web启点