1
）、所有的命名最好都小写
2
）、属性的值一定要用双引号
("")
括起来，且一定要有值如
class="divcss5",id="divcss5"
3
）、每个标签都要有开始和结束，且要有正确的层次，排版有规律工整
4
）、空元素要有结束的
tag
或于开始的
tag
后加上
"/"
5
）、表现与结构完全分离，代码中不涉及任何的表现元素，如
style
、
font
、
bgColor
、
border
等
6
）、
<h1>
到
<h5>
的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。
7
）、给每一个表格和表单加上一个唯一的、结构标记
id
8
）、给图片加上
alt
标签
9
）、尽量使用英文命名原则
10
）、尽量不缩写，除非一看就明白的单词
外套
wrap ------------------
用于最外层
头部
header ----------------
用于头部
主要内容
main ------------
用于主体内容（中部）
左侧
main-left -------------
左侧布局
右侧
main-right -----------
右侧布局
导航条
nav -----------------
网页菜单导航条
内容
content ---------------
用于网页中部主体
底部
footer -----------------
用于底部
|
CSS
样式命名
|
说明
|
|
网页公共命名
| |
|
#wrapper
|
页面外围控制整体布局宽度
|
|
#container
或
#content
|
容器
,
用于最外层
|
|
#layout
|
布局
|
|
#head, #header
|
页头部分
|
|
#foot, #footer
|
页脚部分
|
|
#nav
|
主导航
|
|
#subnav
|
二级导航
|
|
#menu
|
菜单
|
|
#submenu
|
子菜单
|
|
#sideBar
|
侧栏
|
|
#sidebar_a, #sidebar_b
|
左边栏或右边栏
|
|
#main
|
页面主体
|
|
#tag
|
标签
|
|
#msg #message
|
提示信息
|
|
#tips
|
小技巧
|
|
#vote
|
投票
|
|
#friendlink
|
友情连接
|
|
#title
|
标题
|
|
#summary
|
摘要
|
|
#loginbar
|
登录条
|
|
#searchInput
|
搜索输入框
|
|
#hot
|
热门热点
|
|
#search
|
搜索
|
|
#search_output
|
搜索输出和搜索结果相似
|
|
#searchBar
|
搜索条
|
|
#search_results
|
搜索结果
|
|
#copyright
|
版权信息
|
|
#branding
|
商标
|
|
#logo
|
网站
LOGO
标志
|
|
#siteinfo
|
网站信息
|
|
#siteinfoLegal
|
法律声明
|
|
#siteinfoCredits
|
信誉
|
|
#joinus
|
加入我们
|
|
#partner
|
合作伙伴
|
|
#service
|
服务
|
|
#regsiter
|
注册
|
|
arr/arrow
|
箭头
|
|
#guild
|
指南
|
|
#sitemap
|
网站地图
|
|
#list
|
列表
|
|
#homepage
|
首页
|
|
#subpage
|
二级页面子页面
|
|
#tool, #toolbar
|
工具条
|
|
#drop
|
下拉
|
|
#dorpmenu
|
下拉菜单
|
|
#status
|
状态
|
|
#scroll
|
滚动
|
|
.tab
|
标签页
|
|
.left .right .center
|
居左、中、右
|
|
.news
|
新闻
|
|
.download
|
下载
|
|
.banner
|
广告条
(
顶部广告条
)
|
|
电子贸易相关
| |
|
.products
|
产品
|
|
.products_prices
|
产品价格
|
|
.products_description
|
产品描述
|
|
.products_review
|
产品评论
|
|
.editor_review
|
编辑评论
|
|
.news_release
|
最新产品
|
|
.publisher
|
生产商
|
|
.screenshot
|
缩略图
|
|
.faqs
|
常见问题
|
|
.keyword
|
关键词
|
|
.blog
|
博客
|
|
.forum
|
论坛
|
|
CSS
文件命名
|
说明
|
|
master.css,style.css
|
主要的
|
|
module.css
|
模块
|
|
base.css
|
基本共用
|
|
layout.css
|
布局，版面
|
|
themes.css
|
主题
|
|
columns.css
|
专栏
|
|
font.css
|
文字、字体
|
|
forms.css
|
表单
|
|
mend.css
|
补丁
|
|
print.css
|
打印
|
CSS
命名其它说明
:
DIV+CSS
命名小结
：无论是使用
“.”
（小写句号）选择符号开头命名，还是使用
“#”(
井号
)
选择符号开头命名都无所谓，但我们最好遵循，
主要的
、
重要的
、
特殊的
、
最外层的
盒子用
“#”(
井号
)
选择符号开头命名，其它都用
“.”
（小写句号）选择符号开头命名，同时考虑命名的
CSS选择器
在
HTML
中重复使用调用。
通常我们最常用主要命名有：
wrap
（外套、最外层）、
header
（页眉、头部）、
nav(
导航条
)
、
menu(
菜单
)
、
title(
栏目标题、一般配合
h1\h2\h3\h4
标签使用
)
、
content (
内容区
)
、
footer(
页脚、底部
)
、
logo
（标志、可以配合
h1
标签使用）、
banner
（广告条，一般在顶部）、
copyRight
（版权）。其它可根据自己需要选择性使用。
DIVCSS5
建议：
主要的、重要的、最外层的盒子用
“#”(
井号
)
选择符号开头命名，其它都用
“.”
（小写句号）选择符号开头命名。
主要的
master.css
布局，版面
layout.css
专栏
columns.css
文字
font.css
打印样式
print.css
主题
themes.css
如果遇到不常用的，可以借助翻译工具进行翻译取其英文命名。
推荐使用谷歌在线翻译工具：
http://translate.google.cn/
五 DIV命名
站点：site
首页：homepage
导航：nav
布局：layout
搜索：search
网页头部：head/header
二级页面/
子页面：subpage subContent
登录条：loginbar toolbar
侧栏：side/sidebar
广告：banner
子导航：subnav
当前位置导航面包屑导航：crumb
菜单：menu
子菜单：submenu
滚动：scroll
下拉：drop
表单：form
箭头：arr/arrow
下拉菜单：dropmenu
主题/
外观：theme
页面主体：main
内容：content
标签页：tab
列表：list
工具条：tool/toolbar
转角/
圆角：cor/corner
提示信息：msg
小技巧：tips
标题：title
特别的：speciscal
资源：source
加入：join-department
指南：guild
服务：service
热点：hot news_hot
新闻：news
下载：download
注册：regsiter
状态：status
按钮：btn
投票：vote
关于我们：aboutus
网站地图：sitemap
合作伙伴：partner
友情链接：friendlink
网页底部：foot/footer
版权：copyright
提交:submit
搜索框：searchbox
文本框:textbox
统计:count
以上结构就可以组合使用，例如：左列标题lefttitle
；底部导航footernav
规范不是说要所有人照一个样子来命名css
，我们可以根据自己的需要定制命名规则，只要记住命名的规则，就可以根据网站本身的特点来创造具有自己风格的命名方式。
一、目前网页设计者用得较多的是基于软件开中变量的命名方式的命名方法。如对于一组用于定义字体样式的class
，我们可以使用f
即foot
的头字母为前缀进行命名，如：
f-blue:
表示蓝色字体样式
f-blod:
表示粗体字体样式
对于网页中如新闻频道的一些新闻的现实样式，可以用n
作为前缀进行样式设计，如：
n-title:
新闻标题
n-list:
新闻列表
二、我们还可以将代表各个部分的名字组合起来使用，如 ，对于上面的例子，我们可以这样命名：
fontBlue:
表示蓝色字体样式
newsTitle:
表示新闻列表
这样的命名方式同样清晰明了，为大多网页设计师所接受，只不过要特别注意大小写的区分，css
中是区别大小写的．开始时容易出错，多加注意便可．
按照这样的一些命名方式，我们可以非常明确的知道css
中的每一个class
的用途，便于使用和设计、维护。
想一想，你要想出很多名字来命名css
也很麻烦的，是吧？
————————-
另外一个规范——————-
1.CSS ID
的命名
外 套： wrap/container
主导航： main_nav
子导航： subnav
页 脚： footet
整个页面： content
页 眉： header
页 脚： footer
商 标： label
标 题： title
主导航： mainbav
（globalnav
）
顶导航： topnav
边导航： sidebar
左导航： leftsidebar
右导航： rightsidebar
旗 志： logo
标 语： banner
菜单内容1
： menu1 content
菜单容量： menu container
子菜单： submenu
边导航图标：sidebarIcon
注释： note
面包屑： breadcrumb(
即页面所处位置导航提示）
容器： container
内容： content
搜索： search
登陆： Login
功能区： shop(
如购物车，收银台)
当前的 current
2.
另外在编辑样式表时可用的注释可这样写：
<– Footer –>
内容区
<– End Footer –>
3.
样式文件命名
主要的 master.css
布局，版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css
1594
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
