CSS basics 3: CSS syntax

CSS basics 3: CSS syntax

CSS syntax includes basic syntax and advanced syntax.

I. basic CSS syntax

(1) CSS syntax

CSS Rules consist of two main parts: Selector and one or more declarations. Use curly brackets to enclose the declaration.

Selector {declaration1; declaration2;... declarationN}

A selector is usually an HTML element that you need to change the style. Each declaration consists of an attribute and a value. Property

Set the style attribute ). 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 the selector, color and font-size are attributes, and red and 14px are values.

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

The following shows the structure of the above Code:

(2) Different writing 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.

(3) Remember to write quotation marks

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

P {font-family: sans serif ;}

(4) Multiple declarations:

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 one in English.

Separator, not the end symbol. However, most Experienced designers add a semicolon at the end of each statement. The advantage is that when you

When adding or removing declarations in existing rules, the possibility of errors is minimized. 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;
}

(5) space and Case sensitivity

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 be

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, one

Exceptions: if it involves working with HTML documents, the class and id names are case sensitive.

Ii. CSS advanced syntax

(1) selector grouping

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

In the following example, all the title elements are grouped. All title elements are green.

H1, h2, h3, h4, h5, h6 {

Color: green;
}

(2) 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 ). Use CSS

The child element inherits the attributes of the highest level element (in this example, the body) (these child 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 in most

This is true in modern browsers.

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. Ratio

Party A said that Netscape 4 does not support inheritance. It not only ignores inheritance, but also ignores rules applied to body elements. IE/Windows till IE6

There are related problems, and the font style in the table will be ignored. What should we do?

(3) treat Netscape with friendliness 4

Fortunately, you can use the redundancy rules we call Be Kind to Netscape 4 to deal with issues that legacy browsers cannot understand.

Question.
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. This will waste some users' bandwidth, but if you need

Netscape 4 users have to do so for support.

(4) is inheritance a curse?

If you do not want Verdana and sans-serif fonts to be inherited by all sub-elements, what should you do? For example, you want the paragraph to have a font

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;
}