当前位置: 首页 > 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文…...

第19节 Node.js Express 框架

Express 是一个为Node.js设计的web开发框架&#xff0c;它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用&#xff0c;和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...

树莓派超全系列教程文档--(62)使用rpicam-app通过网络流式传输视频

使用rpicam-app通过网络流式传输视频 使用 rpicam-app 通过网络流式传输视频UDPTCPRTSPlibavGStreamerRTPlibcamerasrc GStreamer 元素 文章来源&#xff1a; http://raspberry.dns8844.cn/documentation 原文网址 使用 rpicam-app 通过网络流式传输视频 本节介绍来自 rpica…...

React Native 开发环境搭建(全平台详解)

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

ESP32 I2S音频总线学习笔记(四): INMP441采集音频并实时播放

简介 前面两期文章我们介绍了I2S的读取和写入&#xff0c;一个是通过INMP441麦克风模块采集音频&#xff0c;一个是通过PCM5102A模块播放音频&#xff0c;那如果我们将两者结合起来&#xff0c;将麦克风采集到的音频通过PCM5102A播放&#xff0c;是不是就可以做一个扩音器了呢…...

算法笔记2

1.字符串拼接最好用StringBuilder&#xff0c;不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...

10-Oracle 23 ai Vector Search 概述和参数

一、Oracle AI Vector Search 概述 企业和个人都在尝试各种AI&#xff0c;使用客户端或是内部自己搭建集成大模型的终端&#xff0c;加速与大型语言模型&#xff08;LLM&#xff09;的结合&#xff0c;同时使用检索增强生成&#xff08;Retrieval Augmented Generation &#…...

STM32HAL库USART源代码解析及应用

STM32HAL库USART源代码解析 前言STM32CubeIDE配置串口USART和UART的选择使用模式参数设置GPIO配置DMA配置中断配置硬件流控制使能生成代码解析和使用方法串口初始化__UART_HandleTypeDef结构体浅析HAL库代码实际使用方法使用轮询方式发送使用轮询方式接收使用中断方式发送使用中…...

NPOI Excel用OLE对象的形式插入文件附件以及插入图片

static void Main(string[] args) {XlsWithObjData();Console.WriteLine("输出完成"); }static void XlsWithObjData() {// 创建工作簿和单元格,只有HSSFWorkbook,XSSFWorkbook不可以HSSFWorkbook workbook new HSSFWorkbook();HSSFSheet sheet (HSSFSheet)workboo…...