CSS declaration and Application

CSS declaration method

There are three methods to declare CSS:

I. Basic Declaration: the most typical CSS declaration method.
If element {property: Value} is expressed in Chinese, that is
Component (TAG) {property name: Set Value}
For example:
H3 {color: Blue} is a set of declarations.

Ii. Collective Declaration: A group or array style rule (Nature) that declares one or more components (TAGS) separated by commas) (rules of each group are separated by semicolons ).
Component (Label ){
Property name 1: set to 1;
Property name 2: Set to 2;
...}
Or
Component A (Label A), component B (Label B), component C (Label C ),...{
Property name 1: Set Value 1;
Property name 2: Set to 2;
...}
For example:
TD {
Color: blue;
Font-size: 9pt;
}
Or
TD, P, div {
Color: blue;
Font-size: 9pt;
}

Iii. Sub-item Declaration: group and declare multiple style rules separately.
Component A (Label A) {property name 1: Set Value 1; property name 2: Set Value 2 ;}
Component A (Label A) {property name 3: Set Value 3; property name 4: Set Value 4 ;}
For example:
TD {color: Blue; font-size: 9pt}
TD {font-family: ""; line-Height: 150%}
Such statements do not conflict with each other, because the declared nature is different. If you accidentally make repeated declarations for the same nature, only the set values that will be declared later will function.

In your statement, as long as your format is correct, it will be accepted, and whether it is case sensitive, blank or line feed will not affect the display results, you can write according to your habits.
 
CSS Application Method
 
Apply the created style sheet to the webpage.

1. Use the style attribute: add the style attribute to individual component labels.
<Component (Label) style = "Property (attribute) 1: Set Value 1; Property (attribute) 2: Set Value 2 ;...}
For example:
<TD style = "color: Blue; font-size: 9pt; font-family:" "; line-Height: 150%>
The advantage of this usage is that the style can be applied to various labels smartly, but the disadvantage is that there is no "uniformity" of the entire file 』.

2. Use the style label: Write the style rule in the <style>... </style> label.
<Style type = "text/CSS">
<! --
Style rule table
-->
</Style>
For example:
<Style type = "text/CSS">
<! --
Body {
Color: blue;
Background: # ffffcc;
Font-size: 9pt}
TD, P {
Color: green;
Font-size: 9pt}
-->
</Style>
Generally, the entire <style>... </style> structure is written in the

3. Use the link label: Write the style rules in the. CSS style file, and then introduce them with the <link> label.
Assume that we save the sample rules into an example.css file. We only need to add
<LINK rel = stylesheet type = "text/CSS" href = "example.css">
You can apply the style specified in the style file. The link tag is usually written in the

4. Introduction Using @ import: it is similar to link usage, but it must be placed in <style>... </style>.
<Style type = "text/CSS">
<! --
@ Import URL (the address, path, and file name of the imported style sheet );
-->
</Style>
For example:
<Style type = "text/CSS">
<! --
@ Import URL (http: // yourweb/example.css );
-->
</Style>
Note that the semicolon at the end of the line is absolutely indispensable! Remember!

The four application methods have their own advantages and disadvantages. You can use them in a comprehensive manner without conflict with each other. However, if duplicate declarations occur for attributes of the same nature, the priority should be applied! Generally, the priority order includes the following principles:
Webpage designer style Settings> User style Settings> Browser style settings
Style attribute Settings> style label style Settings> link style settings
Style settings declared on the back> style settings on the front
The so-called "link style setting" refers to the style setting linked by introducing the link label and @ import mentioned above to these two application methods.

The above is the most basic CSS declaration and application method introduction. With these basic understandings and methods, you can start to create your style sheet!