CSS 的三种引入方式

按照 CSS 样式的引入方式，可以分为三大类：行内式、嵌入式、链接式。

1、行内式 —— 行内样式表

行内样式表是在元素标签内部的 style 属性中设定 CSS 样式，适用于修改简单样式。

<div style="color: red; font-size: 12px;">我是红色文字</div>

说明：

内部样式表是在 html 内部，将页面所有的 CSS 代码抽取出来，放到一个单独的 <style> 标签中。

<style>
    div {
        color: red;
        font-size: 12px;
    }
</style>

说明：

实际开发中大多都是用外部样式表，样式写到单独的 CSS 文件中，之后把 CSS 文件引入到 HTML 页面中使用。

步骤1: 新建一个 .css 为后缀名的文件，将所有 CSS 代码放到这个文件
步骤2: 在 HTML 页面，用 <link> 标签引入 CSS 文件

<!-- rel 定义当前文档与被链接文档之间的关系。-->
<!-- 指定为 “stylesheet”，表示被链接文档是一个样式表文件 -->
<!-- href 可以是绝对路径也可以是相对路径-->
<link rel="stylesheet" href="css文件路径">