css如何引入外部样式表

技术css如何引入外部样式表这篇文章将为大家详细讲解有关css如何引入外部样式表,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。 引入方法:1、使用link标

本文将详细解释如何在外部样式表中引入css。边肖觉得挺实用的,分享给大家参考。希望你看完这篇文章能有所收获。

导入方式:1。使用链接标记导入,语法为“link href='css文件路径' rel='样式表'/”;'/";2.在样式标记中使用“@import”规则,语法为“@import url('css文件路径')”;" .

本教程操作环境:windows7系统,CSS3HTML5第5版,戴尔G3电脑。

必须先将外部样式表导入到网页文档中,浏览器才能识别和解析它。外部样式表文件可以通过两种方式导入到HTML文档中。

1、使用 link 标签导入

使用链接标记导入外部样式表文件:

Linkhref='外部样式表文件路径' rel='样式表'类型=' text/CSS '/每个属性的描述:

Href属性设置外部样式表文件的地址,可以是相对地址,也可以是绝对地址。

rel属性定义了关联的文档,这意味着关联的样式表就是样式表。

type属性定义导入文件的类型。与style元素一样,text/css被表示为一个css文本文件。

一般在定义链接标签时,需要定义三个基本属性,其中href是必须设置的属性。

您还可以将title属性添加到link元素中,以设置可选样式表的标题,也就是说,当多个样式表导入到网页文档中时,可以通过title属性值来选择要应用的样式表文件。

提示:在火狐浏览器中,可以在菜单中选择“视图-页面样式”选项,然后子菜单中会显示标题属性值。您可以通过选择不同的标题属性值来选择性地应用所需的样式表文件。IE浏览器不支持此功能。

此外,标题属性与rel属性相关。按照W3C的规划,未来的web文档会使用多个链接元素导入不同的外部文件,比如样式表文件、脚本文件、主题文件,甚至是个人定制的其他补充文件。导入这么多不同类型和名称的文件后,您可以使用title属性来选择它们。这时,rel属性的作用就变得明显了。它可以指定网页文件初始显示时要应用的导入文件类型,目前只能与CSS样式表类型关联。

外部风格是CSS应用的最佳方案。一个样式表文件可以被多个网页引用,同时一个网页文件可以通过重复使用链接元素导入不同的样式表文件来导入多个样式表。

2、使用 @import 关键字导入

使用样式标签中的@import关键字导入外部样式表文件:

styletype='text/css '

@importurl('外部样式表文件路径');

/style在@import关键字之后,使用url()函数包含特定外部样式表文件的地址。

对比

两种导入样式表的方法比较:

链接属于HTML标签,@import由CSS提供。

加载页面时,会同时加载链接,而@import引用的CSS会等到页面加载完毕。

@import只能在IE 5以上才能识别,而link是一个HTML标签,所以不存在兼容性问题。

链接样式的权重高于@import。

一般建议使用link导入样式表,@import可以作为补充方法。

我希望这篇关于“css如何引入外部样式表”的文章能在这里分享。

内容来源网络,如有侵权,联系删除,本文地址:https://www.230890.com/zhan/82729.html

(0)

相关推荐

  • rabbitmq如何确保消息不丢失 chengtian

    技术rabbitmq如何确保消息不丢失 chengtian rabbitmq如何确保消息不丢失 chengtian上篇写了掌握Rabbitmq几个重要概念,从一条消息说起,这篇来总结关于消息丢失让人头痛

    礼包 2021年12月21日
  • Ajax Servlet在网络编程的应用是怎样的

    技术Ajax Servlet在网络编程的应用是怎样的这期内容当中小编将会给大家带来有关Ajax Servlet在网络编程的应用是怎样的,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。Aj

    攻略 2021年11月26日
  • Python脚本程序与Perl怎么进行比较

    技术Python脚本程序与Perl怎么进行比较Python脚本程序与Perl怎么进行比较,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。Python脚本程序在

    攻略 2021年10月28日
  • html中一个表格由哪些部分组成

    技术html中一个表格由哪些部分组成本篇内容主要讲解“html中一个表格由哪些部分组成”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“html中一个表格由哪些部分组成”吧!

    攻略 2021年11月17日
  • 小星星怎么折,用纸叠的小星星代表什么啊

    技术小星星怎么折,用纸叠的小星星代表什么啊幸运星数量所代表的含意:   01 你是我的唯一   02 两情相悦   03 我爱你   04 誓言、承诺   05 无悔   06 顺利   07 喜相逢   08 弥补  

    生活 2021年10月23日
  • 如何使用基于scriptsetup语法的vue3

    技术如何进行vue3基于script setup语法$refs的使用如何进行vue3基于script setup语法$refs的使用,针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小

    攻略 2021年12月18日