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

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

news 2026/2/8 18:42:19

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

RestClient

什么是RestClient RestClient 是 Elasticsearch 官方提供的 Java 低级 REST 客户端&#xff0c;它允许HTTP与Elasticsearch 集群通信&#xff0c;而无需处理 JSON 序列化/反序列化等底层细节。它是 Elasticsearch Java API 客户端的基础。 RestClient 主要特点 轻量级&#xff…...

编程新知 2025/11/30 15:33:36

c++ 面试题(1)-----深度优先搜索（DFS）实现

操作系统&#xff1a;ubuntu22.04 IDE:Visual Studio Code 编程语言&#xff1a;C11 题目描述 地上有一个 m 行 n 列的方格&#xff0c;从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子&#xff0c;但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

编程新知 2026/1/10 10:16:16

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

编程新知 2026/2/6 9:49:55

Xen Server服务器释放磁盘空间

disk.sh #!/bin/bashcd /run/sr-mount/e54f0646-ae11-0457-b64f-eba4673b824c # 全部虚拟机物理磁盘文件存储 a$(ls -l | awk {print $NF} | cut -d. -f1) # 使用中的虚拟机物理磁盘文件 b$(xe vm-disk-list --multiple | grep uuid | awk {print $NF})printf "%s\n"…...

编程新知 2025/11/19 6:04:18

#Uniapp篇：chrome调试unapp适配

chrome调试设备----使用Android模拟机开发调试移动端页面 Chrome://inspect/#devices MuMu模拟器Edge浏览器&#xff1a;Android原生APP嵌入的H5页面元素定位 chrome://inspect/#devices uniapp单位适配 根路径下 postcss.config.js 需要装这些插件 “postcss”: “^8.5.…...

编程新知 2026/1/4 21:36:42

智能AI电话机器人系统的识别能力现状与发展水平

一、引言 随着人工智能技术的飞速发展&#xff0c;AI电话机器人系统已经从简单的自动应答工具演变为具备复杂交互能力的智能助手。这类系统结合了语音识别、自然语言处理、情感计算和机器学习等多项前沿技术&#xff0c;在客户服务、营销推广、信息查询等领域发挥着越来越重要…...

编程新知 2025/6/11 3:05:02

【VLNs篇】07：NavRL—在动态环境中学习安全飞行

项目内容论文标题NavRL: 在动态环境中学习安全飞行 (NavRL: Learning Safe Flight in Dynamic Environments)核心问题解决无人机在包含静态和动态障碍物的复杂环境中进行安全、高效自主导航的挑战&#xff0c;克服传统方法和现有强化学习方法的局限性。核心算法基于近端策略优化…...

编程新知 2026/2/7 4:16:41

七、数据库的完整性

七、数据库的完整性 主要内容 7.1 数据库的完整性概述 7.2 实体完整性 7.3 参照完整性 7.4 用户定义的完整性 7.5 触发器 7.6 SQL Server中数据库完整性的实现 7.7 小结 7.1 数据库的完整性概述 数据库完整性的含义 正确性 指数据的合法性 有效性 指数据是否属于所定…...

编程新知 2026/2/4 10:28:25

基于SpringBoot在线拍卖系统的设计和实现

摘 要 随着社会的发展&#xff0c;社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。 在线拍卖系统&#xff0c;主要的模块包括管理员&#xff1b;首页、个人中心、用户管理、商品类型管理、拍卖商品管理、历史竞拍管理、竞拍订单…...

编程新知 2026/1/26 13:25:02

LRU 缓存机制详解与实现（Java版） + 力扣解决

&#x1f4cc; LRU 缓存机制详解与实现&#xff08;Java版&#xff09; 一、&#x1f4d6; 问题背景 在日常开发中&#xff0c;我们经常会使用 缓存&#xff08;Cache&#xff09; 来提升性能。但由于内存有限&#xff0c;缓存不可能无限增长&#xff0c;于是需要策略决定&am…...

编程新知 2025/11/28 20:47:33