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 引入外部字体