Home > Article > Web Front-end > How to import css files in html
How to import css files in html
- 青灯夜游Original
- 2021-06-15 14:09:2512738browse
Method: 1. Use the link tag with the syntax ""; 2. Use the "@import" rule , syntax "@import url("CSS file path");".
The operating environment of this tutorial: Windows 7 system, CSS3&&HTML5 version, Dell G3 computer.
CSS files are generally called CSS external style sheets, which are text files used to place CSS codes, and CSS codes are composed of text codes with certain rules. We use Notepad to change the extension to become a CSS file.
css files have a .css suffix. We see that files with a .css suffix are css files.
How to import css files in html
There are two ways to import css files in html:
Link )
Import (@import)
css style file --style.css code:
p{
font-size: 20px;
color: #fff;
background-color: palevioletred;
}1. Link type (link)
The link type will load the CSS file before loading the main body of the web page file, so the displayed web page will have a style effect from the beginning, and it will not be like the imported one. The unstyled web page is displayed first, and then the styled web page is displayed like the link style. This is the advantage of the link style.
Grammar:
<link rel="stylesheet" type="text/css" href="css文件的路径" >
Code example:
HTML code:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>链接式</title> <link rel="stylesheet" type="text/css" href="style.css" > </head> <body> <p>链接式链接式链接式链接式链接式链接式链接式链接式链接式链接式链接式链接式<p> </body> </html>
Rendering:
2. Import (@import)
Import will load the CSS file after the entire web page is loaded, so this leads to a problem. If the web page compares Usually, the page without style will appear for a while, and then the style of the web page will appear after flashing for a while. This is an inherent flaw of imports.
Grammar:
<style type="text/css" media="screen">
@import url("CSS文件路径");
</style> Code example:
HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>导入式</title>
<style type="text/css" media="screen">
@import url("style.css");
</style>
</head>
<body>
<p>导入式导入式导入式导入式导入式导入式导入式导入式导入式<p>
</body>
</html>Rendering:
(Learning video sharing: css video tutorial)
The above is the detailed content of How to import css files in html. For more information, please follow other related articles on the PHP Chinese website!