前端应用_css_css页面三种引用方法_前端进行网页的引用 csdn-优快云博客

本文介绍了CSS的三种引用方式：内联式、嵌入式及外联式，并详细解释了每种方式的应用场景与优缺点。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大家都知道 css 的语法格式为

标签名字{key：value ， key：value} 这样的形式保存的，

但是我们如何引用这个 css 呢，一共有三种：

1. 内联式

通过 style 属性进行表示，例子如下：
style=“width:100px; height:300px ;color:red; font-family:‘微软雅黑’;”
双引号内是 key：value；的形式出现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 这是注释的格式-->

</head>
<div style="width:100px; height:300px ;color:red; font-family:'微软雅黑';">
大家都知道 css 的语法格式为 标签名字{key：value ， key：value}   这样的形式保存的， 但是我们 如何引用这个 css 呢，  一
</div>
<div style="width:100px; height:300px ;color:red; font-family:'微软雅黑';">
大家都知道 css 的语法格式为 标签名字{key：value ， key：value}   这样的形式保存的， 但是我们 如何引用这个 css 呢，  一
</div>
</html>
</body>
</html>

这种方式不推荐，推荐第二和第三种

2. 嵌入式

这种形式比较直接，直接可以看到，和内联式的区别就是抽出来放到head 里面，还是style 标签，div 选择器放到里面。

形式如下：

<style type="text/css">
    div{
    width:100px;
     height:300px ;
     color:red;
      font-family:'微软雅黑';
    }

</style>

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 这是注释的格式-->
    <style type="text/css">
        div{
        width:100px;
         height:300px ;
         color:red;
          font-family:'微软雅黑';
        }

    </style>

</head>
<div>
大家都知道 css 的语法格式为 标签名字{key：value ， key：value}   这样的形式保存的， 但是我们 如何引用这个 css 呢，  一
</div>
<div>
大家都知道 css 的语法格式为 标签名字{key：value ， key：value}   这样的形式保存的， 但是我们 如何引用这个 css 呢，  一
</div>
</html>
</body>
</html>

3. 外联式

通过link 属性链接到样式文件里

首先要创建个样式文件扩展名要为 css ，咱们写个 1.css 就行了
把div 选择器放到文件里
div{
width:100px;
height:300px ;
color:red;
font-family:‘微软雅黑’;
}
引用 css 文件里的 div

示例代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- 这是注释的格式-->
    <link rel="stylesheet" type="text/css" href="1.css">

</head>
<div>
大家都知道 css 的语法格式为 标签名字{key：value ， key：value}   这样的形式保存的， 但是我们 如何引用这个 css 呢，  一
</div>
<div>
大家都知道 css 的语法格式为 标签名字{key：value ， key：value}   这样的形式保存的， 但是我们 如何引用这个 css 呢，  一
</div>
</html>
</body>
</html>