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

CSS样式的三种引入方式及优先级

news 2025/12/23 5:34:36

说明：网页开发有三种技术，分别是html、css和js，分别对应页面的结构、表现和动作。css样式引入，是指把对页面的渲染作用到html上，有以下三种方式：行内式、内嵌式和外联式。

第一种：行内式（不推荐）

在标签内设置样式，多个属性设置用分号（;）间隔

<!-- 用行内式设置字体颜色为蓝色 -->
<h1 style="color: blue;">行内式</h1>

在这里插入图片描述

第二种：内嵌式（推荐）

在body标签外设置style标签，在style标签内写html元素的属性。建议style标签，写在head标签内。

<head>
……
<style>/* 用内嵌式设置字体颜色为蓝色*/h1 {color: red;}
</style><!-- 建议style标签写在head标签内 -->
</head>
<body><h1>内嵌式</h1>
</body>

在这里插入图片描述

第三种：外联式（专业）

把样式代码抽出来，生成一个.css为后缀的文件，html需要用的话，引用就行，且可以外联多个css文件。需要注意的是，路径可以用绝对路径；但要用相对路径的话，路径是html文件视角的，“./”表示html文件的平级目录；“…/”表示上级目录，“…/…/”表示上上级目录，以此类推。

<head>
……<!-- vscode 敲"link:css"会有代码提示 --><link rel="stylesheet" href="../essay/css.css"></head>
<body><h1>外联式</h1>
</body>

在这里插入图片描述
在这里插入图片描述

优先级

html元素使用样式的原则是：就近原则，即哪一种样式距离自己近，就优先使用哪一个。
在这里插入图片描述
在这里插入图片描述
去掉行内样式，查看另外两种样式的使用
在这里插入图片描述在这里插入图片描述

总结

第一种行内式，样式只能对单个元素，且如果样式代码写了很多，标签会变得很长，代码不易阅读，不推荐使用；

第二种内嵌式，把样式和页面接口分开，提高了代码的阅读性。但是，如果页面结构较复杂，css样式非常多，维护和开发会比较吃力。比如想看某个元素的样式，需要频繁的上下查看。页面结构不是很复杂，样式代码不是很多的情况下推荐使用。

第三种外联式，支持外联多个css样式文件，是专业的引入方式，像浏览器搜到的一些网站，如CSDN官网，就是使用该方式。
在这里插入图片描述

相关文章：

CSS样式的三种引入方式及优先级

说明&#xff1a;网页开发有三种技术&#xff0c;分别是html、css和js&#xff0c;分别对应页面的结构、表现和动作。css样式引入&#xff0c;是指把对页面的渲染作用到html上&#xff0c;有以下三种方式&#xff1a;行内式、内嵌式和外联式。 第一种&#xff1a;行内式&#…...

编程日记 2023/5/31 4:13:10

Linux第二天

上传 scp -r 本地文件路劲 用户名目标主机地址&#xff1a;路径 下载&#xff1a;scp -r 用户名目标主机地址&#xff1a;路径 本地目录 ls -A /root //查看root文件下所有的隐藏文件 命令&#xff1a;ls 选项&#xff1a; -l&#xff1a;查看文件属性 -h&#xff1a;文…...

编程日记 2023/5/31 4:08:09

微服务和领域驱动

一、微服务 1.1 什么是微服务 微服务就是一些协同工作的小而自治的服务。 关键词&#xff1a; 小而自治 -- 小 “小”这个概念&#xff0c;一方面体现在微服务的内聚性上。 内聚性也可以称之为单一职责原则&#xff1a;“把因相同原因而变化的东西聚合到一起&#xff0c;…...

编程日记 2023/5/31 4:03:08

Redis如何做到内存高效利用？过期key删除术解析！

大家好&#xff0c;我是小米&#xff0c;一个热衷于分享技术的小伙伴。今天我要和大家探讨一个关于 Redis 的话题&#xff1a;删除过期key。在使用 Redis 进行数据存储和缓存时&#xff0c;我们经常会遇到过期数据的处理问题。接下来&#xff0c;我将为大家介绍为什么要删除过期…...

编程日记 2023/5/31 3:58:07

EFDC模型教程

详情点击链接&#xff1a;EFDC建模方法及在地表水环境评价、水源地划分、排污口论证 一&#xff0c;软件安装 1.1 EFDC安装 1.2 EFDC-Explorer安装 1.3 Delft3D安装 1.4 Google Earth安装二&#xff0c;EFDC模型 2.1 EFDC模型 2.2 EFDC-DSI模型 2.3 EFDC的…...

编程日记 2023/5/31 3:53:06

URLConnection（三）

文章目录 1. 配置连接2. protected URL url3. protected boolean connected4. protected boolean allowUserInteraction5. protected boolean doInput5. protected boolean doOutput6. protected boolean isModifiedSince7. protected boolean useCaches8. 超时 1. 配置连接 U…...

编程日记 2023/5/31 3:48:05

针对KF状态估计的电力系统虚假数据注入攻击研究（Matlab代码实现）

&#x1f4a5;&#x1f4a5;&#x1f49e;&#x1f49e;欢迎来到本博客❤️❤️&#x1f4a5;&#x1f4a5; &#x1f3c6;博主优势&#xff1a;&#x1f31e;&#x1f31e;&#x1f31e;博客内容尽量做到思维缜密&#xff0c;逻辑清晰&#xff0c;为了方便读者。 ⛳️座右铭&a…...

编程日记 2023/5/31 3:43:04

2023-05-25 LeetCode每日一题(差值数组不同的字符串)

2023-05-25每日一题 一、题目编号 差值数组不同的字符串 二、题目链接 点击跳转到题目位置 三、题目描述 给你一个字符串数组 words &#xff0c;每一个字符串长度都相同&#xff0c;令所有字符串的长度都为 n 。 每个字符串 words[i] 可以被转化为一个长度为 n - 1 的 …...

编程日记 2023/5/31 3:38:03

MI小米验厂知识点

【MI小米验厂知识点】 小米科技有限责任公司成立于2010年3月3日&#xff0c;是专注于智能硬件和电子产品研发、智能手机、智能电动汽车、互联网电视及智能家居生态链建设的全球化移动互联网企业、创新型科技企业。小米公司创造了用互联网模式开发手机操作系统、发烧友参与开发改…...

编程日记 2023/5/31 3:33:02

损失函数——交叉熵损失（Cross-entropy loss）

交叉熵损失&#xff08;Cross-entropy loss&#xff09;是深度学习中常用的一种损失函数&#xff0c;通常用于分类问题。它衡量了模型预测结果与实际结果之间的差距&#xff0c;是优化模型参数的关键指标之一。以下是交叉熵损失的详细介绍。 假设我们有一个分类问题&#xff0…...

编程日记 2023/5/31 3:28:01

电商ERP接口erp进销存接口

电商API详情接口在ERP中的重要性 电商行业的发展已经改变了人们的消费方式。作为一种连续不断涌现并不断发展的新型销售方式&#xff0c;电商具有开创新市场、大众化消费、商业模式的多样化、效率的提高等优势&#xff0c;对传统零售业产生了极大的冲击。而ERP作为企业资源规划…...

编程日记 2023/5/31 3:23:00

leetcode 922. 按奇偶排序数组 II

题目描述解题思路执行结果 leetcode 922. 按奇偶排序数组 II. 题目描述 按奇偶排序数组 II 给定一个非负整数数组 nums&#xff0c; nums 中一半整数是 奇数 &#xff0c;一半整数是 偶数 。 对数组进行排序&#xff0c;以便当 nums[i] 为奇数时&#xff0c;i 也是 奇数 &#…...

编程日记 2023/5/31 3:17:54

Unity四叉树地图

当使用Unity构建大规模的游戏地图或场景时&#xff0c;使用四叉树数据结构可以提高性能和效率。四叉树是一种基于分割的数据结构&#xff0c;将空间划分为四个相等的子区域&#xff0c;并以递归方式构建树结构。在游戏开发中&#xff0c;四叉树常用于空间分区、碰撞检测和可视化…...

编程日记 2023/5/31 3:12:53

【unity插件】OpenFracture插件实现物体破裂和切割

插件地址 https://github.com/Mustenaka/OpenFracture 使用注意事项 1.如果要导入自定义网格，则必须在导入设置中将“启用读/写”设置为 true。否则，您将收到错误。 2.网格必须是非相交和封闭的。否则，重新三角测量将失败。 上面描绘的是凳子的线框模型。注意横杆如何与…...

编程日记 2023/5/31 3:07:52

Spring Security实现登录

前言 Spring Security是Spring框架下的一个用于身份验证和授权的框架&#xff0c;它可以帮忙管理web应用中的用户认证、授权以及安全性问题。本文将介绍如何使用Spring Security实现用户登录功能&#xff0c;本文主要包括以下内容&#xff1a; 环境准备Spring Security核心概…...

编程日记 2023/5/31 3:02:51

小狐狸ChatGPT付费创作系统1.9.7独立版 + H5端 + 小程序前端增加AI绘画+GPT4接口

小狐狸ChatGPT 1.9.7独立版经播播资源测试了版本比较&#xff0c;本版核心增加了GPT4.0接口功能&#xff0c;小程序端内置了AI绘画功能。体验下来问答速度感觉体验更好。小程序端有更新请对应开发工具更新上传&#xff0c;本版无开源端。播播资源提供的安装教程详见下方&#x…...

编程日记 2023/5/31 2:57:50

双目测距联合YOLOv8 项目总结

代码贴&#xff1a;双目测距--5 双目相机 联合 YOLOv8_爱钓鱼的歪猴的博客-CSDN博客 0、图片筛选 可以用matlab,对双目图像做个一个筛选&#xff0c;也就是做双目标定。 熟悉matlab的小伙伴完全可以用matlab做双目标定&#xff0c;我是没咋接触过不知道怎么导出标定结果&#…...

编程日记 2023/5/31 2:52:49

Windows提权：利用MSSQL数据库，Oracle数据库

目录 MSSQL提权&#xff1a;使用xp_cmdshell进行提权 MSSQL&#xff1a;使用sp_OACreate进行提权 MSSQL&#xff1a;使用沙盒提权 Oracle提权&#xff1a;工具一把梭哈 总结 MSSQL在Windows server类的操作系统上&#xff0c;默认具有system权限。 MSSQL提权&#xff1a;使…...

编程日记 2023/5/31 2:47:48

linux常见的二十多个指令

目录 一、指令的概念 二、28个常见的指令 ⭐2.1 ls指令 ⭐2.2 pwd指令 ⭐2.3 cd指令 ⭐2.4tree指令 ⭐2.5 mkdir指令 ⭐2.6 touch指令 ⭐2.7 rmdir指令 ⭐2.8 rm指令 ⭐2.9 clear指令 ⭐2.10 man指令 ⭐2.11 cp指令 ⭐2.12 mv指令 ⭐2.13 cat指令&#xff08;适…...

编程日记 2023/5/31 2:42:42

内蒙古自治区住房和城乡建设分析及解决方案

安科瑞 徐浩竣 江苏安科瑞电器制造有限公司 zx acrelxhj 摘 要&#xff1a;为深入贯彻落实《国务院办公厅关于印发新能源汽车产业发展规划&#xff08;2021—2035年&#xff09;的通知》&#xff08;国办发 ﹝2020﹞39号&#xff09;、《国家发展改革委等部门关于进一步提升…...

编程日记 2023/5/31 2:37:41

【Python】 -- 趣味代码 - 小恐龙游戏

文章目录 文章目录 00 小恐龙游戏程序设计框架代码结构和功能游戏流程总结01 小恐龙游戏程序设计02 百度网盘地址00 小恐龙游戏程序设计框架 这段代码是一个基于 Pygame 的简易跑酷游戏的完整实现，玩家控制一个角色（龙）躲避障碍物（仙人掌和乌鸦）。以下是代码的详细介绍：…...

编程新知 2025/12/22 8:55:17

Java 8 Stream API 入门到实践详解

一、告别 for 循环&#xff01; 传统痛点&#xff1a; Java 8 之前&#xff0c;集合操作离不开冗长的 for 循环和匿名类。例如&#xff0c;过滤列表中的偶数&#xff1a; List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

编程新知 2025/11/25 5:13:22

3.3.1_1 检错编码（奇偶校验码）

从这节课开始&#xff0c;我们会探讨数据链路层的差错控制功能&#xff0c;差错控制功能的主要目标是要发现并且解决一个帧内部的位错误&#xff0c;我们需要使用特殊的编码技术去发现帧内部的位错误&#xff0c;当我们发现位错误之后&#xff0c;通常来说有两种解决方案。第一…...

编程新知 2025/12/18 15:23:39

深入浅出：JavaScript 中的 `window.crypto.getRandomValues()` 方法

深入浅出&#xff1a;JavaScript 中的 window.crypto.getRandomValues() 方法 在现代 Web 开发中&#xff0c;随机数的生成看似简单&#xff0c;却隐藏着许多玄机。无论是生成密码、加密密钥&#xff0c;还是创建安全令牌&#xff0c;随机数的质量直接关系到系统的安全性。Jav…...

编程新知 2025/10/8 4:56:09

【解密LSTM、GRU如何解决传统RNN梯度消失问题】

解密LSTM与GRU&#xff1a;如何让RNN变得更聪明&#xff1f; 在深度学习的世界里&#xff0c;循环神经网络&#xff08;RNN&#xff09;以其卓越的序列数据处理能力广泛应用于自然语言处理、时间序列预测等领域。然而&#xff0c;传统RNN存在的一个严重问题——梯度消失&#…...

编程新知 2025/12/14 16:14:14

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现，论文初版实现

摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序&#xff0c;以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务&#xff0c;提供稳定高效的数据处理与业务逻辑支持&#xff1b;利用 uniapp 实现跨平台前…...

编程新知 2025/12/16 7:09:20

Python如何给视频添加音频和字幕

在Python中&#xff0c;给视频添加音频和字幕可以使用电影文件处理库MoviePy和字幕处理库Subtitles。下面将详细介绍如何使用这些库来实现视频的音频和字幕添加&#xff0c;包括必要的代码示例和详细解释。 环境准备 在开始之前&#xff0c;需要安装以下Python库&#xff1a;…...

编程新知 2025/9/3 4:12:17

《基于Apache Flink的流处理》笔记

思维导图 1-3 章 4-7章 8-11 章 参考资料 源码&#xff1a; https://github.com/streaming-with-flink 博客 https://flink.apache.org/bloghttps://www.ververica.com/blog 聚会及会议 https://flink-forward.orghttps://www.meetup.com/topics/apache-flink https://n…...

编程新知 2025/12/15 15:10:54

html-＜abbr＞ 缩写或首字母缩略词

定义与作用 <abbr> 标签用于表示缩写或首字母缩略词&#xff0c;它可以帮助用户更好地理解缩写的含义&#xff0c;尤其是对于那些不熟悉该缩写的用户。 title 属性的内容提供了缩写的详细说明。当用户将鼠标悬停在缩写上时&#xff0c;会显示一个提示框。 示例&#x…...

编程新知 2025/12/9 20:17:56

AI，如何重构理解、匹配与决策？

AI 时代&#xff0c;我们如何理解消费&#xff1f; 作者&#xff5c;王彬 封面&#xff5c;Unplash 人们通过信息理解世界。 曾几何时&#xff0c;PC 与移动互联网重塑了人们的购物路径&#xff1a;信息变得唾手可得&#xff0c;商品决策变得高度依赖内容。 但 AI 时代的来…...

编程新知 2025/12/20 2:03:51