There are two syntax rules included in CSS:
Ordinary rules: composed of selectors, attributes and values, we mainly used this kind of rules in previous studies;
@Rule: It starts with @ and is followed by a keyword. It is also called "AT rule". It can be divided into " regular rule " and " nested rule " according to the different usage methods.
Let's mainly introduce the @ rule in CSS.
1. General rules
The so-called "regular rules" refer to rules with syntax similar to the following:
@[KEYWORD](RULE);
(1)@charset
@charset is used to set the character encoding used in CSS files. The syntax format is as follows:
@charset<charset>;
Among them, <charset> is the specific character encoding, and the default value is "utf-8".
You need to pay attention to the following points when using it:
① If @charset is set, it must appear at the front of the CSS file, and no characters can appear before @charset;
②Character encoding needs to be wrapped in double quotes;
③ A space needs to be used to separate the @rule name (@charset) and the specific character encoding;
④The semicolon after the rule cannot be omitted;
⑤If multiple @charsets are set, only the first statement is valid;
⑥@charset cannot be used in HTML elements or <style> tags;
⑦If multiple character encoding rules are defined in different ways, their priority order is as follows:
● Character encoding declaration at the beginning of the HTML file;
●Character encoding declaration in HTTP request header;
●The character encoding declaration defined by @charset is used in the CSS file;
●The character encoding declaration set by the charset attribute in the <link> tag (deprecated in HTML5).
The following example demonstrates the use of @charset, as well as several examples of errors:
/*Set the CSS encoding format to UnicodeUTF-8*/@charsetUTF-8;@charsetutf-8;/*Case insensitive*//*Error demonstration*/@charset'iso-8859-15';/*Invalid Yes, wrong quotation marks were used */@charset'UTF-8'; /*Invalid, wrong quotation marks are used*/@charsetUTF-8;/*Invalid, an extra space is used between @charset and the character encoding*/@charsetUTF-8;/*Invalid, there are too many @ rules before A space*/@charsetUTF-8;/*Invalid, character encoding needs to be wrapped in double quotes*/
(2) @import
@import is used to import other style files into the current CSS style file. All content except @charset in other style sheet files can be introduced through @import. In addition, @import must also be placed at the front of the style file. The syntax format of @import is as follows:
@import<url><media_query_list>
Among them, <url> is the external style sheet file path to be imported using an absolute or relative path. You can also use the url() function to specify the file path; <media_query_list> is an optional parameter, used to specify the conditions of the media query. Use commas to separate multiple conditions.
In actual projects, it is not recommended to use @import too much, because it will cause a lot of extra requests and block the loading of other files.
When using @import, you also need to pay attention to the following points:
●@import must be declared first at the beginning of the style sheet file, and the declaration must be ended with a semicolon. If the trailing semicolon is omitted, the external style sheet may not be imported correctly;
●Using @import in IE browser can only introduce up to 35 style sheets.
The following example demonstrates the use of @import:
@importurl(global.css);@importurl(global.css);@importglobal.css;@importurl(fineprint.css)print;@importurl(bluish.css)projection,tv;@import'cust om.css';@importurl(chrome://communicator/skin/);@importcommon.cssscreen,projection;@importurl('landscape.css')screenand(orientation:landscape);The above definition methods are all valid. When using url() to set the path of the style sheet file, the quotation marks of the wrapping path are optional; when using a specific path to directly set the path of the style sheet file, the wrapping path of Quotation marks must be retained.
(3)@namespace
@namespace is used to define the @ rule of the XML namespace in the CSS style sheet. It can set the specified namespace for all selectors in the current style file. @namespace is typically used to handle documents containing multiple namespaces, such as inline SVG in HTML5, MathML, or XML mixed with multiple vocabularies.
@namespace must be defined after all @charset and @import, and before any other style declarations in the style sheet. @namespace can be used to define a default namespace. When the default namespace is specified, all universal selectors and class selectors (but not attribute selectors) will only be applied to elements in this namespace. @namespace can also be used to define a namespace prefix. When a general, class, or attribute selector is preceded by a namespace prefix, this selector will only match elements whose namespace matches the element name or attribute.
The following example demonstrates the use of @namespace:
/*Default namespace*/@namespaceurl(XML-namespace-URL);@namespaceXML-namespace-URL;/*Namespace prefix*/@namespaceprefixurl(XML-namespace-URL);@namespaceprefixXML-namespace-URL;
2. Nested rules
The so-called "nested rules" means that the @ rule needs to be followed by a curly bracket { }, which contains some other rule declarations, similar to the following:
@[KEYWORD]{/*Nested statements*/}(1)@media
@media is used to apply a certain part of the style sheet (style information in curly brackets) based on the results of one or more media queries. Using @media you can specify a set of media queries and a CSS style block if and only if the media The specified CSS styles are only applied to the document when the query matches the device being used.
Media query is a set of conditions used to determine device information, such as the device's width and height value, aspect ratio, color, resolution, etc. When the conditions match, the nested style information will be executed.
@media can be placed anywhere in the style sheet or in other @ rules. The sample code is as follows:
@mediaalland(min-width:1280px){/*width greater than 1280*/}@media(-webkit-min-device-pixel-ratio:1.5),(min-resolution:2dppx){/*Retina screen*/} @mediaprint{/*print*/}@media screen,screen9{/*IE7,IE8*/}@mediascreen9{/*IE7*/}(2)@page
@page is used to modify certain CSS properties when printing a document. It should be noted that using @page you can only modify some CSS properties, such as the outer spacing property margin, printing-related orphans, windows properties, and page-break-* properties, other CSS properties will be ignored.
/*Indicates that the top and left margins of the first page when printing are both 50%*/@page:first{margin-left:50%;margin-top:50%;}(3)@supports
@supports is used to check whether the browser supports a certain CSS feature, also known as "feature query". The syntax structure of this rule is as follows:
@supports(rule)[operator(rule)]*{sRules};Among them, rule is a specific CSS style and must be wrapped in parentheses; the optional values of operator are or, and, and not. Multiple CSS styles can be specified through the operator parameter.
@supports can be defined at the top of a style file or within other nested rules. However, @supports is still in the experimental stage. Before using it, you must first confirm whether the browser supports it.
The following example demonstrates the use of @supports:
/*CSS style to be used when the browser supports the display:grid attribute*/@supports(display:grid){div{display:grid;}}/*CSS to be used when the browser does not support the display:grid attribute style*/@supportsnot (display:grid){div{float:right;}}/*Check multiple conditions at the same time*/@supports(display:flex)and(-webkit-appearance:checkbox){.module{display:flex;}}(4) @font-face
@font-face is used to load the specified font from the remote server or the user locally. The syntax format is as follows:
@font-face{font-family:<identifier>;src:<url>[format(<string>)][,<url>[format(<string>)]]*;<font>;}Parameter description is as follows:
●<identifier>: font name;
●<url>: Use url() (remote font) or local() (local font) to specify the font storage path, which can be a relative path or an absolute path;
●<string>: used to specify the format of custom fonts, such as the following types: truetype, opentype, embedded-opentype, svg, etc.;
●<font>: Define font related styles.
Tip: @font-face can be placed at the top of a css style sheet or within other nested rules. If you use both the local() function and the url() function to load fonts, the local font defined in the local() function will be loaded first. If not found, the remote font defined in the url() function will be loaded.
The following example demonstrates the use of @font-face:
/*Define @font-face rules*/@font-face{/*Specify the font name*/font-family:OpenSans;/*Specify the path to the font file*/src:url(/fonts/OpenSans-Regular-webfont. woff2)format(woff2),url(/fonts/OpenSans-Regular-webfont.woff)format(woff);}/*Font application*/p{font-family:OpenSans;}(5)@keyframes
@keyframes is used to define the style of animation keyframes (or waypoints) in CSS3 to control the intermediate steps in the animation sequence. After defining this rule, you need to use it through the animation-name attribute. Keyframe sequences are named by percentages, with the starting and ending states being from and to representing 0% and 100% respectively.
The syntax format of @keyframes is as follows:
@keyframes<identifier>{<keyframes-blocks>}Among them, <identi fier> is used to define the name of the animation; <keyframes-blocks> is used to define the style of the animation at each stage, that is, frame animation.
The use of @keyframes is demonstrated in the following example:
/*Statement*/@keyframessslidein{from{margin-left:100%;width:300%;}to{margin-left:0%;width:100%;}}@keyframessslideout{0%{top:0;} 50%{top: 30px;}100%{top:60px;}}/*Apply*/p{animation-name:slidein;animation-duration:4s;}div{animation-name:slideout;animation-duration:4s;}(6)@document
@document is used to limit the scope of styles in the document based on the URL of the document. This attribute can be used to define exclusive styles for specified users. Currently @document is still in the experimental stage, and the specific standards will be determined in CSS4.
The available functions in @document are as follows:
●url(): matches the entire URL;
●url-prefix(): Whether the URL of the matching document begins with the value specified by the parameter;
●domain(): Whether the domain name of the matching document is the domain name specified in the parameter or its subdomain name;
●regexp(): Whether the URL of the matching document matches the regular expression specified in the parameter. The expression must match the entire URL.
Tip: Parameters supplied to the url(), url-prefix() and domain() functions can be wrapped without quotation marks, but parameters supplied to the regexp() function must be wrapped in quotation marks.
The following example demonstrates the use of @document:
@documenturl(http://www.weixueyuan.net/),url-prefix(http://www.weixueyuan.net/Style/),domain(weixueyuan.net),regexp(https:.*){/* This CSS rule will be applied to the following web page:+URL is http:/ The page of /www.weixueyuan.net/. + Any webpage whose URL begins with http://www.weixueyuan.net/Style/ + All webpages under the domain name weixueyuan.net + Any webpage whose URL begins with https:*// *Define style*/body{color:purple;background:yellow;}