Three CSS import methods
According to the position of CSS style writing (or the way it is introduced), CSS style sheets can be divided into the following three categories:
- Inline style sheet (inline style), also known as inline style
- Internal style sheet (embedded)
- External style sheet (linked)
Priority between the three: inline style>internal style>external style
1. External style sheet
There are two types of external style sheets: <link> link type and @import type. The priority between them follows the principle of proximity, and their characteristics are as follows:
- css is saved in the .css file
- Import using the <link> tag or @import in HTML
Features of Linked <link>:
- Belongs to XHTML, no compatibility issues
- Load CSS files to the page first
Features of import @import:
- Belongs to CSS2.1, lower version browser does not support
- Load the HTML structure first and then load the CSS file.
2. Internal style sheet
Features of the internal style sheet:
- Not applicable to external css files
- Put css in the <style> of the <head> tag in HTML
3. Inline style (not recommended)
Features of inline styles:
- Affect only one element
- Add in the style attribute of the HTML element
Sample source code and web page display
.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>三种CSS导入方式</title>
<style type="text/css">
p{
background: #EE6412;
}
/* @import "setbackground.css"*/
</style>
<link type="text/css" rel="stylesheet" href="setbackground.css">
</head>
<body>
<h1>标题</h1>
<p style="background: #1FB1DD">这是一个普通的段落。</p>
<p>这更是一个普通的段落。</p>
</body>
</html>
.css
@charset "utf-8";
/* CSS Document */
h1{
background: #F4F924;
}
p{
background: #10E90E;
}
Web page
