收集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网站上给出的,最好是用意义命名
posted @ 2008-04-25 12:46  任力  阅读(3435)  评论(11编辑  收藏  举报