007-多种CSS的引入方式
作者：互联网
各种CSS的加载方式：
（1）内联样式（缺乏整体性和规划性，维护成本高）
只能给单一的一个标签添加样式。
在body中写style
<body>
<p style="color: brown;font-size: 15px;">内联样式方案</p>
</body>
（2）内部样式（在单个文件中同时给多个元素进行统一规划，但不适用于多个文件）
.在head中编写style（优点是便于管理单个文件的css样式）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=p, initial-scale=1.0">
<title>Document</title>
<style>
p{
color: brown;
font-size: 15px;
}
</style>
</head>
<body>
<p>内联样式方案</p>
</body>
</html>
（3）外部样式（适用于多个文件时，推荐，高效便捷）
当需要应用到多个页面时，外部样式可以通过修改一个文件，整体改变整个站点的外观，每个页面使用<link>标签链接到样式表，<link>标签在文档的头部。
在css样式.html中编写，运行后，当点击“链接到产品”时跳转到连接到产品.html页面。
两个页面是同级关系用./就行。
传统实现方法如下：
这时，如果想使用外部样式表来实现上述过程，步骤入下：
1.独立创建CSS文件，public.css,在这个文件中只能写css。
2.然后在css样式.html这个文件中的head中编写<link>标签。
添加的代码为
<link rel="stylesheet" href="./public.css">
整体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=p, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./public.css">
</head>
<body>
<p>外部样式方案</p>
<a href="./链接到产品.html">产品链接</a>
</body>
</html>
运行结果如下：
标签：文件,样式,标签,007,CSS,引入,css,页面 来源： https://www.cnblogs.com/fanglijiao/p/16571515.html