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

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

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

1.字体

字体系列

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

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

在这个例子中,我们首先尝试使用"Helvetica Neue",这是一种现代且流行的无衬线字体。如果用户的系统上没有安装这种字体,则会依次尝试HelveticaArial"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)。

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

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

字体粗细

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

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

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

示例2:使用数值(从100到900)
.very-thin-text {font-weight: 100
http://www.lryc.cn/news/501059.html

相关文章:

  • mysql 架构详解
  • 无代码探索AI大模型:腾讯云函数计算的卓越实践
  • 解决Ubuntu在VMware关机时,老是一个光标在那里闪动几分钟,才能关机的问题
  • word poi-tl 图表功能增强,插入图表折线图、柱状图、饼状图
  • 常见网络钓鱼类型
  • 数字图像处理考研考点(持续更新)
  • Spring Cloud Alibaba:一站式微服务解决方案
  • ubuntu16.04部署dify教程
  • JavaWeb文件上传
  • 软件工程——期末复习(3)
  • apache的BeanUtils的Converter被相互污染覆盖问题
  • TCP的“可靠性”(上)
  • 超标量处理器设计笔记(5)虚拟存储器、地址转换、page fault
  • SparkSQL 读写数据攻略:从基础到实战
  • react 使用状态管理调用列表接口渲染列表(包含条件查询,统一使用查询按钮,重置功能),避免重复多次调用接口的方法
  • Stable Audio Open模型部署教程:用AI打造独家节拍,让声音焕发新活力!
  • 加油站-(贪心算法)
  • k8s-持久化存储PV与PVC(1)
  • Linux Red Hat Enterprise
  • 《中型 Vue 项目:挑战与成长》
  • 配置 DNS over HTTPS阻止DNS污染
  • Facebook广告文案流量秘诀
  • 22. 五子棋小游戏
  • fastadmin框架同时使用 阿里云oss和阿里云点播
  • Java-JMX 组件架构即详解
  • unity打包web,发送post请求,获取地址栏参数,解决TypeError:s.replaceAll is not a function
  • java+ssm+mysql校园物品租赁网
  • Spring Boot中实现JPA多数据源配置指南
  • 服务器加固
  • 探索CSS中的背景图片属性,让你的网页更加美观