收集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网站上给出的,最好是用意义命名
Tag标签: css,web标准

posted on 2008-04-25 12:46 任力 阅读(416) 评论(11)  编辑 收藏 所属分类: D、Web Standard

评论

#1楼  2008-04-26 22:07 棕熊      

样式命名的话,当中最好用横线(-)连接而不是用下划线(_)连接哦   回复  引用  查看    

#2楼 [楼主] 2008-04-27 09:52 任力      

@棕熊gg
web标准方面刚起步,能告诉我这样做的好处吗?
要知道,公司里面用的都是这个标准呀   回复  引用  查看    

#3楼  2008-04-27 16:05 侯垒      

正在学习这个,先支持一下.   回复  引用  查看    

#4楼  2008-04-29 18:33 小胜      

顶顶顶你个肺呀.   回复  引用  查看    

#5楼  2008-04-29 23:10 棕熊      

@任力
这个其实完全是CSS的命名习惯,就像javascript 通常会用驼峰式,XHTML都是全小写一样,约定俗成的拉。其实所有的css属性,伪类等等都是采取这样的命名方式,比如first-child, text-indent
另外好处是有的,可惜目前体现不出来,就是用 - 连接可以完全兼容 |= 选择器   回复  引用  查看    

#6楼  2008-05-02 11:44 王奇      

一直想了解Css命名方面的知识,楼主的这篇Css规范很好,我学习收藏了,顶顶顶!   回复  引用  查看    

#7楼  2008-05-04 10:37 杨正祎(阿一)      

css文件,我觉得没有必要分那么清楚。   回复  引用  查看    

#8楼 [楼主] 2008-05-04 10:59 任力      

@杨正祎(阿一)
其实我们平时写的时候除了一些替代样式,基本上也都写到一个文件中,呵呵。。
但以后会不会为了更方便的管理与重用,会不会这样呢?   回复  引用  查看    

#9楼  2008-05-14 10:52 JackLee      

,我顶,我顶!!   回复  引用  查看    

#10楼  2008-05-16 08:51 求知无傲      

收藏,多谢。   回复  引用  查看    

#11楼  2008-07-06 20:57 王涛 [未注册用户]

真的得来全不费功夫呀,现在也正在学习。也喜欢楼主能交流更多关于WEB方面的知识   回复  引用    


标题  
姓名  
主页
Email (博主才能看到) 
验证码 *  看不清,换一张 [登录][注册]
内容(请不要发表任何与政治相关的内容)  
  博客园首页

  新闻频道

  社区

  小组

  博问

  网摘

  闪存

  登录  使用高级评论  新用户注册  返回页首  恢复上次提交      
该文被作者在 2008-05-02 21:32 编辑过
成果网帮您增加网站收入


相关链接:
 


导航

公告

IT新闻:

WCF揭秘

——微软WCF研发团队智慧结晶

ASP.NET AJAX实战

——ASP.NET之父强烈推荐

精通CSS与HTML设计模式

——CSS与HTML设计模式巅峰之作

所有目前网站必须面临改站危机,牢牢的再被剥一层皮,完完全全的再简化一层掉,考验工程师、设计师。要把一个东西复杂很容易,要简化反而难。 9-8 09:26
<2008年7月>
293012345
6789101112
13141516171819
20212223242526
272829303112
3456789

统计

与我联系

搜索

 

常用链接

我参与的团队

随笔分类(23)

新闻分类(148)

相册

收藏夹(12)

DataBase

Friend

Web标准

外语偶像

最新随笔

最新评论

阅读排行榜

评论排行榜