CSS命名规范
一、文件命名规范
全局样式：global.css
框架布局：layout.css
字体样式：font.css
链接样式：link.css
打印样式：print.css 二、常用类/ID命名规范 页 眉：header
内 容：content
容 器：container
页 脚：footer
版 权：copyright
导 航：menu
主导航：mainMenu
子导航：subMenu
标 志：logo
标 语：banner
标 题：title
侧边栏：sidebar
图 标：Icon
注 释：note
搜 索：search
按 钮：btn
登 录：login
链 接：link
信息框：manage
…… 常用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。对于二级类/ID命名，则采用组合书写的模式，后一个单词的首字母应大写：诸如“搜索框”则应命名为“searchInput”、“搜索图标”命名这“searchIcon”、“搜索按钮”命名为“searchBtn”…… CSS书写规范及方法 一、常规书写规范及方法 1、选择DOCTYPE： XHTML 1.0 提供了三种DTD声明可供选择： 过渡的(Transitional)：要求非常宽松的DTD，它允许你继续使用HTML4.01的标识（但是要符合xhtml的写法
）。完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
严格的(Strict)：要求严格的DTD，你不能使用任何表现层的标识和属性。完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
框架的(Frameset)：专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。完整代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
理想情况当然是严格的DTD，但对于我们大多数刚接触web标准的设计师来说，过渡的DTD(XHTML 1.0 Transitional)是目前理想选择（包括本站，使用的也是过渡型DTD）。因为这种DTD还允许我们使用表现层的标识、元素和属性，也比较容易通过W3C的代码校验。 2、指定语言及字符集： 为文档指定语言：
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
为了被浏览器正确解释和通过W3C代码校验，所有的XHTML文档都必须声明它们所使用的编码语言；常用的语言定义：
标准的XML文档语言定义：
<?xml version="1.0″ encoding="utf-8″?>
针对老版本的浏览器的语言定义：
<meta http-equiv="Content-Language" content="utf-8″ />
为提高字符集，建议采用“utf-8”。 标准的XML文档语言定义：
针对老版本的浏览器的语言定义：
为提高字符集，建议采用“utf-8”。 3、调用样式表： 外部样式表调用： 页面内嵌法：就是将样式表直接写在页面代码的head区。 如：
<style type="text/css"><!– body {background:white;color:black;} –></style>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
1、IE6、IE7、Firefox之间的兼容写法： 写法一： IE都能识别*，标准浏览器(如FF)不能识别*；
IE6能识别*，但不能识别 !important；
IE7能识别*，也能识别!important；
FF不能识别*，但能识别!important；
根据上述表达，同一类/ID下的CSS hack可写为：
.searchInput {
background-color:#333;
*background-color:#666 !important;
*background-color:#999;
}
一般三者的书写顺序为：FF、IE7、IE6。 写法二： IE6可识别“_”，而IE7及FF皆不能识别，所以当只针对IE6与IE7及FF之间的区别时，可这样书写：
.searchInput {
background-color:#333;
_background-color:#666;
}
写法三：
*+html 与 *html 是IE特有的标签, Firefox暂不支持。
.searchInput {background-color:#333;}
*html .searchInput {background-color:#666;}
*+html .searchInput {background-color:#555;}
屏蔽IE浏览器： select是选择符，根据情况更换，第二句是MAC上safari浏览器独有的。
[/code]*:lang(zh) select {font:12px !important;}
select:empty {font:12px !important;} [/code] IE6可识别： 这里主要是通过CSS注释分开一个属性与值，注释在冒号前。
select { display :none;}
IE的if条件hack写法： 所有的IE可识别：Only IE
