方式一：内联样式（不常用）

作用域：当前标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--

内联样式
    * 在标签内使用style属性指定css代码
-->
<div style="color:red;">hello css</div>

</body>
</html>

方式二：内部样式

作用域：当前页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color:blue;
        }

    </style>
</head>
<body>

<!--

内部样式
    * 在head标签内，定义style标签，style标签的标签体内容就是css代码
-->
<div>hello css</div>
<div>hello css</div>

</body>
</html>

方式三：外部样式

作用域：可以是多个页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
   <!-- <link rel="stylesheet" href="css/a.css">-->

    <style>
        @import "css/a.css";
    </style>
</head>
<body>

<!--
外部样式
    1. 定义css资源文件。
    2. 在head标签内，定义link标签，引入外部的资源文件
-->
<div>hello css</div>
<div>hello css</div>

<p>呵呵</p>

</body>
</html>

<aside> 💡 可以通过 @import 引入其他的 CSS 资源

Untitled

</aside>

优先级？

将三种引入样式表写入同一个html文件中，分别给div定义不同颜色的background-color，查看样式表引入优先级。

优先级如下：

行内样式>外部样式表=内部样式表

行内样式表优先级最高，最先显示其样式，外部样式和内部样式优先级无法比较，根据就近原则显示样式。