码迷,mamicode.com
首页 > Web开发 > 详细

css规范大全

时间:2015-04-07 13:44:50      阅读:213      评论:0      收藏:0      [点我收藏+]

标签:

一、文件规范 

1、文件均归档至约定的目录中

所有的CSS分为两大类:通用类和业务类。通用的CSS文件,放在如下目录中:

  • 基本样式库 /css/core
  • 通用UI元素样式库 /css/lib
  • JS组件相关样式库 /css/ul
    业务类的CSS是指和具体产品相关的文件,放在如下目录中: 

 

  • 读书 /css/book/
  • 电影 /css/movie/
  • 音乐 /css/music/
  • 社区 /css/sns/
  • 小站 /css/site/
  • 同城 /css/location/
  • 电台 /css/radio/

外联CSS文件适用于全站级和产品级通用的大文件。内联CSS文件适用于在一个或几个页面共用的CSS。另外一对具体的CSS进行文档化的整理。如: 

  • util-01 reset /css/core/reset.css
  • util-02 通用模块容器 /css/core/mod.css
  • ui-01. 喜欢按钮 /css/core/fav_btn.css
  • ui-02. 视频/相册列表项 /css/core/media_item.css
  • ui-03. 评星 /css/core/rating.css
  • ui-04. 通用按钮 /css/core/common_button.css
  • ui-05. 分页 /css/core/pagination.css
  • ui-06. 推荐按钮 /css/core/rec_btn.css
  • ui-07. 老版对话框 /css/core/old_dialog.css
  • ui-08. 老版Tab /css/core/old_tab.css
  • ui-09. 老版成员列表 /css/core/old_userlist.css
  • ui-10. 老版信息区 /css/core/notify.css
  • ui-11. 社区用户导航 /css/core/profile_nav.css
  • ui-12. 当前大社区导航 /css/core/site_nav.css
  • ui-13. 加载中 /css/lib/loading.css

2、文件引入可通过外联或内联方式引入 
link和style标签都应该放入head中,原则上,不允许在html上直接写样式。避免在CSS中使用@import,嵌套不要超过一层。 

  • 外联方式:<link rel=”stylesheet” href=”…” />(类型声明type=”text/css”可以省略)
  • 内联方式:<style>…</style> (类型声明type=”text/css”可以省略)

3、文件名、文件编码及文件大小 

  • 文件名必须由小写字母、数字、中划线组成
  • 文件必须用UTF-8编码,使用UTF-8(非BOM),在HTML中指定UTF-8编码,在CSS中则不需要特别指定因为默认就是UTF-8。
  • 单个CSS文件避免过大(建议少于300行)

二、注释规范 
1、文件顶部注释(推荐使用) 

Css代码 
  1. /*  
  2. * @description: 中文说明  
  3. * @author: name  
  4. * @update: name (2013-04-13 18:32)  
  5. */  

2、模块注释 
模块注释必须单独写在一行 

Css代码 
  1. /* module: module1 by 张三 */  
  2. …  
  3. /* module: module2 by 张三 */  

3、单行注释与多行注释 
单行注释可以写在单独一行,也可以写在行尾,注释中的每一行长度不超过40个汉字,或者80个英文字符。 

Css代码 
  1. /* this is a short comment */  

多行注释必须写在单独行内 

Css代码 
  1. /*  
  2. * this is comment line 1.  
  3. * this is comment line 2.  
  4. */  

4、特殊注释 
用于标注修改、待办等信息 

Css代码 
  1. /* TODO: xxxx by name 2013-04-13 18:32 */  
  2. /* BUGFIX: xxxx by name 2012-04-13 18:32 */  

5、区块注释 
对一个代码区块注释(可选),将样式语句分区块并在新行中对其注释。 

Css代码 
    1. /* Header */  
    2. /* Footer */  
    3. /* Gallery */  

三、命名规范 

使用有意义的或通用的ID和class命名:ID和class的命名应反映该元素的功能或使用通用名称,而不要用抽象的晦涩的命名。反映元素的使用目的是首选;使用通用名称代表该元素不表特定意义,与其同级元素无异,通常是用于辅助命名;使用功能性或通用的名称可以更适用于文档或模版变化的情况。 

  • /* 不推荐: 无意义 */ #yee-1901 {}
  • /* 不推荐: 与样式相关 */ .button-green {}.clear {}
  • /* 推荐: 特殊性 */ #gallery {}#login {}.video {}
  • /* 推荐: 通用性 */ .aux {}.alt {}

常用命名(多记多查英文单词):page、wrap、layout、header(head)、footer(foot、ft)、content(cont)、menu、nav、main、submain、sidebar(side)、logo、banner、title(tit)、popo(pop)、icon、note、btn、txt、iblock、window(win)、tips等。 


ID和class命名越简短越好,只要足够表达涵义。这样既有助于理解,也能提高代码效率。 

  • /* 不推荐 */ #navigation {}.atr {}
  • /* 推荐 */ #nav {}.author {}

类型选择器避免同时使用标签、ID和class作为定位一个元素选择器;从性能上考虑也应尽量减少选择器的层级。 

  • /* 不推荐 */ul#example {}div.error {}
  • /* 推荐 */#example {}.error {}

使用类选择器,放弃ID选择器

ID在一个页面中的唯一性导致了如果以ID为选择器来写CSS,就无法重用。

NEC特殊字符:"-"连字符

"-"在本规范中并不表示连字符的含义。

她只表示两种含义:分类前缀分隔符、扩展分隔符,详见以下具体规则。

分类的命名方法:使用单个字母+"-"为前缀

布局(grid)(.g-);模块(module)(.m-);元件(unit)(.u-);功能(function)(.f-);皮肤(skin)(.s-);状态(.z-)。

对以上的解释详情参见:分类方法中的“CSS内部的分类及其顺序”。

注:在你样式中的选择器总是要以上面前五类开头,然后在里面使用后代选择器。

  如果这五类不能满足你的需求,你可以另外定义一个或多个大类,但必须符合单个字母+"-"为前缀的命名规则,即 .x- 的格式。

  特殊:.j-将被专用于JS获取节点,请勿使用.j-定义样式。

后代选择器命名

  • 约定不以单个字母+"-"为前缀且长度大于等于2的类选择器为后代选择器,如:.item为m-list模块里的每一个项,.text为m-list模块里的文本部分:.m-list .item{}.m-list .text{}。
  • 一个语义化的标签也可以是后代选择器,比如:.m-list li{}。
  • 不允许单个字母的类选择器出现,原因详见下面的“模块和元件的后代选择器的扩展类”。

通过使用后代选择器的方法,你不需要考虑他的命名是否已被使用,因为他只在当前模块或元件中生效,同样的样式名可以在不同的模块或元件中重复使用,互不干扰;在多人协作或者分模块协作的时候效果尤为明显!

后代选择器不需要完整表现结构树层级,尽量能短则短。

注:后代选择器不要在页面布局中使用,因为污染的可能性较大;

1
2
3
4
5
6
7
8
/* 这里的.itm和.cnt只在.m-list中有效 */
.m-list{margin:0;padding:0;}
.m-list .itm{margin:1px;padding:1px;}
.m-list .cnt{margin-left:100px;}
/* 这里的.cnt和.num只在.m-page中有效 */
.m-page{height:20px;}
.m-page .cnt{text-align:center;}
.m-page .num{border:1px solid #ddd;}

命名应简约而不失语义

1
2
3
4
5
6
/* 反对:表现化的或没有语义的命名 */
.m-abc .green2{}
.g-left2{}
/* 推荐:使用有语义的简短的命名 */
.m-list .wrap2{}
.g-side2{}

相同语义的不同类命名

方法:直接加数字或字母区分即可(如:.m-list、.m-list2、.m-list3等,都是列表模块,但是是完全不一样的模块)。

其他举例:.f-fw0、.f-fw1、.s-fc0、.s-fc1、.m-logo2、.m-logo3、u-btn、u-btn2等等。

模块和元件的扩展类的命名方法

当A、B、C、...它们类型相同且外形相似区别不大,那么就以它们中出现率最高的做成基类,其他做成基类的扩展。

方法:+“-”+数字或字母(如:.m-list的扩展类为.m-list-1、.m-list-2等)。

补充:基类自身可以独立使用(如:class="m-list"即可),扩展类必须基于基类使用(如:class="m-list m-list-2")。

如果你的扩展类是表示不同状态,那么你可以这样命名:u-btn-dis,u-btn-hov,m-box-sel,m-box-hov等等,然后像这样使用:class="u-btn u-btn-dis"。

如果你的网站可以不兼容IE6等浏览器,那么你标识状态的方法也可以采取独立状态分类(.z-)方法:.u-btn.z-dis,.m-box.z-sel,然后像这样使用:class="u-btn z-dis"。

模块和元件的后代选择器的扩展类

有时候模块内会有些类似的东西,如果你没有把它们做成元件和扩展,那么也可以使用后代选择器和扩展。

后代选择器:.m-login .btn{}。

后代选择器扩展:.m-login .btn-1{},.m-login .btn-dis{}。

同样也可以采取独立状态分类(.z-)方法:.m-login .btn.z-dis{},然后像这样使用:class="btn z-dis"。

注:此方法用于类选择器,直接使用标签做为选择器的则不需要使用此命名方法。

注:为防止后代选择器的扩展类和大类命名规范冲突,后代选择器不允许使用单个字母。

  比如:.m-list .a{}是不允许的,因为当这个.a需要扩展的时候就会变成.a-bb,这样就和大类的命名规范冲突。

分组选择器有时可以代替扩展方法

有时候虽然两个同类型的模块很相似,但是你希望他们之间不要有依赖关系,也就是说你不希望使用扩展的方法,那么你可以通过合并选择器来设置共性的样式。

使用本方法的前提是:相同类型、功能和外观都相似,写在同一片代码区域方便维护。

1
2
3
4
5
6
7
8
9
10
/* 两个元件共性的样式 */
.u-tip1,.u-tip2{}
.u-tip1 .itm,.u-tip2 .itm{}
/* 在分别是两个元件各自的样式 */
/* tip1 */
.u-tip1{}
.u-tip1 .itm{}
/* tip2 */
.u-tip2{}
.u-tip2 .itm{}

防止污染和被污染

当模块或元件之间互相嵌套,且使用了相同的标签选择器或其他后代选择器,那么里面的选择器就会被外面相同的选择器所影响。

所以,如果你的模块或元件可能嵌套或被嵌套于其他模块或元件,那么要慎用标签选择器,必要时采用类选择器,并注意命名方式,可以采用.m-layer .layerxxx、.m-list2 .list2xxx的形式来降低后代选择器的污染性。

命名时需要注意的点: 

    • 规则命名中,一律采用小写加中划线的方式,不允许使用大写字母或 _
    • 命名避免使用中文拼音,应该采用更简明有语义的英文单词进行组合
    • 命名注意缩写,但是不能盲目缩写,具体请参见常用的CSS命名规则
    • 不允许通过1、2、3等序号进行命名
    • 避免class与id重名
    • id用于标识模块或页面的某一个父容器区域,名称必须唯一,不要随意新建id
    • class用于标识某一个类型的对象,命名必须言简意赅。
    • 尽可能提高代码模块的复用,样式尽量用组合的方式
    • 规则名称中不应该包含颜色(red/blue)、定位(left/right)等与具体显示效果相关的信息。应该用意义命名,而不是样式显示结果命名。
    • 属性的值一定要用双引号("")括起来,且一定要有值如class="divcss5",id="divcss5"
    • 每个标签都要有开始和结束,且要有正确的层次,排版有规律工整
    • 空元素要有结束的tag或于开始的tag后加上"/"
    • 表现与结构完全分离,代码中不涉及任何的表现元素,如style、font、bgColor、border等
    • <h1>到<h5>的定义,应遵循从大到小的原则,体现文档的结构,并有利于搜索引擎的查询。
    • 给每一个表格和表单加上一个唯一的、结构标记id
    • 给图片加上alt标签
    • 尽量使用英文命名原则
    • 尽量不缩写,除非一看就明白的单词

1.文件命名规范

  全局样式:global.css;
  框架布局:layout.css;
  字体样式:font.css;
  链接样式:link.css;
  打印样式:print.css;

  主要的 master.css
  模块 module.css
  基本共用 base.css
  主题 themes.css
  专栏 columns.css
  表单 forms.css
  补丁 mend.css

2.常用类/ID命名规范

(1) 页面结构 

    • 容器: container
    • 页头:header
    • 内容:content/container
    • 页面主体:main
    • 页尾:footer
    • 导航:nav
    • 侧栏:sidebar
    • 栏目:column
    • 页面外围控制整体布局宽度:wrapper
    • 左右中:left right center

(2) 导航 

    • 导航:nav
    • 主导航:mainbav
    • 子导航:subnav
    • 顶导航:topnav
    • 边导航:sidebar
    • 左导航:leftsidebar
    • 右导航:rightsidebar
    • 菜单:menu
    • 子菜单:submenu
    • 标题: title
    • 摘要: summary

(3) 功能 

    • 标志:logo
    • 广告:banner
    • 登陆:login
    • 登录条:loginbar
    • 注册:regsiter
    • 搜索:search
    • 搜索输入框:searchInput
    • 搜索输出和搜索结果相似:search_output
    • 搜索条:searchBar
    • 搜索结果:search_results
    • 功能区:shop
    • 标题:title
    • 加入:joinus
    • 合作伙伴:partner
    • 状态:status
    • 按钮:btn
    • 滚动:scroll
    • 标签页:tab
    • 文章列表:list
    • 提示信息:msg
    • 当前的: current
    • 小技巧:tips
    • 图标: icon
    • 箭头:arr/arrow
    • 注释:note
    • 指南:guild
    • 服务:service
    • 热点:hot
    • 新闻:news
    • 商标:branding
    • 下载:download
    • 投票:vote
    • 合作伙伴:partner
    • 友情链接:link
    • 版权:copyright
    • 信誉:siteinfoCredits
    • 法律声明:siteinfoLegal
    • 网站信息:siteinfo
    • 首页:homepage
    • 二级页面子页面:subpage
    • 工具条:#tool, #toolbar
    • 下拉:drop
    • 下拉菜单:dorpmenu
    • 产品:products
    • 产品价格: products_prices
    • 产品描述: products_description
    • 产品评论:products_review
    • 编辑评论:editor_review
    • 最新产品: news_release
    • 生产商:publisher
    • 缩略图:screenshot
    • 常见问题:faqs
    • 关键词:keyword
    • 博客:blog
    • 论坛:.forum

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 { }

四、书写规范 
1、排版规范 
(1) 使用4个空格,而不使用tab或者混用空格+tab作为缩进; 
(2) 规则可以写成单行,或者多行,但是整个文件内的规则排版必须统一; 
单行形式书写风格的排版约束: 

  • 如果是在html中写内联的css,则必须写成单行;
  • 每一条规则的大括号 { 前后加空格 ;
  • 每一条规则结束的大括号 } 前加空格;
  • 属性名冒号之前不加空格,冒号之后加空格;
  • 每一个属性值后必须添加分号; 并且分号后空格;
  • 多个selector共用一个样式集,则多个selector必须写成多行形式 ;

多行形式书写风格的排版约束: 

  • 每一条规则的大括号 { 前添加空格;
  • 多个selector共用一个样式集,则多个selector必须写成多行形式;
  • 每一条规则结束的大括号 } 必须与规则选择器的第一个字符对齐;
  • 属性名冒号之前不加空格,冒号之后加空格;
  • 属性值之后添加分号;

2、属性编写顺序 

  • 显示属性:display/list-style/position/float/clear …
  • 自身属性(盒模型):width/height/margin/padding/border
  • 背景:background
  • 行高:line-height
  • 文本属性:color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content…
  • 其他:cursor/z-index/zoom/overflow
  • CSS3属性:transform/transition/animation/box-shadow/border-radius
  • 如果使用CSS3的属性,如果有必要加入浏览器前缀,则按照 -webkit- / -moz- / -ms- / -o- / std的顺序进行添加,标准属性写在最后。
  • 链接的样式请严格按照如下顺序添加: a:link -> a:visited -> a:hover -> a:active

3、规则书写规范 

  • 使用单引号,不允许使用双引号;
  • 每个声明结束都应该带一个分号,不管是不是最后一个声明;
  • 除16进制颜色和字体设置外,CSS文件中的所有的代码都应该小写;
  • 除了重置浏览器默认样式外,禁止直接为html tag添加css样式设置;
  • 每一条规则应该确保选择器唯一,禁止直接为全局.nav/.header/.body等类设置属性;

4、代码性能优化 

  • 合并margin、padding、border的-left/-top/-right/-bottom的设置,尽量使用短名称。
  • 选择器应该在满足功能的基础上尽量简短,减少选择器嵌套,查询消耗。但是一定要避免覆盖全局样式设置。
  • 注意选择器的性能,不要使用低性能的选择器。
  • 禁止在css中使用*选择符。
  • 除非必须,否则,一般有class或id的,不需要再写上元素对应的tag。
  • 0后面不需要单位,比如0px可以省略成0,0.8px可以省略成.8px。
  • 如果是16进制表示颜色,则颜色取值应该大写。
  • 如果可以,颜色尽量用三位字符表示,例如#AABBCC写成#ABC 。
  • 如果没有边框时,不要写成border:0,应该写成border:none 。
  • 尽量避免使用AlphaImageLoader 。
  • 在保持代码解耦的前提下,尽量合并重复的样式。
  • background、font等可以缩写的属性,尽量使用缩写形式 。

5、CSS Hack的使用 
请不用动不动就使用浏览器检测和CSS Hacks,先试试别的解决方法吧!考虑到代码高效率和易管理,虽然这两种方法能快速解决浏览器解析差异,但应被视为最后的手段。在长期的项目中,允许使用hack只会带来更多的hack,你越是使用它,你越是会依赖它! 
推荐使用下面的: 

技术分享

因为不同浏览器对W3C标准的支持不一样,各个浏览器对于页面的解释呈视也不尽相同,比如IE在很

多情况下就与FF存在3px的差距,对于这些差异性,就需要利用css 的hack来进行调整,当然在没有必要的

情况下,最好不要写hack来进行调整,避免因为hack而导致页面出现问题。

  1、 IE6、IE7、Firefox之间的兼容写法:

  写法一:

  IE都能识别*;标准浏览器(如FF)不能识别*;
  IE6能识别*,但不能识别 !important,
  IE7能识别*,也能识别!important;
  FF不能识别*,但能识别!important;
  根据上述表达,同一类/ID下的CSS  hack可写为:
  .searchInput {
  /*三者皆可*/
  *background-color:#666 !important; /*仅IE7*/
  *background-color:#999; /*仅IE6及IE6以下*/
  }
  一般三者的书写顺序为:FF、IE7、IE6.

  写法二:

  IE6可识别“_”,而IE7及FF皆不能识别,所以当只针对IE6与IE7及FF之间的区别时,可这样书写:
  .searchInput {
  /*通用*/
  _background-color:#666;/*仅IE6可识别*/
  }

  写法三:

  *+html 与 *html 是IE特有的标签, Firefox 暂不支持。
  .searchInput {}
  *html .searchInput {background-color:#666;}/*仅IE6*/
  *+html .searchInput {background-color:#555;}/*仅IE7*/

  屏蔽IE浏览器:

  select是选择符,根据情况更换。第二句是MAC上safari浏览器独有的。

  *:lang(zh) select {font:12px !important;} /*FF的专用*/
  select:empty {font:12px !important;} /*safari可见*/

  IE6可识别:

  这里主要是通过CSS注释分开一个属性与值,注释在冒号前。

  select { display /*IE6不识别*/:none;}

  IE的if条件hack写法:

  所有的IE可识别:

  <!–[if IE]> Only IE <![end if]–>
  只有IE5.0可以识别:
  <!–[if IE 5.0]> Only IE 5.0 <![end if]–>
  IE5.0包换IE5.5都可以识别:
  <!–[if gt IE 5.0]> Only IE 5.0+ <![end if]–>
  仅IE6可识别:
  <!–[if lt IE 6]> Only IE 6- <![end if]–>
  IE6以及IE6以下的IE5.x都可识别:
  <!–[if gte IE 6]> Only IE 6/+ <![end if]–>
  仅IE7可识别:
  <!–[if lte IE 7]> Only IE 7/- <![end if]–>

  2、清除浮动:

  在Firefox中,当子级都为浮动时,那么父级的高度就无法完全的包住整个子级,那么这时用这个清除

浮动的HACK来对父级做一次定义,那么就可以解决这个问题。

  select:after {
  content:”.”;
  display:block;
  height:0;
  clear:both;
  visibility:hidden;
  }

6、字体规则 

    • 为了防止文件合并及编码转换时造成问题,建议将样式中文字体名字改成对应的英文名字,如:黑体(SimHei) 宋体(SimSun) 微软雅黑 (Microsoft Yahei,几个单词中间有空格组成的必须加引号)
    • 字体粗细采用具体数值,粗体bold写为700,正常normal写为400
    • font-size必须以px或pt为单位,推荐用px(注:pt为打印版字体大小设置),不允许使用xx-small/x-small/small/medium/large/x-large/xx-large等值
    • 为了对font-family取值进行统一,更好的支持各个操作系统上各个浏览器的兼容性,font-family不允许在业务代码中随意设置
    • 为保证不同浏览器上字号保持一致,字号用点数pt和像素px来定义。

      (注:中文宋体的9pt和11pt和中文宋体12px 和14.7px 这是经过优化的字号建议考虑,另外黑体字或

      者宋体字加粗时,建议选用11pt和14.7px 的字号比较合适。)

    • 禁止在页面中出现 <font size=?> 标记,需要对字体设计时可使用标签的style属性或直接在样式表中实现。

7、选择DOCTYPE

XHTML 1.0 提供了三种DTD声明可供选择:

  过渡的(Transitional):要求非常宽松的DTD,它允许你继续使用HTML4.01的标识(但是要符合xhtml的写

法)。完整代码如下:

  <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>

  严格的(Strict):要求严格的DTD,你不能使用任何表现层的标识和属性,例如<br>。完整代码如下:

  <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd“>

  框架的(Frameset):专门针对框架页面设计使用的DTD,如果你的页面中包含有框架,需要采用这种

DTD。完整代码如下:

  <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN”

“http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd“>

  理想情况当然是严格的DTD,但对于我们大多数刚接触web标准的设计师来说,过渡的DTD(XHTML

1.0 Transitional)是目前理想选择(包括本站,使用的也是过渡型DTD)。因为这种DTD还允许我们使用表现

层的标识、元素和属性,也比较容易通过W3C的代码校验。

  网页必须调用w3c规范

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

    (解释:  DTD是词汇表, CSS是数据的表现形式)

8、 指定语言及字符集

为文档指定语言:

  <html xmlns=”http://www.w3.org/1999/xhtml” lang=”en”>

  为了被浏览器正确解释和通过W3C代码校验,所有的XHTML文档都必须声明它们所使用的编码语言;

如:
  常用的语言定义:

  <meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
  标准的XML文档语言定义:
  <?xml version=”1.0″ encoding=” utf-8″?>
  针对老版本的浏览器的语言定义:
  <meta http-equiv=”Content-Language” content=” utf-8″ />
  为提高字符集,建议采用“utf-8”。

(解释: 如果网页格式是utf-8 ,最简单的方法就是在写样式表之前将这个css文件用记事本打开,然后另存为utf-8格式。

9、调用方法 

方法1: <link rel="stylesheet" rev="stylesheet" href="css/52css_page.css" type="text/css" media="all" />

       每个页面调用全局css和这个页面用单独用到的css

说明:(1)rel="stylesheet"和 rev="stylesheet" 为设置或获取对象和链接目的的关系。用来告诉浏览器

你link进来的是个样式表文件,(只写一个就可以了,由于目前的CSS还不能抓取rel与rev的属

性值,所以没有办法给不同关系的链接提供不同的样式,所以现在rel与rev只是用来使得网页的

语义性更为完善。)
              (2)media="all" 所有媒体类型的样式;media="screen"设置显示器的样式;media=" print"设置打印的样式。

方法2: <link rel="stylesheet" rev="stylesheet" href="css/common.css" type="text/css" media="all" />

       将整个项目的css 都先用common.css引用,这样每个页面只需调用common.css即可

(解释: common.css 写法 : @import url("style.css"); @import url("header.css");  依次排列。

注:@import引用的CSS会等到页面全部被下载完再被加载,速度相对会较慢。)

10、表格

建议:用百分比控制表格,并利用css的从属关系控制表格

解释:这里定义一个样式为div ,控制这个区域的表格为

.div table{width:100%; border-collapse:collapse;}

.div td{ height:20px;  text-align:center;  border:solid #000000 1px;}

11、空格

a)  不要在网页中连续出现多于一个的也尽量少使用全角空格(英文字符集下,全角空格会变成乱码)。

b)  转意符号&nbsp,也要尽量少使用,火狐和IE效果不一样

解决空白应该尽量使用 text-indent, padding, margin, hspace, vspace 以及透明的gif 图片来实现。)

12、缩进

排版中遇到需要进行首行缩进的时候,处理做法是在样式表中定义 p { text-indent: 2em; } 然后给每一段加上 <p> 标记。注意,不要省略 </p> 结束标记 。

13、行距 

行距建议用百分比来定义,通常为120%或150%

14、 浏览器兼容

制作的代码应对以下浏览器兼容:

1.IE6 

2.IE7

3.firefox2.0

在不同的浏览器中界面显示一致,不能出现错位及效果不一的结果。

15、目录命名

在网站根目录中开设images、common 、temp 三个子目录,根据需要再开设media 子目录。

1.       images目录中放不同栏目的页面都要用到的公共图片,例如公司的标志、banner 条、菜单、按钮等等,可以根据需要开设子目录;

2.       common 子目录中放css、js,、include 等公共文件;

3.       temp 子目录放演示内容和样例,比如车型演示图片等等;(因temp文件过多,建议以时间为名称开设目录,将客户陆续提供的资料归类整理。)

4.     media 子目录中放flash, avi, quick time 等多媒体文件。

建议: “media”子目录放在“images” 子目录方便CDN加速。

16、鼠标手势

在XHTML标准中,hand只被IE识别,当需要将鼠标手势转换为“手形”时,则将“hand”换为“pointer”,

即“cursor:pointer;”

17、基本全局样式

style.css 中的内容

*{ margin:0; padding:0;}

body{ font-family:"宋体",arial; font-size:12px; background:#fff; color:#000; }

img,a img{ border:0px;}

a img{ vertical-align:middle;}

div,form,img,ul,li,dl,dt,dd{padding:0px; margin:0px; }

td,p,div,li,select,input,textarea{font-family:"宋体";font-size:12px;}

td,p,div,li,input,textarea {word-break:break-all;} 

select,input{vertical-align:middle;}

table,tr,td,th{ font-size:12px;}

ol,li{list-style-type:none;}

ul,li{list-style-type:none;}

h1,h2,h3,h4,h5,h6{ padding:0px; margin:0px;}

 

.css2007 { color: #333; }         

* html .css2007 { color: #00ffff; }   

*+html .css2007 { color: #999; }   

 

a:link{ color:#000000; text-decoration: none;}   

a:visited{color:#000000; text-decoration: none;}    

a:hover{color:#ff0000; text-decoration: underline;}   

a:active{ color:#999999; text-decoration: none;}    

 

.clear { clear:both;}

.hidden { display: none;}

.nobreak {white-space:nowrap;} 

.alpha {filter:alpha(opacity=30); -moz-opacity:0.3;}

.bgalpha {background:transparent;}

五、测试规范 
1、了解浏览器特效支持 
为了页面性能考虑,如果浏览器不支持CSS3相关属性的,则该浏览器的某些特效将不再支持,属性的支持情况如下表所示(Y为支持,N为不支持): 

技术分享

2、 设定浏览器支持标准 

技术分享
    • A级-交互和视觉完全符全设计的要求
    • B级-视觉上允许有所差异,但不破坏页面的整体效果
    • C级-可忽略设计上的细节,但不防碍使用

css规范大全

标签:

原文地址:http://www.cnblogs.com/jymz/p/4397962.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!