語法

• 語法
  • 瀏覽器私有屬性
  • 屬性值語法
    • 基本元素
    • 組合符號(hào)
    • 數(shù)量符號(hào)
  • @規(guī)則語法
    • @規(guī)則

語法

/* 選擇器 */
.m-userlist {
  /* 屬性聲明 */
  margin: 0 0 30px;
  /* 屬性名:屬性值; */
}
.m-userlist .list {
  position: relative;
  height: 100px;
  overflow: hidden;
}

瀏覽器私有屬性

• Google Chrome, Safari (-webkit)
• Firefox (-moz-)
• IE (-ms-)
• Opera (-o-)

.pic {
  -webkit-transform: rotate(-3deg);
  -ms-transform: rotate(-3deg);
  transform: rotate(-3deg);
}

NOTE: 使用 http://pleeease.io/play/ ，CSS 預(yù)處理器（Sass，Less，Stylus）或編輯器插件可自動(dòng)添加瀏覽器廠商的私有屬性前綴。

屬性值語法

margin: [ <length> | <percentage> | auto ]{1,4}
/* 基本元素：<length>, <percentage>, auto*/
/* 組合符號(hào)：[], | */
/* 數(shù)量符號(hào)：{1,4} */

基本元素

關(guān)鍵字

• auto
• solid
• bold
• ...

類型

• 基本類型
  • <length>
  • <percentage>
  • <color>
  • ...
• 其他類型
  • <'padding-width'>
  • <'color-stop'>
• 符號(hào)
  • /
  • ','
• inherit, initial

組合符號(hào)

• <'font-size'> <'font-family'> （  兩項(xiàng)必存，順序畢遵）
  • 合法：12px arial
  • 不合法：2em
  • 不合法：arial 14px
• <length>&&<color> (&& 兩項(xiàng)必存，順序無礙)
  • 合法：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

數(shù)量符號(hào)

• <length>（無則表示僅可出現(xiàn)一次）
  • 合法：1px
  • 合法：10em
  • 不合法：1px 2px
• <color-stop>[, <color-stop>]+ (+ 可出現(xiàn)一次或多次)
  • 合法：#fff, red
  • 合法：blue, green 50%, gray
  • 不合法：red
• inset?&&<color> (? 表示可選)
  • 合法：inset orange
  • 合法：red
• <length>{2,4} ({2,4} 可出現(xiàn)次數(shù)和最少最多出現(xiàn)次數(shù))
  • 合法：1px 2px
  • 合法：1px 2px 3px
  • 不合法: 1px
  • 不合法：1px 2px 3px 4px 5px
• <time>[, <time>]*（* 出現(xiàn) 0 次或多次）
  • 合法：1s
  • 合法：1s,4ms
• <time>#（# 出現(xiàn)一次或者多次，用,分隔）
  • 合法：2s, 4s
  • 不合法：1s 2s

CSS 規(guī)則示例

@規(guī)則語法

@import "subs.css";
@charset "utf-8";
@media print {
  /* property: value */
}
@keyframes fadein {
  /* property: value */
}

• @標(biāo)示符 內(nèi)容;
• @標(biāo)示符 內(nèi)容{}

@規(guī)則

常用的規(guī)則

• @media （用于響應(yīng)式布局）
• @keyframes （CSS 動(dòng)畫的中間步驟）
• @font-face （引入外部字體）

其他規(guī)則（不常用）

• @import
• @charset
• @namespace
• @page
• @supports
• @document