第一种直接在属性标签后添加CSS代码,可读性差,不推荐使用.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--第一种引入方式-->
<div style="color: red;background-color: beige">Hello Yuan</div>
</body>
</html>
第二种引入方式,在<head>部分以<style></style>方式想要修改的标签名加大括号,设置属性.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p{
color: rebeccapurple;
font-size: 40px;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<!--第二种引入方式-->
<div>Hello Yuan</div>
<p>Hello p</p>
<a href="">点我</a>
</body>
</html>
第三种引入方式,通过自闭和标签<link hrel=" 文件名.css" rel="stylesheet">引入(css代码写到单独的文件中然后引入).
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--链接式-->
<link href="test1.css" rel="stylesheet">
</head>
<body>
<!--第三种引入方式-->
<div>Hello Yuan</div>
<p>Hello p</p>
<a href="">点我</a>
</body>
</html>
css文件
p{
color: rebeccapurple;
font-size: 40px;
}
a{
text-decoration: none;
}
第四种方式通过<style>标签,用途@import导入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--导入式-->
<style>@import "test1.css";
</style>
</head>
<body>
<!--第三种引入方式-->
<div>Hello Yuan</div>
<p>Hello p</p>
<a href="">点我</a>
</body>
</html>
第三种和第四种方式类似,它们的区别在
1.第三种是HTML语言式引入,第四种是CSS引入
2.第三种方式没有次数限制,想引入多少次都可以,第四种有次数限制
3.第三种在用户体验上比第四种要好,因为第四种引入是@import CSS代码,在打开网页时先加载HTML代码后加载CSS,有可能第一次不会加载成功.
这四种引入方式推荐用第三种,是最好的.
原文地址：https://www.cnblogs.com/425500828zjy/p/9038671.html
时间： 2024-10-13 23:48:41