• CSS基础：插入CSS样式的3种方法

    你好，我是云桃桃。

    一个希望帮助更多朋友快速入门 WEB 前端的程序媛。大专生，2年时间从1800到月入过万，工作5年买房。 分享成长心得。

    262篇原创内容-公众号

    后台回复“前端工具”可获取开发工具，持续更新中

    后台回复“前端基础题”可得到前端基础100题汇总，持续更新中

    如题。CSS 样式表的作用就是当浏览器读到样式表时，它将根据 CSS 样式表中的信息来格式化 HTML 文件。

    那今天就来说下 插入 CSS 样式 的 3 种方法以及延伸应用。

    一、外部样式表（External Styles）

    • 外部样式表是将样式定义在一个独立的 CSS 文件中，然后通过  标签，href 属性指定样式地址，以.css 为后缀名，将其引入到 HTML 文档中。

    • 这种方式适用于多个 HTML 文档共享样式，能够实现样式的集中管理和维护。

    来个案例吧。

    html文件

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    6.     <title>External Styles</title>
    7.     <link rel="stylesheet" href="css/css03.css" />
    8.   </head>
    9.   <body>
    10.     <p>This is a paragraph with external styles.</p>
    11.   </body>
    12. </html>

    css文件

    1. /* css03.css */
    2. p {
    3.   color: green;
    4. }

    图片

    在这个案例中，我们是在当前 html 文件，建立一个名为 css 的文件夹，并在里面建立了 css03.css 的文件，字体变成绿色的了，说明应用成功了。

    二、 内部样式表（Internal Styles）

    • 内部样式表是在 HTML 文档的  标签内使用