A summary of how CSS styles are applied in HTML documents

There are roughly three ways to apply CSS styles in an HTML document: A 1.link tag links an external style sheet; 2. Use the style element to include a stylesheet; 3. Use the Style property, which is inline style

One. Link tag links external style sheet

　　Let's look at a more standard link tag statement:

<link rel= "stylesheet" type= "Text/css" href= "Main.css" media= "All"/>

The link tag must be placed in the head element and cannot be placed inside other elements such as title. As for its properties, rel stands for "relationship" (relation), where the relationship is stylesheet, that is, the external stylesheet of the document, as for the other values as well as the meanings of the details see http://www.w3school.com.cn/tags/att_link_rel.asp. Type is always set to Text/css, which describes the type of data that is loaded with the link tag. The href is so simple as not to say more. The media attribute specifies what device the linked document will be displayed on. Of course, there are other properties of the link tag, such as title (except for the five, the other attributes seem to have nothing to do with it), and then we will talk about the role of the title property.

　　candidate style sheets for external style sheets : When you set the Rel attribute to alternate stylesheet, you can define a candidate style sheet that will only be used for document performance when the user chooses the style sheet. For example:

1 <Linkrel= "stylesheet"type= "Text/css"href= "Sheet1.css"title= "Default" />2 <Linkrel= "Alternate stylesheet"type= "Text/css"href= "Bigtext.css"Tile= "BigText"/>3 <Linkrel= "Alternate stylesheet"type= "Text/css"href= "Crazy.css"Tile= "Crazytext"/>

It seems that Chrome does not yet support this candidate style sheet, and I do not find Chrome's menu bar, but IE, FF supports this feature (the way to switch style sheets: Press the ALT key to open the menu bar, view-style, select style sheet). Note: ① only one of these style sheets will be used for document display and will not overlap; ② and each style sheet has a title attribute, otherwise the menu bar is not displayed; the ③ default style sheet (also called the preferred style sheet) is a style sheet with a rel of stylesheet and has no relation to the value of the title property.

You can also assign the same title to the candidate style sheets, grouping them together. For example:

1 <Linkrel= "stylesheet"type= "Text/css"href= "Sheet1.css"title= "Default"Media= "Screen" />2 <Linkrel= "stylesheet"type= "Text/css"href= "Print-sheet1.css"title= "Default"Media= "Print" />3 <Linkrel= "Alternate stylesheet"type= "Text/css"href= "Bigtext.css"title= "BigText"Media= "Screen" />4 <Linkrel= "Alternate stylesheet"type= "Text/css"href= "Print-bigtext.css"title= "BigText"Media= "Print" />

This allows users to select different style sheets for the site in the screen and print media.

Two. Use the style element to include a stylesheet

　　Styles between style tags are called document style sheets, or nested style sheets. Note: ① Be sure to use the Type property, whose value is "text/css", or you can specify the media property;

Here is a @import directive that instructs the Web browser to load an external style sheet, but this instruction will not work until it is placed in a different CSS rule. For example:

　　　　

1 <styletype= "Text/css">2 @import URL (main.css);3 @import URL (sheet1.css) all;4 @import url (print.css) print;5 H1{Color:Blue;}6 </style>

　　　　One notable function of the @import directive is that if you have an external style sheet that requires a style from another external style sheet, you can use this directive to import other style sheets at the beginning.

Three. Inline style

　　In addition to the markup that appears outside the body, the style property can be associated with any other HTML tag to set its inline style. Note: ① cannot use the @import directive in the Style property.

A summary of how CSS styles are applied in HTML documents