当前位置: 首页 > news >正文

Html引入外部css <link>标签 @import

Html引入外部css

方法1: <link rel="stylesheet" href="x.css">

<link rel="stylesheet" href="x.css" />
<link rel="stylesheet" href="x.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="x.css" />
<link href="./xxx.css" rel="stylesheet" />
<link href="./xxx.css" rel="stylesheet" type="text/css" />

type=“text/css” 可以不写


方法2: @import

@import url("./xxx.css");

@import 要写在 <style> 标签内

<style type="text/css"> @import url("./xxx.css"); </style>

type=“text/css” 可以不写

<style> @import url("./xxx.css"); </style>

可以用单引号

<style> @import url('./xxx.css'); </style>

也可以不要引号

<style> @import url(./xxx.css); </style>

还可以和css写在一起(在同一个style标签内), 但@import必须写在开头, 必须在css之前, 否则无效

<style>@import url(./xxx.css);body>header{color:goldenrod; font-size:66px;}
</style>

👆会生效(chrome110), 写在css后面不会有效果 , 👇不会生效(chrome110)

<style>body>header{color:goldenrod; font-size:66px;}@import url(./xxx.css);
</style> 写在css后面不会有效果



对比 link@import url()

1、link属于html标签,而@import是css提供的,只能加载CSS
2、加载顺序,link在页面加载时被加载,@import在页面加载完之后再加载
3、link是html标签,因此没有兼容性,而@import只有IE5以上才能识别
4、link是可以通过 JS 操作 DOM ,插入link标签来改变样式;由于 DOM 方法是基于文档的,无法使

差别 1:

本质的差别:link 属于 XHTML 标签,而 @import 完全是 CSS 提供的一种方式。

差别 2:

加载顺序的差别: 当一个页面被加载的时候(就是被浏览者浏览的时候) ,link 引用的 CSS 会同时被加载,而 @import 引用的 CSS 会等到页面全部被下载完再被加载。所以有时候浏览 @import 加载 CSS 的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显。

差别 3:

兼容性的差别: @import 是 CSS2.1 提出的,所以老的浏览器不支持,@import 只有在 IE5 以上的才能识别,而 link 标签无此问题。

差别 4:

使用 dom(document object model文档对象模型 )控制样式时的差别:当使用 javascript 控制 dom 去改变样式的时候,只能使用 link 标签,因为@import 不是 dom 可以控制的。



link标签的 rel 属性

<link rel="value"> : rel是Relations的缩写,大概是关联关系的意思

除了本次用到的stylesheet, 其它可选值还有

描述
alternate链接到该文档的替代版本(比如打印页、翻译或镜像)。
author链接到该文档的作者。
help链接到帮助文档。
icon导入表示该文档的图标。
license链接到该文档的版权信息。
next表示该文档是集合中的一部分,且集合中的下一个文档是被引用的文档。
prefetch规定应该对目标资源进行缓存。
prev表示该文档是集合中的一部分,且集合中的上一个文档是被引用的文档。
search链接到针对文档的搜索工具。
stylesheet要导入的样式表的 URL。

https://www.runoob.com/tags/att-link-rel.html

https://www.w3school.com.cn/tags/att_link_rel.asp

描述
alternate文档的替代版本(比如打印页、翻译或镜像)。
stylesheet文档的外部样式表。
start集合中的第一个文档。
next集合中的下一个文档。
prev集合中的上一个文档。
contents文档的目录。
index文档的索引。
glossary在文档中使用的词汇的术语表(解释)。
copyright包含版权信息的文档。
chapter文档的章。
section文档的节。
subsection文档的小节。
appendix文档的附录。
help帮助文档。
bookmark相关文档。

相关文章:

Html引入外部css <link>标签 @import

Html引入外部css 方法1: <link rel"stylesheet" href"x.css"> <link rel"stylesheet" href"x.css" /><link rel"stylesheet" href"x.css" type"text/css" /><link rel"sty…...

React源码分析8-状态更新的优先级机制

这是我的剖析 React 源码的第二篇文章&#xff0c;如果你没有阅读过之前的文章&#xff0c;请务必先阅读一下 第一篇文章 中提到的一些注意事项&#xff0c;能帮助你更好地阅读源码。 文章相关资料 React 16.8.6 源码中文注释&#xff0c;这个链接是文章的核心&#xff0c;文…...

如何在ChatGPT的API中支持多轮对话

一、问题 ChatGPT的API支持多轮对话。可以使用API将用户的输入发送到ChatGPT模型中&#xff0c;然后将模型生成的响应返回给用户&#xff0c;从而实现多轮对话。可以在每个轮次中保留用户之前的输入和模型生成的响应&#xff0c;以便将其传递给下一轮对话。这种方式可以实现更…...

华为OD机试模拟题 用 C++ 实现 - 猜字谜(2023.Q1)

最近更新的博客 【华为OD机试模拟题】用 C++ 实现 - 最多获得的短信条数(2023.Q1)) 文章目录 最近更新的博客使用说明猜字谜题目输入输出描述备注示例一输入输出示例二输入输出思路Code使用说明 参加华为od机试,一定要注意不要完全背诵代码,需要理解之后模仿写出,...

Containerd容器运行时将会替换Docker?

文章目录一、什么是Containerd&#xff1f;二、Containerd有哪些功能&#xff1f;三、Containerd与Docker的区别四、Containerd是否会替换Docker&#xff1f;五、Containerd安装、部署和使用公众号&#xff1a; MCNU云原生&#xff0c;欢迎微信搜索关注&#xff0c;更多干货&am…...

java虚拟机中对象创建过程

java虚拟机中对象创建过程 我们平常创建一个对象&#xff0c;仅仅只是使用new关键字new一个对象&#xff0c;这样一个对象就被创建了&#xff0c;但是在我们使用new关键字创建对象的时候&#xff0c;在java虚拟机中一个对象是如何从无到有被创建的呢&#xff0c;我们接下来就来…...

3485. 最大异或和

Powered by:NEFU AB-IN Link 文章目录3485. 最大异或和题意思路代码3485. 最大异或和 题意 给定一个非负整数数列 a&#xff0c;初始长度为 N。 请在所有长度不超过 M的连续子数组中&#xff0c;找出子数组异或和的最大值。 子数组的异或和即为子数组中所有元素按位异或得到的…...

SpringBoot:SpringBoot配置文件.properties、.yml 和 .ymal(2)

SpringBoot配置文件1. 配置文件格式1.1 application.properties配置文件1.2 application.yml配置文件1.3 application.yaml配置文件1.4 三种配置文件优先级和区别2. yaml格式2.1 语法规则2.2 yaml书写2.2.1 字面量&#xff1a;单个的、不可拆分的值2.2.2 数组&#xff1a;一组按…...

QT 学习之QPA

QT 为实现支持多平台&#xff0c;实现如下类虚函数 Class Overview QPlatformIntegration QAbstractEventDispatcherQPlatformAccessibilityQPlatformBackingStoreQPlatformClipboardQPlatformCursorQPlatformDragQPlatformFontDatabaseQPlatformGraphicsBufferQPlatformInput…...

Pytorch中FLOPs和Params计算

文章目录一. 含义二. 使用thop库计算FLOPs和Params三. 注意四. 相关链接一. 含义 FLOPs&#xff08;计算量&#xff09;&#xff1a;注意s小写&#xff0c;是floating point operations的缩写&#xff08;这里的小s则表示复数&#xff09;&#xff0c;表示浮点运算数&#xff…...

DP1621国产LCD驱动芯片兼容替代HT1621B

目录DP1621简介DP1621芯片特性DP1621简介 DP1621是点阵式存储映射的LCD驱动器芯片&#xff0c;可支持最大128点&#xff08;32SEG * 4COM&#xff09;的 LCD屏&#xff0c;也支持2COM和3COM的LCD屏。单片机可通过3/4个通信脚配置显示参数和发送显示数据&#xff0c;也可通过指…...

Linux 用户管理

用户管理 useradd新增用户 格式&#xff1a;useradd [参数] 用户名称 常用参数&#xff1a; -c comment 指定一段注释性描述。 -d 目录 指定用户主目录&#xff0c;如果此目录不存在&#xff0c;则同时使用-m选项&#xff0c;可以创建主目录。 -g 用户组 指定用户所属的用户组…...

前端vue面试题(持续更新中)

vue-router中如何保护路由 分析 路由保护在应用开发过程中非常重要&#xff0c;几乎每个应用都要做各种路由权限管理&#xff0c;因此相当考察使用者基本功。 体验 全局守卫&#xff1a; const router createRouter({ ... }) ​ router.beforeEach((to, from) > {// .…...

Java查漏补缺-从入门到精通汇总

Java查漏补缺&#xff08;01&#xff09;计算机的硬件与软件、软件相关介绍、计算机编程语言、Java语言概述、Java开发环境搭建、Java开发工具、注释、API文档、JVM Java查漏补缺&#xff08;02&#xff09;关键字、标识符、变量、基本数据类型介绍、基本数据类型变量间运算规…...

软件测试2年半的我,谈谈自己的理解...

软件测试两年半的我&#xff0c;谈谈自己的理解从2020年7月毕业&#xff0c;就成为一名测试仔。日子混了一鲲年&#xff0c;感觉需要好好梳理一下自己的职业道路了&#xff0c;回顾与总结下吧。一、测试的定位做事嘛&#xff0c;搞清楚自己的定位很重要。要搞清楚自己的定位&am…...

什么是SAS硬盘

什么是SAS硬盘SAS是新一代的SCSI技术&#xff0c;和Serial ATA(SATA)硬盘都是采用串行技术&#xff0c;以获得更高的传输速度&#xff0c;并通过缩短连结线改善内部空间等。SAS是并行SCSI接口之后开发出的全新接口。此接口的设计是为了改善存储系统的效能、可用性和扩充性&…...

一文理解服务端渲染SSR的原理,附实战基于vite和webpack打造React和Vue的SSR开发环境

SSR和CSR 首先&#xff0c;我们先要了解什么是SSR和CSR&#xff0c;SSR是服务端渲染&#xff0c;CSR是客户端渲染&#xff0c;服务端渲染是指 HTTP 服务器直接根据用户的请求&#xff0c;获取数据&#xff0c;生成完整的 HTML 页面返回给客户端&#xff08;浏览器&#xff09;展…...

Matlab 实用小函数汇总

文章目录Part.I 元胞相关Chap.I 创建空 char 型元胞Part.II 矩阵相关Chap.I 矩阵插入元素Part.III 字符串相关Chap.I 获取一个文件夹下所有文件的文件名的部分内容Part.IV 结构体相关Chap.I 读取结构体Chap.II 取结构体中某一字段的所有值本篇博文记录一些笔者使用 Matlab 时&a…...

Echarts 仪表盘倾斜一定角度显示,非中间对称

第024个点击查看专栏目录大多数的情况下&#xff0c;制作的仪表盘都是中规中矩&#xff0c;横向中间对称&#xff0c;但是生活中的汽车&#xff0c;摩托车等仪表盘确是要倾斜一定角度的&#xff0c;Echarts中我们就模拟一个带有倾斜角度的仪表盘。核心代码见示例源代码 文章目录…...

Vue中如何利用websocket实现实时通讯

首先我们可以先做一个简单的例子来学习一下简单的websocket模拟聊天对话的功能 原理很简单&#xff0c;有点像VUE中的EventBus&#xff0c;用emit和on传来传去 首先我们可以先去自己去用node搭建一个本地服务器 步骤如下 1.新建一个app.js&#xff0c;然后创建pagejson.js文…...

idea大量爆红问题解决

问题描述 在学习和工作中&#xff0c;idea是程序员不可缺少的一个工具&#xff0c;但是突然在有些时候就会出现大量爆红的问题&#xff0c;发现无法跳转&#xff0c;无论是关机重启或者是替换root都无法解决 就是如上所展示的问题&#xff0c;但是程序依然可以启动。 问题解决…...

大数据零基础学习day1之环境准备和大数据初步理解

学习大数据会使用到多台Linux服务器。 一、环境准备 1、VMware 基于VMware构建Linux虚拟机 是大数据从业者或者IT从业者的必备技能之一也是成本低廉的方案 所以VMware虚拟机方案是必须要学习的。 &#xff08;1&#xff09;设置网关 打开VMware虚拟机&#xff0c;点击编辑…...

HTML 列表、表格、表单

1 列表标签 作用&#xff1a;布局内容排列整齐的区域 列表分类&#xff1a;无序列表、有序列表、定义列表。 例如&#xff1a; 1.1 无序列表 标签&#xff1a;ul 嵌套 li&#xff0c;ul是无序列表&#xff0c;li是列表条目。 注意事项&#xff1a; ul 标签里面只能包裹 li…...

什么是库存周转?如何用进销存系统提高库存周转率?

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

NFT模式:数字资产确权与链游经济系统构建

NFT模式&#xff1a;数字资产确权与链游经济系统构建 ——从技术架构到可持续生态的范式革命 一、确权技术革新&#xff1a;构建可信数字资产基石 1. 区块链底层架构的进化 跨链互操作协议&#xff1a;基于LayerZero协议实现以太坊、Solana等公链资产互通&#xff0c;通过零知…...

iview框架主题色的应用

1.下载 less要使用3.0.0以下的版本 npm install less2.7.3 npm install less-loader4.0.52./src/config/theme.js文件 module.exports {yellow: {theme-color: #FDCE04},blue: {theme-color: #547CE7} }在sass中使用theme配置的颜色主题&#xff0c;无需引入&#xff0c;直接可…...

逻辑回归暴力训练预测金融欺诈

简述 「使用逻辑回归暴力预测金融欺诈&#xff0c;并不断增加特征维度持续测试」的做法&#xff0c;体现了一种逐步建模与迭代验证的实验思路&#xff0c;在金融欺诈检测中非常有价值&#xff0c;本文作为一篇回顾性记录了早年间公司给某行做反欺诈预测用到的技术和思路。百度…...

数学建模-滑翔伞伞翼面积的设计,运动状态计算和优化 !

我们考虑滑翔伞的伞翼面积设计问题以及运动状态描述。滑翔伞的性能主要取决于伞翼面积、气动特性以及飞行员的重量。我们的目标是建立数学模型来描述滑翔伞的运动状态,并优化伞翼面积的设计。 一、问题分析 滑翔伞在飞行过程中受到重力、升力和阻力的作用。升力和阻力与伞翼面…...

【Linux】Linux安装并配置RabbitMQ

目录 1. 安装 Erlang 2. 安装 RabbitMQ 2.1.添加 RabbitMQ 仓库 2.2.安装 RabbitMQ 3.配置 3.1.启动和管理服务 4. 访问管理界面 5.安装问题 6.修改密码 7.修改端口 7.1.找到文件 7.2.修改文件 1. 安装 Erlang 由于 RabbitMQ 是用 Erlang 编写的&#xff0c;需要先安…...

向量几何的二元性:叉乘模长与内积投影的深层联系

在数学与物理的空间世界中&#xff0c;向量运算构成了理解几何结构的基石。叉乘&#xff08;外积&#xff09;与点积&#xff08;内积&#xff09;作为向量代数的两大支柱&#xff0c;表面上呈现出截然不同的几何意义与代数形式&#xff0c;却在深层次上揭示了向量间相互作用的…...