【CSS—前端快速入门】CSS 选择器
CSS
1. CSS介绍
1.1 什么是CSS?
CSS(Cascading Style Sheet),层叠样式表,用于控制页面的样式;
CSS 能够对网页中元素位置的排版进行像素级精确控制,实现美化页面的效果;能够做到页面的样式和
结构分离;
1.2 基本语法规范
选择器 +{一条/N条声明}
- 选择器决定针对谁修改(找谁)
- 声明决定修改啥(干啥)
- 声明的属性是键值对
- 使用:区分键值对,使用:区分键和值.
<style>p{/*设置字体颜色 */color: red;/*设置字体大小 */font-size: 30px;
}
</style><p>hello</p>
注意:
- CSS 要写到 style标签中 (后面还会介绍其他写法)
- style 标签可以放到页面任意位置,
一般放到 head 标签内
.- CSS 使用 /**/作为注释 (使用 ctrl +/快速切换).
保存代码,查看页面:在这里插入图片描述
1.3 引入方式
行内样式 |
内部样式 |
外部样式 |
我们再创建一个新文件,用于写入选择器,然后在原文件的 head 内通过上述语法引入新文件的信息:
写好后,保存两个文件,重新打开页面:
值得一提,选择器的生效优先级遵从就近原则
;
1.4 规范
样式大小写
- 虽然 CSS 不区分大小写,我们开发时统一使用小写字母
空格规范
冒号
后面带空格选择器
和{
之间也有一个空格.
2. CSS选择器
标签选择器
/*选择所有的a标签,设置颜色为红色/a{color: red;
}/*选择所有的div标签,设置颜色为绿色*/div {color: green;
}
保存代码,打开页面:
要修改 div3 的颜色,我们可以设置 a { } 选择器,来选择所有 a 标签,并设置颜色:
类选择器
class 选择器的概念和规范使用如下:
- 可以为每一个标签都添加 class 属性
- class 的值
不要求唯一
- 在使用class 选择器时,需要在 class 选择器前加一个
.
,如.class 名{ }
保存代码,打开页面:
ID 选择器
ID 的概念和规范使用如下:
一个页面中的 ID 值原则性上要求是
唯一
的可以为
每个标签
都设置 ID可以为 ID
赋任何值
,哪怕是标签名( div , span , title…)在使用 ID 选择器时,需要在 ID 选择器前加一个
#
,如# id 名{ }
,避免 ID 是标签名的时候,编译器误以为使用的是标签选择器
保存代码后,打开页面:
通配符选择器
通配符的概念和通配符选择器的使用如下:
通配符:
*
,表示选择所有,如SQL 中的select*
;通配符选择器的使用:
*{ }
,表示选择当前页面的所有元素;通配符选择器的优先级较前面几种选择器,优先级是比较低的;
保存代码,打开页面:
复合选择器
复合选择器,是由多个单选择器组成的多选择器
,又分为并集
和交集
的形式:
并集形式,选择器用
,
隔开;交集形式,选择器用
空格
隔开;如果要精细选择某个部分,就可以为这个部分的标签
添加特征属性
,如 ID , class 等等,再使用交集;
并集 |
保存代码,打开页面:
并集 |
补充一个常用的标签:
<body><!-- 无序列表标签 --><ul><li></li></ul><!-- 有序列表标签 --><ol><li></li></ol></body>
如果要只想让有序列表的超链接字体改为红色,我们就可以使用复合选择器的交集形式:
相关文章:
【CSS—前端快速入门】CSS 选择器
CSS 1. CSS介绍 1.1 什么是CSS? CSS(Cascading Style Sheet),层叠样式表,用于控制页面的样式; CSS 能够对网页中元素位置的排版进行像素级精确控制,实现美化页面的效果;能够做到页面的样式和 结构分离; 1…...
二、QT和驱动模块实现智能家居-----5、通过QT控制LED
在QT界面,我们要实现点击“LED”按钮就可以控制板子上的LED。LED接线图如下: 在Linux 系统里,我们可以使用2种方法去操作上面的LED: ① 使用GPIO SYSFS系统:这需要一定的硬件知识,需要设置引脚的方向、数值…...
在UI设计中使用自定义控件
生成: 自定义控件完成: 看控件的父类是谁: 在想使用的窗口中: 拖动一个与他父类相同类型的控件: 点击控件右键 这样就是你自定义的控件了 运行后: //点击QSpinBox,滑块跟着移动void (QSpinBox::…...
docker 离线安装redis(离线)
docker离线安装redis时,我找了挺多资料都是需要先在另一台能联网的机器上先下载镜像,然后移动内网中的docker服务器进行部署,我也是这么操作的,但是必须拥有能上网的docker环境才能下载,我在github上找到了一种可以直接…...
利用python实现对Excel文件中数据元组的自定义排序
问题引入: 假设你是一个浙江省水果超市的老板,统筹11个下辖地市的水果产量。假设11个地市生产的水果包括:苹果、香蕉和西瓜。你如何快速得到某种水果产量突出(排名前几)的地市?产量落后(排名后…...
基于 Python 深度学习的电影评论情感分析可视化系统(2.0 全新升级)
基于 Python 深度学习的电影评论情感分析可视化系统,基于 Flask 深度学习,构建了一个 影评情感分析系统,能够 自动分析影评、计算情感趋势 并 可视化展示,对于电影行业具有重要参考价值! 基于 Python 深度学习的电影评…...
【MYSQL数据库异常处理】执行SQL语句报超时异常
MYSQL执行SQL语句异常:The last packet successfully received from the server was 100,107 milliseconds ago. The last packet sent successfully to the server was 100,101 milliseconds ago. 这个错误表明 MySQL 服务器与 JDBC 连接之间的通信超时了。通常由…...
docker拉取失败
备份原始配置文件 sudo cp /etc/docker/daemon.json /etc/docker/daemon.json.bak 清理或修复 daemon.json 文件 sudo nano /etc/docker/daemon.json 删除 文件中的所有内容,确保文件为空。 cv下面这个文件内容 { "registry-mirrors": [ &…...
Linux的一些配置(网络建设与运维)
for i in 的指令使用集 传输内容指令 for i in {1..7};do ssh 10.4.220.10${i} "指令";done 传输文件指令 for i in {1..7};do scp 文件 root10.4.220.10${i}:文件位置;done DNS循环内容指令 for i in {1..7};do echo "linux$i A 10.4.220.10$i" >> …...
嵌入式L6计算机网络
Telnet不加密 socket是应用层和下面的内核...
大型语言模型演变之路:从Transformer到DeepSeek-R1
大型语言模型的崛起被认为是人工智能领域的一次革命,从2017年Transformer架构的引入开始,到2025年DeepSeek-R1的推出,每一步都在不断改变着人机交互的方式,推动着学术界与产业界的深度融合。 1. Transformer的引领(201…...
Idea配置注释模板
一、配置类注释模板 打开IDEA,打开settings(快捷键:Ctrl Alt s),选择Editor,找到File and Code Templates 这里以设置class文件为例,点击Class,在右侧配置以下内容 #if (${PACKAGE_NAME} && $…...
通过计费集成和警报监控 Elasticsearch Service 成本
作者:来自 Elastic Alexis Charveriat 使用 Elasticsearch 服务计费集成来跟踪、定制和提醒 Elasticsearch 服务费用。 监控和管理你的Elasticsearch服务(ESS)使用情况和成本对高效运营至关重要。 Elasticsearch服务计费集成提供了一种简化的…...
50.xilinx fir滤波器系数重加载如何控制
, 注意:matlab量化后的滤波器系数为有符号数,它是以补码形式存储的,手动计算验证时注意转换为负数对应数值进行计算。...
每日一题——接雨水
接雨水问题详解 视频学习推荐 建议先参考以下视频进行学习: 问题描述 给定一个非负整数数组 height,表示每个宽度为 1 的柱子的高度图。计算按此排列的柱子,下雨之后能接多少雨水。 示例 示例 1: 输入:height …...
【Flink银行反欺诈系统设计方案】1.短时间内多次大额交易场景的flink与cep的实现
【flink应用系列】1.Flink银行反欺诈系统设计方案 1. 经典案例:短时间内多次大额交易1.1 场景描述1.2 风险判定逻辑 2. 使用Flink实现2.1 实现思路2.2 代码实现2.3 使用Flink流处理 3. 使用Flink CEP实现3.1 实现思路3.2 代码实现 4. 总结 1. 经典案例:短…...
【15】蚂蚁链产品与服务
15-1 蚂蚁链一体机 蚂蚁链一体机概述 蚂蚁链一体机是深度融合软硬件技术、针对区块链技术特色打造的软硬一体化服务器。面对区块链技术落地中的性能、安全和隐私等技术挑战,结合自主硬件技术,打造了高性能、强隐私和高安全的软硬件一体化服务器&#x…...
DeepSeek:如何通过自然语言生成HTML文件与原型图?
在当今快节奏的开发与设计环境中,快速生成HTML文件或原型图是每个开发者与设计师的迫切需求。虽然DeepSeek无法直接生成图片,但它却能够通过自然语言生成流程图、原型图以及交互式页面,甚至可以直接输出HTML代码。本文将详细介绍如何与DeepSe…...
【JAVA架构师成长之路】【持久层】第2集:SQL常用优化手段
课程标题:SQL常用优化手段——15分钟快速提升数据库性能 目标:掌握10+核心SQL优化技巧,解决慢查询、高负载等生产问题 0-1分钟:优化核心原则——减少数据扫描量 本质逻辑:通过索引、分页、过滤条件等手段,最小化磁盘I/O和内存计算。 反例:SELECT * FROM orders(全表扫…...
文件上传和下载前后端交互逻辑
上传】 1、后端给前端一个上传接口:进行文件上传,上传成功后,该接口返回文件的路径,名称,id 2、表单提交接口,提交表单时,将文件的id和表单信息一块提交给后台,实现文件和表单的绑…...
全向广播扬声器在油气田中的关键应用 全方位守护安全
油气田作为高风险作业场所,安全生产始终是重中之重。在紧急情况下,如何快速、有效地传达信息,确保人员安全撤离,是油气田安全管理的关键环节。全向广播扬声器凭借其全方位覆盖、高音质输出和强大的环境适应性,成为油气…...
PHP之运算符
在你有别的编程语言的基础下,你想学习PHP,可能要了解的一些关于运算符的信息。 三元运算符,短径求值,为空判断 echo 1 ? "b" : "c";//第一个为真时返回第一个,为假时返回第二个 echo 1 ?: &qu…...
hive之lag函数
从博客上发现两个面试题,其中有个用到了lag函数。整理学习 LAG 函数是 Hive 中常用的窗口函数,用于访问同一分区内 前一行(或前 N 行)的数据。它在分析时间序列数据、计算相邻记录差异等场景中非常有用。 一、语法 LAG(column,…...
3427. 变长子数组求和
给你一个长度为 n 的整数数组 nums 。对于 每个 下标 i(0 < i < n),定义对应的子数组 nums[start ... i](start max(0, i - nums[i]))。 返回为数组中每个下标定义的子数组中所有元素的总和。 子数组 是数组中…...
RabbitMQ 2025/3/5
高性能异步通信组件。 同步调用 以支付为例: 可见容易发生雪崩。 异步调用 以支付为例: 支付服务当甩手掌柜了,不管后面的几个服务的结果。只管库库发,后面那几个服务想取的时候就取,因为消息代理里可以一直装&#x…...
C#+Halcon 检测稳定性提升的方式
前言 众所周知,C#是一个带垃圾回收机制的语言,开发过程中不需要考虑垃圾回收,你就可劲造吧。但我们在设计图像处理软件时,应时刻对图像等大内存资源进行管控,做到自行管控,及时释放,不应将其交…...
第一个Hadoop程序
编写和运行第一个 Hadoop 程序是学习 Hadoop 的重要步骤。以下是一个经典的“WordCount”程序示例,它统计文本文件中每个单词出现的次数。我们将使用 Java 编写 MapReduce 程序,并在 Hadoop 集群上运行它。 一、WordCount 程序概述 WordCount 是 Hadoo…...
Leetcode 378-有序矩阵中第 K 小的元素
给你一个 n x n 矩阵 matrix ,其中每行和每列元素均按升序排序,找到矩阵中第 k 小的元素。 请注意,它是 排序后 的第 k 小元素,而不是第 k 个 不同 的元素。 你必须找到一个内存复杂度优于 O(n2) 的解决方案。 示例 1࿱…...
python之爬虫入门实例
链家二手房数据抓取与Excel存储 目录 开发环境准备爬虫流程分析核心代码实现关键命令详解进阶优化方案注意事项与扩展 一、开发环境准备 1.1 必要组件安装 # 安装核心库 pip install requests beautifulsoup4 openpyxl pandas# 各库作用说明: - requests&#x…...
第一个 C++ 程序
文章目录 “Hello, World!” 程序代码示例程序基本结构详细解释头文件(#include <iostream>)命名空间(std)主函数(int main())输出语句(std::cout << "Hello, World!" &l…...
深度学习篇---不同框架下的图像通道
文章目录 前言一、核心概念NCHWNHWCCHW 二、主流框架的通道顺序1.PyTorch默认格式特点调整方法 2.TensorFlow默认格式特点调整方法 3.Keras默认格式特点 4.PaddlePaddle默认格式特点调整方法 5.MXNet默认格式调整方法 6.ONNX默认格式特点 三、通道顺序的影响性能差异NCHWNHWC 框…...
在 C++ 中,通常会使用 `#define` 来定义宏,并通过这种方式发出警告或提示。
在 C++ 中,通常会使用 #define 来定义宏,并通过这种方式发出警告或提示。 如何实现 GBB_DEPRECATED_MSG 宏: 你可以通过以下方式定义一个宏,显示弃用警告: #include <iostream>// 定义一个宏,用来打印弃用警告 #define GBB_DEPRECATED_MSG(msg...
10x Research:Secured Finance 基于 FIL 的美元稳定币如何推动 Filecoin 生态系统发展
“众多与 Filecoin 数据进行互动的参与者,将从全新灵活性与金融化的体系中受益。” 在 10X Research 的最新研究内容中,揭示了在 Filecoin 生态系统内推出以美元计价的稳定币为用户带来的巨大增益。 Filecoin 是 Web3 中增长最快的平台之一,…...
解决Spring Boot中LocalDateTime返回前端数据为数组结构的问题
在Spring Boot开发中,处理日期时间数据是一个常见的需求。Java 8 引入了新的日期时间API,如LocalDateTime,它提供了更强大的日期时间处理功能。然而,在将LocalDateTime对象序列化为JSON时,可能会遇到返回为数组结构的问…...
【Linux】进程间通信 续
目录 管道的原理(匿名管道) 核心原理 站在内核的角度看管道的本质 接口 创建管道文件 代码示例 管道的特征 管道读写端的四种情况 管道的应用场景 命令行的管道。 使用管道实现进程池 初始化 控制子进程 退出 命名管道 命名管道的理解 …...
心率提取,FFT
rPPG 信号提取: 从面部视频中提取 rPPG 信号,通常是通过对视频帧中的面部区域进行颜色通道分析,提取出反映血液容积变化的信号。 信号预处理: 对提取的 rPPG 信号进行滤波、归一化等预处理操作,以去除噪声和干扰。 心率…...
Data truncation: Out of range value for column ‘allow_invite‘ at row 1
由于前端传递的数值超过了mysql数据库中tinyint类型的取值范围,所以就会报错。 Caused by: com.mysql.cj.jdbc.exceptions.MysqlDataTruncation: Data truncation: Out of range value for column allow_invite at row 1at com.mysql.cj.jdbc.exceptions.SQLExcept…...
ZYNQ-PL学习实践(二)按键和定时器控制LED闪烁灯
ZYNQ-PL学习实践(二)按键和定时器控制LED闪烁灯) 1 创建工程2 verilog 代码3 约束4 综合5 生成bit总结 1 创建工程 2 verilog 代码 添加key_led.v 文件, module key_led(input sys_clk , //系统时钟50MHzinput …...
【CXX】4.4 其他构建系统
你需要至少完成以下三件事: 生成CXX生成的C绑定代码。 编译生成的C代码。 将生成的目标文件与你的其他C和Rust目标文件链接在一起。 并非所有构建系统都是平等的。如果你希望使用90年代的构建系统,尤其是如果你希望覆盖2个或更多构建系统(…...
windows 上删除 node_modules
在 Windows 11 上,你可以通过命令行来删除 node_modules 文件夹并清除 npm 缓存。以下是具体步骤: 删除 node_modules 打开命令提示符(Command Prompt)或终端(PowerShell)。 导航到项目目录。你可以使用 …...
mysql之如何获知版本
你可以通过在 MySQL 命令行客户端执行简单的 SQL 查询来获取 MySQL 的版本信息。以下是获取 MySQL 版本的常见方法: 使用 SELECT VERSION(); 查询: SELECT VERSION();执行这个查询后,MySQL 会返回一个字符串,其中包含了 MySQL 服…...
PHP 将图片url,写入到文件夹中,导出到zip下载到桌面
一:将图片写入到文件内 文件url:比如 【https://image.baidu.com/search/detail?ct503316480&z0&ipnfalse&word%E5%9B%BE%E7%89%87%E5%A4%B4%E5%83%8F&hs0&pn1&spn0&di7466852183703552001&pi0&rn1&tnbaiduima…...
系统架构设计师—计算机基础篇—文件管理
文章目录 文件结构逻辑结构物理结构文件的索引直接索引间接索引做题的方法 文件存储空间管理位示图 文件结构 文件的结构是指文件的组织形式。 逻辑结构 从用户角度看到的文件的组织形式。 用户知道文件名就可以存取文件中的信息。 物理结构 文件在文件存储器上的存放方式…...
【MySQL】用MySQL二进制包构建docker镜像
一、实验背景 【MySQL&docker】基于CentOS7.5 编译制作MySQL5.7.28镜像 https://www.jianshu.com/p/71fd79b69a6b 用MySQL源码编译的docker镜像,体积过大,直奔3G了,你也不清楚,这点编译参数打出的体积怎么就这么大!…...
C++ std::vector 超详细指南:基础实践(手搓vector)
目录 一.基本概念 二.类的常用接口说明 1.类对象的常见构造 2. vector类空间变化 1).size()(获取数据个数) 2).capacity()(获取容量大小) 3).empty()(判断是否为空࿰…...
java面试复习巩固
韩顺平Java__哔哩哔哩_bilibili 1、Java中源文件中可以有多个类,最多只能有一个public类? 程序分为编译和执行两个阶段。 编译阶段 如果存在public类,那么一个源文件中只能够存在一个而且要与源文件的名字相同。----------否则编译会报错…...
《STL源码剖析》笔记记录
《STL源码剖析》笔记记录 2.空间适配器(allocator) 分配的是空间,而不一定是内存 为了精密分⼯,STL allocator 决定将这两个阶段操作区分开来。 1、对象构造由 ::construct() 负责;对象释放由 ::destroy() 负责。 2、内存配置由 alloc::al…...
《Linux C 智能 IO 矩阵:输入输出的自适应数据流转》
1. 标准库IO简介 标准库IO特点:通过操作系统提供的接口(API)和操作系统进行交互。(接近100个函数) 1.1. IO的过程 操作系统:向上为用户提供操作接口,向下为统筹控制硬件。 操作系统的组成&#…...
idea生成自定义Maven原型(archetype)项目工程模板
一、什么是Maven原型(Maven archetype) 引自官网的介绍如下: Maven原型插件官网地址 这里采用DeepSeek助手翻译如下: Maven 原型 什么是原型? 简而言之,原型是一个 Maven 项目模板工具包。原型被定义为一…...
CES Asia 2025增设未来办公教育板块,科技变革再掀高潮
作为亚洲消费电子领域一年一度的行业盛会,CES Asia 2025(第七届亚洲消费电子技术贸易展)即将盛大启幕。今年展会规模再度升级,预计将吸引超过500家全球展商参展,专业观众人数有望突破10万。除了聚焦人工智能、物联网、…...