史上最全！css 命名规范（英文命名）一．文件命名规范[b] 样式文件命名[/b] [quote] 主要的master.css 布局，版面layout.css 专栏columns.css 文字font.css 打印样式print.css 主题themes.css [/quote][b]CSS ID 的命名[/b][quote] 页头：header登录条：loginbar标志logo侧栏sidebar广告banner导航nav子导航：subnav菜单menu子菜单：submenu搜索search滚动scroll页面主体：main内容content标签页：tab文章列表：list提示信息：msg小技巧：tips栏目标题：title加入joinus指南guild服务service热点八、、hot新闻news下载download注册regsiter状态status按钮btn投票vote合作伙伴：partner 友情链接：friendlink 页脚footer版权copyrightwrap mainnav subnav footer content header footerlabel title mainbav ( globalnav ) topnav sidebarleftsidebar rightsidebar logo banner menu1contentmenucontainer submenu sidebarIcon注释： note面包屑： breadcrumb （ 即页面所处位置导航提示） 容器： 内容： 搜索： 登陆： 功能区： containercontentsearch Loginshop( 如购物车，收银台 ) 当前的 current[/quote][b] 网站常用中英文对照表 [/b] [quote] 网站导航 Site Map公司简介 Profile or Company Profile or Company 公司设备 Equipment Equipment 公司荣誉 Glories Glories 企业文化 Culture Culture 产品展示 Product Product 资质认证 Quality Certification 企业规模 Scale Scale 营销网络 Sales Network组织机构 organization organization 合作加盟 Join In Cooperation 技术力量 Technology Technology 经理致辞 Manager's oration 发展历程 Development History外 套： 主导航： 子导航：页 脚： 整个页面： 页 眉： 页 脚： 商 标： 标 题： 主导航： 顶导航： 边导航： 左导航： 右导航： 旗 志： 标 语： 菜单内容 1： 菜单容量： 子菜单： 边导航图标：工程案例Engineering Projects 业务范围Business Scope 分支机构Branches 供求信息Supply & Demand 经营理念Operation Principle 产品销售Sales Sales 联系我们Contact Us Contact Us 信息发布Information Information 返回首页Homepage Homepage 产品定购order order 分类浏览Browse By Category 电子商务E-business 公司实力Strength Strength 版权所有Copy Right 友情连结Hot Link 应用领域Application Fields 人力资源Human Resource Hr 领导致辞Leader's oration 企业资质Enterprise Qualification 行业新闻Trade News 行业动态Trends 客户留言Customer Message 客户服务Customer Service 新闻动态News & Trends 公司名称Company Name 销售热线Sales Hot-Line 联系人Contact Person 您的要求Your Requirements 建设中In Construction 证书Certificate Certificate 地址ADD Add 邮编Postal Code Zipcode 电话TEL Tel 传真FAX Fax 产品名称Product Name 产品说明Description Description 价格Price 品牌Brand 规格Specification 尺寸Size生产厂家Manufacuturer Manufacturer 型号Model产品标号Item No. 技术指标Technique Data产品描述Description产地Production Place销售信息Sales Information用途Application论坛Forum在线订购On-line order招商Enterprise-establishing招标Bid Inviting综述General业绩Achievements招聘Join Us求贤纳士Join Us大事Great Event动态Trends服务Service投资Investment行业Industry规划Programming环境Environment发送Delivery提交Submit重写Reset登录Enter注册Login中国企业网技术支持Powered By 社区Community业务介绍Business Introduction在线调查Online Inquiry Inquiry下载中心Download会员登陆Member Entrance意见反馈Feedback常见问题FAQ中心概况General Profile教育培训Education & Training 游乐园Amusement Park 在线交流Online Communication 专题报道Special Report[/quote]常用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。
对于二级类/ID 命名，则采用组合书写的模式，后一个单词的首字母应大写：诸如“搜索框则应命名为“searchInput ”、“搜索图标”命名这“searchIcon ”、“搜索按钮”命名为SearchBtn ” .......一. 常规书写规范及方法1. 选择DOCTYP：EXHTML 1.0提供了三种DTD声明可供选择：过渡的(Transitional): 要求非常宽松的DTD它允许你继续使用HTML4.01的标识(但是要符合xhtml 的写法) 。
完整代码如下：<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN ”“/TR/xhtml1/DTD/xhtml1-transitional.dtd “>严格的(Strict): 要求严格的DTD你不能使用任何表现层的标识和属性，例如<br>。
完整代码如下：<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN ”“/TR/xhtml1/DTD/xhtml1-strict.dtd “>框架的(Frameset):专门针对框架页面设计使用的DTD如果你的页面中包含有框架，需要采用这种DTD完整代码如下：<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN ”“/TR/xhtml1/DTD/xhtml1-frameset.dtd “>理想情况当然是严格的DTD但对于我们大多数刚接触web标准的设计师来说，过渡的DTD(XHTML 1.0 Transitional) 是目前理想选择(包括本站，使用的也是过渡型DTD)。
因为这种DTD还允许我们使用表现层的标识、元素和属性，也比较容易通过W3C的代码校验。
2. 指定语言及字符集：为文档指定语言：<html xmlns= ”/1999/xhtml lang= ”en ”>为了被浏览器正确解释和通过W3C代码校验，所有的XHTML文档都必须声明它们所使用的编码语言；如：常用的语言定义：<meta http-equiv= ”Content-Type ”content= ”text/html; charset=utf-8 ff />标准的XML文档语言定义:<?xml version= ”.0 " encoding= " utf-8 "?> 针对老版本的浏览器的语言定义：<meta http-equiv= "Content-Language ” content= ” utf-8 " />为提高字符集，建议采用“utf-8 ”。
3. 调用样式表：外部样式表调用：页面内嵌法：就是将样式表直接写在页面代码的head 区。
如：<style type= "text/css ”<! - body { background : white ; color : black ; } -> </style> 外部调用法：将样式表写在一个独立的.css 文件中，然后在页面head 区用类似以下代码调用。
<link rel= ”stylesheet ”rev= ”stylesheet ”href= ”css/style.css ”type= ”text/css ”media= ”all ”/>在符合web 标准的设计中，推荐使用外部调用法，可以不修改页面只修改.css 文件而改变页面的样式。
如果所有页面都调用同一个样式表文件，那么改一个样式表文件，可以改变所有文件的样式。
4、选用恰当的元素：根据文档的结构来选择HTML元素，而不是根据HTML元素的样式来选择。
例如，使用P 元素来包含文字段落，而不是为了换行。
如果在创建文档时找不到适当的元素，则可以考虑使用通用的div 或者是span；避免过渡使用div和span。
少量、适当的使用div和span元素可以使文档的结构更加清晰合理并且易于使用样式；尽可能少地使用标签和结构嵌套，这样不但可以使文档结构清晰，同时也可以保持文件的小巧，在提高用户下载速度的同时，也易于浏览器对文档的解释及呈视；5、派生选择器：可以使用派生选择器给一个元素里的子元素定义样式，在简化命名的同时也使结构更加的清晰化，如：.mainMenu ul li {background:url(images/bg.gif;)}6、辅助图片用背影图处理：这里的”辅助图片”是指那些不是作为页面要表达的内容的一部分，而仅仅用于修饰、间隔、提醒的图片。