css语法和规则

示例代码：

div{color:#f00!important;}
div{color:#000;}

在上述代码中，IE6及以下浏览器中div的文本颜色表现与其它浏览器一致，都为#f00

：

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

• 该规则后面的分号是必需的，如果省略了此分号，会生成错误信息。
• 在外部css文件中写法如下：

  示例代码：

   

  语法：

  @font-face{font-family:name;src:;sRules;}

  取值：

  ：

  字体名称

  ：

  使用绝对或相对地址指定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 #1	4	5.1.7	13	11.5
  版本	9-10 #2

  1. IE8及更早浏览器只支持微软自有的.eot(Embedded Open Type)格式。
  2. IE9-10部分支持ttf和otf字体格式。

  示例：

  语法：

  @import

  ：[[‘,‘ ]*]?

   

  ：[only | not]? [and ]* | [and ]*

  ：‘(‘[:]?‘)‘

  取值：

  ：

  使用绝对或相对地址指定导入的外部样式表文件。可以是url(url)或者直接是一个url

  ：

  指定媒体类型和查询条件。

  说明：

  指定导入的外部样式表及目标媒体。

  • 该规则必须在样式表头部最先声明。并且其后的分号是必需的，如果省略了此分号，外部样式表将无法正确导入，并会生成错误信息。
  • 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

  1. IE7及更早浏览器不支持@import指定媒体类型和媒体查询。
  2. IE8不支持@import指定媒体查询。

  示例：

   

  语法：

  @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。

  兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质

  支持版本\类型	IE	Firefox	Safari	Chrome	Opera
  版本	6-9	4	5.1.7	13-23	11.5
  版本	10	5-18			12
  版本		16			12.1

  示例：

  语法：

  @media：

   

  ：[[‘,‘ ]*]?

   

  ：[only | not]? [and ]* | [and ]*

  ：‘(‘[:]?‘)‘

  取值：

  ：

  指定设备类型。媒体类型包括：参阅媒体类型。(CSS2)

  ：

  指定媒体查询使用的媒体特性。这类似于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);
    
    

  • 列举几种使用方式：

    @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

  1. IE8及更早浏览器不支持媒体查询。

  示例：

  语法：

  @page { sRules }

  取值：

  ：

  页面标识符

  ：

  打印伪类:first, :left, :right

  说明：

  设置页面容器的版式，方向，边空等。

  兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质

  支持版本\类型	IE	Firefox	Safari	Chrome	Opera
  版本	6-7	4-6	5.1.7	13	11.5
  版本	8

  示例：

  语法：

  /* 这里是注释内容 */

  说明：

  用于注释CSS中的某些内容。

  兼容性：

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
  • 橙色 = 实验性质

  支持版本\类型	IE	Firefox	Safari	Chrome	Opera
  版本	6	4	5.1.7	13	11.5

  示例：