Home >Web Front-end >Front-end Q&A >What are the forms of css external links?

What are the forms of css external links?

青灯夜游Original: 2022-07-27 20:27:315927browse

There are two forms of css external links: 1. Link the css external style to the HTML page through the link tag. The link tag needs to be placed in the head tag area, and the syntax is ""; 2. Link through the "@import" rule in the style tag, with the syntax "@import url("css file path");".

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

If the CSS style is placed in a file outside the web page document, it is called an external style sheet. A CSS style sheet document represents an external style sheet.

In fact, the external style sheet is a text file with the extension .css. When you copy the CSS style code into a text file and save it as a .css file, it is an external style sheet.

As shown below, it is an external style sheet:

What are the forms of css external links?

So how to link the css external style sheet to the HTML document? There are two ways to use external style sheets:

1), using link

The link style refers to defining the CSS style sheet externally and forming it as .CSS file extension, and then link to the page through the <link> link tag in the page, and the link statement must be placed in the

tag area of the page.

Syntax:

<link type="text/css" rel="styleSheet"  href="CSS文件路径" />

2), use @import

Import is through @import in

syntax for declaration in tags:

<style type="text/css">
  @import url("css文件路径");
</style>

Simple example:

css external style sheet style.css

h1{
	color:red;
}
p{
	font-size:14px;
	color:green;
}

HTML Document

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link type="text/css" rel="styleSheet"  href="style.css" />
		<!-- <style>
			@import url("style.cs");
		</style> -->
	</head>
	<body>
		<h1>link标签或@import的应用</h1>
		<p>外部定义CSS样式表以.CSS为扩展名文件，然后在页面中通过link标签或@import链接到页面中。</p>
	</body>
</html>

Implementation effect:

What are the forms of css external links?

##The difference between link and @import:

1. Difference in affiliation

@import is the syntax rule provided by CSS, which only has the function of importing style sheets; link is the 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:

Getting started with web front-end)

The above is the detailed content of What are the forms of css external links?. For more information, please follow other related articles on the PHP Chinese website!

html5 css css3 html JS dom href 样式表

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：What are the three types of css rules?Next article：What are the three types of css rules?

See more

What are the forms of css external links?

Related articles