被忽略的CSS规则

说起CSS规则，除了普通规则（属性和值，key:value),可能大家都会想到@media,@keyframes,@fontface等常用的，那剩余的大家是否有所了解呢。

我们先来看一看CSS有哪些规则：

　　CSS的顶层样式表由两种规则组成的规则列表构成，⼀种被称为 at-rule，也就是at 规则，另⼀种是 qualified rule，也就是普通规则。at-rule由⼀个 @ 关键字和后续的⼀个区块组成，如果没有区块，则以分号结束。这些at-rule在开发中使⽤机会远远小于普通的规则。qualified rule则是指普通的CSS规则，由选择器和属性指定构成的规则。

下面我们来看看有哪些at规则

at规则：

　　@charset

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

　　　　@charset "utf-8";

　　

　　@import

　　　　@import⽤于引⼊⼀个CSS文件，除了@charset规则不会被引入，@import可以引⼊另⼀个文件的全部内容。

　　@import "mystyle.css";
　　@import url("mystyle.css");

　　@import [ <url> | <string> ]
　　[ supports( [ <supports-condition> | <declaration> ] ) ]?
　　<media-query-list>? ;

　　　　import还⽀持 supports 和media query形式

　　

　　@media

　　　　媒体查询，这个是很常用的，对设备进行判断，内部是一些普通的规则

　　　@media print {
　　　　　body { font-size: 10px }
　　　}

 

　　@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;
　　　　symbols: ‣;
　　　　suffix: " ";
　　}

　　

　　@ key-frames

　　　　keyframes产⽣⼀种数据，⽤于定义动画关键帧。

　　@keyframes diagonal-slide {
　　　　from {
　　　　　　left: 0;
　　　　　　top: 0;
　　　　　　}
　　　　to {
　　　　　　left: 100px;
　　　　　　top: 100px;
　　　　　　}
　　　　}

　　　　

　　@ fontface
　　　　fontface⽤于定义⼀种字体，icon font技术就是利⽤这个特性来实现的。

　　@font-face {
　　　　font-family: Gentium;
　　　　src: url(http://example.com/fonts/Gentium.woff);
　　　　}
　　p { font-family: Gentium, serif; }

　　

　　@ support

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

　　@ namespace
　　　　⽤于跟XML命名空间配合的⼀个规则，表示内部的CSS选择器全都带上特定命名空间。

　　@ viewport

　　　　⽤于设置视⼝的⼀些特性，不过兼容性⽬前不是很好，多数时候被html的meta代替。

　　@color-profile

　　　　是 SVG1.0 引⼊的CSS特性，但是实现状况不怎么好。
　　@document

　　　　还没讨论清楚，被推迟到了CSS4中。
　　@font-feature-values 

　　　　允许作者在font-variant-alternates 中使用通用名称中使用通用名称，用于在OpenType中以不同方式激活功能。它允许在使用几种字体时简化CSS。

　　　　

　　@font-feature-values Font One { /* How to activate nice-style in Font One */
  　　　　@styleset {
    　　　　nice-style: 12;
  　　　　}
　　　}
 
　　@font-feature-values Font Two { /* How to activate nice-style in Font Two */
  　　　　@styleset {
    　　　　nice-style: 4;
  　　　　}
　　　　} 
　　.nice-look 
　　　　{ font-variant-alternates: styleset(nice-style); } /* Independent of the font */