What tags are used to introduce css styles?

The tag used to introduce css styles is "". The link tag is used to define the relationship between the document and external resources. The most common use is to link to an external CSS style sheet. The syntax is "". When the page is loaded, the css styles introduced by the link tag will be loaded at the same time.

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

The tag used to introduce css styles is "".

CSS external style sheet must be imported into the web document before it can be recognized and parsed by the browser. External style sheet files can be imported into HTML documents in two ways.

• Use the tag to introduce

• Use the @import keyword to introduce

below This article will talk about the tag in detail.

tag defines the relationship between the document and external resources. Its most common use is to link style sheets.

Note:

• In HTML, the tag does not have a closing tag.

• In XHTML, the tag must be closed properly.

The syntax of using the link tag to introduce css styles

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

Explanation of each attribute:

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

• The rel attribute defines the associated document, which here indicates that the associated document is a style sheet.

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

Note:

Generally when defining the tag, the above 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.

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 theme files. You can even include additional supplementary files that you customize. 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 to be 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.

Extended knowledge: The difference between link and @import

1. Difference in dependency relationship

@import is a grammatical rule provided by CSS, and only imports styles The role of the table; link is a tag provided by HTML, which can not only load CSS files, but also define RSS, rel connection attributes, etc.

2. Difference in loading order

When the page is loaded, the CSS introduced by the link tag is loaded at the same time; the CSS introduced by @import will be loaded after the page is loaded.

3. Compatibility difference

@import is a syntax only available in CSS2.1, so it can only be recognized in IE5; the link tag is an HTML element and has no compatibility issues.

4. The difference in DOM controllability

You can operate DOM through JS and insert link tags to change the style; because the DOM method is based on documents, you cannot use @import to insert styles.

(Learning video sharing:

css video tutorial, web front-end)

The above is the detailed content of What tags are used to introduce css styles?. For more information, please follow other related articles on the PHP Chinese website!