css stylesheets top list of two rules of rules of composition, called at-rule rule, is at the rules, the other is qualified rule, which is normal rules. General rule contained in our work commonly used in a variety of selectors, property values, functions, and so on. Do not expand here described, under the rules of @ with the main speaker.

at-rule

@ at-rule consists of a keyword and a subsequent block composition, if not block, places the end of the semicolon. These at-rule to use the opportunity to develop in much less than the normal rules, so most of its content, you may feel very strange.

It is at these rules have some of the advanced features necessary CSS content. qualified rule refers to the general rules of CSS, which we are familiar, consisting of the rules specified by the selectors and attributes.

@charset

Tips for @charset CSS file character encoding used, if it is used, must appear first. This rule is only given before the parsing stage use, does not affect the display of results on the page.

@charset "utf-8";

@import

@import for the introduction of a CSS file and will not be introduced in addition to @charset rules, @ import may introduce the entire contents of another file.

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

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

By code, we can see that, import also supports supports and media query form.

@media

famous media is media query rules used, and it is possible to make some determination of the type of device. Within the media block, a common list of rules.

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

@page

Performance settings page for paging Media Access Web page, the page is a special box model structure, in addition to the page itself, you can also set it around the box.

@page {
  size: 8.5in 11in;
  margin: 10%;

  @top-left {
    content: "Hamlet";
  }
  @top-right {
    content: "Page " counter(page);
  }
}

@ counter-style

to produce a counter-style data entry for rendering definition list.

@counter-style triangle {
  system: cyclic;
  symbols: ‣;
  suffix: " ";
}

@ key-frames

A data generating keyframes, for defining a key frame animation.

@keyframes diagonal-slide {

  from {
    left: 0;
    top: 0;
  }

  to {
    left: 100px;
    top: 100px;
  }

}

@ fontface

fontface used to define a font, icon font technology is the use of this feature to achieve.

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

p { font-family: Gentium, serif; }

@ support

Check the support characteristics of the environment, which is more similar to the media.

@ namespace

For a rule with XML namespaces fit, the internal CSS selectors all bring specific namespace.

@ viewport

Some of the features used to set the viewport, but compatibility is not very good at present, most of the time is replaced by the html meta.

other:

In addition to these, some currently not recommended at regular use.

@ Color-profile is CSS properties SVG1.0 introduced, but to realize the situation is not very good.
@document not discussed clearly, it was postponed to CSS4 in.
@ Font-feature-values. todo check.

Rule in the CSS with @