CSS 引入方式

最新推荐文章于 2024-02-04 09:42:18 发布

CodeDoraemon

最新推荐文章于 2024-02-04 09:42:18 发布

阅读量232

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_40417070/article/details/113259432

版权

CSS 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

CSS 引入方式

CSS 的引入可以分为三个样式

行内样式表（行内式）
内部样式表（嵌入式）
外部样式表（链接式）

1. 内部样式表

在这里插入图片描述

放到 style 之中
style 理论上可以放在任何的位置，但是习惯上放在的上面

1.1 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内部样式表</title>
</head>
<body>
    
    <div>
        所谓的内部样式表，就是在 html 页面的内部写样式，但是单独写到 style 标签内部
    </div>

</body>
</html>

1.2 运行结果

在这里插入图片描述

2. 行内样式表

也叫内联样式表，是在元素标签内部的 style 属性中设定的 CSS 样式适合于修改简单样式
在这里插入图片描述适合于样式修改比较少的地方

2.1 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>行内样式表</title>
</head>
<body>

    <p>夏天夏天悄悄过去留下小秘密</p>

    <p>压心底压心底不能告诉你</p>
    
    <p> 晚风吹过温暖我心底我又想起你</p>
    
    <p> 多甜蜜多甜蜜怎能忘记</p>
    
    <p>不能忘记你把你写在日记里</p>
    
    <p>不能忘记你心里想的还是你</p>
    
    <p>浪漫的夏季还有浪漫的一个你</p>

    <!-- 直接在里面进行修改 不用在外面的 style 中单独修改 -->
    <!-- 叫做行内样式表 -->
    <p style="color: pink;">给我一个粉红色的回忆</p>

</body>
</html>

2.2 运行结果

在这里插入图片描述

3. 外部样式表

使用的最多，适合于样比较多的情况，核心是样式单独写到 CSS 文件中，之后将 CSS 文件引入到 HTML 页面中使用

新建 .css文件将所有的 css 代码放入到此文件中
html 中使用标签引入这个文件

3.1 示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- rel 属性指示被链接的文档是一个样式表 -->
    <!-- herf 表示链接的文件的路径 -->
    <!-- .css 与 .html 同一路径 只需要文件名即可 -->
    <!-- 目的是为了防止 <style> 中的代码过多不方便管理 -->
    <!-- 在.css 文件中不需要写 标签 直接写属性即可 -->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div>hello kugou</div>
</body>
</html>