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

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

news 2026/5/23 14:47:56

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

从零到课标对齐：用Claude批量生成校本课程资源，72小时内完成一学期备课，你还在手动写？

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;从零到课标对齐&#xff1a;用Claude批量生成校本课程资源&#xff0c;72小时内完成一学期备课&#xff0c;你还在手动写&#xff1f; 教育数字化转型已进入深水区&#xff0c;一线教师却仍陷于“写教案…...

编程新知 2026/5/23 14:06:49

朱雀广告平台：技术架构深度解析与高性能广告解决方案构建

朱雀广告平台&#xff1a;技术架构深度解析与高性能广告解决方案构建 【免费下载链接】zhuque 开放源码的一站式广告平台&#xff0c;包含ssp/adx/dsp/dmp模块 项目地址: https://gitcode.com/gh_mirrors/zhu/zhuque 在数字广告技术快速演进的今天&#xff0c;广告平台面…...

编程新知 2026/5/23 13:43:52

在不同网络环境下测试Taotoken API端点的连接稳定性与路由表现

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 在不同网络环境下测试Taotoken API端点的连接稳定性与路由表现 对于依赖大模型API进行开发的团队而言&#xff0c;服务的连接稳定性…...

编程新知 2026/5/23 13:29:07

Claude投资回报率究竟怎么算？揭秘企业级ROI模型的7个隐藏变量与实时测算模板

更多请点击&#xff1a; https://kaifayun.com 第一章&#xff1a;Claude投资回报率的核心定义与行业基准 Claude投资回报率&#xff08;ROI&#xff09;并非传统软件许可模型下的简单成本收益比&#xff0c;而是衡量企业将Claude系列大模型深度集成至核心业务流程后&#xff…...

编程新知 2026/5/23 13:24:47

免费Flash反编译工具：JPEXS Free Flash Decompiler完整使用指南

免费Flash反编译工具&#xff1a;JPEXS Free Flash Decompiler完整使用指南 【免费下载链接】jpexs-decompiler JPEXS Free Flash Decompiler 项目地址: https://gitcode.com/gh_mirrors/jp/jpexs-decompiler 还在为无法打开老旧SWF文件而烦恼吗&#xff1f;想要提取Fla…...

编程新知 2026/5/23 13:22:46

脑机接口的 “信号生命线”：自研模拟前端如何破解非侵入式采集的性能困局

近些年来&#xff0c;脑机接口技术飞速发展&#xff0c;打破了人脑与外部设备之间的沟通壁垒&#xff0c;摆脱肢体、语言的限制&#xff0c;实现大脑信号与机器设备的直接交互。这项技术广泛应用于医疗康复、智能交互、疲劳监测、认知分析等领域&#xff0c;也是当下人工智能、…...

编程新知 2026/5/23 13:00:46

轨迹在线识别导向的3D折线焊缝机器人摆动GMAW实时跟踪系统【附程序】

✨ 长期致力于3D折线焊缝、机器人、GMAW、轨迹在线识别、焊缝跟踪研究工作&#xff0c;擅长数据搜集与处理、建模仿真、程序编写、仿真设计。 ✅ 专业定制毕设、代码 ✅ 如需沟通交流&#xff0c;点击《获取方式》 &#xff08;1&#xff09;基于激光位移传感与密度聚类点云在线…...

编程新知 2026/5/23 12:24:35

OfflineInsiderEnroll终极指南：5分钟快速退出Windows预览版的完整教程

OfflineInsiderEnroll终极指南&#xff1a;5分钟快速退出Windows预览版的完整教程 【免费下载链接】offlineinsiderenroll OfflineInsiderEnroll - A script to enable access to the Windows Insider Program on machines not signed in with Microsoft Account 项目地址: h…...

编程新知 2026/5/23 11:10:03

Burp Suite安装避坑指南：Java环境、代理配置与HTTPS解密全解析

1. 为什么Burp Suite的安装&#xff0c;比你想象中更值得花20分钟认真对待 很多人点开“Burp Suite安装教程”&#xff0c;心里想的是&#xff1a;“不就是下载个JAR包&#xff0c;双击运行吗&#xff1f;5分钟搞定。”我试过——在三台不同配置的Windows机器上&#xff0c;用…...

编程新知 2026/5/23 8:45:58

告别Keil4编译报错！手把手教你为STC89C52RC单片机配置头文件路径（保姆级教程）

从零解决Keil4头文件报错&#xff1a;STC89C52RC开发环境配置全指南 当你第一次打开Keil4准备为STC89C52RC单片机编写程序时&#xff0c;满心期待地点下编译按钮&#xff0c;却看到屏幕上跳出"Cannot open source file REG52.H"的红色错误提示——这种挫败感我太熟悉…...

编程新知 2026/5/23 6:12:06