一．文件命名规范
[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
版权：copyright
外 套： wrap
主导航： mainnav
子导航： subnav
页 脚： footer
整个页面： content
页 眉： header
页 脚： footer
商 标： label
标 题： title
主导航： mainbav（globalnav）
顶导航： topnav
边导航： sidebar
左导航： leftsidebar
右导航： rightsidebar
旗 志： logo
标 语： banner
菜单内容1： menu1content
菜单容量： menucontainer
子菜单： submenu
边导航图标：sidebarIcon
注释： note
面包屑： breadcrumb(即页面所处位置导航提示）
容器： container
内容： content
搜索： search
登陆： Login
功能区： shop(如购物车，收银台)
当前的 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
工程案例 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 Ce.Net.Cn
社区 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. 选择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，你不能使用任何表现层的标识和属性，例如<br>。完整代码如下：
<!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文档都必须声明它们所使用的编码语言；如：
常用的语言定义：
<meta http-equiv=”Content-Type”
content=”text/html; charset=utf-8″ />
标准的XML文档语言定义：
<?xml version=”1.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、辅助图片用背影图处理：
这里的”辅助图片”是指那些不是作为页面要表达的内容的一部分，而仅仅用于修饰、间隔、提醒的图片。将其做背影图处理，可以在不改动页面的情况下通过CSS样式来进行改动，如：
#logo {background:url(images/logo.jpg) #FEFEFE
no-repeat right bottom;}
7、结构与样式分离：
在页面里只写入文档的结构，而将样式写于css文件中，通过外部调用CSS样式表来实现结构与样式的分离。
8、文档的结构化书写：
页面CSS文档都应采用结构化的书写方式，逻辑清晰易于阅读。如：
<div id=”mainMenu”>
<ul>
<li><a href=”#”
>首页</a></li>
<li><a href=”#”
>介绍</a></li>
<li><a href=”#”
>服务</a></li>
</ul>
</div>
#mainMenu {
width:100%;
height:30px;
background:url(images/mainMenu_bg.jpg)
repeat-x;
}
#mainMenu ul li {
float:left;
line-height:30px;
margin-right:1px;
cursor:pointer;
}
9、鼠标手势：
在XHTML标准中，hand只被IE识别，当需要将鼠标手势转换为“手形”时，则将“hand”换为“pointer”，即“cursor:pointer;”
转自 http://hi.baidu.com/celian521/blog/item/e492591037e158f6c2ce7973.html
分享到：
相关推荐
首先，我们了解CSS命名规范的基本原则： 1. **有意义的命名**：选择能够明确描述元素功能或状态的名称，如`btn-primary`代表主要按钮，`user-info`表示用户信息区域。 2. **避免使用ID选择器**：在CSS中，ID选择器...
本文将深入解析“常用的CSS命名规则”这一主题，旨在帮助开发者理解并掌握一系列实用的CSS命名规范。 ### 命名规则的重要性 在CSS开发过程中，合理的命名规则可以显著提高代码的可读性和可维护性，减少后期修改和...
以下是一些关于CSS命名规范的关键点，这些都是基于个人经验的总结： 1. **大小写规则**：推荐使用小写字母来编写CSS选择器，这符合CSS标准且易于阅读。例如，`#header`、`.mainContent`。 2. **ID和类名**：ID通常...
CSS 命名规范是指在编写 CSS 代码时，遵守一定的命名规则，以便于代码的阅读、维护和重用。下面是一些常用的 CSS 命名规范： * 文件命名规范：global.css、layout.css、font.css、link.css、print.css 等 * 常用类/...
### CSS命名规则详解 #### 一、引言 在Web开发过程中，良好的CSS命名规则不仅有助于提高代码可读性与可维护性，还能避免不同浏览器之间的兼容性问题。本文将根据给定的内容深入探讨CSS选择器命名规则及其在实际...
CSS 命名规范（英文命名） CSS 命名规范是指在 CSS 文件中统一命名的规范，以便提高代码的可读性和维护性。以下是 CSS 命名规范的详细说明： 文件命名规范 在 CSS 中，文件命名是非常重要的。以下是一些常见的...
### 常用的CSS命名规则详解 在前端开发中，合理的CSS命名规则不仅能够提升代码的可读性和可维护性，还能够提高团队协作效率。以下是对标题、描述及部分给定内容中所涉及的CSS命名规则的详细解读。 #### 1. 基础...
- **定义**：除了上述提到的命名规则外，开发团队还可以根据项目需求自定义一套适合自己的命名规范。 - **示例**：例如，可以采用简短的前缀+功能描述的方式进行命名，如`.btn-primary`表示“主按钮”。 #### 四、...
本文将根据给定文件“css命名规则.txt”的内容进行深入解读，为网页设计师提供一套高质量CSS代码的标签规范。 #### 二、基本元素命名 1. **Header**: 用于页面顶部区域的标记。 - 示例：`<div class="header">` ...
遵循这些CSS命名规范和书写规则，不仅可以提高代码的可读性和可维护性，还能减少潜在的兼容性问题，提升网站的性能。同时，良好的命名习惯也有助于团队协作，让其他开发者更容易理解并参与到项目中。
以下是对CSS命名规范的一些详细解释和示例： 1. **小写字母和中横线分隔**： - 所有CSS类名应该使用小写字母，避免使用驼峰式或全大写字母。如`.logo`、`.nav`等。 - 当需要扩展类名时，使用中横线`-`作为分隔符...
在前端开发中，CSS命名规范是提升代码可读性、可维护性和团队协作效率的关键因素。以下是关于前端CSS命名规范的详细说明： 首先，我们理解为何需要制定CSS命名规范。在多人协作的项目中，统一的命名规范可以降低...
**一、CSS命名规范** 1. **有意义的命名**：避免使用无意义的ID或类名，如“div1”，“box”等。应采用描述性的名称，如“header”、“content”、“footer”等，这能帮助搜索引擎理解页面结构。 2. **简洁性**：...
【CSS命名规范】 在Web前端开发中，CSS命名规范对于团队协作、代码可读性和维护性至关重要。以下是一些核心的CSS命名规则： 1. **语义化命名**：CSS选择器应该反映其对应的HTML元素的功能或内容。例如，用`header`...
为了提高代码的可读性和团队协作效率，遵循一定的CSS命名规范至关重要。以下是一些常见的Div+CSS命名规则和实例： 1. **容器与模块**： - `container` 或 `box`：用于表示页面的主要或局部容器，通常包裹其他元素...