How to import css files in html-HTML Tutorial-php.cn

Home

Web Front-end

HTML Tutorial

How to import css files in html

青灯夜游

Jun 15, 2021 pm 02:09 PM

css file html

Method: 1. Use the link tag with the syntax ""; 2. Use the "@import" rule , syntax "@import url("CSS file path");".

How to import css files in html

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;
}

Copy after login

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文件的路径" >

Copy after login

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>

Copy after login

Rendering:

How to import css files in html

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>

Copy after login

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>

Copy after login

Rendering:

How to import css files in html

(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!

Statement of this Website

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