Shulou(Shulou.com)06/03 Report--

Many beginners are not very clear about the usage of @ rule in CSS. In order to help you solve this problem, the following editor will explain it in detail. People with this need can come and learn. I hope you can get something.

An at-rule is a declaration that provides instructions for CSS to execute or behave. Each declaration starts with @, followed by an available keyword, which acts as an identifier to indicate what CSS should do. This is a common syntax, although each at-rule has other syntax variants.

General rules

The general rules follow the following syntax:

The code is as follows:

@ [KEYWORD] (RULE)

@ charset

This rule defines the character set used by the browser if the stylesheet contains non-ASCII characters (e.g:UTF-8). Note that the character set placed in the HTTP header will override the @ charset rule

The code is as follows:

@ charset "UTF-8"

@ import

This rule instructs the request stylesheet, where, if the content is correct, an external CSS file is introduced.

The code is as follows:

@ import 'global.css'

Although popular CSS preprocessors support @ import, it should be noted that they work differently from native CSS: the preprocessor grabs CSS files and processes them into a CSS file, and each @ import is a separate HTPP request for native CSS.

@ namespace

This rule is useful for applying CSS to XML HTML (XHTML) because the XHTML element can be used as a selector in CSS.

The code is as follows:

/ * 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 rule

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

The code is as follows:

@ [KEYWORD] {/ * Nested Statements * /}

@ document

This rule specifies the condition for the stylesheet: it can only be applied to specific pages. In the case of millet, we provide a URL and then customize the styles for this particular page, which will be ignored on other pages.

The code is as follows:

@ document / * Rules for a specific page * / url (http://css-tricks.com/), / * Rules for pages with a URL that begin 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 {font-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.

The code is as follows:

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

@ keyframes

Among the many CSS attributes, this rule is the basis of Keyframe animation and allows us to mark the beginning and end of the animation.

The code is as follows:

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

@ media

This rule contains conditional declarations that can be used to specify styles for specific screens, which can include screen sizes and are useful in appropriate screen styles.

The code is as follows:

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

Or use styles only when printing documents

The code is as follows:

@ media print {}

@ page

This rule defines styles for individual pages to be printed. In particular, it can set the outer margins for the pseudo elements of the page:: first,: left and: right

The code is as follows:

@ page: first {margin: 1in;}

@ supports

This rule tests whether the browser supports a feature / function, and if the condition is met, a specific style will be applied to these elements. It's a bit like Modernizr, but it does have a CSS attribute.

The code is as follows:

/ * Check one supported condition * / @ supports (display: flex) {.module {display: flex;}} / * Check multiple conditions * / @ supports (display: flex) and (- webkit-appearance: checkbox) {.module {display: flex;}}

At-rule can make CSS do something crazy and interesting. Although the examples in this article are basic, you can see how they use styles for specific conditions to create user experiences and interactions that match specific scenarios.

Is it helpful for you to read the above content? If you want to know more about the relevant knowledge or read more related articles, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.