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

第3章：文本样式 --[CSS零基础入门]

news 2026/2/7 21:57:55

CSS（层叠样式表）允许你以多种方式定制文本的外观。以下是一些常用的文本和字体相关的CSS属性：

1.字体

字体系列

当然，下面是两个使用不同字体系列的CSS示例。每个示例都展示了如何指定一个字体系列，并提供备用字体以确保在用户的系统中找不到首选字体时仍有合适的字体可用。

示例1：使用无衬线字体（Sans-serif）
body {font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}

在这个例子中，我们首先尝试使用"Helvetica Neue"，这是一种现代且流行的无衬线字体。如果用户的系统上没有安装这种字体，则会依次尝试Helvetica、Arial和"Lucida Grande"。最后，如果所有这些字体都不可用，浏览器将回退到任何可用的无衬线字体。

示例2：使用衬线字体（Serif）
p {font-family: "Times New Roman", Times, serif;
}

这里，我们为段落元素指定了一个衬线字体系列。首选"Times New Roman"，它是一种经典的印刷字体。如果这个字体不可用，浏览器会尝试使用Times。作为最后的选择，任何可用的衬线字体都会被用来显示文本。

这两种字体系列适用于不同的设计需求。无衬线字体通常看起来更现代和简洁，适合用于标题或需要清晰度的地方；而衬线字体则常常给人一种传统和正式的感觉，非常适合用于正文或长篇阅读材料。

如果你想要应用这些样式到你的HTML文档中，只需将上述CSS代码添加到你的样式表或者HTML文档的<style>标签内即可。

字体大小

当然，下面是两个关于如何使用CSS设置字体大小的示例。这两个示例展示了不同的方法来定义字体大小，包括固定大小和相对大小。

示例1：使用固定字体大小（像素）
h1 {font-size: 24px; /* 使用像素指定字体大小 */
}

在这个例子中，h1元素的字体大小被明确地设定为24像素。这种方法适合需要精确控制字体大小的情况，比如设计固定的布局时。然而，它可能不那么灵活，因为用户无法轻易调整文本大小以适应他们的阅读偏好。

示例2：使用相对字体大小（em或rem）
body {font-size: 16px; /* 基础字体大小 */
}p {font-size: 1.25em; /* 相对于父元素的字体大小 */
}.button {font-size: 1.5rem; /* 相对于根元素（html）的字体大小 */
}

  • em 是相对于其父元素的字体大小。在上面的例子中，p标签内的文本将基于body的字体大小（16px），所以1.25em等于20px（16 * 1.25 = 20）。

  • rem 是相对于根元素（即<html>元素）的字体大小。这使得整个页面的字体大小更加一致，并且更容易维护。例如，.button类中的文本大小是根据<html>元素的默认字体大小计算出来的，如果未特别设置，则通常为16px，因此1.5rem等于24px（16 * 1.5 = 24）。

使用相对单位如em或rem的好处在于它们可以更好地支持响应式设计，使文本能够根据用户的设置或屏幕尺寸进行缩放，从而提高可访问性。

你可以选择最适合你项目需求的方法来设置字体大小。

字体粗细

当然，下面是两个关于如何使用CSS设置字体粗细（font-weight）的示例。这两个示例展示了不同的方法来定义字体的粗细程度。

示例1：使用关键字（如 normal 和 bold）
p.normal-text {font-weight: normal; /* 正常字体粗细 */
}h1.bold-text {font-weight: bold; /* 加粗字体 */
}

在这个例子中，我们使用了normal和bold关键字来设置段落和标题文本的粗细。normal是默认的字体粗细，而bold则会使文本加粗显示。这是最简单且常用的方法来调整字体粗细。

示例2：使用数值（从100到900）
.very-thin-text {font-weight: 100

相关文章：

第3章：文本样式 --[CSS零基础入门]

CSS（层叠样式表）允许你以多种方式定制文本的外观。以下是一些常用的文本和字体相关的CSS属性： 1.字体 字体系列 当然，下面是两个使用不同字体系列的CSS示例。每个示例都展示了如何指定一个字体系列，并提供备用字体以确保在用户的系统中找不到首选字体时仍有合适的字体可…...

编程日记 2024/12/11 4:09:25

mysql 架构详解

MySQL的架构可以自顶向下分为多个层次&#xff0c;每个层次都有其特定的功能和组件。以下是对MySQL架构的详细解析&#xff1a; 一、整体架构概述 MySQL的整体架构包括MySQL Connectors&#xff08;连接器&#xff09;、MySQL Shell、连接层、服务层、存储引擎层和文件系统层…...

编程日记 2024/12/11 4:08:24

无代码探索AI大模型：腾讯云函数计算的卓越实践

在数字化转型的浪潮中&#xff0c;人工智能&#xff08;AI&#xff09;技术已经成为企业提升竞争力的关键。然而&#xff0c;对于许多业务人员来说&#xff0c;技术门槛高、开发周期长等问题限制了他们快速探索和应用AI大模型的能力。同时&#xff0c;对于缺乏GPU资源的开发者来…...

编程日记 2024/12/11 4:07:21

解决Ubuntu在VMware关机时，老是一个光标在那里闪动几分钟，才能关机的问题

把强制关机的等待时间缩短即可。 编辑 /etc/systemd/system.conf 文件 sudo gedit /etc/systemd/system.conf把 #DefaultTimeoutStartSec90s修改为 #DefaultTimeoutStartSec10s改完之后重载一下&#xff1a; sudo systemctl daemon-reload然后关机再试一下&#xff0c;这样…...

编程日记 2024/12/11 4:05:18

word poi-tl 图表功能增强，插入图表折线图、柱状图、饼状图

目录 问题解决问题poi-tl介绍 功能实现引入依赖功能介绍 功能实例饼图模版代码效果图 雷达图&#xff08;模版同饼图&#xff09;代码效果图 柱状图&#xff08;模版同饼图&#xff09;代码效果图 附加CustomCharts 工具类CustomChartSingleSeriesRenderData 数据对象CustomCha…...

编程日记 2024/12/11 4:03:16

常见网络钓鱼类型

网络钓鱼是一种网络攻击&#xff0c;是指具有恶意动机的攻击者伪装欺骗人们并收集用户名或密码等敏感信息的一系列行为。由于网络钓鱼涉及心理操纵并依赖于人为失误(而不是硬件或软件漏洞)&#xff0c;因此被认定为是一种社会工程攻击。 1. 普通网络钓鱼&#xff08;群攻&…...

编程日记 2024/12/11 4:00:13

数字图像处理考研考点（持续更新）

一、数字图像基本概念 1、人眼视觉特性 &#xff08;1&#xff09;眼睛上有两类光感受器&#xff1a;锥状体和杆状体 锥状体(锥细胞)&#xff1a;约 700 万个&#xff0c;对颜色高度敏感&#xff0c;每个锥状体都连接到神经末梢&#xff0c;人可以充分地分辨图像细节。锥细胞…...

编程日记 2024/12/11 3:59:12

Spring Cloud Alibaba：一站式微服务解决方案

Spring Cloud Alibaba介绍 在当今的软件开发领域&#xff0c;微服务架构因其灵活性、可扩展性和独立性等优势而备受青睐。Spring Cloud Alibaba 作为一款强大的一站式微服务解决方案&#xff0c;为开发者提供了丰富的工具和组件&#xff0c;帮助他们轻松构建和管理复杂的微服务…...

编程日记 2024/12/11 3:58:08

ubuntu16.04部署dify教程

文章目录 1、克隆 Dify 源代码至本地环境2、加速Dify镜像文件下载3、启动 Dify4、访问 Dify5、更新 Dify6、常见问题及解决方案&#xff08;1&#xff09;容器restarting&#xff08;2&#xff09;日志文件上限&#xff08;3&#xff09;重置管理员密码&#xff08;4&#xff0…...

编程日记 2024/12/11 3:54:05

JavaWeb文件上传

文件上传总览 文件上传主要是指将本地文件&#xff08;包括但不限于图片、视频、音频等&#xff09;上传到服务器&#xff0c;提供其他用户浏览或下载的过程。在日常生活中&#xff0c;我们在很多情况下都需要使用文件上传功能&#xff0c;比如&#xff1a;发微博、发朋友圈等…...

编程日记 2024/12/11 3:44:56

软件工程——期末复习（3）

一、题目类(老师重点提到过的题目) 1、高可靠性是否意味着高可用性&#xff1f;试举例证明自己的观点&#xff1f; 答&#xff1a;高可靠性不意味着高可用性 可靠性说明系统已经准备好&#xff0c;马上可以使用&#xff1b;可用性是系统可以无故障的持续运行&#xff0c;是一…...

编程日记 2024/12/11 3:40:51

apache的BeanUtils的Converter被相互污染覆盖问题

问题描述 apache的BeanUtils工具集中用来把map对象转换为java对象的BeanUtils#populate方法会因为单例的原因其转换器Converter被相互污染覆盖问题 maven依赖 <dependency><groupId>commons-beanutils</groupId><artifactId>commons-beanutils</…...

编程日记 2024/12/11 3:39:49

TCP的“可靠性”（上）

目录 TCP的“可靠性”&#xff08;上&#xff09;确认应答&#xff08;可靠性传输的基础&#xff09;超时重传连接管理&#xff08;三次握手&#xff0c;四次挥手&#xff09; TCP的“可靠性”&#xff08;上&#xff09; 想必大家都或多或少的听说过TCP的特性&#xff1a;有连…...

编程日记 2024/12/11 3:35:45

超标量处理器设计笔记（5）虚拟存储器、地址转换、page fault

虚拟存储器 概述地址转换单级页表多级页表案例最好情况&#xff1a;虚拟地址是连续的最差情况&#xff1a;每个第二级 PT 都装有一项 增加级数 Page Fault 程序保护 概述 当程序比物理内存空间更大时&#xff0c;无法全部装在物理内存中&#xff0c;需要对程序进行切片 虚拟…...

编程日记 2024/12/11 3:32:42

SparkSQL 读写数据攻略：从基础到实战

目录 一、输入Source 1&#xff09;代码演示最普通的文件读取方式&#xff1a; 2&#xff09; 通过jdbc读取数据库数据 3) 读取table中的数据【hive】 二、输出Sink 实战一&#xff1a;保存普通格式 实战二&#xff1a;保存到数据库中 实战三&#xff1a;将结果保存在h…...

编程日记 2024/12/11 3:30:40

react 使用状态管理调用列表接口渲染列表（包含条件查询，统一使用查询按钮，重置功能），避免重复多次调用接口的方法

react开发调用api接口一般使用useEffect来监听值的变化&#xff0c;通过值的变化与否来进行接口调用。 比如我们要进行一个查询接口 const [pageParams, setPage] useState({name: ,id: ,});const [dataList, setDataList] useState([]);const getList async () > {const…...

编程日记 2024/12/11 3:29:38

Stable Audio Open模型部署教程：用AI打造独家节拍，让声音焕发新活力！

Stable Audio Open 是一个开源的文本到音频模型&#xff0c;允许用户从简单的文本提示中生成长达 47 秒的高质量音频数据。该模型非常适合创建鼓点、乐器即兴演奏、环境声音、拟音录音和其他用于音乐制作和声音设计的音频样本。用户还可以根据他们的自定义音频数据微调模型&…...

编程日记 2024/12/11 3:25:30

加油站-（贪心算法）

题目描述 在一条环路上有 n 个加油站&#xff0c;其中第 i 个加油站有汽油 gas[i] 升。 你有一辆油箱容量无限的的汽车&#xff0c;从第 i 个加油站开往第 i1 个加油站需要消耗汽油 cost[i] 升。你从其中的一个加油站出发&#xff0c;开始时油箱为空。 给定两个整数数组 gas…...

编程日记 2024/12/11 3:24:29

k8s-持久化存储PV与PVC（1）

1、概述 为什么 kubernetes 要持久化存储&#xff1f; 在 kubernetes 中部署应用都是以 Pod 的容器运行的&#xff0c;而 Pod 是有生命周期&#xff0c;一旦 Pod 被删除或重启后&#xff0c;这些数据也会随着丢失&#xff0c;则需要对这些数据进行持久化存储。 PV&#xff1…...

编程日记 2024/12/11 3:20:26

Linux Red Hat Enterprise

下载 https://developers.redhat.com/products/rhel/download 安装...

编程日记 2024/12/11 3:18:24

Admin.Net中的消息通信SignalR解释

定义集线器接口 IOnlineUserHub public interface IOnlineUserHub {/// 在线用户列表Task OnlineUserList(OnlineUserList context);/// 强制下线Task ForceOffline(object context);/// 发布站内消息Task PublicNotice(SysNotice context);/// 接收消息Task ReceiveMessage(…...

编程新知 2025/9/10 5:36:56

电脑插入多块移动硬盘后经常出现卡顿和蓝屏

当电脑在插入多块移动硬盘后频繁出现卡顿和蓝屏问题时&#xff0c;可能涉及硬件资源冲突、驱动兼容性、供电不足或系统设置等多方面原因。以下是逐步排查和解决方案&#xff1a; 1. 检查电源供电问题 问题原因&#xff1a;多块移动硬盘同时运行可能导致USB接口供电不足&#x…...

编程新知 2025/10/28 15:02:57

Golang dig框架与GraphQL的完美结合

将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用&#xff0c;可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器&#xff0c;能够帮助开发者更好地管理复杂的依赖关系&#xff0c;而 GraphQL 则是一种用于 API 的查询语言&#xff0c;能够提…...

编程新知 2025/12/31 8:38:23

定时器任务——若依源码分析

分析util包下面的工具类schedule utils&#xff1a; ScheduleUtils 是若依中用于与 Quartz 框架交互的工具类&#xff0c;封装了定时任务的 创建、更新、暂停、删除等核心逻辑。 createScheduleJob createScheduleJob 用于将任务注册到 Quartz&#xff0c;先构建任务的 JobD…...

编程新知 2026/1/26 14:24:46

【2025年】解决Burpsuite抓不到https包的问题

环境&#xff1a;windows11 burpsuite:2025.5 在抓取https网站时&#xff0c;burpsuite抓取不到https数据包&#xff0c;只显示&#xff1a; 解决该问题只需如下三个步骤&#xff1a; 1、浏览器中访问 http://burp 2、下载 CA certificate 证书 3、在设置--隐私与安全--…...

编程新知 2026/1/28 3:43:20

智能分布式爬虫的数据处理流水线优化：基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具&#xff0c;在大规模数据获取中发挥着关键作用。然而&#xff0c;传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时&#xff0c;常出现数据质…...

编程新知 2026/2/6 1:04:23

Reasoning over Uncertain Text by Generative Large Language Models

https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达，从日常对话到特定领域的文档（例如医学文档）（Heritage 2013；Landmark、Gulbrandsen 和 Svenevei…...

编程新知 2026/2/6 17:58:07

scikit-learn机器学习

# 同时添加如下代码, 这样每次环境(kernel)启动的时候只要运行下方代码即可: # Also add the following code, # so that every time the environment (kernel) starts, # just run the following code: import sys sys.path.append(/home/aistudio/external-libraries)机…...

编程新知 2026/2/1 17:50:36

MySQL 8.0 事务全面讲解

以下是一个结合两次回答的 MySQL 8.0 事务全面讲解&#xff0c;涵盖了事务的核心概念、操作示例、失败回滚、隔离级别、事务性 DDL 和 XA 事务等内容&#xff0c;并修正了查看隔离级别的命令。 MySQL 8.0 事务全面讲解 一、事务的核心概念&#xff08;ACID&#xff09; 事务是…...

编程新知 2025/9/19 22:12:36

NPOI Excel用OLE对象的形式插入文件附件以及插入图片

static void Main(string[] args) {XlsWithObjData();Console.WriteLine("输出完成"); }static void XlsWithObjData() {// 创建工作簿和单元格,只有HSSFWorkbook,XSSFWorkbook不可以HSSFWorkbook workbook new HSSFWorkbook();HSSFSheet sheet (HSSFSheet)workboo…...

编程新知 2025/10/6 2:06:51