CSS 语法规则

基本语法

使用 HTML 时，需要遵从一定的规范。同理，要想熟练的使用 CSS 对网页进行修饰，首先要了解 CSS 的样式规则：

selector{				选择器
   property1:value;		属性声明=属性名：属性值；
   property1:value;		注释  /*    */
   ... 					每个属性声明由属性名和属性值组成，以“键值对”的形式出现，中间用冒号(英文状态下)连接；
}   					每个属性声明用分号分隔；

说明：
 1.选择器，用于指定css样式作用的HTML对象，花括号内是对该对象设置的具体样式；
 2.属性（名）是对指定的对象设置的样式属性，如字体大小、文本颜色等；
 3.CSS规则是使用 /* 要注释的内容 */ 进行注释的，快捷键同HTML

selector{ 选择器

property1:value; 属性声明=属性名：属性值；

property1:value; 注释 /* */

... 每个属性声明由属性名和属性值组成，以“键值对”的形式出现，中间用冒号(英文状态下)连接；

} 每个属性声明用分号分隔；

说明：

1.选择器，用于指定css样式作用的HTML对象，花括号内是对该对象设置的具体样式；

2.属性（名）是对指定的对象设置的样式属性，如字体大小、文本颜色等；

3.CSS规则是使用 /* 要注释的内容 */ 进行注释的，快捷键同HTML

另，浏览器私有属性：
浏览器厂商会实现一些还没有成为标准的属性，为了区分标准属性，他们会在属性前加一些私有前缀：

Chrome、safari（-wekit-）
Firefox（-moz-）
IE（-ms-）
Opera（-o-）

若用到私有属性，为了兼容不同的浏览器，需要帮私有属性写在前面，标准属性写在后面；

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

1
2
3
4
5
6
7

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

属性值语法

margin:[ <length> | <percentage> | auto]{1,4}             < 文档查询 >
        基本元素       组合符号          数量符号

1 2	margin:[ <length> \| <percentage> \| auto]{1,4} < 文档查询 > 基本元素组合符号数量符号

基本元素

关键字：auto、solid、bold...
类型：基本（<length><color>...）+ 其他（<'padding-width'>,<color-stop>...）
符号（ / , ）
inhert、initial

组合符号

空格：表示基本类型必须出现，顺序不能变；    <'font-size'> <'font-family'>
&&：连接两个基本属性，都必须出现，但顺序没关系；    <length>&&<color>
||：两个分隔符，基本属性至少出现一个，顺序没有关系；    underline || overline || line-through
|：单个分隔符，分隔的基本元素，只能出现一个；    <color> | transparent
[]：主要作用是分组，[] 里看作是一个整体，再和外面的属性进行计算；    bold[thin || <length>]

数量符号

无：只有基本元素，说明基本元素只能出现一次；    <length>
+：可以出现一次或多次，一次都不出现则不合法；    <color-stop>[,<color-stop>]+
?：表示基本元素可以出现，也可以不出现；    inset?&&<color>
{}：表示元素可以出现几次，最少 ~ 最多；    <length>{2,4}
*：可以出现任意次数；    <time>[,<time>]*
#：表示需要出现一次或多次，中间用逗号隔开；    <time>#

@语法规则

@import “subs.css”;
@charset “utf-8”;                                        @标识符 xxx
@media print{                                            @标识符 xxx{ }
	body{font-size:10px;}
}
@keyframes fadein{
	0%{top:0px;}
	50%{top:30px;}
	100%{top:0px;}
}

@import “subs.css”;

@charset “utf-8”; @标识符 xxx

@media print{ @标识符 xxx{ }

body{font-size:10px;}

}

@keyframes fadein{

0%{top:0px;}

50%{top:30px;}

100%{top:0px;}

}

常用 @ 规则
@media 主要用来做一些响应式的布局，设备只有符合 @media 里的媒体查询条件，样式才能生效。
@keyframes 主要用来描述 CSS 动画的一些中间步骤；
@font-face 可以用来引入外部的字体，是页面更加的丰富；
其他：@important、@charset、@namespace、@page、@supports、@document