CSS基础：插入CSS样式的3种方法

你好，我是云桃桃。

一个希望帮助更多朋友快速入门 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>