第一种直接在属性标签后添加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,有可能第一次不会加载成功.
这四种引入方式推荐用第三种,是最好的.
CSS四种引入方式
原文地址：https://www.cnblogs.com/425500828zjy/p/9038671.html