Home >Web Front-end >CSS Tutorial >How to connect css files externally
How to connect css files externally
- 藏色散人Original
- 2021-01-28 09:42:3210889browse
How to link external css files: 1. Use the link tag to link to external css files, such as "68da8f0217ca180b14c3734fce02cc01 "; 2. Use the @import rule to import external css files.
The operating environment of this tutorial: windows7 system, HTML5&&CSS3 version, DELL G3 computer.
Recommended: css video tutorial
There are two ways to connect external CSS files
Use the link tag to link external css files
Use @import rules to import external css files
1. Use the link tag Linking external css files (linked)
When styles need to be applied to many pages, external style sheets will be the ideal choice. Using external style sheets, you can change the look of your entire site by changing one file.
Link an external style sheet:
<head> <link rel="stylesheet" type="text/css" href="theme.css" /> </head> <link> 标签定义文档与外部资源的关系。 <link> 标签最常见的用途是链接样式表。
Note: The link element is an empty element, it only contains attributes. The link element can only exist in the head section, but it can appear any number of times.
2. Use @import rules to import external css files (imported)
<style>
@import 'style.css' //Windows IE4/ NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import "style.css" //Windows IE4/ NS4, Macintosh IE4/NS4不识别
@import url(style.css) //Windows NS4, Macintosh NS4不识别
@import url('style.css') //Windows NS4, Mac OS X IE5, Macintosh IE4/IE5/NS4不识别
@import url("style.css") //Windows NS4, Macintosh NS4不识别
</style>The difference between link and import
link is an XHTML tag, except In addition to loading CSS, you can also define other transactions such as RSS; while @import belongs to the category of CSS and can only load CSS; when
link references CSS, it is loaded at the same time when the page is loaded; while @import requires that the page page be completely Load after loading.
link is an XHTML tag and has no compatibility issues; while @import was proposed in CSS2.1 and is not supported by lower version browsers.
ink supports using Javascript to control the DOM to change the style; @import does not support it.
@import can introduce other style sheets into the CSS file; link does not support it.
The above is the detailed content of How to connect css files externally. For more information, please follow other related articles on the PHP Chinese website!