Home >Web Front-end >HTML Tutorial >How to reference css files in html
How to reference css files in html
- 青灯夜游Original
- 2021-07-14 12:00:5013591browse
Methods to reference css files: 1. Use the "5416db1feff4fc17ff5d53814662b3b7" statement; 2. In the style tag Use the "@import url("css file path");" statement.
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
CSS code is stored in a style sheet with a .css extension.
HTML files reference a style sheet with a .css extension (external CSS). There are two ways: link type, Imported.
Grammar:
1. Link type
<link type="text/css" rel="styleSheet" href="CSS文件路径" />
2. Import type
<style type="text/css">
@import url("css文件路径");
</style>For example:
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>外部样式表</title>
<!--链接式:推荐使用-->
<link rel="stylesheet" type="text/css" href="css/style.css" />
<!--导入式-->
<style type="text/css">
@import url("css/style.css");
</style>
</head>
<body>
<ol>
<li>1111</li>
<li>2222</li>
</ol>
</html>The difference between link type and import type
2cdf5bf648cf2f33323966d7f58a7f3f
1. Belongs to XHTML
2. Prioritize loading CSS files to the page
@import
1. It belongs to CSS2.1
2. Load the HTML structure first and then load the CSS file.
Advantages of external CSS:
1. The size of the HTML page is smaller and the structure is clearer.
2. Faster loading speed.
3. The same .css file can be used on multiple pages.
Disadvantages of external CSS:
1. The page may not render correctly before the external CSS is loaded.
Learning video sharing: css video tutorial, html video tutorial
The above is the detailed content of How to reference css files in html. For more information, please follow other related articles on the PHP Chinese website!