被忽略的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 */