css语法和规则

语法：

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

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>!important_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
.test{color:#f00!important;color:#000;}
.test2{color:#f00!important;}
.test2{color:#000;}

语法：

@charset <charset>;

取值：

<charset>：
字符编码。如：@charset "utf-8";

说明：
在外部样式表文件内使用。指定该样式表使用的字符编码。
- 该规则后面的分号是必需的，如果省略了此分号，会生成错误信息。
- 在外部css文件中写法如下：
  示例代码：
  
  语法：
  
  @font-face{font-family:name;src:<url>;sRules;}
  
  取值：
  
  <name>：
  字体名称
  <url>：
  使用绝对或相对地址指定OpenType字体
  <sRules>：
  样式表定义
  
  说明：
  
  设置嵌入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 ^#1 4 5.1.7 13 11.5
  版本 9-10 ^#2
  IE8及更早浏览器只支持微软自有的.eot(Embedded Open Type)格式。
  IE9-10部分支持ttf和otf字体格式。
  
  示例：
  
  <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>@font-face_CSS参考手册_web前端开发参考手册系列</title> <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" /> <style> @font-face{ font-family:YH; src:url(http://domain/fonts/MSYH.TTF); } body{font-family:'YH';} </style> </head> <body> <div>如果你的机器没有安装微软雅黑Microsoft YaHei，可以玩玩看。如果你用的是老版本IE，很遗憾你得找找看.eot格式的该字体</div> </body> </html>
  
  语法：
  
  @import <url> <media_query_list>
  
  <media_query_list>：[<media_query>[',' <media_query>]*]?
  
  <media_query>：[only | not]? <media_type> [and <expression>]* | <expression> [and <expression>]*
  
  <expression>：'('<media_feature>[:<value>]?')'
  
  取值：
  
  <url>：
  使用绝对或相对地址指定导入的外部样式表文件。可以是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 ^#1 4 5.1.7 13 11.5
  版本 8 ^#2
  版本 9
  IE7及更早浏览器不支持@import指定媒体类型和媒体查询。
  IE8不支持@import指定媒体查询。
  
  示例：
  
  <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>@import_CSS参考手册_web前端开发参考手册系列</title> <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" /> <style> @import url("style.css") screen, print; </style> </head> <body> </body> </html>
  
  语法：
  
  @keyframes <identifier> '{' <keyframes-blocks> '}';
  
  <keyframes-blocks>：[ [ from | to | <percentage> ]{ sRules } ] [ [ , from | to | <percentage> ]{ sRules } ]*
  
  取值：
  
  <identifier>：
  identifier定义一个动画名称
  <keyframes-blocks>：
  定义动画在每个阶段的样式，即帧动画。
  
  说明：
  
  指定动画名称和动画效果。
  @keyframes定义的动画名称用来被animation-name所使用。
  定义动画时，简单的动画可以直接使用关键字from和to，即从一种状态过渡到另一种状态：
  
  示例代码：
  
  @keyframes testanimations{from{opacity:1;}to{opacity:0;} }
  
  其中testanimations是该动画的名字，该动画表示某个东西将逐渐消失。
  
  如果复杂的动画，可以混合<percentage>去设置某个时间段内的任意时间点的样式：
  
  示例代码：
  
  @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，而都使用<percentage>：
  
  示例代码：
  
  @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。
  
  兼容性：
  
  浅绿 = 支持
  红色 = 不支持
  墨绿 = 部分支持
  橙色 = 实验性质
  支持版本\类型 IE Firefox Safari Chrome Opera
  版本 6-9 4 5.1.7 13-23 11.5
  版本 10 5-18 12
  版本 16 12.1
  
  示例：
  
  <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>@keyframes_CSS参考手册_web前端开发参考手册系列</title> <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" /> <style> #sport{position:relative;width:500px;height:400px;border:1px solid #ddd;} #staff{position:absolute;z-index:3;bottom:10px;left:10px;overflow:hidden;width:180px;height:8px;border-radius:3px;background:#ddd;line-height:20; -moz-animation:staff 3s linear; -webkit-animation:staff 3s linear; -o-animation:staff 3s linear; -ms-animation:staff 3s linear; animation:staff 3s linear; } #ball{position:absolute;z-index:3;bottom:20px;left:90px;overflow:hidden;width:30px;height:30px;border-radius:15px;box-shadow:0 0 10px rgba(204,102,0,.8);background:#F6D66E;background:-moz-linear-gradient(top,#fff,#F6D66E);background:-webkit-linear-gradient(top,#fff,#F6D66E);background:-o-linear-gradient(top,#fff,#F6D66E);background:-ms-linear-gradient(top,#fff,#F6D66E);background:linear-gradient(top,#fff,#F6D66E);line-height:20; -moz-animation:ball 3s linear; -webkit-animation:ball 3s linear; -o-animation:ball 3s linear; -ms-animation:ball 3s linear; animation:ball 3s linear; } @-moz-keyframes ball{ 0%{-moz-transform:translate(0,0);} 5%{-moz-transform:translate(-90px,-100px);} 18%{-moz-transform:translate(0,-350px);} 35%{-moz-transform:translate(200px,0);} 46%{-moz-transform:translate(380px,-160px);} 60%{-moz-transform:translate(250px,-350px);} 78%{-moz-transform:translate(60px,0);} 100%{-moz-transform:translate(0,0);} } @-webkit-keyframes ball{ 0%{-webkit-transform:translate(0,0);} 5%{-webkit-transform:translate(-90px,-100px);} 18%{-webkit-transform:translate(0,-350px);} 35%{-webkit-transform:translate(200px,0);} 46%{-webkit-transform:translate(380px,-160px);} 60%{-webkit-transform:translate(250px,-350px);} 78%{-webkit-transform:translate(60px,0);} 100%{-webkit-transform:translate(0,0);} } @-o-keyframes ball{ 0%{-o-transform:translate(0,0);} 5%{-o-transform:translate(-90px,-100px);} 18%{-o-transform:translate(0,-350px);} 35%{-o-transform:translate(200px,0);} 46%{-o-transform:translate(380px,-160px);} 60%{-o-transform:translate(250px,-350px);} 78%{-o-transform:translate(60px,0);} 100%{-o-transform:translate(0,0);} } @-ms-keyframes ball{ 0%{-ms-transform:translate(0,0);} 5%{-ms-transform:translate(-90px,-100px);} 18%{-ms-transform:translate(0,-350px);} 35%{-ms-transform:translate(200px,0);} 46%{-ms-transform:translate(380px,-160px);} 60%{-ms-transform:translate(250px,-350px);} 78%{-ms-transform:translate(60px,0);} 100%{-ms-transform:translate(0,0);} } @keyframes ball{ 0%{transform:translate(0,0);} 5%{transform:translate(-90px,-100px);} 18%{transform:translate(0,-350px);} 35%{transform:translate(200px,0);} 46%{transform:translate(380px,-160px);} 60%{transform:translate(250px,-350px);} 78%{transform:translate(60px,0);} 100%{transform:translate(0,0);} } @-moz-keyframes staff{ 0%{-moz-transform:translate(0,0);} 6%{-moz-transform:translate(260px,0);} 20%{-moz-transform:translate(300px,0);} 30%{-moz-transform:translate(300px,0);} 40%{-moz-transform:translate(200px,0);} 65%{-moz-transform:translate(40px,0);} 79%{-moz-transform:translate(0,0);} 100%{-moz-transform:translate(0,0);} } @-webkit-keyframes staff{ 0%{-webkit-transform:translate(0,0);} 6%{-webkit-transform:translate(260px,0);} 20%{-webkit-transform:translate(300px,0);} 30%{-webkit-transform:translate(300px,0);} 40%{-webkit-transform:translate(200px,0);} 65%{-webkit-transform:translate(40px,0);} 79%{-webkit-transform:translate(0,0);} 100%{-webkit-transform:translate(0,0);} } @-o-keyframes staff{ 0%{-o-transform:translate(0,0);} 6%{-o-transform:translate(260px,0);} 20%{-o-transform:translate(300px,0);} 30%{-o-transform:translate(300px,0);} 40%{-o-transform:translate(200px,0);} 65%{-o-transform:translate(40px,0);} 79%{-o-transform:translate(0,0);} 100%{-o-transform:translate(0,0);} } @-ms-keyframes staff{ 0%{-ms-transform:translate(0,0);} 6%{-ms-transform:translate(260px,0);} 20%{-ms-transform:translate(300px,0);} 30%{-ms-transform:translate(300px,0);} 40%{-ms-transform:translate(200px,0);} 65%{-ms-transform:translate(40px,0);} 79%{-ms-transform:translate(0,0);} 100%{-ms-transform:translate(0,0);} } @keyframes staff{ 0%{transform:translate(0,0);} 6%{transform:translate(260px,0);} 20%{transform:translate(300px,0);} 30%{transform:translate(300px,0);} 40%{transform:translate(200px,0);} 65%{transform:translate(40px,0);} 79%{transform:translate(0,0);} 100%{transform:translate(0,0);} } </style> </head> <body> <div id="sport"> <span id="ball">弹球</span> <span id="staff">滑杆</span> </div> </body> </html>
  
  语法：
  
  @media：<media_query_list>
  
  <media_query_list>：[<media_query>[',' <media_query>]*]?
  
  <media_query>：[only | not]? <media_type> [and <expression>]* | <expression> [and <expression>]*
  
  <expression>：'('<media_feature>[:<value>]?')'
  
  取值：
  
  <media_type>：
  指定设备类型。媒体类型包括：参阅媒体类型。(CSS2)
  <expression>：
  指定媒体查询使用的媒体特性。这类似于CSS属性，如：max-width:960px。(CSS3)
  
  说明：
  
  指定样式表规则用于指定的媒体类型和查询条件。
  IE8及以下只能实现CSS2中的部分，即只可以设置媒体类型。
  
  媒体查询可以被用在CSS中的@media和@import规则上，也可以被用在HTML和XML中。
  
  示例代码：
  
  @media screen and (width:800px){ … } @import url(example.css) screen and (width:800px); <link media="screen and (width:800px)" rel="stylesheet" href="example.css" /> <?xml-stylesheet media="screen and (width:800px)" rel="stylesheet" href="example.css" ?>
  
  列举几种使用方式：
  
  @media all and (width:1024px){body{color:#f00;} } @media all and (device-height:800px){ … } @media all and (orientation:landscape){ … } @media all and (device-aspect-ratio:16/10){ … } @media all and (min-color:1){ … } @media all and (monochrome:0){ … } @media all and (grid:0){ … }
  
  兼容性(指定媒体类型)：
  
  浅绿 = 支持
  红色 = 不支持
  墨绿 = 部分支持
  橙色 = 实验性质
  支持版本\类型 IE Firefox Safari Chrome Opera
  版本 6-8 ^#1 4 5.1.7 13 11.5
  版本 9
  IE8及更早浏览器不支持媒体查询。
  
  示例：
  
  <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>@media_CSS参考手册_web前端开发参考手册系列</title> <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" /> <style> .test,.test2{display:none;} /* 本条为CSS2部分，IE8及以下只支持本条 */ @media screen{ body{color:#f00;} } /* 下列为CSS3部分 */ @media screen and (min-width:960px){ body{background:#999;} } @media screen and (device-width:1024px){ .test{display:block;} } @media screen and (width:1024px){ .test2{display:block;} } </style> </head> <body> <div>Media Queries媒体查询</div> <div class="test">如果你的显示器水平分辨率为1024px的话将能看到本条规则的效果（取决于输出设备屏幕分辨率的大小，不随包括浏览器在内的窗体大小而改变）</div> <div class="test2">如果视口宽度为1024px的话将能看到本条规则的效果（随包括浏览器在内的窗体大小而改变）</div> </body> </html>
  
  语法：
  
  @page <label> <pseudo-classes>{ sRules }
  
  取值：
  
  <label>：
  页面标识符
  <pseudo-class>：
  打印伪类:first, :left, :right
  
  说明：
  
  设置页面容器的版式，方向，边空等。
  
  兼容性：
  
  浅绿 = 支持
  红色 = 不支持
  墨绿 = 部分支持
  橙色 = 实验性质
  支持版本\类型 IE Firefox Safari Chrome Opera
  版本 6-7 4-6 5.1.7 13 11.5
  版本 8
  
  示例：
  
  <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>@page_CSS参考手册_web前端开发参考手册系列</title> <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" /> <style> @page:first{margin:300px;} </style> </head> <body> <div>@page:first{margin:300px;}</div> </body> </html>
  
  语法：
  
  /* 这里是注释内容 */
  
  说明：
  
  用于注释CSS中的某些内容。
  
  兼容性：
  
  浅绿 = 支持
  红色 = 不支持
  墨绿 = 部分支持
  橙色 = 实验性质
  支持版本\类型 IE Firefox Safari Chrome Opera
  版本 6 4 5.1.7 13 11.5
  
  示例：
  
  <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8" /> <title>comment_CSS参考手册_web前端开发参考手册系列</title> <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" /> <style> .test{color:#f00;/*红色*/} </style> </head> <body> <div class="test">CSS中的注释语法：/* 注释的内容 */</div> </body> </html>