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

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.思路 通过对字符串的反转,转为数组开始遍历&#xff0c…...

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)

目录 动态规划怎么学&#xff1f; 1. 题目解析 2. 算法原理 1. 状态表示 2. 状态转移方程 3. 初始化 4. 填表顺序 5. 返回值 3. 代码编写 写在最后&#xff1a; 动态规划怎么学&#xff1f; 学习一个算法没有捷径&#xff0c;更何况是学习动态规划&#xff0c; 跟我…...

请解释一下CSS中的rem和em单位有什么不同,分别如何使用?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ CSS中的rem和em单位的区别和使用⭐ em单位使用示例&#xff1a; ⭐ rem 单位使用示例&#xff1a; ⭐ 区别和适用场景⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何…...

docker 导入镜像 REPOSITORY和tag都是null怎么解决

当使用 docker import 命令导入镜像时&#xff0c;REPOSITORY 和 TAG 字段可能会为 null&#xff0c;因为 docker import 命令不会保留镜像的元数据&#xff0c;例如镜像名称和标签。这是因为 docker import 命令主要用于将本地文件系统中的文件或目录导入为 Docker 镜像&#…...

c语言操作符

目录 运算符 移位操作符 左移操作符 右移操作符 位操作符 按位与& 按位或| 按位异或^ 异或交换数字 计算二进制中1的个数 关系操作符 逻辑操作符 条件操作符 逗号表达式 下标引用、函数调用和结构成员 隐式类型转换 整形提升实例&#xff1a; 算术转换 操作…...

python爬虫5:requests库-案例3

python爬虫5&#xff1a;requests库-案例3 前言 ​ python实现网络爬虫非常简单&#xff0c;只需要掌握一定的基础知识和一定的库使用技巧即可。本系列目标旨在梳理相关知识点&#xff0c;方便以后复习。 申明 ​ 本系列所涉及的代码仅用于个人研究与讨论&#xff0c;并不会对网…...

uni-app:实现点击按钮,进行数据累加展示(解决数据过多,导致出错)

效果 代码 核心代码 一、标签显示 <!-- 加载更多 --> <view class"load_more" v-if"info.length > pageNum * pageSize" tap"loadMore">加载更多 </view> v-if"info.length > pageNum * pageSize"&#xf…...

群晖6.X便捷的安装cpolar内网穿透

群晖6.X便捷的安装cpolar内网穿透 文章目录 群晖6.X便捷的安装cpolar内网穿透前言1. 下载cpolar的群晖套件1.1 打开群晖套件中心1.2 选择“手动安装”1.3 选择下载cpolar套件位置 2. 打开cpolar的Web-UI界面3. 注册会员 前言 随着硬件设备和软件技术的发展&#xff0c;以及数据…...

Vim 调用外部命令学习笔记

Vim 外部命令集成完全指南 文章目录 Vim 外部命令集成完全指南核心概念理解命令语法解析语法对比 常用外部命令详解文本排序与去重文本筛选与搜索高级 grep 搜索技巧文本替换与编辑字符处理高级文本处理编程语言处理其他实用命令 范围操作示例指定行范围处理复合命令示例 实用技…...

大数据学习栈记——Neo4j的安装与使用

本文介绍图数据库Neofj的安装与使用&#xff0c;操作系统&#xff1a;Ubuntu24.04&#xff0c;Neofj版本&#xff1a;2025.04.0。 Apt安装 Neofj可以进行官网安装&#xff1a;Neo4j Deployment Center - Graph Database & Analytics 我这里安装是添加软件源的方法 最新版…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(二)

HoST框架核心实现方法详解 - 论文深度解读(第二部分) 《Learning Humanoid Standing-up Control across Diverse Postures》 系列文章: 论文深度解读 + 算法与代码分析(二) 作者机构: 上海AI Lab, 上海交通大学, 香港大学, 浙江大学, 香港中文大学 论文主题: 人形机器人…...

React Native 开发环境搭建(全平台详解)

React Native 开发环境搭建&#xff08;全平台详解&#xff09; 在开始使用 React Native 开发移动应用之前&#xff0c;正确设置开发环境是至关重要的一步。本文将为你提供一份全面的指南&#xff0c;涵盖 macOS 和 Windows 平台的配置步骤&#xff0c;如何在 Android 和 iOS…...

从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

多模态大语言模型arxiv论文略读(108)

CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文标题&#xff1a;CROME: Cross-Modal Adapters for Efficient Multimodal LLM ➡️ 论文作者&#xff1a;Sayna Ebrahimi, Sercan O. Arik, Tejas Nama, Tomas Pfister ➡️ 研究机构: Google Cloud AI Re…...

HashMap中的put方法执行流程(流程图)

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...

算法岗面试经验分享-大模型篇

文章目录 A 基础语言模型A.1 TransformerA.2 Bert B 大语言模型结构B.1 GPTB.2 LLamaB.3 ChatGLMB.4 Qwen C 大语言模型微调C.1 Fine-tuningC.2 Adapter-tuningC.3 Prefix-tuningC.4 P-tuningC.5 LoRA A 基础语言模型 A.1 Transformer &#xff08;1&#xff09;资源 论文&a…...

STM32---外部32.768K晶振(LSE)无法起振问题

晶振是否起振主要就检查两个1、晶振与MCU是否兼容&#xff1b;2、晶振的负载电容是否匹配 目录 一、判断晶振与MCU是否兼容 二、判断负载电容是否匹配 1. 晶振负载电容&#xff08;CL&#xff09;与匹配电容&#xff08;CL1、CL2&#xff09;的关系 2. 如何选择 CL1 和 CL…...

【学习笔记】erase 删除顺序迭代器后迭代器失效的解决方案

目录 使用 erase 返回值继续迭代使用索引进行遍历 我们知道类似 vector 的顺序迭代器被删除后&#xff0c;迭代器会失效&#xff0c;因为顺序迭代器在内存中是连续存储的&#xff0c;元素删除后&#xff0c;后续元素会前移。 但一些场景中&#xff0c;我们又需要在执行删除操作…...