【前端 - CSS】第 10 课 - CSS 引入方式

最新推荐文章于 2024-03-30 10:03:33 发布

Aperion

最新推荐文章于 2024-03-30 10:03:33 发布

阅读量1.3k

点赞数 2

分类专栏： HTML 文章标签：前端 css

本文链接：https://blog.csdn.net/qq_51870334/article/details/131081714

版权

HTML 专栏收录该内容

18 篇文章 2 订阅

订阅专栏

欢迎来到博主 Apeiron 的博客，祝您旅程愉快！时止则止，时行则行。动静不失其时，其道光明。

1、缘起

要想在 HTML 代码中写入 CSS 代码，要怎么做呢？有如下三种 CSS 引入方式，可以使得在 HTML 代码中使用 CSS 代码给元素添加 “花里胡哨” 的样式。

2、CSS 引入方式

2.1、内部样式表

内部样式表 在学习时使用，其 CSS 代码写在 style 标签 里面。

2.2、外部样式表

外部样式表开发使用

<link rel = "stylesheet" href = "./test.css">

示例代码：

① test.css

p {
    /* 文字颜色 */
    color:red;

    /* 字号 */
    font-size:30px;
}

② test.html

<!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：关系，样式表 -->
        <link rel = "stylesheet" href = "./test.css">
    </head>

    <body>
        <p>这是 p 标签</p>
        <div>这是 div 标签</div>
    </body>
</html>

2.3、行内样式

行内样式表 配合 JavaScript 使用

CSS 写在标签的 style 属性值里

<div style = "color : red ; font-size : 20px;">这是 div 标签</div>

示例代码：

<body>
    <p>这是 p 标签</p>
    <div style="color:green; font-size: 30px;">这是 div 标签</div>
</body>

3、总结

本期的分享总结就到这里了，如果有疑问的小伙伴儿，我们在评论区交流嗷~~~，笔者必回，我们下期再见啦！

前端 - CSS 专栏系列将持续更新，，，，，，

Aperion

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
【前端 - CSS】第 10 课 - CSS 引入方式

要想在 HTML代码中写入 CSS代码，要怎么做呢？有如下三种 CSS引入方式，可以使得在 HTML代码中使用 CSS代码给元素添加 “花里胡哨”的样式。
复制链接

扫一扫

专栏目录