【web前端HTML+CSS+JS】--- CSS学习笔记02
一、CSS(层叠样式表)介绍
1.优势

2.定义解释
如果有多个选择器共同作用的话,只有优先级最高那层样式决定最终的效果
二、无语义化标签
div和span:只起到描述的作用,不带任何样式

三、标签选择器
1.标签/元素选择器
为标签添加样式

2.类选择器
只想选择部分标签进行控制,需要任意对标签进行分类,并分别加上class属性

3.ID选择器
作用于单个标签上

4.全局选择器
选择全部标签

5.属性选择器

6.子字符串匹配选择器

7.忽略大小写匹配选择器

8.伪类选择器
根据状态(普通/行为)分类,不是手动分类

(1)普通伪类选择器
比如永远动态的对第一个段落控制样式

(2)行为伪类选择器
比如被点击的链接,不同的行为可以设置不同的样式

9.关系选择器
(1)交集选择器
格式:标签.类值 (必须标签在前,否则会把标签名当作类名的一部分,产生歧义)

(2)并集选择器
格式:标签和类用逗号隔开,前后顺序无所谓

(3)后代选择器
格式:父标签 空格 子标签
选择所有的子元素,包含直接和间接

(4)子代选择器
格式:父标签 >子标签
只控制一级子元素

(5)兄弟选择器
格式:某个标签+相邻的标签
只会对相邻的标签进行控制,样式对本身不起作用

格式:某个标签~相邻的标签
对同一级别的兄弟标签都会起作用,下面例子中段落123都会有样式,即使3不挨着2

四、样式添加类型

1.行内样式
标签和样式耦合在一起

2.内部样式
将样式抽取出来,但只能针对当面页面控制
在head中添加style,在style中的注释是/* */

3.外部样式
新建一个css文件,将样式写在里面

在html文件中引入css文件

五、选择器的优先级
1.非关系选择器优先级



2.关系选择器优先级
赋分比大小,分数一致遵循就近原则

显示蓝色

六、常见属性
w3school 在线教程 点击参考书有属性汇总
1.背景颜色

2.字体属性
(1)字体族属性
当不支持第一种字体时,依次用后面的

(2)字体大小属性
默认大小是16px


(3)字体风格属性
设置斜体

(4)字体粗细属性
有的字体不支持所有的选项

(5)字体复合属性
通过font可以同时设置多个属性,不过必须按照一定的顺序来

3.文本属性
(1)文本颜色属性

(2)文本间距属性
英文字母以及汉字之间的间距:
![]()
英文单词之间的间距:

(3)文本划线属性
分别为下划线和中划线

(4)文本缩进属性
缩进两个字符,设置的值和字符的大小相关

(5)文本对齐选项
默认靠左对齐

(6)文本行高属性
设置行之间的距离
相关文章:
【web前端HTML+CSS+JS】--- CSS学习笔记02
一、CSS(层叠样式表)介绍 1.优势 2.定义解释 如果有多个选择器共同作用的话,只有优先级最高那层样式决定最终的效果 二、无语义化标签 div和span:只起到描述的作用,不带任何样式 三、标签选择器 1.标签/元素选择器…...
linux 安装 ImageMagick 及 php imagick扩展
安装imagick扩展前必须安装ImageMagick 一、安装ImageMagick wget http://www.imagemagick.org/download/ImageMagick.tar.gz 上面如果报错(cannot verify download.imagemagick.org’s certificate)执行 sudo yum install -y ca-certificates tar zxv…...
秋招突击——7/5——复习{}——新作{跳跃游戏II、划分字母区间、数组中的第K个大的元素(模板题,重要)、前K个高频元素}
文章目录 引言正文贪心——45 跳跃游戏II个人实现参考实现 划分字母区间个人实现参考实现 数组中的第K个最大元素个人实现参考做法 前K个高频元素个人实现参考实现 总结 引言 今天就开始的蛮早的,现在是九点多,刚好开始做算法,今天有希望能够…...
【Linux】信号的处理
你很自由 充满了无限可能 这是很棒的事 我衷心祈祷你可以相信自己 无悔地燃烧自己的人生 -- 东野圭吾 《解忧杂货店》 信号的处理 1 信号的处理2 内核态 VS 用户态3 键盘输入数据的过程4 如何理解OS如何正常的运行5 如何进行信号捕捉信号处理的总结6 可重入函数volatile关…...
Python数据分析的数据导入和导出
在Python数据分析中,数据的导入和导出是非常关键的步骤。这些步骤通常涉及到将数据从外部文件(如CSV、Excel、数据库等)读入到Python程序中,以及将处理后的数据导出回外部文件或数据库。以下是一些常用的库和方法来实现这些操作。…...
【JAVA多线程】线程池概论
目录 1.概述 2.ThreadPoolExector 2.1.参数 2.2.新任务提交流程 2.3.拒绝策略 2.4.代码示例 1.概述 线程池的核心: 线程池的实现原理是个标准的生产消费者模型,调用方不停向线程池中写数据,线程池中的线程组不停从队列中取任务。 实现…...
java双亲委派机制
Java中的双亲委派机制(Parent Delegation Model)是一种类加载机制,它确保了类加载的安全性和一致性。该机制规定了类加载器在加载类时的顺序和方式,从而避免了重复加载和类冲突问题。 以下是一个简单的自定义类加载器的示例&#…...
记录第一次使用air热更新golang项目
下载 go install github.com/cosmtrek/airlatest 下载时提示: module declares its path as: github.com/air-verse/air but was required as: github.com/cosmtrek/air 此时,需要在go.mod中加上这么一句: replace github.com/cosmtrek/air &…...
Leetcode 3213. Construct String with Minimum Cost
Leetcode 3213. Construct String with Minimum Cost 1. 解题思路2. 代码实现 题目链接:3213. Construct String with Minimum Cost 1. 解题思路 这一题的话思路上还是比较直接的,就是一个trie树加一个动态规划,通过trie树来快速寻找每一个…...
python操作SQLite3数据库进行增删改查
python操作SQLite3数据库进行增删改查 1、创建SQLite3数据库 可以通过Navicat图形化软件来创建: 2、创建表 利用Navicat图形化软件来创建: 存储在 SQLite 数据库中的每个值(或是由数据库引擎所操作的值)都有一个以下的存储类型: NULL. 值是空值。 INTEGER. 值是有符…...
【电控笔记6.7】非最小相位系统
全通滤波器 [...
Day05-04-持续集成总结
Day05-04-持续集成总结 1. 持续集成2. 代码上线目标项目 1. 持续集成 git 基本使用, 拉取代码,上传代码,分支操作,tag标签 gitlab 用户 用户组 项目 , 备份,https,优化. jenkins 工具平台,运维核心, 自由风格工程,maven风格项目,流水线项目, 流水线(pipeline) mavenpom.xmlta…...
PyQt5动态热力图清空画布关闭ColorBar
PyQt5生成正弦波动态热力图清空画布关闭ColorBar 1、简介 生成随机正弦波,使用pyqtgraph展示出来,并且使用热力图展示不同频率的正弦波,使用不同的画布颜色显示热力图的变化。 使用python3.8 导入库: pip install matplotlib==3.7.5 pip install numpy==1.24.4 pip in…...
python爬虫入门(一)之HTTP请求和响应
一、爬虫的三个步骤(要学习的内容) 1、获取网页内容 (HTTP请求、Requests库) 2、解析网页内容 (HTML网页结构、Beautiful Soup库) 3、存储或分析数据 b站学习链接: 【【Python爬虫】爆肝两…...
华为OD机考题(HJ41 称砝码)
前言 经过前期的数据结构和算法学习,开始以OD机考题作为练习题,继续加强下熟练程度。有需要的可以同步练习下。 描述 现有n种砝码,重量互不相等,分别为 m1,m2,m3…mn ; 每种砝码对应的数量为 x1,x2,x3...xn 。现在要…...
Qt涂鸦板
Qt版本:Qt6 具体代码: 头文件 dialog.h #ifndef DIALOG_H #define DIALOG_H#include <QDialog>QT_BEGIN_NAMESPACE namespace Ui { class Dialog; } QT_END_NAMESPACEclass Dialog : public QDialog {Q_OBJECTpublic:Dialog(QWidget *parent n…...
C++_03
1、构造函数 1.1 什么是构造函数 类的构造函数是类的一种特殊的成员函数,它会在每次创建类的新对象时执行。 每次构造的是构造成员变量的初始化值,内存空间等。 构造函数的名称与类的名称是完全相同的,并且不会返回任何类型,也不…...
强化学习中的Double DQN、Dueling DQN和PER DQN算法详解及实战
1. 深度Q网络(DQN)回顾 DQN通过神经网络近似状态-动作值函数(Q函数),在训练过程中使用经验回放(Experience Replay)和固定目标网络(Fixed Target Network)来稳定训练过程…...
前端八股文 说一说样式优先级的规则是什么?
标准的回答 CSS样式的优先级应该分成四大类 第一类 !important: 😄无论引入方式是什么,选择器是什么,它的优先级都是最高的。 第二类 引入方式: 😄行内样式的优先级要高于嵌入和外链,嵌入和外链…...
洞察国内 AI 绘画行业的璀璨前景
在科技的浪潮中,AI 绘画如同一颗璀璨的新星,正在国内的艺术与技术领域绽放出耀眼的光芒。 近年来,国内 AI 绘画行业发展迅猛,展现出巨大的潜力。随着人工智能技术的不断突破,AI 绘画算法日益精进,能够生成…...
HTML 语义化
目录 HTML 语义化HTML5 新特性HTML 语义化的好处语义化标签的使用场景最佳实践 HTML 语义化 HTML5 新特性 标准答案: 语义化标签: <header>:页头<nav>:导航<main>:主要内容<article>&#x…...
Vue记事本应用实现教程
文章目录 1. 项目介绍2. 开发环境准备3. 设计应用界面4. 创建Vue实例和数据模型5. 实现记事本功能5.1 添加新记事项5.2 删除记事项5.3 清空所有记事 6. 添加样式7. 功能扩展:显示创建时间8. 功能扩展:记事项搜索9. 完整代码10. Vue知识点解析10.1 数据绑…...
【WiFi帧结构】
文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成:MAC头部frame bodyFCS,其中MAC是固定格式的,frame body是可变长度。 MAC头部有frame control,duration,address1,address2,addre…...
跨链模式:多链互操作架构与性能扩展方案
跨链模式:多链互操作架构与性能扩展方案 ——构建下一代区块链互联网的技术基石 一、跨链架构的核心范式演进 1. 分层协议栈:模块化解耦设计 现代跨链系统采用分层协议栈实现灵活扩展(H2Cross架构): 适配层…...
相机从app启动流程
一、流程框架图 二、具体流程分析 1、得到cameralist和对应的静态信息 目录如下: 重点代码分析: 启动相机前,先要通过getCameraIdList获取camera的个数以及id,然后可以通过getCameraCharacteristics获取对应id camera的capabilities(静态信息)进行一些openCamera前的…...
Linux云原生安全:零信任架构与机密计算
Linux云原生安全:零信任架构与机密计算 构建坚不可摧的云原生防御体系 引言:云原生安全的范式革命 随着云原生技术的普及,安全边界正在从传统的网络边界向工作负载内部转移。Gartner预测,到2025年,零信任架构将成为超…...
【碎碎念】宝可梦 Mesh GO : 基于MESH网络的口袋妖怪 宝可梦GO游戏自组网系统
目录 游戏说明《宝可梦 Mesh GO》 —— 局域宝可梦探索Pokmon GO 类游戏核心理念应用场景Mesh 特性 宝可梦玩法融合设计游戏构想要素1. 地图探索(基于物理空间 广播范围)2. 野生宝可梦生成与广播3. 对战系统4. 道具与通信5. 延伸玩法 安全性设计 技术选…...
DingDing机器人群消息推送
文章目录 1 新建机器人2 API文档说明3 代码编写 1 新建机器人 点击群设置 下滑到群管理的机器人,点击进入 添加机器人 选择自定义Webhook服务 点击添加 设置安全设置,详见说明文档 成功后,记录Webhook 2 API文档说明 点击设置说明 查看自…...
华为OD机考-机房布局
import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...
C++课设:简易日历程序(支持传统节假日 + 二十四节气 + 个人纪念日管理)
名人说:路漫漫其修远兮,吾将上下而求索。—— 屈原《离骚》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 专栏介绍:《编程项目实战》 目录 一、为什么要开发一个日历程序?1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...
