[CSS] The basic syntax and Inheritance of CSS in stacked Style Sheets

CSS (Cascading Style Sheets) syntax
CSS Rules consist of two main parts: Selector and one or more declarations.

selector {declaration1; declaration2; ... declarationN }

Selector is usually an HTML element that you need to change the style.
Each declaration is composed of a property and a value.
Property is the style attribute you want to set ). Each attribute has a value. The attribute and value are separated by colons.

selector {property: value}

The following code defines the text color in the H1 element as red, and sets the font size to 14 pixels.
In this example, H1 is a selector, color and font-size are properties, and red and 14px are values ).

h1 {color:red; font-size:14px;}

The following shows the structure of the above Code:

Tip: Use curly brackets to enclose the declaration.

Different write methods and units of Values
In addition to the English word red, we can also use the hexadecimal color value # ff0000:

p { color: #ff0000; }

To save bytes, we can use the abbreviated form of CSS:

p { color: #f00; }

We can also use RGB values in two ways:

p { color: rgb(255,0,0); }p { color: rgb(100%,0%,0%); }

Note that when the RGB percentage is used, the percentage symbol must be written even if the value is 0. However, this is not required in other cases.

For example, when the size is 0 pixels, PX units are not required after 0, because 0 is 0, regardless of the unit.

Remember to write quotation marks

Tip: If the value is a number of words, enclose the value with quotation marks:

p {font-family: "sans serif";}

Multiple declarations:
Tip: to define more than one declaration, separate each declaration with a semicolon. The following example shows how to define the center section of a red text. The last rule does not require extra points, because the semicolon is a separator in English, not an ending symbol. However, most Experienced designers add a semicolon at the end of each statement. The advantage is that when you increase or decrease the statement from the existing rules, will minimize the possibility of errors. Like this:

p {text-align:center; color:red;}    

You should describe only one attribute in each row to enhance the readability of the style definition, as shown in the following figure:

p {  text-align: center;  color: black;  font-family: arial;}

Space and case
Most Style Sheets contain more than one rule, while most rules contain more than one declaration. Multiple declarations and spaces make the style sheet easier to edit:

body {  color: #000;  background: #fff;  margin: 0;  padding: 0;  font-family: Georgia, Palatino, serif;}

Whether or not to contain spaces does not affect the effect of CSS in the browser. Similarly, unlike XHTML, CSS is not case sensitive.

However, there is an exception: if it involves working with HTML documents, the class and ID names are case sensitive.

Selector Group
You can group the selector so that the Group selector can share the same declaration. Use commas to separate the selectors to be grouped. In the following example, all the title elements are grouped. All title elements are green.

h1,h2,h3,h4,h5,h6 {  color: green;}

Inheritance and Problems
Based on CSS, child elements inherit attributes from parent elements. But it does not always work in this way. Take a look at the following rule:

body {     font-family: Verdana, sans-serif;}

According to the above rule, the site's body element uses the verdana font (if the visitor's system has this font ).

Through CSS inheritance, sub-elements inherit the attributes of the highest level elements (in this example, the body) (these sub-elements such as P, TD, UL, ol, UL, Li, DL, DT, and DD ). No other rules are required. All the child elements of the body must display the verdana font. And most modern browsers do.

However, in the bloody Age of the browser war, this situation may not necessarily happen. At that time, standard support was not a priority for enterprises. For example, Netscape 4 does not support inheritance. It not only ignores inheritance, but also ignores rules applied to body elements. There are still problems with IE/windows and IE6, And the font style in the table will be ignored. What should we do?
Treat Netscape 4 with friendliness

Fortunately, you can use the redundancy rule we call "Be kind to Netscape 4" to handle inheritance issues that legacy browsers cannot understand.

body  {     font-family: Verdana, sans-serif;}p, td, ul, ol, li, dl, dt, dd  {     font-family: Verdana, sans-serif;}

4.0 browsers cannot understand inheritance, but they can understand the group selector. Although this will waste some user bandwidth, if you need to support Netscape 4 Users, you have to do so.

If you do not want the "verdana, sans-serif" font to be inherited by all sub-elements, what should you do? For example, you want the paragraph to have a font of times. No problem. Create a special rule for P so that it will get rid of the rule of the parent element:

body  {     font-family: Verdana, sans-serif;}td, ul, ol, ul, li, dl, dt, dd  {     font-family: Verdana, sans-serif;}p  {     font-family: Times, "Times New Roman", serif;}