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

Editor to share with you what are the @ rules in css, I believe most people do not know much about it, so share this article for your reference, I hope you will learn a lot after reading this article, let's learn about it!

An at-rule is a CSS statement that begins with @, followed by an identifier, and ends with;.

@ charset

Charset is used to define the character encoding used in the stylesheet. It must be written at the beginning of the stylesheet and must not be preceded by other characters.

/ * @ charset ""; * / @ charset "UTF-8"; @ import

Import is used to import external CSS stylesheet files.

/ * @ import url; * / / * @ import url list-of-media-queries; * / @ import 'custom.css';@import url ("fineprint.css") print;@namespace

Namespace is the @ rule used to define the XML namespace used in CSS stylesheets.

/ * @ namespace? [|]; * / @ namespace url (http://www.w3.org/1999/xhtml);@namespace svg url (http://www.w3.org/2000/svg);@media)

Media is used to define media queries in one or more device types, specific features, and environments to apply styles.

/ * @ media * / @ media screen and (min-width: 900px) {H2 {color:red; font-size:14px;}} web Front-end Development Learning Q-q-u-n: 784783012, share learning methods and small details that need to be paid attention to, and constantly update the latest tutorials and learning methods (detailed front-end project teaching videos, PDF) @ page

@ page is used to modify some CSS properties when printing a document. The @ page rule can only modify margin, orphans, widow, and page breaks of the document, and modifications to other properties are invalid.

/ * * @ page {* *} * / @ page {size: 10in 20in; margin: 10% 20%;} @ keyframes

@ keyframs controls the state of the different steps of CSS animation by defining keyframes in the animation sequence.

/ * @ keyframes * / @ keyframes slidein {from {margin-left: 100%; width: 300%;} to {margin-left: 0%; width: 100%;}} @ supports

@ supports is used to detect whether the rule of the rule group is valid. The rules are similar to @ media

/ * * @ supports {* *} * / @ supports (display: flex) {div {display: flex;}} @ viewport

Viewport is used to set the properties of viewports (viewport).

/ * * @ viewport {* *} * / @ viewport {min-width: 640px; max-width: 800px;} @ viewport {zoom: 0.75; min-zoom: 0.5; max-zoom: 0.9;} @ viewport {orientation: landscape;} @ counter-style

@ counter-style is used to customize the style of counter

/ * * @ counter-style {* *} * / @ counter-style circled-alpha {system: fixed; symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ; suffix: ";}. Items {list-style: circled-alpha;} @ font-face

@ font-face is used to specify a text font for a web page.

/ * * @ font-face {* *} * / @ font-face {font-family: "Bitstream Vera Serif Bold"; src: url ("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");}body {font-family:" Bitstream Vera Serif Bold ", serif} @ doucment

@ document if the condition of the condition group is met, the rule takes effect (deferred to the CSS Level 4 specification)

/ * * @ document name (guide) {* *} * / @ document url (http://www.w3.org/), url-prefix (http://www.w3.org/Style/), domain (mozilla.org), regexp ("https:.*") {/ * this CSS rule will be applied to the following page: + URL is "http://www.w3.org/"" page. + any web page whose URL begins with "http://www.w3.org/Style/"" + any web page whose host name ends with ".mozilla.org" + any web page whose URL begins with "https:" * / * make the above-mentioned pages really ugly * / body {color: purple; background: yellow;}} above is all the content of this article "what are the @ rules in css"? thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

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.