如何定义样式？
如何定义样式？
如何定义样式？ 是 CoddyKit 上的免费 HTML for Kids 课时。 这是第 1 节课，共 1 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML for Kids 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML for Kids 课程共包含 1 节课。
介绍
您好：
我们在上一课中已经对此进行了部分讲解。现在让我们再复习一遍。
在 CSS 中，可以通过 3 种方式定义样式：
- 行内样式
- 在 <style> 标签之间定义
- 使用外部 CSS 文件
行内样式
1. 行内样式
顾名思义，它指的是将 style 属性作为行内属性传递给每个元素，从而定义样式。
不推荐这种用法，因为它降低了每个样式的可复用性，而且可读性很低。
在下面的示例中，letter-spacing 样式使文本中每个字母之间增加了 15px 的间距。
<p style="letter-spacing:15px">
Inline Style
</p>使用 style 标签
2. 在 <style> 标签之间定义
可以在 style 标签之间定义样式。除了一些特殊情况（例如首屏内容区域），通常也不推荐使用这种定义方式。
为了让示例保持整洁，我们会继续使用 style 标签。不过，我不建议您在自己的应用中使用这种方式（我提到的特殊情况除外）。
<html>
<head>
<style>
.root {
color:red;
}
</style>
</head>
<body class>
<div class="root">Test</div>
</body>
</html>外部 CSS 文件
3. 外部 CSS 文件
现在，让我们学习如何使用外部 CSS 文件。
这是我们最常使用的样式定义方式。首先，创建一个只包含 CSS 选择器的文件。
然后，可以在 head 标签之间的 link 元素中定义相关的 CSS 文件。
在下面的示例中，通过 href 属性将 style.css 文件分配给 link 元素。
<link rel = "stylesheet" href = "styles.css">
此功能是让多个文件调用同一个 CSS 文件并提高可复用性的最佳解决方案。
在下面的示例中，我们创建了一个选择外部 class 的样式定义。
.external{
color:red;
font-size:30px;
letter-spacing:10px;
}
在下面的示例中，我们创建了一个选择外部 class 的样式定义。
让我们将这段声明保存到名为 test 1.css 的文件中，并将其分配给 link 元素。
<html>
<head>
<link rel="stylesheet"
href="https://coddy.s3.amazonaws.com/css/test_1.css">
</head>
<body>
<div class="external">Hello</div>
</body>
</html>恭喜
恭喜您 🎉
在本部分中，我们学习了 CSS 中的样式定义类型。
下一部分中，我们将学习id 选择器。
常见问题解答
「如何定义样式？」课时是免费的吗？
是的 — 「如何定义样式？」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML for Kids 课程的其余内容，请升级到 CoddyKit PRO。 HTML for Kids 课程共包含 1 节课。
「如何定义样式？」这节课中我会学到什么？
如何定义样式？ 你通过在浏览器中直接运行的动手代码来练习 HTML for Kids，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 HTML for Kids 需要有经验吗？
无需任何先前经验。CoddyKit 上的 HTML for Kids 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 1 节。
「如何定义样式？」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 HTML for Kids 课中编写并运行代码吗？
能。每节 HTML for Kids 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。