css的新玩法，语法与规则
!important
语法：
Selector{sRule!important;}
说明：
提升指定样式规则的应用优先权。
-
IE6及以下浏览器有个比较显式的支持问题存在，!important并不覆盖掉在同一条样式的后面的规则。请看下述代码：
示例代码：
div{color:#f00!important;color:#000;}
在上述代码中，IE6及以下浏览器div的文本颜色为#000，!important并没有覆盖后面的规则；其它浏览器下div的文本颜色为#f00
-
IE6及以下浏览器要使!important生效，可用以下代码：
示例代码：
div{color:#f00!important;}
div{color:#000;}
在上述代码中，IE6及以下浏览器中div的文本颜色表现与其它浏览器一致，都为#f00
兼容性：
|
支持版本\类型 |
IE |
Firefox |
Safari |
Chrome |
Opera |
| 版本 |
6 不支持 |
4 |
5.1。7 |
13 |
11.5 |
| 版本 |
7 |
|
|
|
|
@charset
语法：
**@charset** <charset>;
取值：
- ： 字符编码。如：@charset “utf-8”;
说明：
在外部样式表文件内使用。指定该样式表使用的字符编码。
兼容性：
|
支持版本\类型 |
IE |
Firefox |
Safari |
Chrome |
Opera |
| 版本 |
6 |
4 |
5.1.7 |
13 |
11.5 |
@font-face
语法：
@font-face{font-family:name;src:[url];sRules;}
取值：
-
：
字体名称
-
[url]：
使用绝对或相对地址指定OpenType字体
-
：
样式表定义
说明：
设置嵌入HTML文档的字体。
- 通常使用.ttf(TrueType)和.otf(OpenType)两种字体格式。
- 嵌入HTML文档的字体是指将OpenType字体（压缩的TrueType字体）文件映射到客户端系统，用来提供HTML文档使用该字体，或取代客户端系统已有的同名字体。即让客户端显示客户端所没有安装的字体。
- 微软的IE5已经是开始支持这个属性，但是只支持微软自有的.eot(Embedded Open Type)格式，而其他浏览器直到现在都没有支持这一字体格式。Safari从3.1开始已经可以设置.ttf(TrueType)和.otf(OpenType)两种字体做为自定义字体了。
兼容性：
|
支持版本\类型 |
IE |
Firefox |
Safari |
Chrome |
Opera |
| 版本 |
6-8 不支持 |
4 |
5.1.7 |
13 |
11.5 |
| 版本 |
9-10 不支持 |
|
|
|
|
- IE8及更早浏览器只支持微软自有的.eot(Embedded Open Type)格式。
- IE9-10部分支持ttf和otf字体格式。
@import
语法：
@import <media_query_list>
<media_query_list>：[<media_query>[’,’ <media_query>]*]?
<media_query>：[only | not]? <media_type> [and ]* | [and ]*
：’(’<media_feature>[:]?’)’
取值：
： 使用绝对或相对地址指定导入的外部样式表文件。可以是url(url)或者直接是一个url
<media_query_list>： 指定媒体类型和查询条件。
说明：
指定导入的外部样式表及目标媒体。
-
该规则必须在样式表头部最先声明。并且其后的分号是必需的，如果省略了此分号，外部样式表将无法正确导入，并会生成错误信息。
-
IE使用@import无法引入超过35条的样式表。
-
使用url(url)和直接使用url需要注意的地方：
示例代码：
@import url("global.css");
@import url(global.css);
@import "global.css";
以上3种方式都有效。当使用url(url)的方式时，包住路径的引号可有可无；当直接使用url时，包住路径的引号必须保留。
-
指定媒体查询：
示例代码：
@import url(example.css) screen and (min-width:800px);
@import url(example.css) screen and (width:800px),(color);
@import url(example.css) screen and (min-device-width:500px) and (max-device-width:1024px);
兼容性：
|
支持版本\类型 |
IE |
Firefox |
Safari |
Chrome |
Opera |
| 版本 |
6-7 不支持 |
4 |
5.1.7 |
13 |
11.5 |
| 版本 |
8 不支持 |
|
|
|
|
| 版本 |
9 |
|
|
|
|
- IE7及更早浏览器不支持@import指定媒体类型和媒体查询。
- IE8不支持@import指定媒体查询。
@keyframes
语法：
@keyframes ‘{’ ‘}’;
：[ [ from | to | ]{ sRules } ] [ [ , from | to | ]{ sRules } ]*
取值：
： identifier定义一个动画名称
： 定义动画在每个阶段的样式，即帧动画。
说明：
指定动画名称和动画效果。
-
@keyframes定义的动画名称用来被animation-name所使用。
-
定义动画时，简单的动画可以直接使用关键字from和to，即从一种状态过渡到另一种状态：
示例代码：
@keyframes testanimations{
from{opacity:1;}
to{opacity:0;}
}
其中testanimations是该动画的名字，该动画表示某个东西将逐渐消失。
-
如果复杂的动画，可以混合去设置某个时间段内的任意时间点的样式：
示例代码：
@keyframes testanimations{
from{transform:translate(0,0);}
20%{transform:translate(20,20);}
40%{transform:translate(40,0);}
60%{transform:translate(60,20);}
80%{transform:translate(80,0);}
to{transform:translate(100,20);}
}
-
当然，也可以不适用关键字from和to，而都使用
示例代码：
@keyframes testanimations{
0%{transform:translate(0,0);}
20%{transform:translate(20,20);}
40%{transform:translate(40,0);}
60%{transform:translate(60,20);}
80%{transform:translate(80,0);}
100%{transform:translate(100,20);}
}
注意，这里的0%不能简写成0。
@media
语法：
@media：<media_query_list>
<media_query_list>：[<media_query>[’,’ <media_query>]*]?
<media_query>：[only | not]? <media_type> [and ]* | [and ]*
：’(’<media_feature>[:]?’)’
取值：
<media_type>： 指定设备类型。媒体类型包括：参阅媒体类型。(CSS2)
： 指定媒体查询使用的媒体特性。这类似于CSS属性，如：max-width:960px。(CSS3)
说明：
指定样式表规则用于指定的媒体类型和查询条件。
