CSS的引入方式

CSS 前端之家
前端之家收集整理的这篇文章主要介绍了CSS的引入方式，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

CSS的引入方式共有三种：行内样式、内部样式表、外部样式表。

一、行内样式

使用style属性引入CSS样式。

示例：

属性的应用

标签中设置的样式

实际在写页面时不提倡使用，在测试的时候可以使用。

例如：

复制代码




  
  行内样式


     
     

     
标签


@H_403_28@
复制代码

二、内部样式表在style标签中书写CSS代码。style标签写在head标签中。示例：  

我是DIV
@H_403_28@
复制代码

三、外部样式表CSS代码保存在扩展名为.css的样式表中HTML文件引用扩展名为.css的样式表，有两种方式：链接式、导入式。语法：1、链接式2、导入式

例如：

复制代码




  
  外部样式表
  
   
  
  


     
     

@H_403_28@
复制代码

浏览器运行效果：

结论：行内样式优先级高于内部样式表。

内部样式表和外部样式表比较优先级：

a、内部样式表在外部样式表上面

复制代码




  
  内部样式表和外部样式表的优先级
    
  


     
我是p段落

     
我是div

     
    
         
  1. 1111
    2. 
         
  2. 2222
    3. 
     

@H_403_28@
复制代码

浏览器运行效果：

结论：内部样式表和外部样式表使用就近原则，即谁写在下面以谁为准。

注意：导入式和链接式的优先级也是使用就近原则。

2、选择器优先级

优先级：ID选择器>类选择器>标签选择器

复制代码




  
  选择器的优先级