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

css的4种引入方式--内联样式（标签内style）、内部样式表（＜style＞）、外部样式表（＜link＞、@import）

news 2026/2/10 21:34:58

1.内联样式（Inline Styles）：可以直接在HTML元素的style属性中定义CSS样式。

例如：

<p style="color: red; font-size: 16px;">这是一段红色的文本</p>

内联样式适用于对单个元素应用特定的样式，但不适合用于整个网页或多个元素的样式定义。

2.内部样式表（Internal Style Sheets）：可以在HTML文档的标签中使用

例如：

<head><style>p {color: red;font-size: 16px;}</style>
</head>
<body><p>这是一段红色的文本</p>
</body>

内部样式表适用于在单个HTML文档中定义样式，可以应用于多个元素。

3.外部样式表（External Style Sheets）：可以将CSS样式定义保存在一个独立的CSS文件中，并在HTML文档中通过标签（链接式）或者@import指令（导入式）引入。

通过标签引入（最常用方式）

例如：

<head><link rel="stylesheet" href="styles.css">
</head>
<body><p>这是一段红色的文本</p>
</body>

在这种方式下，CSS样式定义保存在名为styles.css的外部文件中，可以被多个HTML文档共享。这样做可以提高代码的可维护性和可重用性。

通过@import指令引入

@import指令是CSS语言的一部分，使用时把这个指令添加到HTML的一个

要与外部的CSS文件关联起来，得使用url而不是href，并且要把路径放在一个圆括号里面；

<html>
<head>
<style type="text/css">    @import url(css/styles.css);
</style>
<!--此处的type属性是针对HTML4.01的，若在HTML5中则不需要加-->
</head><body>
......
</body>
</html

通过外部样式表，你可以在同一个CSS文件中定义多个样式规则，并将其应用于不同的HTML元素。

以上是CSS的主要引入方式，开发人员可以根据具体需求选择适合的方式。通常情况下，推荐使用外部样式表，因为它提供了最好的可维护性和灵活性。

两种方式的区别

  • 标签属于html标签，而@import是css提供的一种方式，标签不仅可以引入css，还可以做其他事，而@import只能引入css；
  • 加载顺序的区别：当一个页面被浏览时，link引入的css会被同步加载，而@import引用的css是等到其他元素全被下载完之后才被加载；
  • 兼容性的不同：@import是CSS2.1才提出的，所以只有在IE5以上才支持，低版本的浏览器不支持，而标签无此问题；
  • 当使用javascript控制DOM去改变样式时，只能使用标签，因为@import不是DOM可以控制的。

参考链接

https://zhuanlan.zhihu.com/p/658723834
https://www.cnblogs.com/zhaoyingli/p/5379990.html

相关文章：

css的4种引入方式--内联样式（标签内style）、内部样式表（＜style＞）、外部样式表（＜link＞、@import）

1.内联样式&#xff08;Inline Styles&#xff09;&#xff1a;可以直接在HTML元素的style属性中定义CSS样式。 例如&#xff1a; <p style"color: red; font-size: 16px;">这是一段红色的文本</p>内联样式适用于对单个元素应用特定的样式&#xff0c;…...

编程日记 2023/12/11 21:30:23

GPT-4 变懒了？官方回复

你是否注意到&#xff0c;最近使用 ChatGPT 的时候&#xff0c;当你向它提出一些问题&#xff0c;却得到的回应似乎变得简短而敷衍了&#xff1f;对于这一现象&#xff0c;ChatGPT 官方给出了回应。 译文&#xff1a;我们听到了你们所有关于 GPT4 变得更懒的反馈&#xff01;我…...

编程日记 2023/12/11 21:27:20

编译器和 IR：LLVM IR、SPIR-V 和 MLIR

编译器通常是各种开发工具链中的关键组件&#xff0c;可提高开发人员的工作效率。编译器通常用作独立的黑匣子&#xff0c;它使用高级源程序并生成语义上等效的低级源程序。不过&#xff0c;它仍然是内部结构倾向的;内部之间流动的内容就称为中间表示 &#xff08;IR&#xff0…...

编程日记 2023/12/11 21:26:19

蓝牙物联网对接技术难点有哪些？

#物联网# 蓝牙物联网对接技术难点主要包括以下几个方面&#xff1a; 1、设备兼容性&#xff1a;蓝牙技术有多种版本和规格&#xff0c;如蓝牙4.0、蓝牙5.0等&#xff0c;不同版本之间的兼容性可能存在问题。同时&#xff0c;不同厂商生产的蓝牙设备也可能存在兼容性问题。 2、…...

编程日记 2023/12/11 21:25:18

漫谈Uniapp App热更新包-Jenkins CI/CD打包工具链的搭建

零、写在前面 HBuilderX是DCloud旗下的IDE产品&#xff0c;目前只提供了Windows和Mac版本使用。本项目组在开发阶段经常需要向测试环境提交热更新包&#xff0c;使用Jenkins进行CD是非常有必要的一步。尽管HBuilderX提供了CLI&#xff0c;但Jenkins服务通常都是搭建在Linux环境…...

编程日记 2023/12/11 21:24:17

Axure简单安装与入门

目录 一.Axure简介 二.应用场景 三.安装与汉化 3.1.安装 3.2.汉化 四. 入门 4.1.复制、剪切及粘贴区域 4.2.选择模式 4.3. 插入形状 4.4.预览、共享 感谢大家观看&#xff01;希望能帮到你哦&#xff01;&#xff01;&#xff01; 一.Axure简介 Axure RP是一款专业的原型…...

编程日记 2023/12/11 21:20:14

前端知识笔记（四十五）———前端开发与后端开发有什么区别

前端开发和后端开发是Web开发中的两个关键领域&#xff0c;它们负责不同的任务和功能。下面是前端开发和后端开发之间的主要区别&#xff1a; 前端开发&#xff1a; 用户界面&#xff1a;前端开发主要关注用户界面的开发&#xff0c;包括网页的布局、样式、交互等方面。前端技…...

编程日记 2023/12/11 21:19:12

Jol-分析Java对象的内存布局

Jol-分析Java对象的内存布局 Open JDK提供的JOL(Java Object Layout)工具为我们方便分析、了解一个Java对象在内存当中的具体布局情况。本文实验环境为64位HotSpot虚拟机。 Java对象的内存布局 Java的实例对象、数组对象在内存中的组成包括&#xff1a;对象头、实例数据和内存…...

编程日记 2023/12/11 21:16:09

基于sfunction builder的c-sfunction编写及案例测试分析

目录 前言 1.前期准备工作及文件说明 1.1前期准备工作 1.2 文件说明 1.3 编译方式...

编程日记 2023/12/11 21:15:08

【Java期末复习资料】（1）知识点总结

本文章主要是知识点&#xff0c;后续会出模拟卷 以下是选择、填空可能考的知识点&#xff0c;多看几遍&#xff0c;混个眼熟 面向对象程序设计的基本特征是&#xff1a;抽象、封装、继承、多态&#xff08;后三个是三大特性&#xff09;Java源文件的扩缀名是.java编译Java App…...

编程日记 2023/12/11 21:14:07

进程、容器与虚拟机的区别

进程、容器与虚拟机 参考&#xff1a;关于进程、容器与虚拟机的区别&#xff0c;你想知道的都在这&#xff01; 进程、容器与虚拟机的结构图 进程 介绍 进程是一个正在运行的程序&#xff0c;它是一个个可执行文件的实例。当一个可执行文件从硬盘加载到内存中的时候&#xf…...

编程日记 2023/12/11 21:10:04

全网快递批量查询的得力助手

在当今社会&#xff0c;网络购物已经成为人们日常生活的重要组成部分。随着网购的普及&#xff0c;快递行业也迅速发展壮大。然而&#xff0c;这也带来了一系列问题&#xff1a;如何快速、准确地查询快递信息&#xff1f;如何批量查询多个快递&#xff1f;今天&#xff0c;我们…...

编程日记 2023/12/11 21:08:03

uniapp开发小程序经验记录

uniapp开发小程序的过程中会遇到很多问题&#xff0c;这里记录一下相关工具优化&#xff0c;便于后来者参考。 每次保存代码后&#xff0c;小程序都跳回首页 针对这个问题&#xff0c;常规的做法就是修改pages配置文件&#xff0c;但是这种方式不便于路由参数的设置&#xff…...

编程日记 2023/12/11 21:04:59

PR自动剪辑视频工具AI智能剪辑插件AutoPod

推荐一款可以提高剪辑效率&#xff0c;节约时间成本的AI人工智能自动剪辑视频制作工具pr插件Autopod&#xff0c;辅助你更快地完成视频内容的编辑工作。 Autopod 插件是一款应用于 Adobe Premiere Pro 软件的插件&#xff0c;用于自动剪辑。该插件能够识别和处理视频和音频素材…...

编程日记 2023/12/11 20:59:55

Visual Studio 2022+Python3.11实现C++调用python接口

大家好&#xff01;我是编码小哥&#xff0c;欢迎关注&#xff0c;持续分享更多实用的编程经验和开发技巧&#xff0c;共同进步。 查了一些资料&#xff0c;不是报这个错&#xff0c;就是报哪个错&#xff0c;没有找到和我安装的环境的一致的案例&#xff0c;于是将自己的摸索分…...

编程日记 2023/12/11 20:57:54

10天玩转Python第2天：python判断语句基础示例全面详解与代码练习

目录 1.课程之前1.1 复习和反馈1.2 作业1.3 今日内容1.4 字符串格式化的补充1.5 运算符1.5.1 逻辑运算符1.5.2 赋值运算符1.5.3 运算符优先 2.判断2.1 if 的基本结构2.1.1 基本语法2.1.2 代码案例2.1.3 练习 2.2 if else 结构2.2.1 基本语法2.2.2 代码案例2.2.3 练习 2.3 if 和…...

编程日记 2023/12/11 20:56:53

2024年网络安全竞赛-网站渗透

网站渗透 （一）拓扑图 1.使用渗透机对服务器信息收集，并将服务器中网站服务端口号作为flag提交； 使用nmap工具对靶机进行信息收集 2.使用渗透机对服务器信息收集，将网站的名称作为flag提交； 访问页面即可 3.使用渗透机对服务器渗透，将可渗透页面的名称作为flag提交…...

编程日记 2023/12/11 20:55:52

kafka学习笔记--基础知识概述

本文内容来自尚硅谷B站公开教学视频&#xff0c;仅做个人总结、学习、复习使用&#xff0c;任何对此文章的引用&#xff0c;应当说明源出处为尚硅谷&#xff0c;不得用于商业用途。 如有侵权、联系速删 视频教程链接&#xff1a;【尚硅谷】Kafka3.x教程&#xff08;从入门到调优…...

编程日记 2023/12/11 20:54:51

聊聊AsyncHttpClient的KeepAliveStrategy

序 本文主要研究一下AsyncHttpClient的KeepAliveStrategy KeepAliveStrategy org/asynchttpclient/channel/KeepAliveStrategy.java public interface KeepAliveStrategy {/*** Determines whether the connection should be kept alive after this HTTP message exchange.…...

编程日记 2023/12/11 20:53:50

视频推拉流直播点播EasyDSS平台点播文件加密存储的实现方法

视频推拉流直播点播系统EasyDSS平台&#xff0c;可提供流畅的视频直播、点播、视频推拉流、转码、管理、分发、录像、检索、时移回看等功能&#xff0c;可兼容多操作系统&#xff0c;还能支持CDN转推&#xff0c;具备较强的可拓展性与灵活性&#xff0c;在直播点播领域具有广泛…...

编程日记 2023/12/11 20:52:49

(LeetCode 每日一题) 3442. 奇偶频次间的最大差值 I (哈希、字符串)

题目&#xff1a;3442. 奇偶频次间的最大差值 I 思路 &#xff1a;哈希&#xff0c;时间复杂度0(n)。 用哈希表来记录每个字符串中字符的分布情况&#xff0c;哈希表这里用数组即可实现。 C版本&#xff1a; class Solution { public:int maxDifference(string s) {int a[26]…...

编程新知 2026/2/7 23:18:31

Java 语言特性(面试系列2)

一、SQL 基础 1. 复杂查询 &#xff08;1&#xff09;连接查询&#xff08;JOIN&#xff09; 内连接&#xff08;INNER JOIN&#xff09;&#xff1a;返回两表匹配的记录。 SELECT e.name, d.dept_name FROM employees e INNER JOIN departments d ON e.dept_id d.dept_id; 左…...

编程新知 2025/10/24 14:20:29

DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

编程新知 2025/11/20 2:48:44

rknn优化教程（二）

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

编程新知 2025/6/11 15:25:30

以下是对华为 HarmonyOS NETX 5属性动画（ArkTS）文档的结构化整理，通过层级标题、表格和代码块提升可读性：

一、属性动画概述NETX 作用&#xff1a;实现组件通用属性的渐变过渡效果&#xff0c;提升用户体验。支持属性&#xff1a;width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项&#xff1a; 布局类属性&#xff08;如宽高&#xff09;变化时&#…...

编程新知 2026/1/28 21:15:38

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中，用户注册、登录、修改密码等操作，都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输，在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

编程新知 2025/11/28 6:00:25

工程地质软件市场：发展现状、趋势与策略建议

一、引言 在工程建设领域&#xff0c;准确把握地质条件是确保项目顺利推进和安全运营的关键。工程地质软件作为处理、分析、模拟和展示工程地质数据的重要工具&#xff0c;正发挥着日益重要的作用。它凭借强大的数据处理能力、三维建模功能、空间分析工具和可视化展示手段&…...

编程新知 2025/10/6 6:10:29

IT供电系统绝缘监测及故障定位解决方案

随着新能源的快速发展&#xff0c;光伏电站、储能系统及充电设备已广泛应用于现代能源网络。在光伏领域&#xff0c;IT供电系统凭借其持续供电性好、安全性高等优势成为光伏首选&#xff0c;但在长期运行中&#xff0c;例如老化、潮湿、隐裂、机械损伤等问题会影响光伏板绝缘层…...

编程新知 2026/2/1 6:36:36

Caliper 配置文件解析：config.yaml

Caliper 是一个区块链性能基准测试工具，用于评估不同区块链平台的性能。下面我将详细解释你提供的 fisco-bcos.json 文件结构，并说明它与 config.yaml 文件的关系。 fisco-bcos.json 文件解析 这个文件是针对 FISCO-BCOS 区块链网络的 Caliper 配置文件，主要包含以下几个部…...

编程新知 2025/8/13 13:40:18

根据万维钢·精英日课6的内容，使用AI（2025）可以参考以下方法：

根据万维钢精英日课6的内容&#xff0c;使用AI&#xff08;2025&#xff09;可以参考以下方法&#xff1a; 四个洞见 模型已经比人聪明&#xff1a;以ChatGPT o3为代表的AI非常强大&#xff0c;能运用高级理论解释道理、引用最新学术论文&#xff0c;生成对顶尖科学家都有用的…...

编程新知 2026/1/10 1:08:51