Usage of the @ rule in CSS

This article mainly introduces some of the CSS in the usage summary of the rules, is the basic knowledge of CSS primer learning, the need for friends can refer to the following

At-rule is a statement that provides the CSS with instructions for performing or how to behave. Each declaration begins with an @, followed by an available keyword, which acts as an identifier that represents what the CSS does. This is a common syntax, although each at-rule has other syntactic variants.
General rules

The general rules follow the following syntax:

@[keyword] (RULE);

@charset
This rule defines the character set used by the browser if the style sheet contains non-ASCII characters (E.G:UTF-8). Note that the character set placed in the HTTP header will overwrite the @charset rule

@charset "UTF-8";

@import
This rule indicates that the request style sheet, in this row, if the content is correct, will introduce an external CSS file.

@import ' Global.css ';

While the popular CSS preprocessor supports @import, it should be noted that they work differently from native CSS: the preprocessor fetches CSS files and processes them into a CSS file, and for native CSS, each @import is a separate HTPP request.
@namespace
This rule is useful for applying CSS to XML HTML (XHTML), because XHTML elements can be used as a selector in CSS.

/* Namespace for XHTML *        /@namespace URL (http://www.w3.org/1999/xhtml);        /* Namespace for SVG embedded in XHTML *        /@namespace svg url (http://www.w3.org/2000/svg);

Nesting rules

Nested rules contain additional subset declarations, some of which can only be used for specific situations.

@[keyword] {/          * Nested statements */        }

@document
This rule specifies the criteria for a style sheet: apply only to a specific page. For a chestnut, we provide a URL and then customize the style for that particular page, which is ignored on other pages.

@document           /* Rules for a specific page *          /url (http://css-tricks.com/),/          * rules for pages with a URL that Begi N with ... *          /Url-prefix (http://css-tricks.com/snippets/),/          * Rules for any page hosted on a domain *          /domain ( css-tricks.com),          /* Rules for all secure pages *          /RegExp ("https:.*")        {/          * Start styling */          body {fo Nt-family:comic Sans; }        }

@font-face
This rule allows custom fonts to be loaded on Web pages, with varying degrees of support for custom fonts, but this rule accepts statements to create and provide these fonts.

@font-face {          font-family: ' Mywebfont ';          src:  url (' myfont.woff2 ') format (' Woff2 '),                url (' myfont.woff ') format (' Woff ');        }

@keyframes
In many CSS properties, this rule is the basis for Keyframe animation and allows us to mark the beginning and end of the animation.

@keyframes Pulse {          0% {            background-color: #001f3f;          }          100% {            background-color: #ff4136;          }        }

@media
This rule contains conditional declarations that you can use to specify styles for specific screens that can contain screen sizes and are useful in a fit-screen style.

/* IPhone in Portrait and Landscape */@media only screen and           (min-device-width:320px) and           (Max-device-widt h:480px) and          (-webkit-min-device-pixel-ratio:2) {            . module {width:100%;}        }

or apply styles only when the document is printed

@media Print {        }

@page
This rule defines the style for individual pages that will be printed. In particular, it can set margins for page artifacts:: First,: Left, and: right

@page: first {          margin:1in;        }

@supports
This rule tests that the browser knows whether a feature/feature is supported, and if the condition is met, a particular style will be applied to those elements. A bit like Modernizr, but it's really a CSS property.

/* Check One supported condition *        /@supports (Display:flex) {          . module {display:flex;}        }        /* Check Multiple conditions *        /@supports (Display:flex) and (-webkit-appearance:checkbox) {          . module {display: Flex }        }

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!