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

这篇文章主要介绍了详解CSS文件的三种引入方式的相关资料,CSS的引入方式共有三种:行内样式、内部样式表、外部样式表。具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

一、行内样式

使用style属性引入CSS样式。

示例:

 

style属性的应用

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

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

例如:

   行内样式 

Leaping Above The Water

我是p标签

二、内部样式表

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

示例:

  

例如:

   内部样式表 
我是DIV

三、外部样式表

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

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

语法:

1、链接式

 

2、导入式

 

例如:

   外部样式表 
  1. 1111
  2. 2222

链接式和导入式的区别

1、属于XHTML

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

@import

1、属于CSS2.1

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

四、CSS中的优先级

1、样式优先级

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

例如:

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

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

我是p段落

浏览器运行效果:

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

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

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

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

我是p段落

我是div
  1. 1111
  2. 2222

浏览器运行效果:

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

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

我是p段落

我是div
  1. 1111
  2. 2222

浏览器运行效果:

 

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

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

2、选择器优先级

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

   选择器的优先级 

111

222

333

浏览器运行效果:

 

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持0133技术站。

以上就是详解CSS文件的三种引入方式的详细内容,更多请关注0133技术站其它相关文章!

赞(0) 打赏
未经允许不得转载:0133技术站首页 » CSS 教程