你好，我是云桃桃。
一个希望帮助更多朋友快速入门 WEB 前端的程序媛。大专生，2年时间从1800到月入过万，工作5年买房。 分享成长心得。
262篇原创内容-公众号
后台回复“前端工具”可获取开发工具，持续更新中
后台回复“前端基础题”可得到前端基础100题汇总，持续更新中
如题。CSS 样式表的作用就是当浏览器读到样式表时，它将根据 CSS 样式表中的信息来格式化 HTML 文件。
那今天就来说下 插入 CSS 样式 的 3 种方法以及延伸应用。
一、外部样式表（External Styles）
-
外部样式表是将样式定义在一个独立的 CSS 文件中，然后通过
<link>标签，href 属性指定样式地址，以.css 为后缀名，将其引入到 HTML 文档中。 -
这种方式适用于多个 HTML 文档共享样式，能够实现样式的集中管理和维护。
来个案例吧。
html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>External Styles</title>
<link rel="stylesheet" href="css/css03.css" />
</head>
<body>
<p>This is a paragraph with external styles.</p>
</body>
</html>
css文件
/* css03.css */
p {
color: green;
}
在这个案例中，我们是在当前 html 文件，建立一个名为 css 的文件夹，并在里面建立了 css03.css 的文件，字体变成绿色的了，说明应用成功了。
二、 内部样式表（Internal Styles）
-
内部样式表是在 HTML 文档的
<head>标签内使用<style>标签定义样式的一种方式。 -
这种方式适用于单个 HTML 文档的样式设置，能够将样式和 HTML 结构分离，但不利于多个页面的样式共享。
在下面案例中，color: blue;指定了段落文本的颜色为蓝色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Internal Styles</title>
<style>
p {
color: blue;
}
</style>
</head>
<body>
<p>This is a paragraph with internal styles.</p>
</body>
</html>
当我们看到<style>标签时，就知道这是内部样式表的部分，它们是一种在 HTML 文档中定义样式的方法。
在<style>标签内部，我们定义了一个样式规则，针对<p>标签进行了样式设置。
三、 内联样式（Inline Styles）
-
内联样式是直接在 HTML 元素的
style属性中定义样式的一种方式。 -
不利于样式的复用管理。
下面是一个使用内联样式的案例，给 <body>、<h1> 和 <p> 标签分别设置不同的背景颜色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Inline Styles</title>
</head>
<body style="background-color: green;">
<h1 style="background-color: blue; color: white;">Welcome to my website</h1>
<p style="background-color: pink;">This is a paragraph with some text.</p>
</body>
</html>
在这个案例中，我们直接在 <body>、<h1> 和 <p> 标签的 style 属性中设置了背景颜色。
这种方法虽然可以快速地为元素添加样式，但是对于复杂的页面结构来说，内联样式会使 HTML 文件变得臃肿，不利于维护和管理。
因此，内联样式更适合于一些简单的样式设置或临时调试，要谨慎使用。
四、延伸：多个样式表
我们在做项目的时候呢，有时候会涉及以上种表同时写入同一个 html 页面的情况。那如果都同时作用在一个元素上，有冲突的时候，应该如何取样式呢？
我们一起来看看这 3 种情况。
1、内部样式表和外部样式表同时存在
如果都给同一个元素定义了样式，最终应该取谁的？
答案就是：如果同一个选择器（元素）在不同的样式表中被定义了一些属性，那么最后被浏览器读取的样式表中的属性值将被应用。
ok，我们来举 2 个案例，一下就能看出来区别了。
MultipleCSS.html
<!DOCTYPE html>
<html>
<head>
<title>Multiple Stylesheets Example</title>
<link rel="stylesheet" href="css/multipleStylesheets01.css" />
<link rel="stylesheet" href="css/multipleStylesheets02.css" />
<style>
body {
font-family: Arial, sans-serif;
background-color: pink; /* 粉色*/
color: #333333;
}
</style>
</head>
<body>
<h1>Welcome to my website</h1>
<div class="">
<p>This is an example of multiple stylesheets.</p>
</div>
</body>
</html>
multipleStylesheets01.css
/* multipleStylesheets01.css */
body {
background-color: #0f0; /* 绿色 */
}
h1 {
color: #ff0000; /* 红色 */
}
multipleStylesheets02.css
/* multipleStylesheets02.css */
body {
background-color: yellowgreen; /*草绿色*/
color: #0000ff; /* 蓝色 */
}
效果如图。
因为 style 标签在 link 样式表后面，所以主体是粉色，pink。
那如果其他 2 个.css文件不变，在 html 文件里，调换下 style 和 link 的位置呢？把 style 放前面，link 放后面。
<!DOCTYPE html>
<html>
<head>
<title>Multiple Stylesheets Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: pink; /* 粉色*/
color: #333333;
}
</style>
<link rel="stylesheet" href="css/multipleStylesheets01.css" />
<link rel="stylesheet" href="css/multipleStylesheets02.css" />
</head>
<body>
<h1>Welcome to my website</h1>
<div class="">
<p>This is an example of multiple stylesheets.</p>
</div>
</body>
</html>
那body标签的颜色，肯定就是用样式表的草绿色的了。所以这 2 个类型的样式表如果有重合样式的元素，可以说是，后来者居上。
2、内联样式表，内部样式表和外部样式表同时存在
如果它们同时存在，则内联样式表的优先级最高。
还用以上这个案例吧，如果我们在 body 上，加一个天蓝色。
<!DOCTYPE html>
<html>
<head>
<title>Multiple Stylesheets Example</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: pink; /* 粉色*/
color: #333333;
}
</style>
<link rel="stylesheet" href="css/multipleStylesheets01.css" />
<link rel="stylesheet" href="css/multipleStylesheets02.css" />
</head>
<body style="background: #39caf7">
<h1>Welcome to my website</h1>
<div class="">
<p>This is an example of multiple stylesheets.</p>
</div>
</body>
</html>
那其他样式就被覆盖，body 就是蓝色了。
3、如果页面上没有这 3 种样式表
那默认就是浏览器默认的样式了，比如我们的页面默认是白色的，四周都有间距，这些都是浏览器默认的样式。如图。
小结
以上，我们总结一下——
当一个 HTML 元素被赋予多个样式时，这些样式会按照以下规则进行“层叠”，形成一个新的“虚拟”样式表。这些规则的优先级从高到低排列如下：
1） 行内样式（直接在 HTML 元素中定义的样式）
2）外部样式表和内部样式表（在 head 部分定义的样式）
3） 浏览器默认样式
因此，行内样式拥有最高的优先级，会覆盖外部和内部样式表定义的样式，以及浏览器默认的样式。
ok，本节完。
