css的三种引入方式

目录

三种引入方式

1.行内样式

2.内部样式(内嵌式)

3.外部样式

3.1外链式

3.2导入式

 引入方式的优先级

---

三种引入方式

1.行内样式

行内样式就是直接把css样式添加在HTML标签中,作为style样式的属性值

  
  
  
  
  <p style="width: 200px; height:100px;background-color: red;">文本内容p>
  <p style="width: 200px; height:100px;background-color: blue;">文本内容p>
  <p style="width: 200px; height:100px;background-color: rgb(221, 255, 0);">文本内容p>
  <p style="width: 200px; height:100px;background-color: #aa0;">文本内容p>

 2.内部样式(内嵌式)

内嵌式是在HTML中创建一个style标签，把css样式写入style标签内，style标签可以写在HTML中的任何位置，但是我们通常写在head标签里面。

  
 
    <style type="text/css">
 
    /* 第3步:书写装修的过程 */
 
    p{
      width: 200px;
      height: 200px;
      background-color: red;
    }
 
    style>
 
    
    <p>段落1p>
    <p>段落2p>
    <p>段落3p>

3.外部样式

3.1外链式

外链式是把css样式写入.css文件内，然后通过link标签链接。

<link rel="stylesheet" href="demo.css" type="text/css">
 
 
  
  <p>房子1p>
  <p>房子2p>
  <p>房子3p>

/* 第2步:找装修公司也就是创建一个新的css文件,且在css文件里面装修就可 */
p{
  width: 200px;
  height: 200px;
  background-color: pink;
}

 

3.2导入式

导入式和和外链式是差不多的，都是在外部创建一个css文件，然后在style标签内通过@import url(url);导入，但是与外链式不同的是，外链式是先加载css，再显示HTML，而导入式是先显示HTML，再加载css，所以现在基本不推荐使用导入式,推荐使用外链式。

  <style>
    @import url(demo.css);
  style>
 
 
  
  <p>房子1p>
  <p>房子2p>
  <p>房子3p>

/* 第2步:找装修公司也就是创建一个新的css文件,且在css文件里面装修就可 */
p{
  width: 200px;
  height: 200px;
  background-color: pink;
}

 引入方式的优先级

写入一个div,同时赋予3种引入方式,3种引入方式分别给div添加不同的背景颜色,最后显示的什么颜色,那么它的优先级就最高

<link rel="stylesheet" href="demo.css">
 
  <style>
  .qq{
      background-color: blueviolet;
    }
    p{
      width: 50px;
      height: 50px;
      background-color: green;
    }
    
  style>
 
  <p class="qq" style="width: 100px;height:100px; background-color:red;">段落p>

最后显示的是行内样式里设置的红色div,所以行内样式的优先级是最高的

现在删掉行内样式,看外部样式和内部样式的优先级比对

<link rel="stylesheet" href="demo.css">
 
  <style>
  .qq{
      background-color: blueviolet;
    }
    p{
      width: 50px;
      height: 50px;
      background-color: green;
    }
    
  style>
 
  <p class="qq">段落p>

 最后显示的是内部样式设置的蓝紫色,所以内部样式的优先级大于外部样式的优先级.

总结 : 优先级大小为:行内样式>内部样式>外部样式