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) -- 这是唯一能保证在所有环境下获得一致展现的方法. 为选择器分组时,将单独的选择器单独放在一行. 为了代码的易读性,在每个声明块的左花括号前添加一个空格. 声 ...
随机推荐
- Android手势监听
public class MainActivity extends Activity { /* * 要实现手指在屏幕上左右滑动的事件需要实例化对象GestureDetector,new * Gestu ...
- java连接数据库时出现如下错误:
java.lang.ClassNotFoundException: com.mysql.jdbc.driver at org.apache.catalina.loader.WebappClassLoa ...
- 2D多边形碰撞器优化器
http://www.unity蛮牛.com/thread-19827-1-1.html http://pan.baidu.com/s/1qW2mWS8 Asset Store Link: http: ...
- POJ 1135 Domino Effect(Dijkstra)
点我看题目 题意 : 一个新的多米诺骨牌游戏,就是这个多米诺骨中有许多关键牌,他们之间由一行普通的骨牌相连接,当一张关键牌倒下的时候,连接这个关键牌的每一行都会倒下,当倒下的行到达没有倒下的关键牌时, ...
- 小心loadrunner成为瓶颈
最近在测试中发现一个问题,某些时候用进程跑场景的时候tps死活上不去,而用同样数量的线程跑的时候,TPS开始很高,然后很快的跌倒谷底.当遇到这个问题的时候往往就是loadrunner成为瓶颈了! 解决 ...
- RHEL双网卡绑定
新增绑定网卡文件: vi /etc/sysconfig/network-scripts/ifcfg-bond0 DEVICE=bond0 ONBOOT=yes TYPE=Ethernet BOOTPR ...
- c#浅谈反射内存的处理
这段时间由于公司的项目的要求,我利用c#的反射的机制做了一个客户端框架.客户端里的所有的模块都是以一定形式进行提供,例如:FORM,UserControl. 在做的过程中很简单与愉快.具体的过程如下: ...
- 【转】OS X Mavericks: 防止 Mac 进入睡眠 -- 不错
原文网址:https://support.apple.com/kb/PH13808?locale=zh_CN&viewlocale=zh_CN 某些 Mac 电脑将在不活跃一段时间后自动进入睡 ...
- 【转】VS2010/MFC编程入门之八(对话框:创建对话框类和添加控件变量)
原文网址:http://www.jizhuomi.com/software/153.html 前两讲中鸡啄米为大家讲解了如何创建对话框资源.创建好对话框资源后要做的就是生成对话框类了.鸡啄米再声明下, ...
- C# word开发
c# 操作Word总结 在医疗管理系统中为保存患者的体检和治疗记录,方便以后的医生或其他人查看.当把数据保存到数据库中,需要新建很多的字段,而且操作很繁琐,于是想到网页的信息创建到一个word文本中, ...