Structure and Grouping, class, and id of CSS rules

2.1 rule Structure<Rules >::= <selector> <left brace> <declarations> <right brace> <declarations> :: = <declaration >{< SEMICOLON> <declaration >}[ SEMICOLON] <SEMICOLON >:= SEMICOLON <declaration> :: = <property> <COLON> <value> <COLON >::= COLON <value >::=< keyword list> <keyword list> :: = <keyword >{< SPACE> <keyword >}< SPACE >::= SPACE generally uses SPACE As the delimiter between values. The exception is As 've seen, CSS keywords are separated by spaces-since T in one instance. in the CSS propertyFont, There is exactly one place where a forward-slash (/) Can be used to separate two specific keywords. here's an example: h2 {font: large/150% sans-serif;} The slash separates the keywords that set the element's font size and line height. this is the only place the slash is allowed to appear inFontDeclaration. All of the other keywords allowedFontAre separated by spaces.2.1.1 selectorSelector: defines which piece of the document will be affected. Selector is usually an html element, or any element allowed in xml.2.1.2 Declarations and Keywords2.2 Grouping2.2.1 grouping selectorsShare multiple elements with one style. For example:

/* group 1 */

H1 {color: silver; background: white;} h2 {color: silver; background: gray;} h3 {color: white; background: gray;} h4 {color: silver; background: white;} B {color: gray; background: white;}/* group 2 */h1, h2, h4 {color: silver;} h2, h3 {background: gray;} h1, h4, B {background: white;} h3 {color: white;} B {color: gray;}/* group 3 */h1, h4 {color: silver; background: white;} h2 {color: silver;} h3 {color: white;} h2, h3 {background: gray;} B {color: gray; background: white;} 2.2.1.1 The universal selector * {color: red ;} 2.2.2 grouping declarationsExample: h1 {font: 18px Helvetica;} h1 {color: purple;} h1 {background: aqua;} h1 {font: 18px Helvetica; color: purple; background: aqua ;} if the second semicolon is omitted, however, the user agent will interpret the style sheet as follows: h1 {font: 18px Helvetica; color: purple background: aqua;} Since Background: Is not a valid value Color, And also since ColorCan be given only one keyword, a user agent will ignore ColorDeclaration (including Background: AquaPart) entirely. It might render H1S as purple text without an aqua background, but more likely, you won't even get purple H1S. Instead, they'll be the default color (usually black) with no background at all. (The declaration Font: 18px HelveticaWill still take effect since it was correctly terminated with a semicolon .) 2.2.3 Grouping EverythingGroup selector and declarationh1, h2, h3, h4, h5, h6 {color: gray; background: white; padding: 0.5em; border: 1px solid black ;} you 've grouped the selectors, so the styles on the right side of the rule will be applied to all the headings listed, and grouping the declarations means that all of the listed styles will be applied to the selectors on the left side of the rule. 2.3 class and id selectorsThe simplest selector is only for the element selecoter of the document element. There are two types of selecotrs: class selectors and id selectors. These two selectors can be independent of document elements, that is, they are not directly associated with a specific document element. These two types of selecoter can be used independently or together with element selector. However, the use of the two selector needs to work with the standardization of the document writing. For example, you can write a document about the plutonium processing method. The document consists of many sections and contains a lot of warning information. You want to set the warning font to bold to highlight it. However, there are many formats of warning information, such as text, warning, and section text. Therefore, it cannot be defined in the form of p {font-weight: bold. In this way, the warning information cannot be found in the entire document, which is full of text, and the warning information cannot be bold. Therefore, solution: Use class selectors to mark the warning information.