css的三种引入方式

目录

三种引入方式

1. 行内样式

2. 内部样式 (内嵌式)

3. 外部样式

3.1 外链式

3.2 导入式

 引入方式的优先级

三种引入方式

1. 行内样式

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

  
  
  
  
  
 文本内容 
  
 文本内容 
  
 文本内容 
  
 文本内容 

 2. 内部样式 (内嵌式)

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

  

    

    
    
 段落 1 
    
 段落 2 
    
 段落 3 

3. 外部样式

3.1 外链式

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

 
  
  
 房子 1 
  
 房子 2 
  
 房子 3 

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

3.2 导入式

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

  


  
  
 房子 1 
  
 房子 2 
  
 房子 3 
  

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

 引入方式的优先级

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

  

  
 段落 

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

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

  

  
 段落 

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

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