css规范整理
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
CSS规范整理
标签: CSS规范2009-04-18 08:36
(一)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.删除重复的脚本。