Click here to return to the Wulin.com HTML tutorial column. If you want to browse the CSS tutorial, please click here.
Above: Markup Language - Lite Tags . Chapter 10 Apply CSS
In the first part, the main focus is on the example of tag syntax, and we also explore how to apply CSS on the tag for design and specify style details. In the second chapter, 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 previous versions of browsers so that we can use advanced techniques without affecting the tag structure that can be read by all browsers and devices.
In the last tip extension unit of the chapter, we will introduce the practice of switching fonts, colors and making multiple themes without having to write scripts - replacing style sheets. How to apply CSS to files?
Now we will discuss four different ways to apply CSS to documents. Each method has its own advantages and disadvantages. Depending on the situation, all four methods may be the best choice. Each method demonstrated here uses the legal XHTML 1.0 Transitional syntax structure, <html> tag and <head> configuration.
Let's start with Method A. Method A:<style> tag
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd >
<html xmlns=http://www.w3.org/1999/xhtml xml:lang=en lang=en>
<head>
<meta http-equiv=content-type content=text/html; charset=utf-8 />
<title>Applying CSS</title>
<style type=text/css> <![CDATA[...The CSS statement is put here...
]]> </style></head>
This approach also becomes an embedded stylesheet, allowing you to write all CSS declarations directly into (X) HTML file, and the <style> tag is located in the page <head> and can be placed in any style you need.
The text/css specified for the type attribute ensures that the browser understands the style language we use and cannot be omitted. We also use the CDATA annotation syntax recommended by W3C to hide these contents from browsers that cannot handle style rules (http://www.w3.org/TR/xhtml1/#h-4.8).
One of the major disadvantages of using Method A is that some old browsers (especially Internet Explorer 4.X and Netscape 4.X) will do their best to display the CSS effect specified in the <style> tag. If you use any advanced CSS layout and positioning rules that only support the latest browser, it may cause problems. If you put complex CSS rules in the <style> tag, it may cause confusing and difficult to read typesetting results for users of old browsers. It cannot be cached.
Another disadvantage of embedded style sheets is: if placed in the page, you must download it together every time you read the page. In contrast, other methods provided later can allow the style sheet to be downloaded only once, and then use the browser's cache directly. Modify it multiple times.
Since the embedded style sheet is stored in XHTML pages, if the same style is used on many pages of the website, it means that these styles will have many identical copies. If you need to change these styles, you must modify all pages that use the same style. Remember! Modifying many documents at once will be a chore. It is convenient to develop
Speaking of the benefits, I found that when I first started writing and testing CSS, it was very convenient to write all the rules on the page I used for testing using Method A. This allowed me to put the marks and styles in the same document, which was convenient for frequent modification. After the test was completed, I will apply CSS to the public version in different ways. Let's take a look at several methods. Method B: External Style Sheet
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml xml:lang=en lang=en>
<head>
<meta http-equiv=content-type content=text/html; charset=utf-8 />
<title>Applying CSS</title>
<link rel=stylesheet type=text/css href=styles.css _fcksavedurl=styles.css /></head>
Method B demonstrates the practice of connecting external style sheets: put all CSS declaration content in a separate document, and then reference its content using the <link> tag in the (X)HTML <head>.
We use the href attribute to specify the location of the document. This attribute can be a relative path (such as the example above), or an absolute path (filled in the complete http:// position of the style sheet). At the same time, note that <link> is a single tag or an empty tag, and must be closed in / at the end. Separating the document = convenient for maintenance
There is a clear advantage of putting all CSS rules in documents that are different from the tagged content: that is, any style changes made to the entire website can be modified to complete the file without having to repeatedly modify the CSS statement for each web page like when using Method A.
Of course, this is very critical for large-scale websites. Hundreds or even thousands of pages can share the same style in a single document. Download once
One of the additional advantages of linking external style sheets is that this document is usually downloaded only once, and the browser will use cache, which can save the download time required when repeatedly browsing the same page or other pages that reference the same style sheet. It still cannot be completely hidden.
Like Method A, Method B can still be old and only supports some CSS functions to interpret browsers. Any style designed for the latest browsers may cause great confusion in unsupported browsers.
Well...this is the second time I have mentioned this problem, the next method must solve it, right? Method C:@import
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml xml:lang=en lang=en>
<head>
<meta http-equiv=content-type content=text/html; charset=utf-8 />
<title>Applying CSS</title>
<style type=text/css> <![CDATA[ @import styles.css; ]]> </style></head>
Similar to method B, using @import can import CSS definitions from external files with relative paths (such as the example above) or absolute paths.
Method C has the same advantages as using the <link> tag. Since the style sheet is placed in an external document, modifying and updating a single document can change the entire website and can be completed easily and quickly. The external style sheet will be cached by the browser, saving download time for importing all pages of the same style sheet.
The major benefit of using method C is that the following versions of Netscape 4.X do not support the @import syntax, so it will hide the referenced CSS content. This is definitely a useful trick, because we can write advanced CSS syntax to handle design details such as layouts, so that the latest browsers that can handle display them, and also make old browsers ignore these syntaxes.
The problem with Netscape 4.x is that it thinks its CSS support capabilities are as good as those that are actually supported. Therefore, except for Netscape 4.x, we can let the browser decide whether to display the correct effect on its own.
This is the key point when designing websites based on standard design. Try to separate structured tag code from display mode, and provide layout details and other styles for supported browsers. Old browsers use structured content that they can easily read and display, but will not deal with advanced CSS rules hidden for them. Open styles and close styles.
Look at Figures 10-1 and 10-2, and compare it. This is my personal website using the full CSS, and then turn off the display effect of the CSS (it should be very close to the display effect of old browsers). The structure when not 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 for the display layout, users of old browsers may get a bunch of difficult-to-read content.
Figure 10-1 My personal website, using CSS
Figure 10-2: Remove CSS on the same page, and the old browser may display it as a combination of Method B and Method C to apply a multiple style sheet.
Sometimes it can be useful to introduce many style sheets into one document, for example, you can put all layout rules into one document and font settings into another document, which can make the work of maintaining a large number of rules easier for large, complex designs. Chameleon effects
When I was creating a website for Fast Company magazine, I wanted to change the color scheme of the website every month so that it could match the cover image of the current magazine. In order to simplify regular modification work, I put all the color-related CSS rules into one document and put other rules that would not be modified every month into another document.
It can be easier and fast to cover all colors every month, without having to slowly find the content that needs to be changed in the hundreds of other rules that make up the design. As long as this document is modified, the color of the entire website will be changed immediately. How to do it
To introduce multiple style sheets in combination with method B and method C, the method is to use the <link> tag in the page to reference the CSS main document, the same as the method B demonstration, and link to styles.css.
The content of styles.css only contains a few @import rules and introduces the required other CSS files.
For example, if you want to introduce three style sheets, one to process layout, one to define fonts, and one to define color, then the content of styles.css might 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 <link> tag can be used throughout the website, and only the styles.css file is referenced. This document can continue to import other style sheets with the @import rule. As long as the new style sheet is added to this document, it can play a role in the entire website.
This makes it very easy to update and replace CSS. For example, if you suddenly want to cut CSS into 4 files on the road, you only need to change the @import rules of this document without modifying all XHTML tag source code.Lo-Fi and Hi-Fi styles
There is another trick to hide CSS from old browsers using the @import rule of method C. That is, use the cascading effect of CSS, and use method A or method B to provide old and newest browsers to support Lo-Fi effects, and then use @import to provide advanced effects for other supported browsers.
Older browsers will only get content they can support, while newer browsers will get all the styles they want to use.
Let's see what the code of this technique looks like:
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml xml:lang=en lang=en>
<head>
<meta http-equiv=content-type content=text/html; charset=utf-8 />
<title>Applying CSS</title>
<link rel=stylesheet type=text/css href=lofi.css _fcksavedurl=lofi.css /> <style type=text/css> @import hifi.css; </style></head>
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 pictures, etc.
We can transmit both Lo-Fi and Hi-Fi version styles without having to write scripts or identify browser versions in any way on the server side. The order is important
It is important to specify the order of <link> and <style> tags in the tag source code. The Cascade of CSS refers to the priority of the rules, which is determined based on the order of occurrence.
For example, since most latest browsers support both methods, all style sheets will be downloaded and all styles in it will be applied. At this time, the style rules in hifi.css will override the styles specified by lofi.css for the same tag. What is the reason? Because in the tag source code, hifi.css appears after lofi.css.
Older browsers ignore hifi.css because the @import rule is not supported, so they only use the style defined by lofi.css. Embrace the cascade feature
The benefits of CSS cascadedity are brought about in various ways. For example, suppose that your entire website shares an external CSS for layout, positioning, setting fonts, colors, etc., then you should use the method @import style sheet on each page to hide these rules for old browsers.
If there is a page on the website that wants to share layout and positioning settings, but needs to adjust the font or color. In this page (different from other pages on the website), the CSS main document can still be introduced. After completing the reference, we will refer to the second CSS document that defines a special style for this page. Any rules in the second CSS file will be preferred, overwriting the style rules specified by the first CSS file for the same label.
Let's look at the example. Master.css contains the entire website structure, fonts and other CSS rules, while in custom.css, it is only referenced on a specific page, covering the style settings of several special tags.
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml xml:lang=en lang=en>
<head>
<meta http-equiv=content-type content=text/html; charset=utf-8 />
<title>Applying CSS</title>
<style type=text/css> @import master.css; @import custom.css; </style></head>
Since custom.css is the second one in the tag source code, the style it specifies for the same tag will override what is formulated within master.css.
For example, suppose that within main.css we require the <h1> tag to use the red serif font, and <h2> to use the blue serif font.
h1 {
font-family: Georgia, serif;
color: red;
}
h2 {
font-family: Georgia, serif;
color: blue;
}
On a specific page, we only want to change the style settings of the <h1> tag and follow the style of <h2>. Then in custom.css, we only need to declare the new style for <h1>.
h1 {
font-family: Verdana, sans-serif;
color: orange;
}
This declaration will override the declaration in master.css (because custom.css is introduced later). If the page first introduces master.css and then custom.css, the <h1> tag will use the orange Verdana font, while <h2> is still blue serif font. Because the subsequent declaration in master.css is not overridden by custom.css.
The cascading function of CSS is a great tool for sharing common styles, allowing you to cover only rules that need to be modified.
<h1 style=font-family: Georgia, serif; color: orange;>This is a Title</h1>
This is the fourth CSS application method we have come into contact with - inline styles. Almost any tag can be added with style attributes, allowing you to directly apply CSS style rules to tags, just like the example above.
Since inline styles are the lowest layer of stacking, they override all external style declarations and rules declared within the <style> tag of <head>.
This is a simple way to add styles throughout the page, but it has to be paid for using it. The style is tied to the label
If you rely too much on method D when making styles for the page, then you will not separate the content and display methods. When you go back and modify, you must mark the source code in depth and put CSS into the separate file, which will be much easier to maintain.
Abuse method D is no different from using display effect labels such as <font> to contaminate the source code. These design details should always be placed elsewhere. Be careful to use
In reality, of course, sometimes the opportunity to use inline styles is to save your life when you need to add styles to the page, but you cannot access external files, or you cannot modify <head>, or you can use the style temporarily and you will also use it when you do not intend to share it with other tags.
For example, if there is a page on the website that previews a charity sale that will be removed later and you want to design a unique style for this page, then maybe embed these style rules into the tag without adding them to the permanent style sheet.
Let's do it now, but be aware that these styles cannot be changed easily, or are used across the page for the entire website.
Previous page 1 2 3 Next page Read the full text