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

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

news 文章来源：https://blog.csdn.net/qq_42108331/article/details/130884084 2025/5/20 6:22:20

说明：网页开发有三种技术，分别是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

JavaEE进阶5/25（属性注入）

目录 1.更简单的存取Spring对象 2.获取Bean对象&#xff08;对象装配&#xff09;DI 3. Resource注入 4.Resource注入和Autowired注入的区别 1.更简单的存取Spring对象 2.获取Bean对象&#xff08;对象装配&#xff09;DI 对象装配&#xff08;对象注入&#xff09;有三种方…...

编程日记 2023/5/31 2:32:40

【Java学习记录-4】相关名词和概念记录（持续更新）

目录 1 注解2 包3 权限修饰符4 状态修饰符1. final2. static 5. 多态6.抽象类7.接口 1 注解 Override是一个注解&#xff0c;可以帮助我们检查重写方法的方法声明的正确性 注意&#xff1a; 私有方法不能被重写&#xff08;父类私有成员子类是不能继承的&#xff09;子类方法…...

编程日记 2023/5/31 2:27:39

《程序员面试金典（第6版）》面试题 16.25. LRU 缓存（自定义双向链表，list库函数，哈希映射）

题目描述 设计和构建一个“最近最少使用”缓存&#xff0c;该缓存会删除最近最少使用的项目。缓存应该从键映射到值(允许你插入和检索特定键对应的值)&#xff0c;并在初始化时指定最大容量。当缓存被填满时&#xff0c;它应该删除最近最少使用的项目。 题目传送门&#xff1a;…...

编程日记 2023/5/31 2:22:38

kong网关启用jwt认证插件

认证流程&#xff1a; 1、创建一个用户 2、生成jwt的所需要的key和密钥 3、在https://jwt.io/的生成jwt token 4、启用jwt插件 5、发送请求的时候携带jwt的token信息 官方指导&#xff1a;https://docs.konghq.com/hub/kong-inc/jwt/configuration/examples/ 一、创建一个新的…...

编程日记 2023/5/31 2:17:38

day12 - 图像修复

在图像处理的过程中&#xff0c;经常会遇到图像存在多余的线条或者噪声的情况&#xff0c;对于这种情况我们会先对图像进行预处理&#xff0c;去除掉对图形内容有影响的噪声&#xff0c;在进行后续的处理。 本节实验我们介绍使用图像膨胀来处理图形的多余线条&#xff0c;进行…...

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

1720_Linux学习中的问题处理

全部学习汇总&#xff1a;GreyZhang/little_bits_of_linux: My notes on the trip of learning linux. (github.com) 这个有点学习的方法论的意思&#xff0c;画个滋味导图顺便整理一下。 遇到问题的时候&#xff0c;解决的方法大致有3中&#xff0c;而针对学习的建议有一部分是…...

编程日记 2023/5/31 2:07:36

七人拼团系统开发模式详解

七人拼团是最近兴起的一个模式&#xff0c;它通过更人性化的奖励机制&#xff0c;将产品利润最大化让利给参与拼团的用户&#xff0c;达到促进用户主动积极裂变和团队平台引流提升销量的效果&#xff0c;下面就来详细说一下这个模式。 七人拼团最大的特点&#xff0c;就是结合了…...

编程日记 2023/5/31 2:02:35

CPU性能优化：分支预测

条件跳转引起的控制冒险虽然也可以通过在流水线中插入空泡来避免&#xff0c;但是当流水线很深时&#xff0c;需要插入更多的空泡。一个20级的流水线为例&#xff0c;如果一条指令需要上一条指令的执行结束才能执行&#xff0c;则需要在这两条指令之间插入19个空泡&#xff0c;…...

编程日记 2023/5/31 1:57:34

过滤器Filter，拦截器Interceptor

过滤器Filter 快速入门 详情 登录校验-Filter package com.itheima.filter;import com.alibaba.fastjson.JSONObject; import com.itheima.pojo.Result; import com.itheima.utils.JwtUtils; import lombok.extern.slf4j.Slf4j; import org.springframework.util.StringUtils…...

编程日记 2023/5/31 1:52:32

kafka整理

kafka整理 一、kafka概述 kafka是apache旗下一款开源的顶级的消息队列的系统, 最早是来源于领英, 后期将其贡献给apache, 采用语言是scala.基于zookeeper, 启动kafka集群需要先启动zookeeper集群, 同时在zookeeper记录kafka相关的元数据 kafka本质上就是消息队列的中间件产品…...

编程日记 2023/5/31 1:47:32