CSS引入方式

桐叶~

已于 2023-11-24 16:47:07 修改

阅读量73

点赞数

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

于 2023-11-24 16:45:22 首次发布

本文链接：https://blog.csdn.net/m0_57851747/article/details/134602021

版权

CSS3 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

本文详细介绍了CSS的三种引入方式：内嵌式（写在style标签中，作用于当前页面），外联式（通过link标签引用单独css文件，适用于多个页面），以及行内式（写在标签style属性中，仅限当前标签）。

摘要由CSDN通过智能技术生成

一.内嵌式

内嵌式即为css写在style标签中，style标签在head标签中，作用范围为当前页面，一般用在小案例中，举例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        p{
            color: aqua;
            background-color: antiquewhite;
            font-size: 40px;
            width: 400px;
            height: 400px;

        }
    </style>
</head>
<body>
    <p>这是一个p标签</p>
</body>
</html>

二.外联式

外联式即为将css写在单独的css文件中，通过link标签引入，作用范围为多个页面，适合用在项目中，具体实例如下：

css文件（这里文件名为my.css）：

p{
    color: aquamarine;
}

引用css文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./my.css">
</head>
<body>
    <p>引入方式</p>  
</body>
</html>

三.行内式

行内式即为css写在标签的style属性中，作用范围为当前标签，配合js使用较多。具体示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="color: blue;font-size: 40px;">div标签</div>
    
</body>
</html>