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

前端-CSS-zxst

news 2026/2/8 21:19:51

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

国防科技大学计算机基础课程笔记02信息编码

1.机内码和国标码 国标码就是我们非常熟悉的这个GB2312,但是因为都是16进制&#xff0c;因此这个了16进制的数据既可以翻译成为这个机器码&#xff0c;也可以翻译成为这个国标码&#xff0c;所以这个时候很容易会出现这个歧义的情况&#xff1b; 因此&#xff0c;我们的这个国…...

编程新知 2026/2/8 4:37:15

Flask RESTful 示例

目录 1. 环境准备2. 安装依赖3. 修改main.py4. 运行应用5. API使用示例获取所有任务获取单个任务创建新任务更新任务删除任务 中文乱码问题&#xff1a; 下面创建一个简单的Flask RESTful API示例。首先&#xff0c;我们需要创建环境&#xff0c;安装必要的依赖&#xff0c;然后…...

编程新知 2026/2/8 20:42:43

逻辑回归：给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

编程新知 2025/10/27 21:25:04

【入坑系列】TiDB 强制索引在不同库下不生效问题

文章目录 背景SQL 优化情况线上SQL运行情况分析怀疑1：执行计划绑定问题？尝试：SHOW WARNINGS 查看警告探索 TiDB 的 USE_INDEX 写法Hint 不生效问题排查解决参考背景 项目中使用 TiDB 数据库，并对 SQL 进行优化了，添加了强制索引。 UAT 环境已经生效，但 PROD 环境强制索…...

编程新知 2026/1/31 21:56:58

视频字幕质量评估的大规模细粒度基准

大家读完觉得有帮助记得关注和点赞&#xff01;&#xff01;&#xff01; 摘要 视频字幕在文本到视频生成任务中起着至关重要的作用&#xff0c;因为它们的质量直接影响所生成视频的语义连贯性和视觉保真度。尽管大型视觉-语言模型&#xff08;VLMs&#xff09;在字幕生成方面…...

编程新知 2026/2/6 9:24:15

令牌桶 滑动窗口-＞限流 分布式信号量-＞限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

编程新知 2026/1/29 16:36:27

浅谈不同二分算法的查找情况

二分算法原理比较简单&#xff0c;但是实际的算法模板却有很多&#xff0c;这一切都源于二分查找问题中的复杂情况和二分算法的边界处理&#xff0c;以下是博主对一些二分算法查找的情况分析。 需要说明的是&#xff0c;以下二分算法都是基于有序序列为升序有序的情况&#xf…...

编程新知 2025/9/14 7:37:32

并发编程 - go版

1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程&#xff0c;系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...

编程新知 2026/1/31 6:50:52

DAY 26 函数专题1

函数定义与参数知识点回顾&#xff1a;1. 函数的定义2. 变量作用域&#xff1a;局部变量和全局变量3. 函数的参数类型&#xff1a;位置参数、默认参数、不定参数4. 传递参数的手段&#xff1a;关键词参数5 题目1&#xff1a;计算圆的面积 任务&#xff1a; 编写一…...

编程新知 2025/11/28 7:53:17

规则与人性的天平——由高考迟到事件引发的思考

当那位身着校服的考生在考场关闭1分钟后狂奔而至&#xff0c;他涨红的脸上写满绝望。铁门内秒针划过的弧度&#xff0c;成为改变人生的残酷抛物线。家长声嘶力竭的哀求与考务人员机械的"这是规定"&#xff0c;构成当代中国教育最尖锐的隐喻。 一、刚性规则的必要性 …...

编程新知 2026/1/15 17:33:18