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)

相关推荐

  • java中如何实现WebSocket客户端断线重连

    技术java中如何实现WebSocket客户端断线重连这篇文章给大家分享的是有关java中如何实现WebSocket客户端断线重连的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。Maven依赖<

    攻略 2021年10月31日
  • base 关键字用法

    技术base 关键字用法 base 关键字用法base 关键字用于从派生类中访问基类的成员:调用基类上已被其他方法重写的方法。前半句实例:
    public class Person
    {
    protected

    礼包 2021年11月24日
  • 归并排序和逆序对数量

    技术归并排序和逆序对数量 归并排序和逆序对数量归并排序
    #includeiostreamusing namespace std;
    const int N = 100010;
    int q[N];
    int

    礼包 2021年11月5日
  • 怎么理解Vue的生命周期及钩子函数

    技术怎么理解Vue的生命周期及钩子函数本篇内容介绍了“怎么理解Vue的生命周期及钩子函数”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,

    攻略 2021年11月1日
  • 基本RNN的Tensorflow实现是怎样的

    技术基本RNN的Tensorflow实现是怎样的这篇文章给大家介绍基本RNN的Tensorflow实现是怎样的,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。今天我们一起看下在tensorflow中基

    攻略 2021年11月24日
  • ubuntu中VETH虚拟接口的示例分析

    技术ubuntu中VETH虚拟接口的示例分析这篇文章将为大家详细讲解有关ubuntu中VETH虚拟接口的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。简介virtual eth

    攻略 2021年11月17日