栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Html/CSS > CSS教程

详解CSS文件的三种引入方式

CSS教程 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

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

一、行内样式

使用style属性引入CSS样式。

示例:

style属性的应用

直接在HTML标签中设置的样式

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

例如:




  
  行内样式


     
     

Leaping Above The Water

我是p标签

二、内部样式表

在style标签中书写CSS代码。style标签写在head标签中。

示例:





h3{

color:red;

}





例如:




  
  内部样式表
  
  
    div{
 background: green;
    }
  


     我是DIV

三、外部样式表

CSS代码保存在扩展名为.css的样式表中

HTML文件引用扩展名为.css的样式表,有两种方式:链接式、导入式。

语法:

1、链接式

2、导入式



@import url("css文件路径");


例如:




  
  外部样式表
  
   
  
  
    @import url("css/style.css");
  


     
  1. 1111
  2. 2222

链接式和导入式的区别

1、属于XHTML

2、优先加载CSS文件到页面

@import

1、属于CSS2.1

2、先加载HTML结构在加载CSS文件。

四、CSS中的优先级

1、样式优先级

行内样式>内部样式>外部样式(后两者是就近原则)

例如:

行内样式和内部样式比较优先级:




  
  行内样式和内部样式表的优先级
    
  
    p{
      color: blue;
    }
  


     
     

我是p段落

浏览器运行效果:



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

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

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




  
  内部样式表和外部样式表的优先级
    
  
    p{
      color: blue;
    }
  
  
   


     

我是p段落

我是div
  1. 1111
  2. 2222

浏览器运行效果:



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




  
  内部样式表和外部样式表的优先级
    
   
    
  
    p{
      color: blue;
    }
  


     

我是p段落

我是div
  1. 1111
  2. 2222

浏览器运行效果:



 

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

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

2、选择器优先级

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




  
  选择器的优先级
  
    #a{
      color: green;
    }
    .b{
      color: yellow;
    }
    h2{
      color: red;
    }
  


     111 
     

222

333

浏览器运行效果:



 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持考高分网。

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/215231.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号