Home > Web Front-end > CSS Tutorial > How to introduce external style sheet in css

How to introduce external style sheet in css

青灯夜游
Release: 2021-11-10 15:08:51
Original
16698 people have browsed it

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

How to introduce external style sheet in css

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 tag to import

Use the tag to import the external style sheet file:

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

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 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 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