Table of Contents generated with DocToc

语法

  1. /* 选择器 */
  2. .m-userlist {
  3.   /* 属性声明 */
  4.   margin: 0 0 30px;
  5.   /* 属性名:属性值; */
  6. }
  7. .m-userlist .list {
  8.   position: relative;
  9.   height: 100px;
  10.   overflow: hidden;
  11. }

浏览器私有属性

  • Google Chrome, Safari (-webkit)
  • Firefox (-moz-)
  • IE (-ms-)
  • Opera (-o-)
  1. .pic {
  2.   -webkit-transform: rotate(-3deg);
  3.   -ms-transform: rotate(-3deg);
  4.   transform: rotate(-3deg);
  5. }

NOTE: 使用 http://pleeease.io/play/ ，CSS 预处理器（Sass，Less，Stylus）或编辑器插件可自动添加浏览器厂商的私有属性前缀。

属性值语法

  1. margin: [ <length> | <percentage> | auto ]{1,4}
  2. /* 基本元素：<length>, <percentage>, auto*/
  3. /* 组合符号：[], | */
  4. /* 数量符号：{1,4} */
基本元素

关键字

  • auto
  • solid
  • bold
  • …

类型

  • 基本类型
    • <length>
    • <percentage>
    • <color>
    • …
  • 其他类型
    • <’padding-width’>
    • <’color-stop’>
  • 符号
    • /
    • ‘,’
  • inherit, initial
组合符号
  • <'font-size'> <'font-family'> （ 两项必存，顺序毕遵）
    • 合法：12px arial
    • 不合法：2em
    • 不合法：arial 14px
  • <length>&&<color> (&& 两项必存，顺序无碍)
    • 合法：green 2px
    • 合法：1em orange
    • 不合法：blue
  • underline || overline || line-through || blink (|| 至少选一，顺序无碍)
    • 合法：underline
    • 合法：overline underline
  • <color> | transparent（| 只可选一，不可共存）
    • 合法：orange
    • 合法：transparent
    • 不合法：orange transparent
  • bold [thin || <length>]（[] 分组之用，视为整体）
    • 合法：bold thin
    • 合法：bold 2em
数量符号
  • <length>（无则表示仅可出现一次）
    • 合法：1px
    • 合法：10em
    • 不合法：1px 2px
  • <color-stop>[, <color-stop>]+ (+ 可出现一次或多次)
    • 合法：#fff, red
    • 合法：blue, green 50%, gray
    • 不合法：red
  • inset?&&<color> (? 表示可选)
    • 合法：inset orange
    • 合法：red
  • <length>{2,4} ({2,4} 可出现次数和最少最多出现次数)
    • 合法：1px 2px
    • 合法：1px 2px 3px
    • 不合法: 1px
    • 不合法：1px 2px 3px 4px 5px
  • <time>[, <time>]*（* 出现 0 次或多次）
    • 合法：1s
    • 合法：1s,4ms
  • <time>#（# 出现一次或者多次，用,分隔）
    • 合法：2s, 4s
    • 不合法：1s 2s

CSS 规则示例

语法 - 图1

@规则语法

  1. @import "subs.css";
  2. @charset "utf-8";
  3. @media print {
  4.   /* property: value */
  5. }
  6. @keyframes fadein {
  7.   /* property: value */
  8. }
  • @标示符 内容;
  • @标示符 内容{}
@规则

常用的规则

  • @media （用于响应式布局）
  • @keyframes （CSS 动画的中间步骤）
  • @font-face （引入外部字体）

其他规则（不常用）