CSS中@的使用

用css3做过动画的肯定知道，我们需要用@keyframes name{}来定义一个帧动画，那么这里的这个@符号到底该怎么用呢？

at-rule是一个声明，为CSS提供执行或表现的指令。每个声明以@开头,后紧跟一个可用的关键字，这个关键字充当一个标识符，用于表示CSS该做什么。

@charset

用来指定外部样式表中的字符编码。
例如：@charset "utf-8";

@charset    "utf-8";
body{background:...;}
div{width:...;}
...

注意，被放在HTTP头部的字符集将会覆盖@charset规则。

@import

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

用法1：引入外部css文件

@import    url("global.css");//写了url之后，括号中内容的引号可有可无
@import    url(global.css);
@import    "global.css";//不加url内容必须加引号

用法2：引入css并规定媒体类型

@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);

注意，这一条规则应该放在样式表头部最先声明。

@keyframes

指定动画名称和动画效果。

用法1：简单的动画

@keyframes    testanimations    {
    from    {    opacity:    1;    }
    to    {    opacity:    0;    }
}

用法2：复杂动画

@keyframes    testanimations{
        0%    {    transform:    translate(0,    0);    }
        20%    {    transform:    translate(20px,    20px);    }
        40%    {    transform:    translate(40px,    0);    }
        60%    {    transform:    translate(60px,    20px);    }
        80%    {    transform:    translate(80px,    0);    }
        100%    {    transform:    translate(100px,    20px);    }
}

注意，定义完动画需要配合animation属性来使用。

@font-face

设置嵌入HTML文档的字体。

@font-face    {
        font-family:    'diyfont';
        src:    url('diyfont.eot');    /*    IE9+    */
        src:    url('diyfont.eot?#iefix')    format('embedded-opentype'),    /*    IE6-IE8    */
                url('diyfont.woff')    format('woff'),    /*    chrome、firefox    */
                url('diyfont.ttf')    format('truetype'),    /*    chrome、firefox、opera、Safari,    Android,    iOS    4.2+*/
                url('diyfont.svg#fontname')    format('svg');    /*    iOS    4.1-    */
}

注意，需要兼容当前的主流浏览器，需同时使用TureTpe(.ttf)、Web Open Font Format(.woff)、Embedded Open Type(.eot)、SVG(.svg)四种字体格式。

@media

指定样式表规则用于指定的媒体类型和查询条件。

@import    url(example.css)    screen    and    (width:800px);

<link    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){    …    }