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

学习前端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;<!--ID选择器-->
    }
    .b{
      color: black;<!--类选择器-->
    }
    div{
      color: red;<!--标签选择器-->
    }
  </style>
</head>
<body>
     <div>红色</div>
     <div id="a" class="b">粉色</div>
     <div class="b">黑色</div>
</body>
结果:
前端css的引用方式
前端css的引用方式有哪几种?css的三种引用方式是什么?关注知了堂成都前端培训班,带你了解更多前端相关问题。

实战教学·项目驱动

开班计划中
  • 软件测试

    12月13日

  • JAVA

    12月13日

  • 前端

    12月26日

  • 网安

    12月27日

24小时报名热线

132 2811 3191

预约试学