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 entire 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> usually writes the entire <STYLE>...</STYLE> structure in the <HEAD> </HEAD> 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 the. CSS style file, then introduce the <LINK> tag. Let's say we put the style rules into a example.css file and we just add them to the page.
The <link rel=stylesheet type= "text/css" href= "Example.css" > can be applied to the style file as set out in the good style. The link tag is usually written in the <HEAD> </HEAD> section 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. However, if the same nature of the property in the case of repeated statements, it is necessary to consider the problem of applying precedence! Generally speaking, the order of priority has the following principles: Web Designer's style setting > user's style setting > browser style setting
Style property's styling > Style label Style Set > link in the style set
The styling of the rear declaration style is set in front of the styleThe 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. |
