Chapter 2 How to apply CSS

Ｃ　ＳＳＳ’s declaration method

This chapter will start to introduce you to the application of CSＳ. Of course, what I want to introduce at the beginning is how to create a style sheet (Style Sheets), including the declaration method and the method of application on the web page. Finally, I will give you an overview of some characteristics of CSS. Roughly speaking, there are three methods of CSS declaration: 1. Basic declaration: the most typical CSS declaration method. element {PRoperty: value} If expressed in Chinese, it is element (label) {property (property) name: setting value}. For example: H3 {COLOR: BLUE} is a set of statements. 2. Collective declaration: declare a group or array of style rules (properties) (separated by semicolons between each group of rules) of one or several components (labels) at the same time (separated by commas between each component (label)). Component (label) {property (property) name 1: setting value 1; property (property) name 2: setting value 2;... } or component A (label A), component B (label B), component C (label C), ... {property (attribute) name 1: setting value 1; property (attribute) name 2: setting value 2;...} For example: TD {COLOR: BLUE;font-size: 9pt;} or TD,P,DIV {COLOR: BLUE;font-size: 9pt; } 3. Sub-item declaration: Group many style rules and declare them separately. Component A (label A) {Property (property) name 1: setting value 1; Property (property) name 2: setting value 2; }Component A (label A) {Property (property) name 3: setting value 3 ; Property (attribute) name 4: Setting value 4; } For example: TD { COLOR: BLUE; font-size: 9pt}TD { font-family: "standard italic style"; line-height: 150%} A statement like this The methods do not conflict with each other because the properties declared are different. If you accidentally declare the same property twice, only the settings declared later will take effect. By the way, in your statement, as long as your format is correct, it will be accepted. Regardless of capitalization, blank space or line breaks, it will not affect the displayed results. You can write it according to your own habits. .

ＣＳＳ Application method

　What I will introduce to you next are the four basic methods of applying the created style sheet to web pages. 1. Use the STYLE attribute: Add the STYLE attribute directly to individual component tags. The advantage of this usage is that it can flexibly apply styles to each tag, but the disadvantage is that there is no "unity" in the entire document. 2. Use the STYLE tag: Write the style rules in the tag. For example: Usually the entire structure is written in the section of the web page. The advantage of this usage lies in the uniformity of the entire document. As long as there is a declared component, the style rule will be applied. The disadvantage is the lack of flexibility in individual components. 3. Use the LINK tag: Write the style rules in the .css style file, and then introduce it with the tag. Suppose we save the style rules as an example.css file. We only need to add to the web page to apply everything in the style file. The style has been formulated. The LINK tag is usually written in the section of the web page. The advantage of this usage is that you can assign several documents to which the same style rules apply to the same style file. The disadvantage is also the lack of flexibility in individual files or components. 4. Use @import to introduce: It is very similar to LINK usage, but must be placed in . For example: It should be noted that the semicolon at the end of the line is absolutely essential of! Remember, remember! Obviously, whether it is LINK or @import usage, it is possible to directly apply other people's existing style sheets. However, based on Internet etiquette, if you don’t do this kind of thing well, you should at least inform the other party and obtain their consent first! Each of the four application methods has its own advantages and disadvantages. You can use them comprehensively without conflicting with each other. But if the same properties are declared repeatedly, the issue of application priority must be considered! Generally speaking, the order of priority follows the following principles: Web designer's style settings > User's style settings > Browser's style settings STYLE attribute's style settings > STYLE tag style settings > Chain The style settings declared after the linked style settings> The so-called "linked style settings" of the previous style settings refer to the two application methods mentioned above: LINK tag and @import introduction. The knot comes in the style setting. The above is an introduction to the most basic declaration and application methods of CSS. With these basic understandings and methods, you can already start building your style sheet! In addition to the basic declaration and application methods mentioned above, there are other declaration and application methods, which will be introduced to you in the next chapter.

The above is the content of Chapter 2 CSS application methods. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!