Menu
CoddyTech

字号

本课属于 Coddy HTML 学习旅程的“使用 CSS 添加样式”单元。第 19 课,共 76 课。

在 CSS 中,font-size 属性用于控制 HTML 元素内文本的大小。

以下是一些用于指定字体大小的常见单位:

  • 像素(px):一种绝对单位,用于指定以像素为单位的字体大小。这是设置字体大小最直接、最常用的单位。
  • Ems (em):一种相对单位,基于父元素的字体大小。例如,如果父元素的字体大小为 16px,那么 1em 等于 16px,2em 等于 32px,依此类推。
  • Rem(rem):一种相对单位,以根元素(<html>)的字体大小为基准。这个单位在整个文档中更一致,因为它不受父元素字体大小的影响。
  • 百分比(%):一种相对单位,基于父元素的字体大小,与 em 类似。例如,如果父元素的字体大小是 16px,那么 100% 等于 16px,150% 等于 24px,依此类推。

例如:

p {
    font-size: 16px;
}

h1 {
    font-size: 2.5em;
}

body {
    font-size: 1.4rem;
}

.small-text {
    font-size: 80%;
}

在这个示例中,所有 <p>(段落)元素的字号都设为 16px,所有 <h1> 标题都设为 2.5em(相对于其父元素的字号),文档的基础字号设为 1.4rem,所有带有 small-text 类的元素字号都设为 80%(相对于其父元素的字号)。

challenge icon

挑战

简单

给定一个包含标题(<h1>)、段落(<p>)和区块(<div>)的 HTML 文档。你的任务是使用 font-size 属性设置这些元素的样式。按以下步骤操作:

  1. 编写一条 CSS 规则,用于选择 <h1> 元素。将 font-size 设置为 32px。
  2. 编写一条 CSS 规则,用于选择 <p> 元素。将 font-size 设置为 1.2em。
  3. 编写一条 CSS 规则,用于选择 <div> 元素。将 font-size 设置为 120%。

亲手试试

<html>
<head>
    <title>Font Size</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>
quiz icon自我测试

这节课包含一个小测验。开始学习即可作答,并记录你的进度。

使用 CSS 添加样式中的所有课

自己练习: Web 在线编辑器