• 请使用简单的语法来链接样式表(type 属性不是必需的):
<link rel="stylesheet" href="styles.css">
  • 短规则可以压缩为一行,就像这样:
p.into {font-family: "Verdana";  font-size: 16em;}
  • 长规则应该分为多行:
body {
background-color: lightgrey;
font-family: "Arial Black", Helvetica, sans-serif;
font-size: 16em;
color: black;
}
开括号与选择器位于同一行
在开括号之前用一个空格
使用两个字符的缩进
在每个属性与其值之间使用冒号加一个空格
在每个逗号或分号之后使用空格
在每个属性值对(包括最后一个)之后使用分号
只在值包含空格时使用引号来包围值
把闭括号放在新的一行,之前不用空格

注释:在逗号或分号之后添加空格,是所有书写类型的通用规则。

  • 选择器、属性和值都使用小写
  • 最后一个值也以分号结尾
body {
background-color:lightgrey;
font-family:"Arial Black", Helvetica, sans-serif;
font-size:16em;
color:black;
}
  • 省略值为0时的单位
p {margin:0 10px; background-position:50% 0;}
  • 根据属性的重要性按顺序书写

只遵循横向顺序即可,先显示定位布局类属性,后盒模型等自身属性,最后是文本类及修饰类属性。

显示属性	   自身属性          文本属性和其他修饰
display width font
visibility height text-align
position margin text-decoration
float padding vertical-align
clear border white-space
list-style overflow color
top min-width background
  • 如果属性间存在关联性,则不要隔开写。
p {position:relative;height:20px; line-height:20px; padding:5px; color:#000;}
  • 私有在前,标准在后
p {
-webkit-box-shadow:0 0 0 #000;
-moz-box-shadow:0 0 0 #000;
box-shadow:0 0 0 #000;
}
  • 注释格式:/* 注释文字 */
对选择器的注释统一写在被注释对象的上一行,对属性及值的注释写于分号后。

原则上每个系列的样式都需要有一个注释,言简意赅的表明名称、用途、注意事项等。

短注释应该在单行中书写,并在 <!-- 之后增加一个空格,在 --> 之前增加一个空格:
<!-- This is a comment --> 长注释,跨越多行,应该通过 <!-- 和 --> 在独立的行中书写:
<!--
This is a comment
This is a comment
-->
  • 选择器顺序
从大到小(以选择器的范围为准)
从低到高(以等级上的高低为准)
从先到后(以结构上的先后为准)
从父到子(以结构上的嵌套为准)
/* 从大到小 */
.m-list p{margin:0;padding:0;}
.m-list p.part{margin:1px;padding:1px;}
/* 从低到高 */
.m-logo a{color:#f00;}
.m-logo a:hover{color:#fff;}
/* 从先到后 */
.g-hd{height:60px;}
.g-bd{height:60px;}
.g-ft{height:60px;}
/* 从父到子 */
.m-list{width:300px;}
.m-list .itm{float:left;}

CSS的一些规范的更多相关文章

  1. HTML/CSS/JS编码规范

    最近整理了一份HTML/CSS/JS编码规范,供大家参考.目录:一.HTML编码规范二.CSS编码规范三.JS编码规范 一.HTML编码规范 1. img标签要写alt属性 根据W3C标准,img标签 ...

  2. CSS BEM 命名规范简介

    [前言] BEM 是一个简单又非常有用的命名约定.让你的前端代码更容易阅读和理解,更容易协作,更容易控制,更加健壮和明确,而且更加严密.这篇文章主要介绍了CSS BEM 命名规范简介(推荐)的相关资料 ...

  3. 关于CSS的书写规范和顺序

    关于CSS的书写规范和顺序,是大部分前端er都必须要攻克的一门关卡,如果没有按照良好的CSS书写规范来写CSS代码,会影响代码的阅读体验.这里总结了一个CSS书写规范.CSS书写顺序供大家参考,这些是 ...

  4. css样式书写规范

    在工作当中css样式是非常重要的,但是咋样书写css样式更重要. 一.css书写规范 1.定位属性:position  display  float  left  top  right  bottom ...

  5. css的书写规范+常用

    格式化: body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blo ...

  6. html和css的编码规范

    HTML和CSS编码规范内容 一.HTML规范 二.CSS规范 三.注意事项: 四.常用的命名规则 五.CSS样式表文件命名 六.文件命名规则 一.HTML规范: 1.代码规范 页面的第一行添加标准模 ...

  7. css命名书写规范小结。

    单行形式书写风格的排版约束 1.   每一条规则的大括号 { 前后加空格 2.   多个selector共用一个样式集,则多个selector必须写成多行形式 3.   每一条规则结束的大括号 } 前 ...

  8. CSS 样式书写规范

    可能不同团队都有各自的规范,又或者很多人在写 CSS 的时候还是想到什么就写什么,不存在太多的约束. 我觉得 CSS 代码规范还是有存在的必要的,尤其是在团队配合,多人协作下,规范就显得尤为重要. 本 ...

  9. CSS 样式书写规范+特殊符号

    虽然我只是刚踏入web前端开发圈子.在一次次任务里头,我发觉每一次的css命名都有所不同和不知所措.脑海就诞生了一个想法--模仿大神的css命名样式. 毕竟日后工作上,是需要多个成员共同协作的.如果没 ...

  10. 编写灵活、稳定、高质量的 css代码的规范

    语法 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法. 为选择器分组时,将单独的选择器单独放在一行. 为了代码的易读性,在每个声明块的左花括号前添加一个空格. 声 ...

随机推荐

  1. sqlite优化记录:建立索引加快查询速度

    凡是数据库中,索引的存在就是为了提高查询速度的,数据库的索引有点类似于书本上面的目录的概念,因为在英文中都是index,事实上也就是目录. 其算法应该叫做“倒排索引”,这个其实也类似于搜索引擎里面的基 ...

  2. php 使用jquery实现ajax

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  3. 基于FFmpeg和Qt的播放器 QtAV库

    http://blog.csdn.net/ibingow/article/details/8144795

  4. ASP.NET控件Button (e.CommandArgument的使用方法)

    e.CommandArgument的使用方法 1. 在 Web 窗体页上显示普通按钮 (Button) 控件. <asp:Button id="MyButton" Text= ...

  5. asp.net 框架接触(2)

    1. 学习一个框架就要尽量按照它的各种规则(命名规则等)来命名,写代码 比如 下列Entity层内的代码"StudentInfo"编写应与数据库内的表名严格对应 不然就会报错 [T ...

  6. 综合经验:IO读写错误必然导致程序崩溃

    仿佛是忽然间产生的问题,每次程序退出时候,必然崩溃,花了整整一天才找到原因,就是对数据库的IO读写错误.主要是因为析构函数调用了Disconnect函数,内容如下: void SFTPTool::Di ...

  7. 细说SQL性能优化

    1:在进行多表关联时,多用where语句把单个表的结果集最小化,多用聚合函数汇总结果集后再与其它表做关联,以使结果集数据量最小化2:在两张表进行关联时,应考虑可否使用右连接.以提高查询速度3:使用wh ...

  8. 【 D3.js 选择集与数据详解 — 1 】 使用datum()绑定数据

    选择集和数据的关系是 D3 最重要的基础,在[入门 - 第 7 章]时进行过些许讲解,对于要掌握好 D3 是远远不够的.故此开设一个新的分类,专门讨论选择集与数据的关系,包括数据绑定的使用和工作原理, ...

  9. 不要直接对Request.Headers["If-Modified-Since"]使用Convert.ToDateTime

    不要直接对Request.Headers["If-Modified-Since"]使用Convert.ToDateTime 前一段时间图片处理服务一直报“System.Format ...

  10. spring--AOP2--6

    AOP 之 6.6 通知参数 前边章节已经介绍了声明通知,但如果想获取被被通知方法参数并传递给通知方法,该如何实现呢?接下来我们将介绍两种获取通知参数的方式. 使用JoinPoint获取:Spring ...