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

CSS Text（文本）学习笔记

news 来源：原创 2025/8/27 14:43:13

一、文本格式化

CSS 提供了多种文本格式化属性，用于控制文本的外观和布局。这些属性可以改变文本的颜色、对齐方式、修饰、大小写转换、缩进等。

1. 文本颜色

CSS 的 color 属性用于设置文本的颜色。颜色可以通过以下方式指定：

十六进制值：如 #FF0000 表示红色。
RGB 值：如 rgb(255, 0, 0) 表示红色。
颜色名称：如 red。

示例代码：

HTML复制

<!DOCTYPE html>
<html>
<head><style>body { color: red; }h1 { color: #00ff00; }h2 { color: rgb(255, 0, 0); }</style>
</head>
<body><h1>这是一个绿色的标题</h1><h2>这是一个红色的副标题</h2><p>这是一个红色的段落。</p>
</body>
</html>

预览

注意：根据 W3C 标准，如果定义了颜色属性，还必须定义背景色属性。

二、文本对齐方式

text-align 属性用于设置文本的水平对齐方式。它有以下几种值：

left：左对齐（默认值）。
right：右对齐。
center：居中对齐。
justify：两端对齐，使每行的左右两端都对齐。

示例代码：

HTML复制

<!DOCTYPE html>
<html>
<head><style>h1 { text-align: center; }p.date { text-align: right; }p.main { text-align: justify; }</style>
</head>
<body><h1>这是一个居中的标题</h1><p class="date">日期：2025-04-05</p><p class="main">这是一个两端对齐的段落，每一行的左右两端都对齐。</p>
</body>
</html>

预览

三、文本修饰

text-decoration 属性用于设置或删除文本的装饰。常见的值包括：

none：无装饰。
underline：下划线。
overline：上划线。
line-through：删除线。

示例代码：

HTML复制

<!DOCTYPE html>
<html>
<head><style>a { text-decoration: none; }h1 { text-decoration: overline; }h2 { text-decoration: line-through; }h3 { text-decoration: underline; }</style>
</head>
<body><a href="#">这是一个无下划线的链接</a><h1>这是一个有上划线的标题</h1><h2>这是一个有删除线的标题</h2><h3>这是一个有下划线的标题</h3>
</body>
</html>

预览

注意：不建议对非链接的文本使用下划线，因为这可能会让用户混淆。

四、文本转换

text-transform 属性用于控制文本的大小写。它有以下几种值：

none：默认值，不进行转换。
uppercase：将文本转换为大写。
lowercase：将文本转换为小写。
capitalize：将每个单词的首字母大写。

示例代码：

HTML复制

<!DOCTYPE html>
<html>
<head><style>p.uppercase { text-transform: uppercase; }p.lowercase { text-transform: lowercase; }p.capitalize { text-transform: capitalize; }</style>
</head>
<body><p class="uppercase">这是一个大写的段落。</p><p class="lowercase">这是一个小写的段落。</p><p class="capitalize">这是一个首字母大写的段落。</p>
</body>
</html>

预览

五、文本缩进

text-indent 属性用于设置文本的第一行缩进。它通常用于段落的首行缩进，以增强文本的可读性。

示例代码：

HTML复制

<!DOCTYPE html>
<html>
<head><style>p { text-indent: 50px; }</style>
</head>
<body><p>这是一个有首行缩进的段落。通过设置 text-indent 属性，可以让段落的第一行缩进一定的距离，从而增强文本的可读性。</p>
</body>
</html>

预览

六、其他文本属性

CSS 还提供了其他一些文本属性，用于进一步控制文本的格式和布局：

letter-spacing：设置字符之间的间距。
line-height：设置行高。
text-shadow：设置文本阴影。
vertical-align：设置元素的垂直对齐方式。
white-space：设置元素中空白的处理方式。
word-spacing：设置单词之间的间距。

示例代码：

HTML复制

<!DOCTYPE html>
<html>
<head><style>p.letterspacing { letter-spacing: 2px; }p.lineheight { line-height: 1.5; }p.textshadow { text-shadow: 2px 2px 4px #000000; }p.verticalalign { vertical-align: middle; }p.whitespace { white-space: nowrap; }p.wordspacing { word-spacing: 10px; }</style>
</head>
<body><p class="letterspacing">这是一个字符间距为 2px 的段落。</p><p class="lineheight">这是一个行高为 1.5 的段落。</p><p class="textshadow">这是一个有文本阴影的段落。</p><p class="verticalalign">这是一个垂直对齐的段落。</p><p class="whitespace">这是一个禁止换行的段落。</p><p class="wordspacing">这是一个单词间距为 10px 的段落。</p>
</body>
</html>

CSS Text（文本）学习笔记

一、文本格式化 CSS 提供了多种文本格式化属性，用于控制文本的外观和布局。这些属性可以改变文本的颜色、对齐方式、修饰、大小写转换、缩进等。 1. 文本颜色 CSS 的 color 属性用于设置文本的颜色。颜色可以通过以下方式指定： 十六进制值&#xff1a…...

编程日记 2025/8/27 14:43:13

MySQL篇（五）MySQL主从同步原理深度剖析

MySQL篇（五）MySQL主从同步原理深度剖析 MySQL篇（五）MySQL主从同步原理深度剖析一、引言二、MySQL主从同步基础概念主库（Master）从库（Slave）二进制日志（Binary Log&#x…...

编程日记 2025/8/22 20:09:10

AGI大模型（10）：prompt逆向-巧借prompt

1 提示词逆向明确逆向提示词⼯程概念我们可以给ChatGPT提供⼀个简洁的提示词，让它能够更准确地理解我们所讨论的“逆向提示词⼯程”是什么意思，并通过这个思考过程，帮它将相关知识集中起来，进⽽构建⼀个专业的知识领域提示词：请你举⼀个简单的例⼦，解释⼀下逆向pro…...

编程日记 2025/8/27 6:16:36

【问题记录】C语言一个程序bug定位记录？（定义指针数组忘记[]）

背景写了个小的程序，一直段错误。特此记录代码主要代码 int main_mytest(int argc, char *argv) {char *argv_my {"echo","/proc/cpuinfo",};main_mytest(sizeof(argv_my)/sizeof(char*), argv_my); }int main_mytest(int argc, char *a…...

编程日记 2025/8/26 15:53:22

Systemd构建自动化备份服务与外部存储管理

实训背景你是一家数据公司的系统管理员，需设计一套自动化备份系统，满足以下需求： 定期备份：每周日凌晨1点将 /data 目录压缩备份到 /backups。外部存储挂载：插入USB设备时自动挂载到 /mnt/usb，并触发增量…...

编程日记 2025/8/23 1:52:12

基于Python的微博数据采集

摘要本系统通过逆向工程微博移动端API接口，实现了对热门板块微博内容及用户评论的自动化采集。系统采用Requests+多线程架构，支持递归分页采集和动态请求头模拟，每小时可处理3000+条数据记录。关键技术特征包括：1）基于max_id的评论分页递归算法 2）HTML标签清洗正则表达…...

编程日记 2025/8/28 12:43:09

Linux | I.MX6ULL开发板固件烧录所需文件详述(9)

01 搞清楚手里的开发板是 EMMC 还是 NAND FLASH 。默认我的商业级是EMMC ，开关：10011010 终结者i.MX6ULL 开卡板分为工业级和商业级两种不同的开发板。商业级的核心板，它的存储是 EMMC 的，EMMC 的存储是类似于正方形的芯片，旁边是 NAND FLASH的一个封装，因为我们这里…...

编程日记 2025/8/25 11:36:37

单片机实现多线程的方法汇总

在单片机上实现“多线程”的方法有几种，下面按照从简单到复杂、从轻量到系统性来列出常见的方案： 🧵 一、伪多线程（最轻量） 方法：主循环状态机 / 定时器轮询主循环中轮流调用各个任务的处理函数&#x…...

编程日记 2025/8/26 11:35:51

探秘叁仟智盒设备：智慧城市的智能枢纽

在智慧城市建设的宏伟蓝图中，各类先进技术与设备层出不穷，叁仟智盒设备作为其中的关键一环，正悄然发挥着巨大作用，为城市的智能化转型注入强大动力。一、叁仟智盒设备概述叁仟智盒设备是杭州叁仟智慧城市科技有限公司旗下的重…...

编程日记 2025/8/28 1:12:53

（一）前端程序员转安卓开发分析和规划建议

最近因为公司前端业务萎缩，考虑内部转安卓开发岗，结合自己的经验分享几点建议。前端程序员转安卓开发是一个值得深入分析和规划的职业转型选择。以下是对这一转型的详细分析以及具体的规划建议，帮助大家更好地理解和准备这一转变。一、技能和…...

编程日记 2025/8/27 20:00:55

配置管理：夯实软件开发与运维根基

配置管理是对系统配置信息进行管理的活动，以下从定义、目的、主要活动、实施流程等方面为你详细介绍： 一、定义配置管理是通过技术或行政手段对软件产品及其开发过程和生命周期进行控制、规范的一系列措施。配置管理的目标是记录软件产品的演化过程&a…...

编程日记 2025/8/28 12:43:09

PyTorch构建自定义模型

PyTorch 提供了灵活的方式来构建自定义神经网络模型。下面我将详细介绍从基础到高级的自定义模型构建方法，包含实际代码示例和最佳实践。一、基础模型构建 1. 继承 nn.Module 基类所有自定义模型都应该继承 torch.nn.Module 类，并实现两个基本方法&…...

编程日记 2025/8/23 18:06:28

JVM虚拟机篇（一）深入理解JVM：组成部分、运行流程及程序计数器详解

JVM虚拟机篇（一）深入理解JVM：组成部分、运行流程及程序计数器详解 JVM虚拟机篇（一）深入理解JVM：组成部分、运行流程及程序计数器详解一、引言二、JVM的组成部分2.1 类加载子系统2.2 运行时数据区2.3 执行引…...

编程日记 2025/8/25 3:46:48

从零构建大语言模型全栈开发指南：第三部分：训练与优化技术-3.1.2Tokenization策略：BPE算法与词表设计

👉 点击关注不迷路 👉 点击关注不迷路 👉 点击关注不迷路文章大纲 3.1.2 Tokenization策略：BPE算法与词表设计1. BPE（Byte-Pair Encoding）算法原理与实现1.1 BPE核心思想1.2 BPE算法步骤2. 词表设计关键要素2.1 词表规模与模型性能2.2 特殊标记设计3. BPE变体与改进算…...

编程日记 2025/8/27 16:21:00

学透Spring Boot — 013. Spring Web-Flux 函数式风格的控制器

这是我的学透Spring Boot的第13篇文章，更多文章请移步我的专栏学透 Spring Boot_postnull咖啡的博客-CSDN博客目录传统风格的Spring MVC 函数式编程风格的Spring MVC 引入WebFlux依赖定义Handler类定义Router类 WebFlux不生效灵魂拷问 Spring Web MVC…...

编程日记 2025/8/27 7:09:38

L33.【LeetCode题解】快乐数(双指针思想)

目录 1.题目 2.分析 3.代码 4.提交结果 5.题外话证明:一定是循环的前置知识:鸽巢原理不严格证明 1.题目 https://leetcode.cn/problems/happy-number/ 编写一个算法来判断一个数 n 是不是快乐数。「快乐数」定义为： 对于一个正整数，每一次将…...

编程日记 2025/8/28 12:42:03

gltf unity-Unity中Gltf模型的使用与优化技巧

在现代游戏开发和3D应用领域，高质量模型是提升用户体验的关键因素之一。GLTF（GL Transmission Format）作为一款开放标准的3D模型交换格式，已经被越来越多的开发者所认可。Unity引擎，作为全球领先的3D游戏开发平台&…...

编程日记 2025/8/24 9:21:49

Oracle数据库指南

目录一、前言二、Oracle数据库基础入门篇 1. Oracle体系结构概述 2. 安装与配置 3. SQL语言入门三、PL/SQL编程与高级特性 1. PL/SQL基础语法 2. 触发器与任务调度 3. 高级特性四、日常维护与监控 1. 备份与恢复策略 2. 日志管理与故障排查 3. 自动化运维五…...

编程日记 2025/8/28 12:43:09

Qt -信号与槽

博客主页：【夜泉_ly】本文专栏：【暂无】欢迎点赞👍收藏⭐关注❤️ 目录前言引入connect调用链模板类型的connectQObject::connectImplQObjectPrivate::connectImpl qobject_p_p.hconnect作用总结ai对信号与槽的模拟实现前言面向对象&am…...

编程日记 2025/8/25 22:47:58

环境安装 ➜ ~ sw_vers ProductName: macOS ProductVersion: 15.3.2 ➜ ~ pip --version pip 24.3.1 from /opt/homebrew/lib/python3.11/site-packages/pip (python 3.11)安装ModelScope SDK pip install modelscope➜ ~ modelscope download --help Traceback (most r…...

编程日记 2025/8/26 19:35:44

Xshell Plus 6下载与安装

文章目录 Xshell Plus 6 简介（一）网络连接与协议支持（二）会话管理（三）安全特性（四）文件传输功能（因集成Xftp 6 ）（五）个性化与便捷功能…...

编程日记 2025/8/26 19:39:06

Kubernetes 集群搭建（一）：从环境准备到 Calico 网络插件部署

（一）虚拟环境准备名称ip备注m1192.168.101.131mastern1192.168.101.132workern2192.168.101.133worker （二）集群统一配置 2.1 关闭防火墙和selinux systemctl stop firewalld systemctl disable firewalld sed -i s/enforcin…...

编程日记 2025/8/28 12:43:09

【国产突围！致远电子ZXDoc如何打破Vector垄断，成为新能源车研发“神器”？】

摘要：在汽车“新四化”浪潮下，国产汽车总线工具链软件正迎来高光时刻！广州致远电子推出的ZXDoc以全栈自主化技术硬核国产芯片生态，斩获2024金辑奖“最佳技术实践应用奖”，成为新能源车企研发工程师的“效率倍增器”。本…...

编程日记 2025/8/28 12:43:09

3-Visual Studio 2022打包NET开发项目为安装包

引言本文将上一期博文>>>门店管理系统开发<<<开发的项目打包为Windows安装包一，安装扩展安装此扩展：installer Projects 二，创建安装程序项目创建项目右键解决方案-添加-新建项目选择setup Project项目填写项目名…...

编程日记 2025/8/23 5:12:15

Cookie、Session、Token、JWT的区别和使用场景

Cookie、Session和Token的区别存储位置数据容量安全性生命周期性能Cookie客户端（通常是浏览器）4KB、Cookie数量也有限制不安全、XSS（跨站脚本攻击）、CSRF（跨站请求伪造）可以设置过期时间，过期后…...

编程日记 2025/8/27 3:23:17

P1883 【模板】三分 | 函数

题目描述给定 n 个二次函数 f1(x),f2(x),…,fn(x)（均形如 ax2bxc），设 F(x)max{f1(x),f2(x),...,fn(x)}，求 F(x) 在区间 [0,1000] 上的最小值。输入格式输入第一行为正整数 T，表示有 T 组数据。每组…...

编程日记 2025/8/20 16:05:48

Ruoyi-vue plus 5.2.2 flowble设计流程点击开始流程图错误

网关设置条件或者是事件删除后出现，点击网关节点无法找到下面的事件节点。配置页面事件错误，点背景配置进去了事件，发现再次加载，或者删除的时候VUE页面无法加载。解决方式：查看XML文件，这个节点是否存在…...

编程日记 2025/8/17 22:31:41

MySQL学习笔记（三）——图形化界面工具DataGrip

目录 1. 图形化界面工具 2.下载 3. 安装 3.1 安装步骤 3.2 激活说明 4. 使用 4.1 汉化教程 4.2 使用 1. 图形化界面工具上述，我们已经讲解了通过 DDL 语句，如何操作数据库、操作表、操作表中的字段，而通过 DDL 语句执行在命令进行操…...

编程日记 2025/8/27 21:21:19

keil软件仿真

设置选择软件仿真。修改参数。获取参数找到自己的芯片信号。这里用的是F103ZET6 复制下来，并对其进行修改。接下来进入仿真即可...

编程日记 2025/8/17 22:34:40

每日一题（小白）模拟娱乐篇14

直接理解题意，一分钟扩散一次，那么2020分钟也就是需要循环2020次，然后加入扩散后的条件，每一个次扩散使方格子的总量1（只要有一个点扩散就无需看其他的点），若干次循环过后总数之和即所有黑色格子…...

编程日记 2025/8/23 1:52:13

（二）使用Android Studio开发基于Java+xml的安卓app之环境搭建

以下是使用Android Studio搭建基于Java和XML的Android应用开发环境的详细步骤： 一、系统要求操作系统：Windows 7/8/10/11（64位）内存：建议8GB及以上磁盘空间：至少5GB空闲（建议预留10GB以上&…...

编程日记 2025/8/28 12:42:04

STM32定时器通道1-4（CH1-CH4）的引脚映射关系

以下是 STM32定时器通道1-4（CH1-CH4）的引脚映射关系的详细说明，以常见型号为例。由于不同系列/型号差异较大，请务必结合具体芯片的参考手册确认。一、STM32F1系列（如STM32F103C8T6） 1. TIM1（高级定时器）通道默认引脚重映射引脚（部分/完全）备注CH1PA8无互补输出CH1…...

编程日记 2025/8/17 18:48:18

看爬山虎学本领软爬机器人来创新各种场景能适应

*本文只做阅读笔记分享* 一、灵感来源：向植物取经大家好！今天来聊一款超酷的软爬机器人，它的灵感来自会攀爬的植物——爬山虎。大家都知道，爬墙高手爬山虎能在各种复杂墙面轻松生长攀爬，可现有的攀爬机器人在复杂…...

编程日记 2025/8/23 2:06:58

Spring AI Alibaba示例项目深度解析：dashscope-audio子模块详解

Spring AI Alibaba示例项目深度解析：dashscope-audio子模块详解一、模块定位与核心价值 1.1 功能定位 • 音频处理核心组件：基于阿里云DashScope平台实现STT（语音识别）和TTS（文生语音）双模态能力 • 企业级解决方案：提供同步/异步/流式三种调用范式，适配不同业务场景…...

编程日记 2025/8/22 11:19:26

Linux 下日志系统搭建全攻略

目录一、引言二、日志系统基础日志级别日志输出格式三、创建日志所需函数认识可变参数编辑获取时间的函数小结四、创建日志一、引言在 Linux 环境中开发 C/C 程序时，日志系统是不可或缺的一部分。它不仅有助于调试程序、排查问题&#xff…...

编程日记 2025/8/28 1:38:12

前端布局难题：父元素padding导致子元素无法全屏？3种解决方案

大家好，我是一诺。今天要跟大家分享一个我在实际项目中经常用到的CSS技巧——如何让子元素突破父元素的padding限制，实现真正的全屏宽度效果。为什么会有这个需求？ 记得我刚入行的时候，接到一个需求：要在内容区插入…...

编程日记 2025/8/28 12:42:04

写.NET可以指定运行SUB MAIN吗?调用任意一个里面的类时,如何先执行某段初始化代码?

VB.NET 写.NET可以指定运行SUB MAIN吗?调用任意一个里面的类时,如何先执行某段初始化代码? 分享 1. 在 VB.NET 中指定运行 Sub Main 在 VB.NET 里，你能够指定 Sub Main 作为程序的入口点。下面为你介绍两种实现方式： 方式一：在项目属性…...

编程日记 2025/8/27 1:06:04

蓝桥杯单片机频率

long int Freq; unsigned int Timer_1000Ms; 加上 TMOD | 0x05; void Timer0Init(void) //0毫秒12.000MHz {AUXR & 0x7F; //定时器时钟12T模式TMOD & 0xF0; //设置定时器模式TMOD | 0x05;TL0 0x00; //设置定时初值TH0 0x00; //设置定时初值TF0 0; //清除TF0标…...

编程日记 2025/8/25 12:17:08

word导出PDF老是目录格式变化的问题

这里是写给和我一样的笨蛋的经验帖，适合试了很多网上的经验，结果都用不成的傻瓜蛋，先说好，我是傻瓜蛋，我不是在攻击谁，我们只是客观的，缺根弦罢了。这些帖子里讲的最多的应该是：“…...

编程日记 2025/8/22 18:18:58

P1577 切绳子(二分）

题目描述有 N 条绳子，它们的长度分别为 Li。如果从它们中切割出 K 条长度相同的绳子，这 K 条绳子每条最长能有多长？答案保留到小数点后 2 位(直接舍掉 2 位后的小数)。输入格式第一行两个整数 N 和 K，接下来 N 行&#xf…...

编程日记 2025/8/25 9:01:40

高级：分布式系统面试题精讲

一、引言分布式系统在现代软件开发中占据重要地位，其设计和实现需要考虑多个关键因素。面试官通过相关问题，考察候选人对分布式系统核心概念的理解、实际应用能力以及在复杂场景下的问题解决能力。本文将深入分析分布式系统的CAP定理、一致性协议、分布…...

编程日记 2025/8/23 16:07:52

【速写】SFT案例实操（以Qwen2.5-instruct-0.5B）

参考资料： https://openbayes.com/console/bbruceyuan/containers/OPg9Oo99ET6https://www.bilibili.com/video/BV1NM1tY3Eu5 LoRA微调案例首先还是要安装： !pip install -q accelerate peft bitsandbytes transformers sentencepiece !pip install…...

编程日记 2025/8/24 4:16:51

springboot457-库存管理系统(源码+数据库+纯前后端分离+部署讲解等)

💕💕作者： 爱笑学姐 💕💕个人简介：十年Java，Python美女程序员一枚，精通计算机专业前后端各类框架。 💕💕各类成品Java毕设。javaweb，ssm&#xf…...

编程日记 2025/8/26 20:05:16

Node.js中间件的分类

目录 Node.js 中间件的分类与详细介绍 1. 目录结构 2. Express 中间件的主要分类 3. 代码实现 1. 应用级中间件（作用于整个应用） 示例：日志记录中间件 2. 路由级中间件（仅作用于特定路由） 示例：身份…...

编程日记 2025/8/25 15:02:53

棒球规则快速入门·棒球1号位

棒球规则快速入门： 得分方式进攻方击球后，依次跑过一、二、三垒并返回本垒得1分。若击球直接飞出外场围栏（全垒打），击球员和已上垒的跑垒员均可得分。比赛结构共9局，每局分上下半场，双方各…...

编程日记 2025/8/25 17:40:25

【深度学习】通过colab将本地的数据集上传到drive

本地数据集上传到colab很慢，而且断开后就没了，因此通过colab将本地的数据集上传到drive，即使断开连接，第二次连接后挂载drive后即可直接使用数据集。步骤一、将本地数据集上传到colab的临时文件夹中，由于将文件夹上传…...

编程日记 2025/8/25 19:44:59

MYSQL 存储引擎和日志

存储引擎 InnoDB 支持行级别的锁粒度，MyISAM 不支持，只支持表级别的锁粒度。MyISAM 不提供事务支持。InnoDB 提供事务支持，实现了 SQL 标准定义了四个隔离级别。MyISAM 不支持外键，而 InnoDB 支持。MyISAM 不支持 MVCC&#xff0c…...

编程日记 2025/8/25 6:52:23

【2022】【论文笔记】太赫兹量子阱——

前言类型太赫兹 + 量子阱太赫兹 + 量子阱太赫兹+量子阱期刊红外与毫米波学报红外与毫米波学报红外与毫米波学报作者张真真 ,...

编程日记 2025/8/23 23:43:14

【NLP 面经 7、常见transformer面试题】

目录 1. 为何使用多头注意力机制？ 2. Q和K使用不同权重矩阵的原因 3. 选择点乘而非加法的原因 4. Attention进行scaled的原因 5. 对padding做mask操作 6. 多头注意力降维原因 7. Transformer Encoder模块简介 8. 乘以embedding size的开方的意义 9. 位置编码 10. 其…...

编程日记 2025/8/17 22:31:31

在js中数组相关用法讲解

数组 uniqueArray 简单数组去重 /*** 简单数组去重* param arr* returns*/ export const uniqueArray <T>(arr: T[]) > [...new Set(arr)];const arr1 [1,1,1,1 2, 3];uniqueArray(arr); // [1,2,3]uniqueArrayByKey 根据 key 数组去重 /*** 根据key数组去重* …...

编程日记 2025/8/25 6:51:36

一、文本格式化

1. 文本颜色

二、文本对齐方式

三、文本修饰

四、文本转换

五、文本缩进

六、其他文本属性

相关文章：