聊一聊 CSS 样式的导入方式

一、CSS 的导入方式有哪些

1、内联样式,在HTML 元素上使用 style 属性,设置当前标签元素的样式

<p style="color: red;">Hello world!</p>

2、嵌入样式表,直接在head标签内使用style标签定义元素样式

<head><style>p {color: red;}</style>
</head>

3、在HTML中使用Link标签导入外部样式表

<head><link rel="stylesheet" type="text/css" href="styles.css">
</head>

4、在 CSS 文件中使用 @import 规则导入外部样式表

@import url("styles.css");

其中,内联样式和 style 标签的样式定义直接写在HTML文件中,而使用 Link 和 @import 导入外部样式表需要将样式定义单独写在CSS文件中。外部样式表和导入样式表的优势在于可以在多个HTML文件中共享同一套样式。

二、Link 标签的特点

可以同时导入多个样式表。

可以指定样式表的媒体类型,例如screen、print、all等,以根据不同的媒体类型应用不同的样式。

页面加载时会同时加载样式表,不会阻塞页面的渲染。

可以使用rel属性指定样式表的关系,如stylesheet表示样式表。

可以使用href属性指定样式表的URL。

三、@import 规则的特点

@import规则是CSS的一种规则,用于在样式表中导入其他样式表。它必须写在样式表的最前面。

只能导入一个样式表,不能同时导入多个样式表。

不支持指定样式表的媒体类型。

页面加载时会依次加载样式表,每个样式表加载完后再加载下一个,可能会阻塞页面的渲染。

可以在样式表中使用@import规则导入其他样式表,也可以在导入的样式表中使用@import规则继续导入其他样式表。

四、CSS之link导入和@import导入的区别

  1. 首先,link是一个标签,不仅可以引入css样式表,还可以处理RSS 等,@import是css中的规则,只能用于引入css。
  1. link载入css是和页面同时载入的,但是@import是在页面加载完之后加载的。
  1. link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。
  1. link支持使用Javascript控制DOM去改变样式;而@import不支持。
  1. link的权重比@import高(有争议,但是更相信这种说法)。
  1. link 标签可以在HTML的标签中进行导入,也可以在 body 标签中进行导入,而 @import 规则只能在 CSS 文件中使用。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/893538.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【JVM】垃圾收集器详解

你将学到 1. Serial 收集器 2. ParNew 收集器 3. Parallel Scavenge 收集器 4. Serial Old 收集器 5. Parallel Old 收集器 6. CMS 收集器 7. G1 收集器 在 Java 中&#xff0c;垃圾回收&#xff08;GC&#xff09;是自动管理内存的一个重要机制。HotSpot JVM 提供了多种…

前端Vue框架——npm ci与npm install的区别以及package-lock.json文件与package.json的区别

目录 一、npm ci与npm install的区别 &#xff08;一&#xff09;npm ci 的作用 &#xff08;二&#xff09;与 npm install 的区别 二、package-lock.json文件与package.json的区别 1️⃣ package.json 2️⃣ package-lock.json 3️⃣ 区别对比 4️⃣ 使用建议 5️⃣…

项目上线后,是否会进行复盘?

是的&#xff0c;定期复盘在软件测试项目里极为关键&#xff0c;我会按以下步骤开展复盘工作&#xff1a; 复盘周期确定 短期项目&#xff1a;针对周期较短&#xff08;如 1 - 2 个月&#xff09;的项目&#xff0c;会在项目结束后的一周内进行复盘&#xff0c;确保大家对项目…

SOME/IP服务接口

本系列文章将分享我在学习 SOME/IP 过程中积累的一些感悟&#xff0c;并结合 SOME/IP 的理论知识进行讲解。主要内容是对相关知识的梳理&#xff0c;并结合实际代码展示 SOME/IP 的使用&#xff0c;旨在自我复习并与大家交流。文中引用了一些例图&#xff0c;但由于未能找到原作…

编写0号中断的处理程序

实验内容、程序清单及运行结果 编写0号中断的处理程序&#xff08;课本实验12&#xff09; 解&#xff1a; assume cs:code code segment start: mov ax,cs mov ds,ax mov si,offset do mov ax,0 mov es,ax mov di,200h mov cx,offset doend-offset do ;安装中断例…

Android系统开发(十五):从 60Hz 到 120Hz,多刷新率进化简史

引言 欢迎来到“帧率探索实验室”&#xff01;今天&#xff0c;我们要聊聊 Android 11 中对多种刷新率设备的支持。你可能会问&#xff1a;“这和我写代码有什么关系&#xff1f;”别急&#xff0c;高刷新率不仅仅让屏幕更顺滑&#xff0c;还会直接影响用户体验。想象一下&…

基于JAVA的微信点餐小程序设计与实现(LW+源码+讲解)

专注于大学生项目实战开发,讲解,毕业答疑辅导&#xff0c;欢迎高校老师/同行前辈交流合作✌。 技术范围&#xff1a;SpringBoot、Vue、SSM、HLMT、小程序、Jsp、PHP、Nodejs、Python、爬虫、数据可视化、安卓app、大数据、物联网、机器学习等设计与开发。 主要内容&#xff1a;…

【Arduino】语言参考功能

前言 翻译Arduino 参考处列出的常用函数。文中为了减少篇幅&#xff0c;达到能快速翻到查询的目标&#xff0c;在介绍函数中&#xff0c;对部分内容进行了省略&#xff0c;不会列出函数输入参数类型&#xff0c;以及使用注意事项等等&#xff0c;所以若是首次使用或者是调试时出…

Alibaba Spring Cloud 二 Seata 的详细介绍、使用场景以及集成方法

Seata 是一个开源的分布式事务解决方案&#xff0c;它由阿里巴巴开源&#xff0c;专注于解决微服务架构中的分布式事务问题。它支持高性能的分布式事务处理&#xff0c;提供了多种事务模型&#xff08;AT、TCC、SAGA 和 XA&#xff09;&#xff0c;并与 Spring Boot 和 Spring …

ChatGPT结合Excel辅助学术数据分析详细步骤分享!

目录 一.Excel在学术论文中的作用✔ 二.Excel的提示词✔ 三. 编写 Excel 命令 四. 编写宏 五. 执行复杂的任务 六. 将 ChatGPT 变成有用的 Excel 助手 一.Excel在学术论文中的作用✔ Excel作为一种广泛使用的电子表格软件&#xff0c;在学术论文中可以发挥多种重要作用&a…

flume和kafka整合 flume和kafka为什么一起用?

‌Flume和Kafka一起使用的主要原因是为了实现高效、可靠的数据采集和实时处理。‌‌12 实时流式日志处理的需求 Flume和Kafka结合使用的主要目的是为了完成实时流式的日志处理。Flume负责数据的采集和传输,而Kafka则作为消息缓存队列,能够有效地缓冲数据,防止数据堆积或丢…

国内有哪些著名的CRM系统提供商?

嘿&#xff0c;你有没有想过&#xff0c;在这个信息爆炸的时代里&#xff0c;企业怎么才能更好地管理客户关系呢&#xff1f;答案就是使用高效的CRM系统。今天我就来给大家聊聊那些在国际上非常有名的CRM系统提供商吧。 悟空CRM 首先不得不提的就是悟空CRM了&#xff01;这可…

Linux中的几个基本指令(二)

文章目录 1、cp指令例一&#xff1a;例二&#xff1a;例三&#xff1a;例四&#xff1a;例五&#xff1a; 2、mv 指令例一&#xff1a;例二&#xff1a; 3、cat指令例一&#xff1a; 4、tac指令5、which指令6、date指令时间戳&#xff1a;7、zip指令 今天我们继续学习Linux下的…

mock可视化生成前端代码

介绍&#xff1a;mock是我们前后端分离的必要一环、ts、axios编写起来也很麻烦。我们就可以使用以下插件&#xff0c;来解决我们的问题。目前支持vite和webpack。&#xff08;配置超级简单&#xff01;&#xff09; 欢迎小伙伴们提issues、我们共建。提升我们的开发体验。 vi…

【Linux】APT 密钥管理迁移指南:有效解决 apt-key 弃用警告

引言 随着 Debian 11 和 Ubuntu 22.04 版本的推出&#xff0c;APT 的密钥管理方式发生了重大的变化。apt-key 命令被正式弃用&#xff0c;新的密钥管理机制要求使用 /etc/apt/keyrings/ 或 /etc/apt/trusted.gpg.d/ 来存储和管理密钥。这一变化对管理员和普通用户来说至关重要…

9. 神经网络(一.神经元模型)

首先&#xff0c;先看一个简化的生物神经元结构&#xff1a; 生物神经元有多种类型&#xff0c;内部也有复杂的结构&#xff0c;但是可以把单个神经元简化为3部分组成&#xff1a; 树突&#xff1a;一个神经元往往有多个树突&#xff0c;用于接收传入的信息。轴突&#xff1a;…

Web 音视频(二)在浏览器中解析视频

前言 浏览器中已经能直接播放视频&#xff0c;为什么还需要手动写代码解析&#xff1f; 因为&#xff0c;某些场景需要对视频进行更细致的处理&#xff0c;比如截取关键帧、提取视频中的文字、人物打码、极低延时播放视频等等。 总之&#xff0c;除了最单纯的视频播放外&…

代码随想录刷题day14(2)|(链表篇)02.07. 链表相交(疑点)

目录 一、链表理论基础 二、链表相交求解思路 三、相关算法题目 四、疑点 一、链表理论基础 代码随想录 二、链表相交求解思路 链表相交时&#xff0c;是结点的位置&#xff0c;也就是指针相同&#xff0c;不是结点的数值相同&#xff1b; 思路&#xff1a;定义两个指针…

ETLCloud在iPaas中的是关键角色?

在当今的数字化时代&#xff0c;企业越来越依赖于其处理和分析数据的能力。为了实现这一目标&#xff0c;企业需要将各种异构的应用和数据源集成在一起&#xff0c;形成一个统一的数据视图。在这一过程中&#xff0c;ETL&#xff08;Extract, Transform, Load&#xff09;和iPa…

以太网实战AD采集上传上位机——FPGA学习笔记27

一、设计目标 使用FPGA实现AD模块驱动采集模拟电压&#xff0c;通过以太网上传到电脑上位机。 二、框架设计 数据位宽转换模块&#xff08;ad_10bit_to_16bit&#xff09;&#xff1a;为了方便数据传输&#xff0c;数据位宽转换模块实现了将十位的 AD 数据转换成十六位&#…