收集CSS规范 [转]
XHTML-CSS写作建议
· 所有的xhtml代码小写
· 属性的值一定要用双引号("")括起来,且一定要有值
· 每个标签都要有开始和结束,且要有正确的层次
· 空元素要有结束的tag或于开始的tag后加上"/"
· 表现与结构完全分离,代码中不涉及任何的表现元素,如style、font、bgColor、border等
· <h1>到<h5>的定义,应遵循从大到小的原则,体现文档的结构,并有利于搜索引擎的查询。
· 给每一个表格和表单加上一个唯一的、结构标记id
· 给重要的区块加上注释,如:
· 给图片加上alt标签
· 所有的标签必须进行合理的嵌套
· 根元素前必须有元素,宣告使用那一种DTD
XHTML1 Transitional: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
· 根元素必须有xmlns属性来指定使用http://www.w3.org/1999/xhtml的namespace
CSS样式表规范:(我们这里的规范,如有不妥,指正一下哦)
· id和class命名采用该版块的英文单词或组合命名,每个单词都是小写,用下划线连接起来,如:content_main(主要内容区域)
· CSS样式表各区块用注释说明
· 使用英文命名原则
· 尽量不缩写,除非一看就明白的单词
CSS命名规范:(我们这里的规范,如有不妥,指正一下哦)
DIV |
CSS名称 |
说明 |
网站公用相关 |
||
Container div |
#wrapper |
容器 |
Header or banner div |
#header |
页头部分 |
Main or global navigation div |
#main_nav |
主导航 |
Menu |
#menu |
菜单 |
Sub Menu |
#sub_menu |
子菜单 |
Left or right side columns |
#sidebar |
左边栏或右边栏 |
Main div |
#main |
页面主体 |
Content div |
#content |
内容部分 |
The main content area |
#content_main |
主要内容区域 |
Block div | #block |
一块区域 |
Footer div |
#footer |
页脚部分 |
Tag |
#tag |
标签 |
Message |
#msg #message |
提示信息 |
Tips |
#tips |
小技巧 |
Vote |
#vote |
投票 |
Friend Link |
#friendlink |
友情连接 |
Title |
#title |
标题 |
Summary |
#summary |
摘要 |
Sub-navigation list |
#sub_nav |
二级导航 |
Search input |
#search_input |
搜索输入框 |
Search output |
#search_output |
搜索输出和搜索结果相似 |
Search |
#search |
搜索 |
Search results |
#search_results |
搜索结果 |
Copyright information |
#copyright |
版权信息 |
brand |
#branding |
商标 |
branding-logo |
#logo |
LOGO |
Site information |
#siteinfo |
网站信息 |
Copyright information etc. |
#siteinfo_legal |
法律声明 |
Designer or other credits |
#siteinfo_credits |
信誉 |
Join us |
#joinus |
加入我们 |
Partnership opportunities |
#partner |
合作伙伴 |
Services |
#service |
服务 |
Regsiter |
#regsiter |
注册 |
Status |
#status |
状态 |
电子贸易相关 |
||
Products |
.products |
产品 |
Products prices |
.products_prices |
产品价格 |
Products description |
.products_description |
产品描述 |
Products review |
.products_review |
产品评论 |
Editor's review |
.editor_review |
编辑评论 |
New release |
.news_release |
最新产品 |
Publisher |
.publisher |
生产商 |
Screen shot |
.screenshot |
缩略图 |
FAQ |
.faqs |
常见问题 |
Keyword |
.keyword |
关键词 |
Blog |
.blog |
博客 |
Forum |
.forum |
论坛 |
样式文件命名:
主要的 master.css
布局,版面 layout.css
专栏 columns.css
文字 font.css
打印样式 print.css
主题 themes.css
提交 submit.css
文本框 textbox.css
统计 count.css
样式文件布局:
div:主要用于布局,分割页面的结构
ul/ol:用于无序/有序列表
span:没有特殊的意义,可以用作排版的辅助,然后在css中定义span
h1-h6:标题
h1-h6: 根据重要性依次递减
h1:最重要的标题
label:为了使你的表单更有亲和力而且还能辅助表单排版的好东西
fieldset & legend:fildset套在表单外,legend用于描述表单内容。
dl,dt,dd:当页面中出现第一行为类似标题/简述,然后下面为详细描述的内容时应该使用该标签
样式自定义命名:
根据w3c网站上给出的,最好是用意义命名