字号
本课属于 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%(相对于其父元素的字号)。
挑战
简单给定一个包含标题(<h1>)、段落(<p>)和区块(<div>)的 HTML 文档。你的任务是使用 font-size 属性设置这些元素的样式。按以下步骤操作:
- 编写一条 CSS 规则,用于选择
<h1>元素。将font-size设置为32px。 - 编写一条 CSS 规则,用于选择
<p>元素。将font-size设置为1.2em。 - 编写一条 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>这节课包含一个小测验。开始学习即可作答,并记录你的进度。
使用 CSS 添加样式中的所有课
自己练习: Web 在线编辑器