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

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

news 2026/2/8 22:06: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

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

编程新知 2025/9/28 20:12:12

【杂谈】-递归进化：人工智能的自我改进与监管挑战

递归进化&#xff1a;人工智能的自我改进与监管挑战 文章目录 递归进化&#xff1a;人工智能的自我改进与监管挑战1、自我改进型人工智能的崛起2、人工智能如何挑战人类监管&#xff1f;3、确保人工智能受控的策略4、人类在人工智能发展中的角色5、平衡自主性与控制力6、总结与…...

编程新知 2025/12/9 0:22:01

微信小程序之bind和catch

这两个呢&#xff0c;都是绑定事件用的&#xff0c;具体使用有些小区别。 官方文档&#xff1a; 事件冒泡处理不同 bind&#xff1a;绑定的事件会向上冒泡&#xff0c;即触发当前组件的事件后&#xff0c;还会继续触发父组件的相同事件。例如&#xff0c;有一个子视图绑定了b…...

编程新知 2026/2/5 5:05:56

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留&#xff0c;CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制&#xff08;CCA-Attention&#xff09;&#xff0c;…...

编程新知 2026/2/5 4:25:15

阿里云ACP云计算备考笔记 (5)——弹性伸缩

目录 第一章 概述 第二章 弹性伸缩简介 1、弹性伸缩 2、垂直伸缩 3、优势 4、应用场景 ① 无规律的业务量波动 ② 有规律的业务量波动 ③ 无明显业务量波动 ④ 混合型业务 ⑤ 消息通知 ⑥ 生命周期挂钩 ⑦ 自定义方式 ⑧ 滚的升级 5、使用限制 第三章 主要定义 …...

编程新知 2026/1/22 6:07:24

连锁超市冷库节能解决方案：如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

编程新知 2025/11/30 16:55:29

什么是库存周转？如何用进销存系统提高库存周转率？

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

编程新知 2026/1/26 13:21:10

Nuxt.js 中的路由配置详解

Nuxt.js 通过其内置的路由系统简化了应用的路由配置&#xff0c;使得开发者可以轻松地管理页面导航和 URL 结构。路由配置主要涉及页面组件的组织、动态路由的设置以及路由元信息的配置。 自动路由生成 Nuxt.js 会根据 pages 目录下的文件结构自动生成路由配置。每个文件都会对…...

编程新知 2026/2/6 16:52:42

自然语言处理——Transformer

自然语言处理——Transformer 自注意力机制多头注意力机制Transformer 虽然循环神经网络可以对具有序列特性的数据非常有效&#xff0c;它能挖掘数据中的时序信息以及语义信息&#xff0c;但是它有一个很大的缺陷——很难并行化。 我们可以考虑用CNN来替代RNN&#xff0c;但是…...

编程新知 2026/2/1 7:05:07

Aspose.PDF 限制绕过方案：Java 字节码技术实战分享（仅供学习）

Aspose.PDF 限制绕过方案&#xff1a;Java 字节码技术实战分享&#xff08;仅供学习&#xff09; 一、Aspose.PDF 简介二、说明&#xff08;⚠️仅供学习与研究使用&#xff09;三、技术流程总览四、准备工作1. 下载 Jar 包2. Maven 项目依赖配置 五、字节码修改实现代码&#…...

编程新知 2026/2/6 22:13:44