"CSS authoritative guide" reading notes

I. CSS and documentation
Cascade
CSS prescribes conflicting rules, collectively referred to as cascading. These rules define when a style conflicts with a high priority.
Common priority decisions:
1. Developer Style > Reader style > Browser style (unless using!important tag)
2. ID selector > (pseudo) class selector > element selector
3. Take the same weight as the later defined style

Elements
element is the basis of the document structure. In CSS, elements are usually divided into two forms: replacement and non-replacement elements.
The replacement element refers to the part that replaces the content of the element that is not directly represented by the contents of the document, such as IMG, input, which replaces the contents of the element with an attribute. non-replacement element content is displayed by the user agent (typically a browser) in the box generated by the element, such as span, Li, and other tags that display the contents of the document directly.
In addition, CSS divides elements into: block-level elements and inline elements .
block-level elements generate an element box that, by default, fills the contents of its parent element, with no other elements, such as tags P and div, next to it. The inline element generates an element box within a line of text without interrupting the line of text, such as markers A, strong, and EM.

Link tag
Allows the HTML author to associate the document containing the link tag with other documents, using this tag to link style sheets and documents, in the format:

<reltype hrefmedia = "all"  >

Rel: Specifies the relationship between the document and the linked document, where stylesheet represents the external style sheet for the document.
Type: MIME type of the linked document
HREF: The location of the linked document
Media: Specifies the device that is displayed by the linked document

s tyle elements and @import directives
You can use the style element to include a stylesheet that implements a similar effect as link. CSS requires the @import directive to appear before other rules in the stylesheet, and if it is followed by other instructions, the compatible user agent (IE) ignores it, taking into account that user requirements must precede other CSS rules.

<styletype= "Text/css"><!--@import URL (test.css);/*@import must be first*/@import url (css/sheet2.css) all;body{Color:Red;}H1{Color:Blue;} -</style>

Where URLs can use relative and absolute addresses, at the end you can specify which devices the linked document displays. To accommodate backward accessibility, avoid older browsers because the <style> tag does not recognize the ignore and display the contents as text directly on the page, you can add <!--inside the style parameter. The older browsers will not only ignore the style tag, but also ignore the declaration, because the HTML comment will not be displayed, and the browser that understands the CSS will still be able to read the stylesheet normally.

Small Knowledge Points:
　 CSS supports annotations through the/*......*/format, but does not allow for nested annotations.
A single element can specify a style through the style property, rather than a nested or external style sheet, which is called an inline style, and the style property can be associated with any other HTML tag except for the markup that appears outside the body. Inline styles are not recommended at this time (similar to font)

Second, selector

CSS rule structure

CSS can apply specific rules to a set of element types in a document. Each rule has two basic parts: selectors and declaration blocks, which consist of one or more declarations, each of which is an attribute-value pair, each of which consists of a series of rules, as shown in the structure:

html {color : black ;}

declaration and keywords
p { Font : medium Helvetica ;}
if you declare an incorrect property or an incorrect or a property, the entire declaration is ignored.

selector group and declaration group
groups apply the same style to multiple elements. The easiest way to achieve this is as follows: h2,p {color : gray ;} Place H2 and p on the left side of the declaration block, separated by commas so that a rule is defined, and the style on the right is applied to the elements referenced by these two selectors. Where commas tell the browser, rules apply to different selectors.
Of course, you can also group claims, implement selectors to apply multiple styles:

{    font:18px Helvetica;      color:purple;      background:Aqua;}        

　　CSS2 introduces a new simple selector called a wildcard selector, which is displayed as an asterisk (*). This selector can match any element, like a wildcard, such as to make each element in a document red:* {color: red;} This declaration is equivalent to a group selector that lists all the elements in the document.

　　Technically not necessary. The last statement also ends with a semicolon, but adding is a good practice, so whenever a rule occurs, a semicolon is added at the end of the declaration.

Class selector and ID grouping
In addition to instructing document elements (such as p, H1), there are two additional selectors: class selector and ID selector (ID selector), and of course, before using them, you need to modify the specific document tags so that they work correctly.
Examples of implementation of class selectors:

<!Doctype HTML><HTMLxmlns= "http://www.w3.org/1999/xhtml"><Head>    <Metahttp-equiv= "Content-type"content= "text/html; charset=utf-8" />    <styletype= "Text/css"><!--. Warning{Font-weight:Bold;}. Urgent{Font-style:Italic;}p.warning.urgent{background:Silver;}span.warning{Font-style:Italic;} -</style>                                <title>Index.html</title></Head><Body>    <Pclass= "Warning Urgent">When handling .....</P>    <Pclass= "Warning">Care must is taking ...</P>    <P>With Plutonium,<spanclass= "Warning">The possibility .....</span>. This ...</P></Body></HTML>

　　Wildcard characters can be used for all class selectors: *.warning {font-weight:bold;}, if you select all elements with the same class name, the wildcard character in the class selector can be omitted. Of course, we can also specify different documents, in HTML, a class may also contain a word list, the words are separated by a space.

"CSS authoritative guide" reading notes