CSS Basic Learning three: CSS syntax

CSS syntax is divided into basic syntax and advanced syntax.

A CSS base syntax

(1) CSS syntax

CSS rules consist of two main parts: selectors, and one or more declarations, use curly braces to enclose the declaration.

selector {declaration1; declaration2; ... declarationn}

selectors are usually HTML elements that you need to change the style. Each declaration consists of an attribute and a value. property is the one you want to set

placed the Style property (style attribute). Each property has a value. Attributes and values are separated by colons.

selector {Property:value}

The next line of code is to define the text color within the H1 element to be red, while setting the font size to 14 pixels. In this case, 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 you the structure of the above code:

(2) different notation and unit of value

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 RGB percentages are used, the percent sign is written even if the value is 0 o'clock. But in other cases it is not necessary to do so.

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 quotes

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

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

(4) Multiple declarations:

If you want to define more than one declaration, you need to separate each declaration with a semicolon.

The following example shows how to define a centered paragraph of a red text. The last rule does not require a semicolon, because the semicolon is in English a

A separator symbol, not a closing symbol. However, most experienced designers add semicolons at the end of each statement, so the advantage is that when you

when you add or subtract declarations from existing rules, you minimize the likelihood of errors. just like this:

p {text-align:center; color:red;}
You should describe only one attribute per line, which can enhance the readability of the style definition, like this:

p {
Text-align:center;
Color:black;
font-family:arial;
}

(5) Space and case

Most style sheets contain more than one rule, and most rules contain more than one declaration. The use of multiple declarations and spaces makes it easier for style sheets to be

Edit:

Body {
Color: #000;
Background: #fff;
margin:0;
padding:0;
Font-family:georgia, Palatino, serif;
}
The inclusion of spaces does not affect how the CSS works in the browser, and, unlike XHTML, the CSS is not sensitive to casing. But there is a

Exception: class and ID names are case sensitive when it comes to working with an HTML document.

Two CSS advanced syntax

(1) Grouping of selectors

you can group selectors so that the grouped selectors can share the same claims. Separate the selectors that need to be grouped with commas . In

In the following example, we group all the header elements. All the caption elements are green.

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

Color:green;
}

(2) succession and its problems

depending on the CSS, child elements inherit attributes from the parent element. But it doesn't always work this way. take a look at the following rule:
Body {
Font-family:verdana, Sans-serif;
}

According to the above rule, the BODY element of the site will use the Verdana font (if the font exists in the visitor's system). Through CSS

inheritance, the child element inherits the attributes owned by the highest-level element (in this case, the body) (these child elements such as P, TD, UL, OL, UL, Li, DL, DT, and

DD). No additional rules are required, and all child elements of the body should display the Verdana font, as are the child elements of the child element. And in most of the

In modern browsers, it is true.

But that is not necessarily the case in the bloody era of browser wars, when support for standards is not a business priority. Than

Fang said that Netscape 4 does not support inheritance, it ignores inheritance, and ignores rules applied to the BODY element. Ie/windows until IE6 still

There are related issues, and the font styles within the table are ignored. What are we supposed to be doing?

(3) to treat Netscape amicably 4

Fortunately, you can deal with the Legacy browser's inability to understand inherited questions by using the redundancy rules we call "being Kind to Netscape 4"

Problem.
Body {
Font-family:verdana, Sans-serif;
}

P, TD, UL, OL, Li, DL, DT, DD {
Font-family:verdana, Sans-serif;
}

4.0 browsers do not understand inheritance, but they can understand group selectors. Doing so will waste some of the user's bandwidth, but if you need to

Netscape 4 users to support, you have to do so.

(4) is inheritance a curse?

What if you don't want the "Verdana, Sans-serif" font to be inherited by all the child elements? For example, you want the font of the paragraph to be

Times. No problem. Create a special rule for P so that it will get rid of the rules 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;
}

Copyright NOTICE: This article for Bo Master original article, without Bo Master permission not reproduced.

CSS Basic Learning three: CSS syntax