Click here to return to the HTML Tutorial column of the Web Teaching Network. To view CSS tutorials, please click here. Above: Markup language – streamlined tags. Chapter 10 Applying CSS In the first part, the main focus is on markup syntax examples, and also explores how to apply CSS to tags for design and specify styling details. In Chapter 2, we will discuss several ways to apply CSS to tags. Click here to return to the Script House HTML Tutorial column. To view CSS tutorials, please click here.
Above: Markup language - streamlined tags. Chapter 10 Applying CSS
In the first part, the main focus is on markup syntax examples, and also discusses how to apply CSS to tags for design and specify styling details. In Chapter 2, we will discuss several ways to apply CSS to a document, website, or even a single tag. In addition, we will also discuss how to hide CSS content from earlier versions of browsers, so that we can use advanced techniques without affecting all browsers. , the markup structure read by the device.
In the "Technical Extension" unit at the end of the chapter, we will introduce how to switch fonts, colors, and create multiple themes without writing scripts - replacing style sheets. How to apply CSS to documents?
Now let’s explore four different methods of applying CSS to documents. Each method has its own advantages and disadvantages. Depending on the situation, all four methods may be the best. Best choice. Each method demonstrated here uses legal XHTML 1.0 Transitional syntax structure, tag and configuration.
Let’s start with method A. Method A:

This The approach has also become an embedded style sheet, which allows you to write all CSS declarations directly in the (X)HTML file. The

with methods Similar to B, you can use @import to import CSS definitions from external files with relative paths (like the example above) or absolute paths.
Method C has the same advantages as using the tag, because the style sheet is placed in the external document , modifying and updating a single document can change the entire website, and it can be done quickly and easily. External style sheets are cached by the browser, saving download time for all pages that import the same style sheet. Hide and seek
The major advantage of using method C is that Netscape versions below 4. CSS syntax handles design details such as layout, allowing the latest browsers that can handle it to display them, while also allowing older browsers to ignore these syntaxes.
The problem with Netscape 4.x is: it thinks it can support CSS It is only as good as the browser that actually supports it. Therefore, except for Netscape 4. The markup code is separated from the display, and provides layout details and other styles for supported browsers. Older browsers can easily read the displayed structure of the content, but will not process the advanced CSS hidden for them. rule. Open styles, close styles
Look at Figures 10-1 and 10-2, and compare. This is my personal website using complete CSS, and then turning off the CSS display effect (it should be very close to the display effect of the old browser) Effect), the structure without using CSS is still very obvious, and it is still easy for everyone to read and use. If we do not hide the CSS required to display the layout, then users of older browsers may get a mess that is difficult to read. Content.

Figure 10-1 My personal website, using CSS

Figure 10-2 The same page, remove the CSS, old browsers may change it Displayed like this Combining Method B and Method C to Apply Multiple Style Sheets
Sometimes, it may be useful to introduce many style sheets into a document. For example, you can put all layout rules into one document and set the font settings. Putting it into another document can make maintaining a large number of rules easier for large, complex designs. Chameleon Effect
When making the website of Fast Company magazine, I hope to change the color of the website every month to match the cover image of the current magazine. In order to simplify the regular modification work, I centralized all the color-related CSS rules into In one document, and put other rules that will not be modified every month into another document.
It will be easier and faster to cover all the colors every month without having to add hundreds of other rules that make up the design Slowly search for content that needs to be changed. As long as this document is modified, the color of the entire website will change immediately. How to do it
To combine method B and method C to introduce multiple style sheets, the method is to use the tag in the of the page to reference the main CSS document, the same as the method B demonstration, link to styles.css .
The content of styles.css simply contains a few @import rules to introduce other required CSS files.
For example, if you want to introduce three style sheets, one for layout and one for Define the font and define the color, then the content of styles.css may look like this:

/*Old browsers will not interpret these import rules*/
@import url("layout .css");
@import url("fonts.css");
@import url("colors.css");

In this way, the same url can be used throughout the website The tag only references the styles.css file. This document can continue to import other style sheets using the @import rule. As long as the new style sheet is added to this document, it will have an effect on the entire website.
This allows Updating and replacing CSS has become very simple. For example, if you suddenly want to split CSS into 4 files on the road, you only need to change the @import rule of this document without having to modify all XHTML markup source code. Lo-Fi and Hi-Fi styles
When using the @import rule of method C to hide CSS from old browsers, there is another trick available. That is to use the cascading effect of CSS to provide old browsers with method A or method B. Lo-Fi effects are supported by both old and latest browsers, and then use @import to provide advanced effects for other supported browsers.
Old browsers will only get the content they can support, while newer browsers will only get the content they can support. The browser will get all the styles you want to use.
Then let’s see what the code for this technique looks like:

"http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">

Here lofi.css should contain basic CSS rules, such as link color and font size; while hifi.css contains advanced rules, such as layout, positioning, background images, etc.
We can send Lo- at the same time Fi and Hi-Fi versions of the style without having to write script or identify the browser version in any way on the server side. The order is important
The order in which the and

Due to custom. css appears second in the markup source code, so the styles it specifies for the same tag will override the content specified within master.css.
For example, suppose within main.css we require < The h1> tag uses a red serif font, while the

uses a blue serif font.

h1 {
font-family: Georgia, serif;
color: red;
}
h2 {
font-family: Georgia, serif;
color: blue;
}

On a specific page, we just want to change the style of the

tag Setting, inherit the style of

. Then in custom.css, we only need to declare a new style for

.

h1 {
font-family: Verdana, sans- serif;
color: orange;
}

This statement will override the statement in master.css (because custom.css is introduced after it). If the page imports master.css first If custom.css is introduced again, the

tag will use the orange Verdana font, while the

will still be the blue serif font. Because the latter statement in master.css has not been overridden by custom.css.
The cascading function of CSS is a great tool for sharing common styles, allowing you to override only the rules that need to be modified.

Method D: Inline styles

This is a Title

This is the fourth CSS application method we have come across - inline style, almost any label can be styled properties, allowing you to apply CSS style rules directly to tags, as in the example above.
Since inline styles are the bottom layer of the cascade, they will override all external style declarations, as well as < declared in Rules within the style> tag.
This is a simple way to add styles everywhere on the page, but there is a price to pay for using it. Styles are tied to tags
If you rely too much on method D when formulating styles for the page, you will not be able to separate the content and presentation. When you go back to modify it, you must go deep into the source code and put the CSS in the separated In the file, maintenance is much simpler.
Abusing method D is no different from using display effect tags such as to pollute the mark source code. These design details should always be placed elsewhere. Use with caution
In real situations, of course, there are times when you have the opportunity to use inline styles. When you need to add styles to the page, but cannot access external files, or cannot modify the , it can save your life, or temporarily apply the style. , it is also used when it is not intended to be shared with other tags.
For example, if there is a page on the website that announces a charity sale, it will be taken down later, and you want to design a unique set of tags for this page. styles, then maybe embed these style rules into the tag instead of adding them to the permanent style sheet.
Do it now, but be aware that these styles cannot be easily changed, or span the page so that the entire Website use.
                                                                                      #p# Summary
We looked at four different ways to apply CSS to markup content and found that each method has its own advantages for dealing with special situations. Let’s review each method, and their advantages and disadvantages.
Method A: Styles need to be placed in the of each page. Many pages cannot share the same style sheet, and they must be re-downloaded every time the page is read. Styles placed within