CSS语法

CSS由多组规则组成，每个规则由“选择器”（selector）、“属性”（property）和“值”（value）组成：

  1. 选择器（Selector）:多个选择器可以半角逗号（,）隔开。
  2. 属性（property）:CSS1、CSS2、CSS3规定了许多的属性，目的在控制选择器的样式。
  3. 值（value）:指属性接受的设置值，多个关键字时大都以空格隔开。

属性和值之间用半角冒号：隔开，属性和值合称为“特性”。多个特性间用；隔开，前后用{}括起来

对于重复属性设置，优先级高的覆盖优先级低的，相同的优先级后面的覆盖前面的

前缀

有些新式的CSS样式并不是所有的浏览器都支持，一些浏览器率先支持了，或者不是所有的浏览器支持情况都一样，我们需要前缀写法

* Firefox: -moz-
* Safari/Chrome: -webkit-
* Opera: -o-
* IE: -ms-

书写顺序要注意，先写私有的CSS3属性，再写标准的CSS3属性，这样以后不需要前缀了，能保证我们使用标准的

    -webkit-transform:rotate(-3deg);
    -moz-transform:rotate(-3deg);
    -ms-transform:rotate(-3deg);
    -o-transform:rotate(-3deg);
    transform:rotate(-3deg);

当一个属性成为标准，并且被Firefox、Chrome等浏览器的最新版普遍兼容的时候。

注释语句

/*

color: red;
font-size: 12px;

*/

缩写

使用CSS缩写可以减少CSS文件的大小，并使其更为易读[5]，例如：

  1. 颜色缩写：16进制的色彩值，如果每两位的值相同，可以进行缩写，例如：

    ＃000000可以缩写为#000，#336699可以缩写为#369;

  2. 盒尺寸缩写：Property: Value1 Value2 Value3 Value4；四个值依次表示Top，Right，Bottom，Left

  3. 边框缩写

    边框的属性如下：

      border-width: 1px;
  border-style: solid;
  border-color: #000;

    可以缩写为一句：

      border: 1px solid #000;

  4. 背景缩写

      background-color: #F00;
  background-image: url(background.gif);
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 0 0;

可以缩写为一句：

     background: #F00 url(background.gif) no-repeat fixed 0 0;

  1. 文字缩写

     font-weight: bold;
 font-size: 12px;
 line-height: 1.8em;
 font-family: Arial;

    可以缩写为一句： 但文字缩写一定要具有字号、字体样式这两个属性。行高用/分隔

      font:bold 12px/1.8em Arial;

书写风格

  1. 语法不区分大小写，但建议统一使用小写
  2. 不使用内联的style属性定义样式
  3. id和class使用有意义的单词，分隔符建议使用-
  4. 有可能就是用缩写
  5. 属性值是0的省略单位
  6. 块内容缩进
  7. 属性名冒号后面添加一个空格

参考

  1. CSS 编码规范-kissy
  2. CSS编码规范

results matching ""

    No results matching ""