外部样式表

外部样式表 external style sheet

html
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=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./css/style.css" />
  </head>

  <body>
    <div class="title">我是标题</div>
    <div class="box">我是盒子</div>
  </body>
</html>

.title {
  margin: 20px 0;
  font-size: 24px;
  font-weight: 700;
}

.box {
  width: 100px;
  height: 100px;
  background-color: #ccc;
}

外部样式表（external style sheet）是将 css 编写一个独立的文件中，并且通过 <link> 元素引入进来；
使用外部样式表主要分成两个步骤：
- 第一步：将 css 样式在一个独立的 css 文件中编写（后缀名为 .css）；
- 第二步：通过 <link> 元素引入进来；
可以在 style 元素或者 CSS 文件中使用 @import 导入其他的 CSS 文件。

@import url("./css/other.css");

.title {
  margin: 20px 0;
  font-size: 24px;
  font-weight: 700;
}