一、有哪三种引入方式
-
-
-
二、如何进行引入
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* 给所有p标签加样式 */
p{
color: red;
width: 300px;
height: 100px;
background-color: aquamarine;
}
</style>
</head>
<body>
<!-- 结构样式分离 -->
<p>11111</p>
<p>11111</p>
<p>11111</p>
</body>
</html>
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p style="color: red;background-color:green;">11111</p>
</body>
</html>
-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- html 文件与css文件关联 -->
<link rel="stylesheet" href="./index.css" />
/* 其中的rel="stylesheet" 是固定搭配 */
<title>Document</title>
</head>
<body>
<!-- 结构样式分离 -->
<p>11111</p>
<p>11111</p>
<p>11111</p>
</body>
</html>
三、三种引入的好处在哪里
1.内嵌:与html内容在同一页面中,但专在一处,查错难度小;
2.内联:跟随html内容一起编写,不专在一处,查错难度大;(不常用)
3.外联:不与html内容一起,从外部引入,查错难度小且独立存在。