Shulou(Shulou.com)06/02 Report--

This article will explain in detail how to introduce external stylesheets for CSS, Xiaobian thinks it is quite practical, so share it for everyone to make a reference, I hope you can gain something after reading this article.

Introduction method: 1. Use link tag to introduce, syntax "";2. Use "@import" rule to introduce in style tag, syntax "@import url("css file path ");".

Operating environment of this tutorial: Windows 7 system, CSS3 && HTML5 version, Dell G3 computer.

External style sheets must be imported into a web document in order to be recognized and parsed by browsers. External style sheet files can be imported into HTML documents in two ways.

1. Import using tags

Import external style sheet files using tags:

Description of each attribute:

The href property sets the address of the external style sheet file, either relative or absolute.

The rel attribute defines the associated document, which means the associated stylesheet.

The type attribute defines the type of the imported file. Like the style element, text/css indicates CSS text files.

Generally, when defining labels, three basic attributes should be defined, among which href is the attribute that must be set.

You can also add a title attribute to the link element to set the title of the optional style sheet, that is, when a web page document imports multiple style sheets, you can select the style sheet file to be applied by the title attribute value.

Tip: In Firefox, you can select the "View--> Page Styles" option in the menu, and then the title attribute value will be displayed in the submenu. Just select different title attribute values and you can selectively apply the desired style sheet file. Internet Explorer does not support this feature.

In addition, the title attribute is associated with the rel attribute, and the W3C organization plans that future web documents will import different external files using multiple elements, such as style sheet files, script files, theme files, and even other supplementary files customized by individuals. After importing so many files of different types and names, you can use the title attribute to select them. At this time, the role of the rel attribute appears. It can specify the imported file type applied when the web page file is initially displayed. Currently, only CSS style sheet types can be associated.

External styles are the best way to apply CSS. A style sheet file can be referenced by multiple web files, and a web file can import multiple style sheets by repeatedly using the link element to import different style sheet files.

2. Import using @import keyword

Import an external style sheet file using the @import keyword inside the tag:

@import url("external stylesheet file path");

After the @import keyword, use the url() function to include the address of the specific external stylesheet file.

contrast

Comparison of two ways to import style sheets:

link is an HTML tag, and @import is provided by CSS.

When the page is loaded, the link is loaded at the same time, and the CSS referenced by @import waits until the page is loaded.

@import is only recognized in IE 5 and above, while link is an HTML tag, no compatibility issues.

The link style has a higher weight than @import.

Link is generally recommended for importing stylesheets, and @import can be used as a complementary method.

About "css how to introduce external style sheets" this article is shared here, I hope the above content can be of some help to everyone, so that you can learn more knowledge, if you think the article is good, please share it to let more people see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.