Home >Web Front-end >CSS Tutorial >How to introduce css files
How to introduce css files
- coldplay.xixiOriginal
- 2021-04-29 17:22:4813888browse
Methods to introduce css files: 1. Use the style attribute to introduce CSS styles; 2. Write CSS code in the style tag; 3. Save the CSS code in a style sheet with the extension [.css].
The operating environment of this tutorial: windows7 system, css3 version, DELL G3 computer.
How to introduce css files:
1. Inline style
Use the style attribute to introduce CSS styles.
Example:
<h1 style="color:red;">style属性的应用</h1> <p style="font-size:14px;color:green;">直接在HTML标签中设置的样式</p>
It is not recommended to use when writing pages, but can be used during testing.
For example:
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>行内样式</title>
</head>
<body>
<!--使用行内样式引入CSS-->
<h1 style="color:red;">Leaping Above The Water</h1>
<p style="color:red;font-size:30px;">我是p标签</p>
</body>
</html>2. Internal style sheet
Write CSS code in the style tag. The style tag is written in the head tag.
Example:
<head>
<style type="text/css">
h3{
color:red;
}
</style>
</head>For example:
<!DOCTYPE>
<html>
<head>
<meta charset="utf-8" />
<title>内部样式表</title>
<!--使用内部样式表引入CSS-->
<style type="text/css">
div{
background: green;
}
</style>
</head>
<body>
<div>我是DIV</div>
</body>
</html>3. External style sheet
CSS code is saved in the extension .css The
HTML file in the style sheet refers to the style sheet with the extension .css. There are two ways: link type and import type.
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>Related tutorials Recommended: CSS video tutorial
The above is the detailed content of How to introduce css files. For more information, please follow other related articles on the PHP Chinese website!