HTML详解连载(5)
HTML详解连载(5)
- 专栏链接 [link](http://t.csdn.cn/xF0H3)
- 下面进行专栏介绍
- 开始喽
- 行高:设置多行文本的间距
- 属性名
- 属性值
- 行高的测量方法
- 行高-垂直居中
- 技巧
- 字体族
- 属性名
- 属性值
- 示例
- 扩展
- font 复合属性
- 使用场景
- 复合属性
- 示例
- 注意
- 文本缩进
- 属性名
- 属性值
- 文字对齐方式
- 作用:控制内容水平对齐方式
- 属性名:text-aline
- 属性值
- 水平对齐方式-图片
- 文本修饰线
- 属性名
- 属性值
- color文字颜色
- 属性名
- 属性值
- 颜色表示方式
- 颜色关键字-颜色英文单词
- 十六进制表示法-#RRGGBB
- 提示
- 调试工具-谷歌浏览器
- 作用
- 打开调试工具
- 调试工具细节
- 复合选择器
- 定义
- 作用
- 后代选择器
- 写法
- 子代选择器
- 选择器写法
- 并集选择器
- 写法
- 交集选择器
- 写法
- 注意
- 伪类选择器
- 鼠标悬停状态
- 选择器
- 强调
- 伪类-超链接
- 状态
- 注意
专栏链接 link
下面进行专栏介绍
本专栏是自己学前端的征程,纯手敲的代码,自己跟着黑马课程学习的,并加入一些自己的理解,对代码和笔记
进行适当修改。希望能对大家能有所帮助,同时也是请大家对我进行监督,对我写的代码进行建议,互相学习。
开始喽

行高:设置多行文本的间距
属性名
line-height
属性值
数字+px
数字(当前标签font-size属性值的倍数)
行高的测量方法
从一行文字的最顶端(最底端)量到下一行文字的最顶端(最底端)
行高-垂直居中
技巧
行高属性值等于盒子高度属性值
字体族
属性名
font-family
属性值
字体名
示例
font-family:楷体;
扩展
font-family属性值可以写多个字体名,各个字体间用逗号隔开,执行顺序是从左到右依次查找
font-family属性最后设置一个字体族名,网页开发建议使用无衬线字体
font 复合属性
使用场景
设置网页文字公共样式
复合属性
属性的简写方式,一个属性对应多个值的写法,各个属性值之间用空格隔开
font:是否倾斜 是否加粗 字号/行高 字体(必须按顺序书写)
示例
div {font:italic 700 30px/2 楷体;
}
注意
字号和字体值必须书写,否则font属性不生效
文本缩进
属性名
text-index
属性值
数字+px
数字+em(1em=当前标签的字号大小)
文字对齐方式
作用:控制内容水平对齐方式
属性名:text-aline
属性值
left-左对齐(默认)
center-居中
right-右对齐
水平对齐方式-图片
text-aline本质是控制内容的对齐方式,属性要设置给内容的父级
文本修饰线
属性名
text-decoration
属性值
| 属性 | 属性值 |
|---|---|
| none | 无 |
| underline | 下划线 |
| line-through | 删除线 |
| overline | 上划线 |
color文字颜色
属性名
color
属性值
颜色表示方式
颜色关键字-颜色英文单词
rgb表示法-rgb(r,g,b)-rgb三原色 取值0-255
rgba表示法-rgba(r,g,b,a)a表示透明度 取值0-1
十六进制表示法-#RRGGBB
提示
只要属性值为颜色,都可以使用上述四种颜色表示方式,例如:背景色。
调试工具-谷歌浏览器
作用
检查、调式代码;帮助程序员发现代码问题、解决问题
打开调试工具
F12

调试工具细节
1.如果是错误的属性有黄色叹号
2.CSS属性的前面有多选框,如果勾选:属性生效
复合选择器
定义
由两个或多个基础选择器,通过不同的方式组合而成
作用
更准确、更高效的选择目标元素(标签)
后代选择器
选中某元素的后代元素
写法
父选择器 子选择器{CSS属性},父子选择器之间用空格隔开。
子代选择器
选中某元素的子代元素(最近的子级)
选择器写法
父选择器>子选择器{CSS属性},父子选择器之间用>隔开
并集选择器
选中多组标签设置相同的样式
写法
选择器1,选择器2,…选择器N{CSS属性},选择器之间用,隔开
交集选择器
选中同时满足多个条件的元素
写法
选择器1选择器2{CSS属性},选择器之间连携,没有任何符号
注意
如果交集选择器中由标签选择器,标签选择器必须书写在最前面

伪类选择器
伪类表示元素状态,选中元素的某个状态设置样式
鼠标悬停状态
选择器
hover{CSS属性}
强调
任何标签都可以设置鼠标悬停状态
伪类-超链接
状态
:link 访问前
:visited访问后
:hover 鼠标悬停
:action 点击时(激活)
注意
如果要给超链接设置以上四个状态,应按照LVHA的顺序书写
相关文章:
HTML详解连载(5)
HTML详解连载(5) 专栏链接 [link](http://t.csdn.cn/xF0H3)下面进行专栏介绍 开始喽行高:设置多行文本的间距属性名属性值行高的测量方法 行高-垂直居中技巧 字体族属性名属性值示例扩展 font 复合属性使用场景复合属性示例注意 文本缩进属性…...
【CI/CD】基于 Jenkins+Docker+Git 的简单 CI 流程实践(上)
基于 JenkinsDockerGit 的简单 CI 流程实践(上) 在如今的互联网时代,随着软件开发复杂度的不断提高,软件开发和发布管理也越来越重要。目前已经形成一套标准的流程,最重要的组成部分就是 持续集成 及 持续交付、部署。…...
基于FPGA的PID算法理论详解(1)
基于FPGA的PID算法理论详解(1) 1 概述 比例-积分-微分(PID)控制是业内最常见的控制算法,在工业控制领域有很高的接受度。PID控制器的广泛应用得益于其在多种操作条件下稳定的性能,以及易操作的特性。工程师可以用简单直观的方式实现PID控制。PID控制有三个基本要件:比…...
Neo4j之REMOVE基础
在 Neo4j 中,REMOVE 语句用于从节点中删除特定的属性。这在你需要更新或者清除节点属性时非常有用。 1】删除单个属性: MATCH (p:Person {name: Alice}) REMOVE p.age;这个查询会找到具有 "Person" 标签且属性 "name" 为 "Al…...
SpingBoot-Vue前后端——实现CRUD
目录 一、实例需求 ⚽ 二、代码实现 🏌 数据库 👀 后端实现 📫 前端实现 🌱 三、源码下载 👋 一、实例需求 ⚽ 实现一个简单的CRUD,包含前后端交互。 二、代码实现 🏌 数…...
LeetCode150道面试经典题--最后一个单词的长度(简单)
1.题目 给你一个字符串 s,由若干单词组成,单词前后用一些空格字符隔开。返回字符串中 最后一个 单词的长度。 单词 是指仅由字母组成、不包含任何空格字符的最大子字符串。 2.示例 3.思路 通过对字符串的反转,转为数组开始遍历,…...
web-xss-dvwa
目录 xss(reflected) low medium high xss(store) low medium high xss(dom) low medium high xss(reflected) low 没有什么过滤,直接用最普通的标签就可以了 http://127.0.0.1/DVWA-master/vulnerabili…...
Exploiting Proximity-Aware Tasks for Embodied Social Navigation 论文阅读
论文信息 题目:Exploiting Proximity-Aware Tasks for Embodied Social Navigation 作者:Enrico Cancelli, Tommaso Campari 来源:arXiv 时间:2023 Abstract 学习如何在封闭且空间受限的室内环境中在人类之间导航&a…...
【华为OD机试】统计射击比赛成绩【2023 B卷|100分】
【华为OD机试】-真题 !!点这里!! 【华为OD机试】真题考点分类 !!点这里 !! 题目描述 给定一个射击比赛成绩单,包含多个选手若干次射击的成绩分数, 请对每个选手按其最高3个分数之和进行降序排名,输出降序排名后的选手ID序列。 条件如下: 1、一个选手可以有多个射击成…...
git push之后的撤销操作
用的是idea。 pull了代码之后,想撤销pull: push代码到个人远程仓库之后,又从主仓pull了一下。 点击其中一条git记录,然后右键单击“reset current branch ti here”,然后再点击hard push了代码到个人仓库,想撤销&…...
CSS 的选择器有哪些种类?分别如何使用?
聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 元素选择器(Element Selector)⭐ 类选择器(Class Selector)⭐ ID 选择器(ID Selector)⭐ 后代选择器(Descendant Selector)⭐ 子元素选择器&a…...
【MongoDB】索引
目录 一、概述 二、索引的类型 1、单字段索引 2、复合索引 3、其他索引 三、索引的管理 1、索引的创建 2、索引的查看 3、索引的删除 四、索引的使用 1、执行计划 2、涵盖的查询 一、概述 索引支持在MongoDB中高效地执行查询。如果没有索引,MongoDB必须…...
机器人CPP编程基础-02变量Variables
机器人CPP编程基础-01第一个程序Hello World 基础代码都可以借助人工智能工具进行学习。 C #include<iostream>using namespace std;main() {//Declaring an integer type variable A, allocates 4 bytes of memory.int A4;cout<<A <<endl;//Prints the a…...
【学会动态规划】买卖股票的最佳时机 IV(18)
目录 动态规划怎么学? 1. 题目解析 2. 算法原理 1. 状态表示 2. 状态转移方程 3. 初始化 4. 填表顺序 5. 返回值 3. 代码编写 写在最后: 动态规划怎么学? 学习一个算法没有捷径,更何况是学习动态规划, 跟我…...
请解释一下CSS中的rem和em单位有什么不同,分别如何使用?
聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ CSS中的rem和em单位的区别和使用⭐ em单位使用示例: ⭐ rem 单位使用示例: ⭐ 区别和适用场景⭐ 写在最后 ⭐ 专栏简介 前端入门之旅:探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何…...
docker 导入镜像 REPOSITORY和tag都是null怎么解决
当使用 docker import 命令导入镜像时,REPOSITORY 和 TAG 字段可能会为 null,因为 docker import 命令不会保留镜像的元数据,例如镜像名称和标签。这是因为 docker import 命令主要用于将本地文件系统中的文件或目录导入为 Docker 镜像&#…...
c语言操作符
目录 运算符 移位操作符 左移操作符 右移操作符 位操作符 按位与& 按位或| 按位异或^ 异或交换数字 计算二进制中1的个数 关系操作符 逻辑操作符 条件操作符 逗号表达式 下标引用、函数调用和结构成员 隐式类型转换 整形提升实例: 算术转换 操作…...
python爬虫5:requests库-案例3
python爬虫5:requests库-案例3 前言 python实现网络爬虫非常简单,只需要掌握一定的基础知识和一定的库使用技巧即可。本系列目标旨在梳理相关知识点,方便以后复习。 申明 本系列所涉及的代码仅用于个人研究与讨论,并不会对网…...
uni-app:实现点击按钮,进行数据累加展示(解决数据过多,导致出错)
效果 代码 核心代码 一、标签显示 <!-- 加载更多 --> <view class"load_more" v-if"info.length > pageNum * pageSize" tap"loadMore">加载更多 </view> v-if"info.length > pageNum * pageSize"…...
群晖6.X便捷的安装cpolar内网穿透
群晖6.X便捷的安装cpolar内网穿透 文章目录 群晖6.X便捷的安装cpolar内网穿透前言1. 下载cpolar的群晖套件1.1 打开群晖套件中心1.2 选择“手动安装”1.3 选择下载cpolar套件位置 2. 打开cpolar的Web-UI界面3. 注册会员 前言 随着硬件设备和软件技术的发展,以及数据…...
Java如何权衡是使用无序的数组还是有序的数组
在 Java 中,选择有序数组还是无序数组取决于具体场景的性能需求与操作特点。以下是关键权衡因素及决策指南: ⚖️ 核心权衡维度 维度有序数组无序数组查询性能二分查找 O(log n) ✅线性扫描 O(n) ❌插入/删除需移位维护顺序 O(n) ❌直接操作尾部 O(1) ✅内存开销与无序数组相…...
基于Docker Compose部署Java微服务项目
一. 创建根项目 根项目(父项目)主要用于依赖管理 一些需要注意的点: 打包方式需要为 pom<modules>里需要注册子模块不要引入maven的打包插件,否则打包时会出问题 <?xml version"1.0" encoding"UTF-8…...
基于matlab策略迭代和值迭代法的动态规划
经典的基于策略迭代和值迭代法的动态规划matlab代码,实现机器人的最优运输 Dynamic-Programming-master/Environment.pdf , 104724 Dynamic-Programming-master/README.md , 506 Dynamic-Programming-master/generalizedPolicyIteration.m , 1970 Dynamic-Programm…...
推荐 github 项目:GeminiImageApp(图片生成方向,可以做一定的素材)
推荐 github 项目:GeminiImageApp(图片生成方向,可以做一定的素材) 这个项目能干嘛? 使用 gemini 2.0 的 api 和 google 其他的 api 来做衍生处理 简化和优化了文生图和图生图的行为(我的最主要) 并且有一些目标检测和切割(我用不到) 视频和 imagefx 因为没 a…...
Java求职者面试指南:计算机基础与源码原理深度解析
Java求职者面试指南:计算机基础与源码原理深度解析 第一轮提问:基础概念问题 1. 请解释什么是进程和线程的区别? 面试官:进程是程序的一次执行过程,是系统进行资源分配和调度的基本单位;而线程是进程中的…...
腾讯云V3签名
想要接入腾讯云的Api,必然先按其文档计算出所要求的签名。 之前也调用过腾讯云的接口,但总是卡在签名这一步,最后放弃选择SDK,这次终于自己代码实现。 可能腾讯云翻新了接口文档,现在阅读起来,清晰了很多&…...
第7篇:中间件全链路监控与 SQL 性能分析实践
7.1 章节导读 在构建数据库中间件的过程中,可观测性 和 性能分析 是保障系统稳定性与可维护性的核心能力。 特别是在复杂分布式场景中,必须做到: 🔍 追踪每一条 SQL 的生命周期(从入口到数据库执行)&#…...
VisualXML全新升级 | 新增数据库编辑功能
VisualXML是一个功能强大的网络总线设计工具,专注于简化汽车电子系统中复杂的网络数据设计操作。它支持多种主流总线网络格式的数据编辑(如DBC、LDF、ARXML、HEX等),并能够基于Excel表格的方式生成和转换多种数据库文件。由此&…...
ubuntu22.04 安装docker 和docker-compose
首先你要确保没有docker环境或者使用命令删掉docker sudo apt-get remove docker docker-engine docker.io containerd runc安装docker 更新软件环境 sudo apt update sudo apt upgrade下载docker依赖和GPG 密钥 # 依赖 apt-get install ca-certificates curl gnupg lsb-rel…...
Neko虚拟浏览器远程协作方案:Docker+内网穿透技术部署实践
前言:本文将向开发者介绍一款创新性协作工具——Neko虚拟浏览器。在数字化协作场景中,跨地域的团队常需面对实时共享屏幕、协同编辑文档等需求。通过本指南,你将掌握在Ubuntu系统中使用容器化技术部署该工具的具体方案,并结合内网…...
