selector{??????????????? /*選擇器*/

? property1:value;? /*屬性聲明 = 屬性名：屬性值*/

? property2:value;/*末尾加分號*/

}

注釋用/**/

瀏覽器私有屬性前綴

·chrome.safari

??? -webkit-

·firefox

??? -moz-

·IE

??? -ms-

·opera

??? -o-

.pic{

? ? -webkit-transform:ratate(-3deg);

? ? -moz-transform:ratate(-3deg);

? ? -ms-transform:ratate(-3deg);

? ? -o-transform:ratate(-3deg);

? ? transform:ratate(-3deg);
}

屬性值語法

·margin:[<length>|<percentage>|auto]{1,4}

基本元素

??? ·關鍵字? -auto,solid,bold...

??? ·類型?

????????????? -基本類型（<length>,<percentage>,<color>...）

???????????? -其他類型（<'padding-width'>,<color-stop>...）

??? ·符號(/,)

??? ·inherit,initial

組合符號

??? ·空格 <'font-size'> <'font-family'> 兩個基本類型必須出現，且按順序出現。

??????? 合法值 - 12px arial

??? ·&& <length>&&<color> 兩個基本屬性必須出現但與順序無關。

??????? 合法值 - green 2px???? - lem blue

??? ·||? underline||overline||line-through||blink 至少出現一個，與順序無關。

??????? 合法值? -underline???? -overline underline

??? ·|? <color> | transparent 只能出現一個

??????? 合法值 -orange???? -transparent

??? []?? bold [thin||<length>] 組合

??????? 合法值 -bold thin??? -bold 2em

數量符號

??? ·無 <length>只有一個基本元素，則說明該基本元素只能出現一次。

??????? 合法值 -1px??? -10em

??? ·+ <color-stop>,[,<color-stop>]+ 表示出現一次或者多次

??????? 合法值 -#fff,red

??? ·? inset?&&<color> 表示這個基本屬性可以出現也可以不出現

??????? 合法值 -inset blue ?? -red

??? ·{} <length>{} 表示這個基本屬性可以出現的次數，最少幾次，最多幾次

??????? <length>{2,4}

??????? 合法值? -1px 2px??? -1px 2px 3px

??? ·* <time>[,<time>]* 可以出現0次，1次或者多次

??????? 合法值 -1s??? -1s,4ms

??? ·# <time># 需要出現一次或者多次，中間用逗號隔開

??????? 合法值 -2s,4s

@規則語法

??? @ 標識符 xxx;

??? @ 標識符 xxx{}

??? ·@media 主要用作響應式布局

??? ·@keyframes 主要是用作描述CSS動畫的一些中間步驟

??? ·@font-face 引入外部字體