• 请使用简单的语法来链接样式表(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. 类模板 template<class T>

    参考网址:http://c.biancheng.net/cpp/biancheng/view/213.html // demo3.cpp : 定义控制台应用程序的入口点. // #include &q ...

  2. Linux查看用户和组命令

    在Linux系统里,我们会经常用Linux查看用户的命令,在这里我们一些命令进行了总结,总共有7个,并做了详细的解释,以便让大家更深入的理解,接下来让我们一起来看看这些命令和具体应用. 一.Linux ...

  3. Fast CGI 工作原理

    http://www.cppblog.com/woaidongmao/archive/2011/06/21/149092.html 一.FastCGI是什么? FastCGI是语言无关的.可伸缩架构的 ...

  4. IPv6 tutorial 1 Get started now

    https://4sysops.com/archives/ipv6-part-1-get-started-now/ You’ve probably heard the news that the In ...

  5. Visual Studio中的项目属性-->生成-->配置

    1.Debug配置 2.Release配置 2.Debug和Release的区别 (1)Debug有定义DEBUG常量,Release没有 (2)Debug没有优化代码,Release有 (3)生成路 ...

  6. 逻辑运算符&& 用法解释

    A&&B 首先判断A,A成功然后判断B:A不成功则结束判断,返回false;

  7. C#中的try catch finally

    try中的程序块是有可能发生错误的程序块,catch中的程序块是当发生错误的时候才会执行的代码块,finally中的程序块是无论是否发生错误都会执行的代码块. 示例程序: ? 1 2 3 4 5 6 ...

  8. POJ 2513 Colored Sticks 解题报告

    第一次接触欧拉回路.虽然在离散数学里学过,敲代码还是第一次. 本题是说端点颜色相同的两根木棒可连接,能否将所有的木棒连成一条直线. 将颜色视为节点v,将木棒视为边e,构成图G.如果能找到一条一笔画的路 ...

  9. 【 D3.js 选择集与数据详解 — 4 】 enter和exit的处理方法以及处理模板

    绑定数据之后,选择集分为三部分:update.enter.exit.这三部分的处理办法是什么呢?本文将讲解其处理方法,以及一个常用的处理模板. 1. enter的处理方法 如果没有足够的元素,那么处理 ...

  10. EPUB弹出窗口式脚注

    网上搜到一些国学典籍的EPUB版,虽有古人的注解,但正文和注解混排在一起,当我只想迅速读正文的时候比较碍眼.于是研究了一下 EPUB3 中有关脚注(footnote)的规格定义,写了一个 Python ...