CSS语法

选择器

属性声明=属性名：属性值

注释 /* */

 

 

浏览器的私有属性

chrome、Safari

     -webkit-

firefox

     -moz-

IE

     -ms-

opera

     -o-

e.g.

.pic {

     -webkit-transfrom:rotate(-3edg);

     -moz-transfrom:rotate(-3edg);

     -ms-transfrom:rotate(-3edg);

     -o-transfrom:rotate(-3edg);

     transfrom:rotate(-3edg);

}

 

属性值语法

包括三部分：基本元素、组合符号、数量符号

 

基本元素

关键字

     -auto,solid,bold

类型

     -基本类型 <length>,<percentage>,<color>

     -其他类型 <‘padding-width’>,<color-stop>…

符号

     </>,<,>

inherit, initial (默认是隐藏的)

 

组合符号 - 空格

<‘font-size’> <‘font-family’>

合法值    

     -12px arial

顺序不能反

 

组合符号 - &&

<length>&&<color>

合法值

     -green 2px

     -1em 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

     - blue, green 50%, gray

 

数量符号 - ？

inset?&&<color>

合法值

     -inset blue

     -red

 

数量符号 -{}

<length>{2,4}

合法值

     -1px 2px

     -1px 2px 3px

最少出现2次，最多出现4次

 

数量符号 - *

<time>[,<time>]*

合法值 

   - 1s

     - 1s,4ms

出现一次或多次

 

数量符号 -#

<time>#

合法值

     -2s,4s

出现一次或多次，中间用逗号隔开，是上面的简写

 

 

属性值例子

box-shadow: [inset?&&[ <length>{2,4} && <color>?]]# | none

 

@规则语法

@ 标识符 XXX;

@ 标识符 XXX {};

     {} 属性声明块

 

@规则

     @media 

          响应式布局

     @keyframes

          css中间步骤

     @font-face

          引入字体

     

     @import

【引入CSS的方法有两种，一种是@import，一种是link 

@import url('地址');

<link href="地址" rel="stylesheet" type="text/css" />

现在绝大部分的网站都采用后一种link方式，原因在于

@import先加载HTML，后加载CSS

link先加载CSS，后加载HTML。

所以前者加载网页会出现令浏览者以外的格式，后者则是带格式的加载网页。】

     @charset

【设置文件在显示的时候使用的编码】

     @namespace

【命名空间】

     @page

     @supports

     @document