CSS的一些规范
- 请使用简单的语法来链接样式表(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的一些规范的更多相关文章
- HTML/CSS/JS编码规范
最近整理了一份HTML/CSS/JS编码规范,供大家参考.目录:一.HTML编码规范二.CSS编码规范三.JS编码规范 一.HTML编码规范 1. img标签要写alt属性 根据W3C标准,img标签 ...
- CSS BEM 命名规范简介
[前言] BEM 是一个简单又非常有用的命名约定.让你的前端代码更容易阅读和理解,更容易协作,更容易控制,更加健壮和明确,而且更加严密.这篇文章主要介绍了CSS BEM 命名规范简介(推荐)的相关资料 ...
- 关于CSS的书写规范和顺序
关于CSS的书写规范和顺序,是大部分前端er都必须要攻克的一门关卡,如果没有按照良好的CSS书写规范来写CSS代码,会影响代码的阅读体验.这里总结了一个CSS书写规范.CSS书写顺序供大家参考,这些是 ...
- css样式书写规范
在工作当中css样式是非常重要的,但是咋样书写css样式更重要. 一.css书写规范 1.定位属性:position display float left top right bottom ...
- css的书写规范+常用
格式化: body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blo ...
- html和css的编码规范
HTML和CSS编码规范内容 一.HTML规范 二.CSS规范 三.注意事项: 四.常用的命名规则 五.CSS样式表文件命名 六.文件命名规则 一.HTML规范: 1.代码规范 页面的第一行添加标准模 ...
- css命名书写规范小结。
单行形式书写风格的排版约束 1. 每一条规则的大括号 { 前后加空格 2. 多个selector共用一个样式集,则多个selector必须写成多行形式 3. 每一条规则结束的大括号 } 前 ...
- CSS 样式书写规范
可能不同团队都有各自的规范,又或者很多人在写 CSS 的时候还是想到什么就写什么,不存在太多的约束. 我觉得 CSS 代码规范还是有存在的必要的,尤其是在团队配合,多人协作下,规范就显得尤为重要. 本 ...
- CSS 样式书写规范+特殊符号
虽然我只是刚踏入web前端开发圈子.在一次次任务里头,我发觉每一次的css命名都有所不同和不知所措.脑海就诞生了一个想法--模仿大神的css命名样式. 毕竟日后工作上,是需要多个成员共同协作的.如果没 ...
- 编写灵活、稳定、高质量的 css代码的规范
语法 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法. 为选择器分组时,将单独的选择器单独放在一行. 为了代码的易读性,在每个声明块的左花括号前添加一个空格. 声 ...
随机推荐
- sqlite优化记录:建立索引加快查询速度
凡是数据库中,索引的存在就是为了提高查询速度的,数据库的索引有点类似于书本上面的目录的概念,因为在英文中都是index,事实上也就是目录. 其算法应该叫做“倒排索引”,这个其实也类似于搜索引擎里面的基 ...
- php 使用jquery实现ajax
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- 基于FFmpeg和Qt的播放器 QtAV库
http://blog.csdn.net/ibingow/article/details/8144795
- ASP.NET控件Button (e.CommandArgument的使用方法)
e.CommandArgument的使用方法 1. 在 Web 窗体页上显示普通按钮 (Button) 控件. <asp:Button id="MyButton" Text= ...
- asp.net 框架接触(2)
1. 学习一个框架就要尽量按照它的各种规则(命名规则等)来命名,写代码 比如 下列Entity层内的代码"StudentInfo"编写应与数据库内的表名严格对应 不然就会报错 [T ...
- 综合经验:IO读写错误必然导致程序崩溃
仿佛是忽然间产生的问题,每次程序退出时候,必然崩溃,花了整整一天才找到原因,就是对数据库的IO读写错误.主要是因为析构函数调用了Disconnect函数,内容如下: void SFTPTool::Di ...
- 细说SQL性能优化
1:在进行多表关联时,多用where语句把单个表的结果集最小化,多用聚合函数汇总结果集后再与其它表做关联,以使结果集数据量最小化2:在两张表进行关联时,应考虑可否使用右连接.以提高查询速度3:使用wh ...
- 【 D3.js 选择集与数据详解 — 1 】 使用datum()绑定数据
选择集和数据的关系是 D3 最重要的基础,在[入门 - 第 7 章]时进行过些许讲解,对于要掌握好 D3 是远远不够的.故此开设一个新的分类,专门讨论选择集与数据的关系,包括数据绑定的使用和工作原理, ...
- 不要直接对Request.Headers["If-Modified-Since"]使用Convert.ToDateTime
不要直接对Request.Headers["If-Modified-Since"]使用Convert.ToDateTime 前一段时间图片处理服务一直报“System.Format ...
- spring--AOP2--6
AOP 之 6.6 通知参数 前边章节已经介绍了声明通知,但如果想获取被被通知方法参数并传递给通知方法,该如何实现呢?接下来我们将介绍两种获取通知参数的方式. 使用JoinPoint获取:Spring ...