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