内联样式

内联样式定义在 HTML 元素的 style 属性中，样式只会影响到当前的元素。

$$edit$$
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>内联样式</title>
    </head>
    <body>
        <h1 style="color: teal; background-color: pink">三眼鸭的编程教程</h1>
        <p style="color: green">学习编程的好去处。</p>
    </body>
</html>

$$demo <h1 style="color: teal; background-color: pink">三眼鸭的编程教程</h1> <p style="color: green">学习编程的好去处。</p>

$$warning

通常我们很少使用内联样式，因为它会随着代码的增多愈发难以管理与维护，并且定义的样式也无法复用。

内部样式表

内部样式表指的是将样式放在 <style> 元素中，并将 <style> 放到 <head> 元素中。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>内部样式表</title>
        <style>
            h1 {
                color: teal;
                background-color: pink;
            }
            p {
                color: green;
            }
        </style>
    </head>
    <body>
        <h1>三眼鸭的编程教程</h1>
        <p>学习编程的好去处。</p>
    </body>
</html>

外部样式表

外部样式表就是将样式单独作为一个文件，一般是 .css 后缀的样式文件。接着通过在 head 元素中添加 link 元素来引入。

rel="stylesheet" 表明引入的是样式文件， href="styles.css" 表明文件引入的路径，

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>外部样式表</title>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <h1>三眼鸭的编程教程</h1>
        <p>学习编程的好去处。</p>
    </body>
</html>

/* styles.css */
h1 {
    color: teal;
    background-color: pink;
}
p {
    color: green;
}

@import 引入

@import 用在 <style> 元素当中，用以引入另一个样式文件。

<style>
    @import url("./styles.css");
    /* 其他样式 */
</style>

$$tip

@import 必须是样式表中除了@charset外的第一个元素。

总结

各种引入样式的适用场景如下：

内联样式：尽量不使用
内部样式表：当前页面的样式
外部样式表：整个网站共同的样式
@import：应用场景较少

练习

用内联样式、内部样式表、外部样式表的方式补全下面的代码。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>引入 CSS 练习</title>
    </head>
    <body>
        <h1>我是 h1 元素，用内联样式修改我的颜色为 pink。</h1>
        <h2>我是 h2 元素，用内部样式表修改我的颜色为 yellow。</h2>
        <h3>我是 h3 元素，用外部样式表修改我的颜色为 blue。</h3>
    </body>
</html>