CSS规范：

CSS 规范：
(一)xhtml 的规范：
1、所有的 xhtml 代码英文小写
2、属性的值一定要用双引号("")括起来，且一定要有值
3、每个标签都要有开始和结束，且要有正确的层次
4、表现与结构完全分离，代码中尽量不涉及任何的表现元素，如
style、font、bgColor、border 等
5、<h1>到<h5>的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查
询
6、给重要的区块加上注释
7、图片要加 alt 注释

(二)CSS 的规范：
1、id 和 class 命名采用该版块的英文单词或组合命名，并第一个单词小写，第二个单词首个
字母大写，如:newRelease（最新产品/new+Release) ,或者用下划线链接 new_Release.
2、CSS 样式表各区块用注释说明

注释的写法:
/* Footer */
内容区
/* End Footer */

3、尽量使用英文命名原则，尽量不缩写，除非一看就明白的单词

class 的命名:
(1)颜色:使用颜色的名称或者 16 进制代码,如
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }

(2)字体大小,直接使用"font+字体大小"作为名称,如
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }

(3)对齐样式,使用对齐目标的英文名称,如
.left { float:left; }
.bottom { float:bottom; }

(4)标题栏样式,使用"类别+功能"的方式命名,如
.barnews { }
.barproduct { }

(5)页面结构
容器：#container
布局：#layout
头部：#head、#header

尾部：#foot、#footer
侧栏：#sidebar
左边栏：#sidebarLeft
右边栏：#sidebarRight
页面主体：#main
栏目：#column
包装/外套：#wrapper、wrap
内容：#content

(6)导航
导航：#nav
主导航：#mainNav
顶导航：#topNav
左导航：leftNav
右导航：rightNav
下导航：bottomNav
二级导航：#subNav
菜单：#menu
二级菜单：#subMenu
下拉：.drop
下拉菜单：.dropMenu

(7)功能
标签：.tab、.tag
提示信息：.msg、.message
小技巧：.tips
注释：.note
热点：.hot
摘要：.summary
帮助：.help
投票：.vote
指南：.guild
商标：.branding
标签：.label
工具条：.tool、.toolBar

标题：.title
LOGO：.logo
搜索：.search
搜索条：.searchBar
搜索框：.searchBox
搜索输入框：.search_input
搜索输出框：.search_output
搜索结果：.search_results
注册：.register
登录：.login

登录条：.loginBar
登录框：.loginBox
友情链接：.friendLink、.link
广告/标语：.banner
版权信息：.copyright
加入我们：.joinUs
合作伙伴：.partner
服务：.service
网站地图：.siteMap、.map
缩略图：.screenShot
产品：products
产品价格：products_prices
产品描述：products_description
产品评论：products_review
最新产品：new_products
生产商：suppliers、publisher
编辑：editor
编辑评论：editor_review
博客：blog
论坛：forum
新闻：news
下载：download

网站信息：.siteinfo
法律声明：.legal
信誉：.credits
列表：.list

(8)其他
左中右：left、center、right
上中下：top、middle、bottom
按钮：btn
面包屑：breadcrumb(即页面所处位置导航提示)
滚动：scroll
当前：current
图标：icon
箭头：arrow
首页：homePage、home
二级页面：subPage
状态：status
常见问题：faqs、questions
关键词：keyword

(三)CSS 文件名称

顶部：top.css
底部：bottom.css
共享 share.css
基本共用 base.css
布局，版面 layout.css
主要的 master.css

模块 module.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css

行或排：row1th,row2th,row3th,row4th...
列或纵：col1th,col2th,col3th,col4th...

(四)页面图片等的遵循以下几条规范
页面图片用 gif 和 jpg，在不失真前提下，越小越好。
名称分为头尾两部分，用下划线隔开。头部分表示此图片的大类性质，例如广告、标志、菜
单、按钮等等。
一般来说:
放置在页面顶部的广告、装饰图案等长方形的图片我们取名：banner/icon
标志性的图片我们取名为：logo
在页面上位置不固定并且带有链接的小图片我们取名为 button
在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名：menu
装饰用的照片我们取名：pic
不带链接表示标题的图片我们取名：title
依照此原则类推，尾部分用来表示图片的具体含义。
下面是几个样例，大家应该能够一眼看明白图片的意义：
banner_sohu.gif banner_sina.gif menu_aboutus.gif menu_job.gif title_news.gif
logo_police.gif logo_national.gif pic_people.jpg pic_hill.jpg

(五)SEO 相关
1 允许全文检索的页面，为了使 Internet 上的搜索引擎能够有效检索，在频道的首页的 html
的<head></head>之间应该加入 Keywords 和 Description 元标记，例如：
<meta name=”keywords” content=”东方新干线，汽车，买车”>
<meta name=”description” content=”东方新干劲线，全球中文汽车信息第一站”>.
2.添加搜索引擎引导代码：
<meta name="robots" content="index, follow" />
<meta name="googlebot" content="index, follow" />

附：雅虎优化：13 条技巧提高网页速度
网页打开速度,是网站做 SEO 的一个重要方面,包括搜索引擎本身也会对自己的网页考虑这个问
题:最近，雅虎的 Exceptional Performance 团队在其开发者网络上提出了提高网页打开速度

的 13 条规则，其中包括“减少 http 请求“，避免网页转向"等
具体内容如下：
1.减少 http 请求
2.减少多媒体，图片，声音的使用，传输以文字内容为先
3.用截止时间报头，由于时间是将来，对于缓存来说，可以减少部分 http 请求
4.支持 Gzip
5.把 CSS 放在网页的顶部
6.活动的脚本文件放在底部
7.避免用 CSS Expressions
8.把 JavaScript 和 CSS 单独化，与网页分离
9.减小 DNS 查表时间
10.最小化 JavaScript
11.避免网页的转向
12.删除重复的脚本

CSS规范：

More Related Content

Similar to CSS规范：

More from wensheng wei

CSS规范：