HTML for Kids · 课时

最常用的 CSS 属性

Q: 「最常用的 CSS 属性」这节课中我会学到什么？

最常用的 CSS 属性 你通过在浏览器中直接运行的动手代码来练习 HTML for Kids，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

最常用的 CSS 属性 是 CoddyKit 上的免费 HTML for Kids 课时。这是第 1 节课，共 1 节。你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。这是 HTML for Kids 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML for Kids 课程共包含 1 节课。

简介

您好，

在本节中，我们将学习最常见的 CSS 属性。

到目前为止，我们通常使用 color、font-size 等简单属性来编写示例。

宽度和高度

高度 - 宽度

我们将使用 width 和 height 属性设置元素的宽度和高度。

这里有两个需要注意的问题。

我们无法为内联类型元素指定宽度和高度。
默认情况下，我们指定的宽度和高度属性与外边距、内边距和边框等其他属性相互独立，并且只应用于元素内部的区域。

稍后我们会进一步介绍上述例外情况。

<!DOCTYPE html>
<html>
<head>
<style>

.my-box {
  width: 100px;
  height: 100px;
  background-color: blue;
  color: white;
}

</style>
</head>
<body>

<div class="my-box">My Box</div>

</body>
</html>

宽度和高度 2

在之前的示例中，我们将宽度和高度设置为了固定值。但是，可以设置的值并不局限于固定数字。

现在，让我们看看在示例中如何使用百分比设置宽度。

<style>

.box1 {
  height: 200px;
  width: 200px;
  background-color: #1cac84;
}

.box2 {
  height: 200px;
  width: 70%;
  background-color: powderblue;
}

.box3 {
  background-color: #c974af;
}

</style>

<div class="box1">First Box</div>

<div class="box2">Second Box</div>

<div class="box3">This box takes 
the auto value for the width and height 
properties by default.</div>

content-box 与 border-box

box-sizing 属性的默认值是 content-box。

默认情况下，宽度和高度的值用于设置内容区域的尺寸。

边框和内边距的值会在宽度和高度的基础上额外增加。

假设一个框的宽度为 100px。

当我们为这个框添加 10px 的内边距和 20px 的边框时，元素的总宽度将为 100px + 10px + 20px = 130px。

最大宽度

使用 max-width 属性，我们可以设置元素能够占据的最大宽度。

在下面的示例中，由于 max-width 的值设置为 100px，尽管 width 的默认值为 auto（元素应占据其父元素 100% 的宽度），它仍只占据 100px，导致内容超出了框的范围。

<style>

.box {
  height: 200px;
  max-width: 100px;
  background-color: #1cac84;
}

</style>

<div class="box">
Lorem ipsum dolor sit amet, consectetur 
adipiscing elit. Morbi lacinia ut felis
et sagittis
</div>

文本装饰

我们可以使用 text-decoration 属性为文本定义装饰效果。

我认为通过示例来了解这个属性会更容易。请在预览中查看示例代码的输出结果。

<style>

.head1 {
  text-decoration: overline;
}

.head2 {
  text-decoration: line-through;
}

.head3 {
  text-decoration: underline;
}

.head4 {
  text-decoration: underline overline;
}

</style>

<h1 class="head1">
   Text-decoration is overline
</h1>
<h1 class="head2">
   Text-decoration is line-through
</h1>
<h1 class="head3">
   Text-decoration is underline
</h1>
<h1 class="head4"> 
   Text-decoration is both underline 
    and overline
</h1>

text-indent

我们可能希望在文本开头添加空白。此时可以使用 text-indent 属性。

<style>
.indent-txt{
  text-indent: 20px;
}
</style>

<p class="indent-txt">Lorem ipsum dolor 
sit amet, consectetur adipiscing elit, sed 
do eiusmod tempor incididunt ut labore 
et dolore magna aliqua. Ut enim ad minim 
veniam, quis nostrud exercitation ullamco 
laboris nisi ut aliquip ex ea commodo consequat
</p>

text-align

我们可以使用 text-align 属性设置文本的水平对齐方式。

让我们定义一个 HTML 示例。

<style>

.h1-center {
  text-align: center;
}

.h1-left {
  text-align: left;
}

.h1-right {
  text-align: right;
}
</style>

<h1 class="h1-center">
   Lorem ipsum (center)
</h1>
<h1 class="h1-left">
   Lorem ipsum  (left)
</h1>
<h1 class="h1-right">
   Lorem ipsum (right)
</h1>

font-family

我们使用 font-family 样式来设置文本所需的字体类型。

这里有几个重要的注意事项。

我们定义的字体必须已安装在用户的系统中。因此，需要使用网页安全字体中的一种字体。
如果要使用自定义字体，就需要在 head 标签之间添加要使用的字体，作为第三方依赖项。添加 font-family 时，我们应确定主要和次要字体偏好。
如果浏览器无法在系统中找到我们的首选字体，就会向用户显示次选字体。

字体系列 2

在下面的示例中，我们为主类指定了 Times New Roman 字体。

Times 和衬线字体分别被指定为次选和第三选字体。

浏览器会首先尝试使用 Times New Roman 字体；如果系统中找不到这种字体，就会使用我们的其他偏好设置。

如果我们指定的字体不可用，浏览器就会使用默认字体。

<style>
.header {
  font-family: "Times New Roman", Times, serif;
}
</style>

<h1 class="header">
    Hello Font Family
</h1>

字体样式

顾名思义，它用于指定文本所使用的字体样式。

现在让我们通过一个示例来了解字体样式属性。

<style>
p.normal {
  font-style: normal;
}

p.italic {
  font-style: italic;
}

p.oblique {
  font-style: oblique;
}
</style>

<p class="normal">
    Lorem ipsum dolor sit amet, 
    consectetur adipiscing elit
</p>
<p class="italic">Lorem ipsum dolor sit amet,
     consectetur adipiscing elit
</p>
<p class="oblique">Lorem ipsum 
     dolor sit amet. consectetur 
     adipiscing elit
</p>

恭喜

恭喜您 🎉

在本部分中，我们学习了最常用的 CSS 属性。

下一部分中，我们将学习 CSS 外边距。

常见问题解答

「最常用的 CSS 属性」课时是免费的吗？

是的 — 「最常用的 CSS 属性」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML for Kids 课程的其余内容，请升级到 CoddyKit PRO。 HTML for Kids 课程共包含 1 节课。

「最常用的 CSS 属性」这节课中我会学到什么？

最常用的 CSS 属性你通过在浏览器中直接运行的动手代码来练习 HTML for Kids，全天候 AI 导师会在你学习这节课的过程中回答你的问题。

学习 HTML for Kids 需要有经验吗？

无需任何先前经验。CoddyKit 上的 HTML for Kids 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。这是第 1 节课，共 1 节。

「最常用的 CSS 属性」课时需要多长时间？

大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。

我能在这节 HTML for Kids 课中编写并运行代码吗？

能。每节 HTML for Kids 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。

← 返回 HTML for Kids