一、At-rule
A kind of declaration statements beginning with @, a semicolon; at the end. Grammar rules: @IDENTIFIER (RULE);.
At-rule is mainly used to express the behavior of CSS reference: https://www.cnblogs.com/wuyinghong/p/3700519.html
1, @ charset- defined character set used by the stylesheet
2, @ import-- told CSS engine include external CSS style sheet
3, @ namespace-- told CSS engine for all content must consider the use of XML namespace prefix
4, the nested at-rules
(1) @ media-- condition set of rules. If the device query conditions meet the criteria defined by the use of the media
(2) @ font-face-- describes a download from external fonts
(3) @ keyframes-- describes the sequence of an intermediate step in the CSS animations
(4) @ page-- describes the layout of the file changes, when you want to print a document.
(5) @ supports-- condition set of rules, if the browser to meet the rules given, put it applies to content
(6) @ document-- condition set of rules, if a CSS style sheet document is used to meet the given criteria, will be applied to all of the content.
Examples:
DOT { display: inline-block; height: 1em; line-height: 1; text-align: left; vertical-align: -.25em; overflow: hidden; } dot::before { display: block; content: '...\A..\A.'; white-space: pre-wrap; animation: dot 3s infinite step-start both; } @keyframes dot { 33% { transform: translateY(-2em); } 66% { transform: translateY(-1em); } }
Two, CSS rules are defined
p {color:red;text-align:center;}
Followed by the following one pair of selector braces {}, flowers have one or more internal braces declaration statement; declaration statements for each use "attribute: value;" form, by a colon, ending with a semicolon.
Comment with "/ *" starts with "* /" end.
CSS rules defined involves two aspects: properties and selectors, Reference: http://phpstudy.php.cn/css3/
Three, CSS properties
Reference: https://www.runoob.com/cssref/css-reference.html
Four, CSS selectors
CSS selectors weights: important (up, adding "! Important" behind the set attribute values), inline (1000), ID (100), Class (10), Tag (1).
CSS selector priority: The selector weight calculation, combination weight value selector superimposed.
If the same weight, then select the last load selector; the same element multiple applications may selectors, the right to a value greater priority.
If the selector is set to class = "AB C", chose not to selector A / B / C in the order, and the order of loading mode A / B / C of the CSS.
1, the basic selector
(1) tag selector (selector element)
Direct write element tag names, such as p. * The more special is that it selects all elements.
(2) class selector
.class, which class is the class attribute of an element need to fill in values.
(3) ID selector
#id, where id is the id attribute value of the element. (HTML pages can be repeated with the same ID)
(4) attribute selector
The basic format of the element [attribute = value] [...], if not part of the "value =" would need to include this attribute indicates the element.
A plurality of attributes can be used simultaneously; and wherein the expanded = ~ =, | =, ^ =, $ =, * =.
2, derived selectors
(1) descendant selectors
More space separated selectors name, such as div div p represents all the elements contained in p, either included directly or indirectly included div.
(2) sub-element selector
With a> sign indicates, for example div> p p represents all the sub-elements in the div, it can be included directly.
(3) (Normal) sibling selectors
~ Number is represented by, for example, div ~ p p brothers represent all of the peer element after the div, but before div p siblings are not included.
(4) adjacent sibling selectors
A + sign, such as represented by div + p div p adjacent the back element. (Div p and on the same level, and p is just behind the div)
(5) and set the selector
With the number represented, such as div, p represents all the div elements and p-elements.
(6) the intersection of the selector
Using dot indicates, for example, only h3.special <h3 class = "special"> such Tags.
Note that it is not the same and h3 .special, middle and without spaces there is a difference.
(7) pseudo-class selector
By: numerals, a selector may simultaneously using a plurality of pseudo-class.
Pseudo-classes to compensate for the lack selector.
(8) pseudo-element selector
He represents :: a, a selector element can only use a dummy.
The nature of pseudo-element is to create a virtual element and then apply the style.
Reprinted from: https: //www.cnblogs.com/ringboow/p/11134373.html