CSS Application Basics Tutorial: How to Apply

The way C S is declared

This chapter will begin to introduce you to the application of CSS. Of course, the first thing to introduce is how to build a stylesheet (style Sheets), including the way you declare it and how you apply it on a Web page, and then give you an overview of some of the CSS features. Roughly speaking, there are three ways to declare a CSS:

First, the basic statement: the most typical way of CSS declaration.

element {Property:value} is expressed in Chinese, which is

Symbol (label) {Property (property) Name: Set Value}

For example:

H3 {Color:blue} is a set of declarations.

A collective declaration: a group or array style rule (the nature) that declares one or more components (labels) (tags) separated by commas (separated by semicolons between groups of rules).

Symbol (label) {

Property (attribute) Name 1: Set value 1;

Property (attribute) Name 2: Set value 2;

... }

Or

Component A (label a), component B (label B), component C (label C), ... {

Property (attribute) Name 1: Set value 1;

Property (attribute) Name 2: Set value 2;

...}

For example:

TD {

Color:blue;

font-size:9pt;

}

Or

Td,p,div {

Color:blue;

font-size:9pt;

}

Three, sub-item declaration: Many style rules are grouped and then separately declared.

Component A (label a) {property (attribute) Name 1: Set value 1; property (attribute) Name 2: Set value 2;}

Component A (label a) {property (attribute) Name 3: Set value 3; property (attribute) name 4: Set value 4;}

For example:

TD {color:blue; font-size:9pt}

TD {font-family: "superscript italics"; line-height:150%}

The declaration of such a way does not contradict each other, because the nature of the declaration is different. If you accidentally make a duplicate declaration of the same nature, only the set value that is later declared will work.

Incidentally, in your statement, as long as your format is correct and will be accepted, regardless of whether the case, white space, or line wrap will not affect the results of the display, you can write in your own custom.

The application method of C s S

Next, we'll introduce you to the four basic methods of applying the style sheet you created to your Web page.

First, use the style attribute: Add the style attribute directly to the individual component labels.

< component (label) style= "Property (property) 1: Set value 1; Property (Attribute) 2: Set value 2; ...}

For example:

　　<TD style= "Color:blue; font-size:9pt; font-family: "Superscript italics"; Line-height:150%>

The advantage of this usage is that it can be used neatly in each label, but the disadvantage is that there is no "uniformity" of the whole document.

Second, use style tags: write style rules in <STYLE>...</STYLE> tags.  
<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>

The whole structure is usually written in the part of the Web page. The advantage of this usage is the uniformity of the entire document, as long as the declared component will apply the style rule. The disadvantage is that the flexibility of individual components is insufficient.

Use the link tag: Write style rules in a. CSS style file, and then introduce them as tags.

Let's say we put the style rules into a example.css file and we just add them to the page.

　　<link rel=stylesheet type= "text/css" href= "Example.css" >

You can apply this style file to a good style. The link tag is usually written in the part of the Web page. The advantage of this usage is that you can assign several files of the same style rule to the same style file. Disadvantages are also insufficient flexibility in individual files or components.

Use @import Introduction: Similar to link usage, but must be placed in <STYLE>...</STYLE>.  
<style type= "Text/css" >
<!--
@import URL (the address, path, and filename of the introduced 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, remember!

Obviously, both link and @import may be able to apply directly to other people's existing style sheets. However, based on the Internet etiquette, this kind of thing do not do well, at least should also know each other's voice, must first obtain the consent of others!

And the four application methods have their own advantages and disadvantages, you can use synthetically, and will not contradict each other. But if the same attributes of nature are repeated, consider the question of precedence! Generally speaking, the order of precedence has several principles:

Web designer's style setting > user's style setting > browser's style setting

Style settings > Style label style settings > link in style settings

Styling > Front style settings for rear declaration

The so-called "link in the style set" refers to the above mentioned link tag and @import introduced in the two application methods linked to the style of the set.

The above is the most basic CSS declaration and application of the method introduction, with these basic knowledge and methods, you can start to build your style sheet! In addition to the basic declarations and application methods mentioned above, there are other methods of declaration and application that will be introduced in the next chapter.