当前位置：知了堂 > 常见问题新 > 前端常见问题新 > 前端css的引用方式有哪几种？css的三种引用方式是什么？

前端css的引用方式有哪几种？css的三种引用方式是什么？

来源: 知了汇智 发布: 知了小姐姐 发布时间: 2021-10-26

学习前端html+css+js是必备的，关于CSS的引用方式，你知道有哪几种吗？今天来看看CSS的三种引用方式是什么？
层叠样式表CSS有三种引用方式：行内样式、内部样式表、外部样式表。引用方式的优先级为：行内样式>内部样式>外部样式(后两者是就近原则)，当行内样式和内部样式共同使用时，优先引用行内样式，当内部样式表和外部样式表同时时使用就近原则，即谁写在下面以谁为准。
行内样式表：使用style属性引入CSS样式。实际在写页面时不提倡使用，在测试的时候可以使用。
示例：<h1 style="color:blue;">css的行内样式表示例</h1>
结果：
前端css的引用方式

内部样式表：在style标签中书写CSS代码。style标签写在head标签中。
<head>
   <style type="text/css">
      h3{
            color:red;
         }
   </style>
</head>
<body>
<h3>css的内部样式表示例</h3>
</body>
运行结果：
前端css的引用方式

外部样式表：CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表，有两种方式：链接式、导入式。，一般用的最多的就是连接式。
1、链接式：属于XHTML，优先加载CSS文件到页面
<link type="text/css" rel="styleSheet" href="CSS文件路径" />
2、导入式：属于CSS2.1，先加载HTML结构在加载CSS文件。
<style type="text/css">
  @import url("css文件路径");
</style>
除了引用方式，还有一个选择器的使用，选择器一共有三种方式：ID选择器、类选择器、标签选择器。其优先级为ID选择器>类选择器>标签选择器。
示例：
<head>
  <style type="text/css">
    #a{
      color:pink;
    }
    .b{
      color: black;
    }
    div{
      color: red;
    }
  </style>
</head>
<body>
     <div>红色</div>
     <div id="a" class="b">粉色</div>
     <div class="b">黑色</div>
</body>
结果：

前端css的引用方式有哪几种？css的三种引用方式是什么？关注知了堂成都前端培训班，带你了解更多前端相关问题。

注：本文部分内容以及图片来源于网络，如网站发布的有关的信息侵犯到您的权益，请及时与我们取得联系删除

上一篇：一个完整的web框架有哪些内容？常用的web开发框架下一篇：前端开发包括哪些内容?前端开发要怎么做

前端css的引用方式有哪几种？css的三种引用方式是什么？

Java开发

网络安全培训

鸿蒙认证

常见问题