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

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

news 2026/5/12 19:44:10

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

VS2019/2022插件安装指南：让CppCheck帮你揪出C++代码里那些编译器发现不了的‘幽灵Bug’

VS2019/2022插件安装指南&#xff1a;让CppCheck帮你揪出C代码里那些编译器发现不了的‘幽灵Bug’ 在C开发中&#xff0c;编译器能捕捉语法错误&#xff0c;但那些潜伏在逻辑深处的"幽灵Bug"——内存泄漏、未初始化变量、数组越界——往往要等到运行时才暴露。CppCh…...

编程新知 2026/5/12 19:22:31

AI代理技术如何赋能新生儿护理：从数据记录到个性化模式学习

1. 项目概述&#xff1a;当AI成为新手父母的“第二大脑”孩子出生的头三个月&#xff0c;被无数过来人称为“生存模式”。这不是夸张。在那些昼夜颠倒、睡眠被切割成碎片、大脑因极度疲惫而停摆的日子里&#xff0c;新手父母面对的不仅仅是新生儿的啼哭&#xff0c;更是一场信息…...

编程新知 2026/5/12 18:28:43

2026年十大RPA自动化工具盘点：从国际巨头到国产新秀

一、RPA技术的前世今生说起RPA&#xff08;机器人流程自动化&#xff09;&#xff0c;很多人以为这是近几年才冒出来的新概念。其实不然&#xff0c;自动化的基因早在百年前就埋下了种子。1913年&#xff0c;福特汽车搞出了世界上第一条流水线&#xff0c;那是工业自动化的起点…...

编程新知 2026/5/12 16:40:25

想转行AI？大模型4大热门方向深度解构！小白也能收藏的进阶指南

AI大模型领域岗位需求激增&#xff0c;人才缺口超500万。本文深度解析大模型4大热门方向&#xff1a;算法研发与模型预训练&#xff08;门槛高&#xff0c;偏研究&#xff09;、模型对齐与后训练优化&#xff08;岗位增长快&#xff0c;数据驱动&#xff09;、推理工程与模型部…...

编程新知 2026/5/12 16:28:19

Linux小白避坑指南：Resilio Sync安装后权限配置与Web界面访问失败的常见问题解决

Linux权限迷宫&#xff1a;Resilio Sync安装后的深度避坑实战 当8888端口沉默时&#xff1a;一次真实的故障排查记录 上周五晚上11点&#xff0c;我正准备将团队的设计素材库同步到本地开发环境。按照官方文档&#xff0c;我在Ubuntu 22.04上顺利安装了Resilio Sync&#xff0c…...

编程新知 2026/5/12 14:00:23

华为eNSP模拟企业网：用VRRP+MSTP搞定500人公司的网络冗余与隔离（附排错记录）

华为eNSP实战&#xff1a;构建500人企业级网络的高可用架构 当一家企业发展到500人规模时&#xff0c;网络架构的稳定性和可靠性就成为业务连续性的关键保障。作为网络工程师&#xff0c;我们经常面临这样的挑战&#xff1a;如何在有限的预算下&#xff0c;设计出既满足部门隔离…...

编程新知 2026/5/12 11:15:52

无需写代码！用 PackSoft 做数字展厅大屏

前言 做过展厅项目的朋友都懂这种痛—— 客户参观来了&#xff0c;讲解员打开浏览器&#xff0c;地址栏、书签栏、收藏夹全暴露在屏幕上&#xff0c;旁边还挂着一个没关的 QQ 弹窗……高端大气的数字展厅&#xff0c;体验瞬间拉低一个档次。 更麻烦的是&#xff1a;大屏全屏…...

编程新知 2026/5/12 10:06:53

不止于下载：用Active-HDL给你的Lattice FPGA设计做个“体检”（功能仿真实战）

从功能仿真到可靠设计&#xff1a;Active-HDL在Lattice FPGA开发中的深度实践 当LED灯在你的FPGA开发板上如期闪烁时&#xff0c;那种成就感确实令人振奋。但作为经历过多次调试煎熬的工程师&#xff0c;我必须告诉你&#xff1a;能下载运行只是FPGA开发的起点&#xff0c;而非…...

编程新知 2026/5/12 9:47:02

CLion集成LVGL与SDL：打造高效嵌入式GUI模拟开发环境

1. 为什么需要CLionLVGLSDL组合&#xff1f; 如果你正在开发嵌入式设备的图形界面&#xff0c;肯定遇到过这样的困境&#xff1a;每次修改UI都要烧录到硬件上测试&#xff0c;一个简单的颜色调整可能要反复折腾十几分钟。我在开发智能手表项目时就深受其害&#xff0c;直到发现…...

编程新知 2026/5/12 9:38:48

机电一体化系统设计的核心挑战与跨学科协同

1. 机电一体化系统设计的核心挑战与机遇十年前我第一次参与工业机器人控制系统开发时&#xff0c;机械团队和电气团队还在用纸质图纸传递设计变更。某个周五下午的机械结构改动&#xff0c;直到下周一才通知到电气组&#xff0c;导致整个控制柜布局需要返工。这种割裂的开发模式…...

编程新知 2026/5/12 9:00:19