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

前端-CSS-zxst

news 2026/5/26 9:37:21

CSS

层叠样式表，为了定义HTML标签的样式

  • 内联样式

    在标签内部通过 style 属性设置样式值样式名:样式值;样式名:样式值;

  • 内部样式

    在 head 标签内通过 style 标签选择器设置样式，供这个网页上的元素使用

  • 外部样式

    在 head 标签内通过 link 标签引入外部的 CSS 文件

内联样式

<div style="height:200px; width:200px; background-color: red;"></div>

内部样式

<head><!-- type="text/css"代表标签内部是css代码 --><style type="text/css">div {width: 200px;height: 200px;background-color: blue;}</style>
</head>
<body><!--从结果上可以看出，内联的优先级要比内部样式的优先级高--><div style="height:200px; width:200px; background-color: red;"></div><div></div><div></div>
</body>

外部样式

内部样式和外部样式根据在head标签的先后顺序执行，有可能先执行完的样式会被后面的样式覆盖掉

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-s6UNbcyK-1677158598500)(C:\Users\99498\AppData\Roaming\Typora\typora-user-images\image-20230214204308547.png)]

需要在 html 文件中通过 link 标签导入这个 CSS 文件。

<head><style type="text/css">div {width: 200px;height: 200px;background-color: blue;}</style><!--注意不要忘记写rel属性--><link href="css/c1.css" rel="stylesheet"/>
</head>
<body><!--从结果上可以看出，内联的优先级要比内部样式的优先级高--><div style="height:200px; width:200px; background-color: red;"></div><div></div><div></div>
</body>

选择器

  • id 选择器

    #div1 {width: 200px;height: 200px;background-color: blue;
}
<div id="div1"></div>

  • class 选择器。一个标签可以有多个class值，中间用空格隔开

    .d1 {width: 200px;height: 200px;background-color: blue;
}<div class="d1"></div>
<div class="d2"></div>
<div class="d1 d2"></div>

  • 标签选择器，直接通过标签名找到元素

  • 上下文选择器

    • 后代选择器

      父选择器 子选择器，找到这个父元素的所有子元素。子选择的元素是父元素的后代，不管是不是父子还是爷孙辈

    • 子元素选择器

      父选择>子选择，只找自己的亲儿子

    • 兄弟选择器

      选择器1 + 选择器2，通过选择器 1找选择器2的兄弟关系的元素通过哥哥找（相邻的）弟弟

      <style type="text/css">.d1 div{width: 300px;height: 300px;}<!--在定位到class="d1"之后，选择它的子标签中的div标签, 也能定位到孙子，重孙子...元素-->.d1 div{width: 300px;height: 300px;}<!--在定位到class="d1"之后，选择它的子标签中的div标签，只能定位到儿子元素-->.d1>div{width: 300px;height: 300px;}<!--在定位到class="c2"之后，选择它的兄弟标签，只能定位到当前元素的相邻的下一个元素-->.c2+span {font-size:40px;}<!--标签属性选择器-->input[type=number] {font-size: 30px;}<!--伪类选择器,鼠标放到该元素上，d3这个类才会使用这个样式-->.d3:hover {}
</style><div class="d1"><div>11</div><div class = "c2">22</div><span>33</span>
</div>
<input type="number"></input>

  • 属性选择器

    通过标签的属性找到元素，input[type=number]

  • 伪类选择器

选择器优先级

优先级从大到小：

  • important
  • 内联样軾
  • id 选择器
  • class 选择器
  • 标签
.d3 {width: 150px;height: 150px;<!--!important 会提高该选择器的优先级-->background-color: red!important;
}

相关文章：

前端-CSS-zxst

CSS 层叠样式表&#xff0c;为了定义HTML标签的样式 内联样式 在标签内部通过 style 属性设置样式值样式名:样式值;样式名:样式值; 内部样式 在 head 标签内通过 style 标签选择器设置样式&#xff0c;供这个网页上的元素使用 外部样式 在 head 标签内通过 link 标签引入外部…...

编程日记 2023/2/24 4:20:39

合宙Air105|fonts库|mcu.ticks()|LuatOS-SOC接口|官方demo|学习（19）：fonts库

基础资料 基于Air105开发板&#xff1a;Air105 - LuatOS 文档 上手&#xff1a;开发上手 - LuatOS 文档 探讨重点 官方fonts库函数介绍以及利用mcu.ticks()计算程序运行周期相关内容的学习及探讨。 软件版本 AIR105&#xff1a;LuatOSAIR105 base 22.12 bsp V0014 32bit …...

编程日记 2023/2/24 4:19:30

成都欢蓬电商：抖音直播卖药灰度测试通告

据报道&#xff0c;近日有MCN机构透露&#xff0c;目前抖音直播卖药为“测试项目&#xff0c;谨慎试跑中”; “仍处于灰度测试&#xff0c;至于测试多久&#xff0c;抖音官方确实没有答复&#xff0c;需要看第一阶段数据&#xff0c;然后定夺&#xff0c;预计4月份会纳入更多机…...

编程日记 2023/2/24 4:18:20

1.1计算机和编成语言

一、C 语言简介历史C 语言最初是作为 Unix 系统的开发工具而发明的。1969年&#xff0c;美国贝尔实验室的肯汤普森&#xff08;Ken Thompson&#xff09;与丹尼斯里奇&#xff08;Dennis Ritchie&#xff09;一起开发了Unix 操作系统。Unix 是用汇编语言写的&#xff0c;无法移…...

编程日记 2023/2/24 4:17:09

解析 xml 文件 - xml.etree ElementTree

目录1、导入模块 →\rightarrow→ 读取文件 →\rightarrow→ 获取根节点 →\rightarrow→ 获取根节点的标签与属性2、遍历一级子节点、获取子节点的标签 与 属性3、通过索引 获取数据4、Element.findall()、Element.find() - 按照 tag 值查找 子节点5、Element.iter() - 循环迭…...

编程日记 2023/2/24 4:15:56

LeetCode Cookbook 哈希表（collections.Counter()和collections.defaultdict()）

好久不更了&#xff0c;这次一鼓作气&#xff0c;学完它&#xff01; 文章目录LeetCode Cookbook 哈希表30. 串联所有单词的子串36. 有效的数独&#xff08;很不错的循环题目&#xff09;49. 字母异位词分组290. 单词规律447. 回旋镖的数量575. 分糖果594. 最长和谐子序列599. …...

编程日记 2023/2/24 4:14:45

spring boot项目中i18n和META-INF.spring下的文件的作用

目录标题一、resource下的文件二、i18n下messages_zh_CN.properties三、spring.factories文件四、org.springframework.boot.autoconfigure.AutoConfiguration.imports一、resource下的文件 org.springframework.boot.autoconfigure.AutoConfiguration.imports &#xff1b; - …...

编程日记 2023/2/24 4:13:35

3年自动化测试经验，面试连20K都拿不到，现在都这么卷了吗····

我的情况 大概介绍一下个人情况&#xff0c;女&#xff0c;本科&#xff0c;三年多测试工作经验&#xff0c;懂python&#xff0c;会写脚本&#xff0c;会selenium&#xff0c;会性能&#xff0c;会自动化&#xff0c;然而到今天都没有收到一份offer&#xff01;从2022年11月1…...

编程日记 2023/2/24 4:12:25

Python数据结构与算法篇（四）-- 链表的实现

实现线性表的另一种常用方式就是基于链接结构&#xff0c;用链接关系显式表示元素之间的顺序关联。基于链接技术实现的线性表称为链接表或者链表。 采用链接方式实现线性表的基本想法如下: 把表中的元素分别存储在一批独立的存储块&#xff08;称为表的结点&#xff09;里。保…...

编程日记 2023/2/24 4:11:16

【java基础】循环语句、中断控制语句

文章目录循环while循环for循环for each循环中断控制语句breakcontinue带标签的break(相当于goto)循环 在java中有3种循环&#xff0c;分别是while循环&#xff0c;for循环&#xff0c;for each循环 while循环 while循环的形式是 while(condition) statement int i 5;while …...

编程日记 2023/2/24 4:10:05

万字长文带你实战 Elasticsearch 搜索

ES 高级实战 前言 上篇我们讲到了 Elasticsearch 全文检索的原理《别只会搜日志了，求你懂点原理吧》，通过在本地搭建一套 ES 服务，以多个案例来分析了 ES 的原理以及基础使用。这次我们来讲下 Spring Boot 中如何整合 ES，以及如何在 Spring Cloud 微服务项目中使用 ES 来…...

编程日记 2023/2/24 4:07:54

Web网页测试全流程解析论Web自动化测试

1、功能测试 web网页测试中的功能测试&#xff0c;主要测试网页中的所有链接、数据库连接、用于在网页中提交或获取用户信息的表单、Cookie 测试等。 &#xff08;1&#xff09;查看所有链接&#xff1a; 测试从所有页面到被测特定域的传出链接。 测试所有内部链接。 测试链…...

编程日记 2023/2/24 4:06:44

初识Python——“Python”

各位CSDN的uu们你们好呀&#xff0c;今天进入到了我们的新专栏噢&#xff0c;Python是小雅兰的专业课&#xff0c;那么现在&#xff0c;就让我们进入Python的世界吧 计算机基础概念 什么是计算机&#xff1f; 什么是编程&#xff1f; 编程语言有哪些&#xff1f; Python背景知…...

编程日记 2023/2/24 4:05:35

LocalDateTime使用

开发中常常需要用到时间&#xff0c;随着jdk的发展&#xff0c;对于时间的操作已经摒弃了之前的Date等方法&#xff0c;而是采用了LocalDateTime方法&#xff0c;因为LocalDateTime是线程安全的。 下面我们来介绍一下LocalDateTime的使用。 时间转换 将字符串转换为时间格式…...

编程日记 2023/2/24 4:04:25

设计模式学习笔记 - 外观模式

设计模式学习笔记 - 外观模式一、影院管理问题二、传统方式解决影院管理问题三、外观模式介绍1、基本介绍2、原理类图四、外观模式解决影院管理问题五、外观模式在MyBatis框架应用的源码分析六、外观模式的注意事项和细节一、影院管理问题 组建一个家庭影院&#xff1a;DVD 播放…...

编程日记 2023/2/24 4:03:16

如何写出一份优秀的简历和求职信？

写一份优秀的简历和求职信是成功求职的重要一步。 01、简历 突出重点信息&#xff1a;把最重要的信息放在简历的前面&#xff0c;例如您的工作经验和教育背景等。 使用简明扼要的语言&#xff1a;在简历中使用简短的句子和简明扼要的语言&#xff0c;让招聘者能够快速了解您的…...

编程日记 2023/2/24 4:02:06

OpenGL超级宝典学习笔记：原子计数器

前言 本篇在讲什么 本篇为蓝宝书学习笔记 原子计数器 本篇适合什么 适合初学Open的小白 本篇需要什么 对C语法有简单认知 对OpenGL有简单认知 最好是有OpenGL超级宝典蓝宝书 依赖Visual Studio编辑器 本篇的特色 具有全流程的图文教学 重实践&#xff0c;轻理论&#…...

编程日记 2023/2/24 4:00:51

深圳/东莞/惠州师资比较强的CPDA数据分析认证

深圳/东莞/惠州师资比较强的CPDA数据分析认证培训机构 CPDA数据分析师认证是中国大数据领域有一定权威度的中高端人才认证&#xff0c;它不仅是中国较早大数据专业技术人才认证、更是中国大数据时代先行者&#xff0c;具有广泛的社会认知度和权威性。 无论是地方政府引进人才、…...

编程日记 2023/2/24 3:59:39

LeetCodeHOT100热题02

写在前面 主要是题目太多&#xff0c;所以和前面的分开来记录。有很多思路的图都来源于力扣的题解&#xff0c;如侵权会及时删除。不过代码都是个人实现的&#xff0c;所以有一些值得记录的理解。之前的算法系列参看&#xff1a; 剑指offer算法题01剑指offer算法题02 七、动…...

编程日记 2023/2/24 3:58:25

虹科Dimetix激光测距仪在锯切系统中的应用

HK-Dimetix激光测距仪——锯切系统应用 许多生产设施&#xff0c;例如金属服务中心&#xff0c;使用切割锯将每个客户的订单切割成一定长度。定长切割过程通常涉及卷尺和慢跑锯的传送带。但更简单的替代方法是使用虹科Dimetix非接触式激光距离传感器。 为了切断大长度的棒材&…...

编程日记 2023/2/24 3:57:18

Jetson Orin Nano 升级jetpack5.1.2刷机过程记录

一.刷机起因 orin nano 接了个IMX477的摄像头,用 命令行DISPLAY:0.0 nvgstcapture-1.0 显示的画面有撕裂,让卖家查问题,卖家测试没有撕裂,对比环境,orin nano出厂默认的是jetpack5.1.1,卖家用的jetpack5.1.2版本,为了解决差异,要升级jetpack版本,前后搞了2天半,记录一下. 另外…...

编程新知 2026/5/26 4:48:24

Rydberg原子量子门实现原理与优化技术

1. Rydberg原子平台中的量子门实现基础1.1 Rydberg原子特性与量子计算优势Rydberg原子是指外层电子被激发到高主量子数能级的原子态&#xff0c;这类原子具有三个关键特性使其成为量子计算的理想平台&#xff1a;强偶极-偶极相互作用&#xff1a;当两个原子同时处于Rydberg态时…...

编程新知 2026/5/26 3:05:50

别再手动点菜单了！用这招让Cadence Virtuoso Schematic效率翻倍（附Net高亮快捷键配置）

电路设计效率革命&#xff1a;Cadence Virtuoso Schematic高阶快捷键配置指南 在集成电路设计的浩瀚宇宙中&#xff0c;Cadence Virtuoso如同设计师手中的光刻机&#xff0c;每一次精准操作都直接影响最终芯片的性能与可靠性。然而&#xff0c;当面对数百个晶体管组成的复杂模…...

编程新知 2026/5/26 2:49:47

DeepSeek系统设计辅助：如何在48小时内完成可审计、可回滚、可压测的AI服务架构图？

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;DeepSeek系统设计辅助 DeepSeek系统设计辅助模块面向架构师与后端工程师&#xff0c;提供模型能力调用、接口契约生成、异步任务编排等核心支撑能力。该模块不替代人工设计决策&#xff0c;而是通过结构…...

编程新知 2026/5/26 2:47:45

GIS工程应用记录（AI辅助编程）

问题的问题&#xff1a;语境坍缩“从各个角度提出问题&#xff0c;AI做出对应积极答复和修改&#xff0c;结果没有什么变化。”这&#xff0c;就是元问题最核心的症状。你尝试了所有你已知的“高级”协作手段&#xff0c;但就像重拳打在棉花上&#xff0c;AI永远在积极回应&…...

编程新知 2026/5/25 21:19:36

从零构建FOC轮腿机器人：开源平衡机器人完整指南

从零构建FOC轮腿机器人&#xff1a;开源平衡机器人完整指南 【免费下载链接】foc-wheel-legged-robot Open source materials for a novel structured legged robot, including mechanical design, electronic design, algorithm simulation, and software development. | 一个…...

编程新知 2026/5/25 20:09:55

避坑指南：Unity动态加载模型时，TriLib插件材质丢失、缩放异常的5个常见问题解决

Unity动态加载模型避坑指南&#xff1a;TriLib插件材质丢失与缩放异常的深度解决方案当你在Unity项目中尝试使用TriLib插件动态加载外部模型时&#xff0c;是否遇到过这些令人抓狂的情况&#xff1a;模型加载后材质全部变成刺眼的粉红色&#xff0c;贴图神秘消失&#xff0c;或…...

编程新知 2026/5/25 17:01:10

基于STM32WL与LoRaWAN的远程空气质量监测系统全栈开发实践

1. 项目概述&#xff1a;构建一个远程空气质量监测系统最近在做一个挺有意思的玩意儿&#xff1a;一个能自己找地方待着、靠太阳能供电&#xff0c;然后把周围空气数据悄无声息传回来的远程监测终端。核心想法很简单&#xff0c;就是想知道某个犄角旮旯&#xff0c;比如工厂周边…...

编程新知 2026/5/25 16:54:54

计算机视觉的实战项目：从0到1搭建属于自己的图像识别系统

作为软件测试从业者&#xff0c;我们每天都在和各类功能验证、兼容性测试、自动化测试框架打交道&#xff0c;对AI领域的实战项目往往觉得“门槛高”“和日常工作不沾边”。但随着AI技术在互联网产品中的落地越来越深入&#xff0c;图像识别功能已经成为很多APP、智能硬件的核心…...

编程新知 2026/5/25 16:17:27

基于窗口比较器与晶体管逻辑的可编程非线性电压指示器设计

1. 项目概述&#xff1a;打造一个可编程的“移动光点”电压指示器在电子制作和仪器仪表领域&#xff0c;我们经常需要一个直观的电压指示器。经典的LM3914点/条图显示驱动芯片大家都很熟悉&#xff0c;它能把一个模拟电压信号转换成10个LED的点亮状态&#xff0c;形成移动的光点…...

编程新知 2026/5/25 15:56:17