How to introduce external style sheet in css

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

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

External style sheets must be imported into web documents before they can be recognized and parsed by the browser. External style sheet files can be imported into HTML documents in two ways.

1. Use the 2cdf5bf648cf2f33323966d7f58a7f3f tag to import

Use the 2cdf5bf648cf2f33323966d7f58a7f3f tag to import the external style sheet file:

<link href="外部样式表文件路径" rel="stylesheet" type="text/css" />

Explanation of each attribute:

• href The attribute sets the address of the external style sheet file, which can be a relative address or an absolute address.

• #rel The attribute defines the associated document, which here means the associated style sheet.

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

Generally when defining the 2cdf5bf648cf2f33323966d7f58a7f3f tag, three basic attributes should be defined, among which href is a must-set attribute.

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

Tip: In the Firefox browser, you can select the "View --> Page Style" option in the menu, and then the title attribute value will be displayed in the submenu. Just select a different title attribute value. Selectively apply required style sheet files. IE browser does not support this feature.

In addition, the title attribute is related to the rel attribute. According to the W3C organization's plan, future web documents will use multiple 2cdf5bf648cf2f33323966d7f58a7f3f elements to import different external files, such as style sheet files, script files, and themes. files, and can even include other customized supplementary files. After importing so many files of different types and names, you can use the title attribute to select. At this time, the role of the rel attribute becomes apparent. It can specify the imported file type applied when the web page file is initially displayed. Currently, it can only be associated with CSS. Style sheet type.

External styles are the best solution for CSS applications. A style sheet file can be referenced by multiple web pages. At the same time, a web page file can import multiple style sheets by repeatedly using the link element to import different style sheets. document.

2. Use the @import keyword to import

Use the @import keyword in the c9ccee2e6ea535a969eb3f532ad9fe89 tag Import external style sheet files:

<style type="text/css">
@import url("外部样式表文件路径");
</style>

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

Comparison

Comparison of two methods of importing style sheets:

• link belongs to the HTML tag , and @import is provided by CSS.

• When the page is loaded, the link will be loaded at the same time, and the CSS referenced by @import will wait until the page is loaded before loading.

• @import can only be recognized by IE 5 or above, and link is an HTML tag, so there is no compatibility issue.

• #link style styles have a higher weight than @import weights.

It is generally recommended to use link to import style sheets, and @import can be used as a supplementary method.

(Learning video sharing: css video tutorial)

The above is the detailed content of How to introduce external style sheet in css. For more information, please follow other related articles on the PHP Chinese website!