CSS 文件的三种引入方式

1.行内

通过 html 标签内部的 style 属性引入

<!-- 1.行内样式 直接写在标签里 -->
<div style="width: 20px;height: 20px;background-color: black"></div>

2.内部

通过页面中的 style 标签引入

<style>
  /* 内部样式  */
  section {
    color: brown;
  }
</style>

3.外部

通过 link 标签引入外部 CSS 文件

<!-- 3.引入外部样式 -->
<link rel="stylesheet" href="css/index.css" />

权重：行内>内部>外部

使用@import也可以在当前 CSS 文件中引入其他 CSS 文件。

<style>
  /* 引入其他CSS文件 */
  @import "./base.css";
</style>

CSS 的层叠性

注意：如果同一元素被设置多个样式，前面的会被后面的覆盖掉（后来者居上）