CSS语法之@规则(at-rule)

at-rule由一个@关键字和后续的一个区块组成，如果没有区块，则以分号结束。

@charset

用于提示css文件使用的字符串编码方式，它如果被使用，必须出现在最前面。这个规则只是在给出语法解析阶段前使用，并不影响页面上展示效果。

@charset "utf-8"
 
 

@import

用于引入一个css文件，除@charset规则不会被引入外，可以引入一个文件的全部内容。

 
 

   
   

    
    

   
   
   
   

    
    

     
     @
     
     import 
     
     "mystyle.css";
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     @
     
     import url(
     
     "mystyle.css");
    
    
   
   
 
 

@media

media query 使用规则，它能够对设备的类型进行一些判断，在media的区块中，是普通规则列表。

 
 

   
   

    
    

   
   
   
   

    
    

     
     @
     
     media print {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     body {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
        
     
     font-size: 
     
     10pt;
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     }
    
    
   
   
 
 

@page

page用于分页媒体访问网页时的表现设置，页面是一种特殊的盒模型结构，除了页面本身，还可以设置它周围的盒。

 
 

   
   

    
    

   
   
   
   

    
    

     
     @
     
     page {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     size: 
     
     8.5in 
     
     11in;
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     margin: 
     
     10%;
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         @top-left {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
        
     
     content: 
     
     "Hamlet";
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         @
     
     top-
     
     right {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
        
     
     content: "
     
     Page " 
     
     counter(
     
     page);
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     }
    
    
   
   
 
 

@counter-style

counter-style产生一种数据，用于定义列表项的表现。

 
 

   
   

    
    

   
   
   
   

    
    

     
     @
     
     counter-
     
     style triangle {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     system: 
     
     cyclic;
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     suffix: "";
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     }
    
    
   
   
 
 

@key-frames

key-frames产生一种数据，用于定义动画关键帧。

 
 

   
   

    
    

   
   
   
   

    
    

     
     @
     
     keyframes diagonal-side {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     from {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
        
     
     left: 
     
     0;
    
    
   
   

   
   

    
    

   
   
   
   

    
    
        
     
     top: 
     
     0;
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         }
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     to {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
        
     
     left: 
     
     100px;
    
    
   
   

   
   

    
    

   
   
   
   

    
    
        
     
     top: 
     
     100px;
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
         }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     }
    
    
   
   
 
 

@fontface

fontface用于定义一种字体，iconfont技术就是利用这个特性来实现。

 
 

   
   

    
    

   
   
   
   

    
    

     
     @
     
     font-face {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     font-family: Gentium;
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     src: 
     
     url(http://xxxx);
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     }
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     p {
    
    
   
   

   
   

    
    

   
   
   
   

    
    
    
     
     font-family: Gentium, serif;
    
    
   
   

   
   

    
    

   
   
   
   

    
    

     
     }
    
    
   
   
 
 

@support

support检查环境的特性，它与media比较类似。

@namespace

用于跟xml命名空间配合的一个规则，表示内部的css选择器全都带上特定命名空间。

@viewport

用于设置视口的一些特性，不过兼容性目前不是很好，多数时候被html的meta代替。

其他

以下是一些不太推荐使用的@规则：

@color-profile

@document

@font-feature-values