CSS 简介
CSS 简介
CSS 简介 是 CoddyKit 上的免费 HTML for Kids 课时。 这是第 1 节课，共 1 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML for Kids 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML for Kids 课程共包含 1 节课。
介绍 1
您好：
在上一章中，我们学习了 CSS 是什么，以及为什么应该使用它。现在，让我们通过一个简单的示例快速入门。
让我们定义一个简单的 HTML 页面。
<html>
<body>
<h1>Hello CSS</h1>
</body>
</html>行内样式
现在，让我们将“Hello CSS”标题的颜色改为红色。为此，我们将使用几乎可以添加到任何 HTML 标签中的 style 属性 。
借助此属性，我们可以为每个元素定义行内样式。
查看预览区域时，我们会看到标题的颜色变成红色。
color: red;
我们通过样式定义将元素的字体颜色设置成了红色。
<h1 style="color:red;">Hello CSS</h1>行内样式 2
您应该还记得，我们曾说过，在 HTML 中可以使用属性为标签分配行为和特征。
其中，style 属性最重要的用途之一就是使用它为标签定义样式。
行内样式 3
现在，让我们添加一种新样式。使用 font-size 可以增大文本大小。
定义多个样式时，需要用分号分隔各个样式。
在下面的示例中，color 和 font-size 样式由分号分隔。
<h1 style="color:red;font-size:50px;">
Hello CoddyKit
</h1>样式定义
添加样式时，语法非常重要。
styleName: styleValue;
让我们再次记住，需要像上面这样分配样式。
示例
现在，让我们进一步扩展这个示例。
<html>
<body>
<h1>Hello CoddyKit</h1>
<p>Lorem Ipsum is simply dummy
text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard
dummy text ever since the 1500s,
when an unknown printer took a galley of
type and scrambled it to make a
type specimen book.</p>
<h1>Hello CSS</h1>
</body>
</html>示例 2
在这个示例中，我们希望将所有文本的颜色改为红色。 我们可以为每个标签按如下方式定义样式。
<html>
<body>
<h1 style="color:red;">Hello Coddy</h1>
<p style="color:red;">
Lorem Ipsum is simply dummy
text of the printing and typesetting industry
Lorem Ipsum has been the industry's
standard dummy text ever since the 1500s,
when an unknown printer took a galley
of type and scrambled it to
make a type specimen book.</p>
<h1 style="color:red;">Hello CSS</h1>
</body>
</html>CSS 选择器
但这样看起来不太好，对吧？
因为现在页面上有 3 个元素，我们分别将它们的文本颜色改成了红色。然而，如果元素数量增加到 3000 个，为每个元素单独定义样式就没有多大意义了。
相反，我们应该使用 CSS 选择器，而不是为每个元素定义行内样式。
介绍 12
现在，让我们学习选择器这一概念。
CSS 选择器负责选择文档中相关的 HTML 元素，以便为 HTML 元素设置样式。
所以，顾名思义，它们会选择 HTML 元素。😂
CSS 选择器必须定义在 HTML 文档的 <style> 标签之间，或定义在外部 CSS 文件中。
在示例中，我们将使用通常写在 style 标签之间的方式。不过，更准确地说，应该在外部 CSS 文件中定义样式。
简介 13
点运算符和类名用于在 style 标签之间定义类。样式定义则写在大括号之间。
.class-name {
font-size:22px;
color:red;
}
在下面的示例中，我们在 style 标签之间定义了一个名为 my-component 的类，并为相应的类指定了 font-size 样式。
<style>
.my-component{
font-size:22px;
}
</style>
现在让我们定义两个段落元素
现在让我们定义两个带有 my-component 类的段落元素。
完成定义后，由于两个段落具有相同的类名，它们都会被 CSS 选择器选中，并且其字体大小会更新为 22px。
<style>
.my-component{
font-size:22px;
}
</style>
<p class="my-component">Hello CoddyKit</p>
<p class="my-component">
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Aenean maximus neque diam,
in tristique tortor volutpat a. Vivamus porttitor
id est et suscipit. Duis interdum at sem sed vestibulum.
Phasellus sit amet ullamcorper libero, a vestibulum libero.
Fusce laoreet nunc a pharetra viverra.
</p>介绍 6
我们可以为一个选择器分配多个样式。
在下面的示例中，font-size 和 color 样式是在同一个选择器中定义的。
<style>
.my-component{
font-size:22px;
color:red;
}
</style>嵌套 CSS 选择器
让我们分析下面的 HTML 代码。
我们定义了一个段落元素，并向其中添加了一个包含 “Hello CSS Selectors” 内容的 span 元素。
在这种情况下，我们可以说段落元素是 span 的父元素。
另一方面，span 也是 p 元素的子元素。
就像生物一样，我们会根据 HTML 元素在代码块中的位置，使用父子关系来组织它们。
<p>
<span>Hello CSS Selectors</span>
</p>嵌套 CSS 选择器 2
让我们进一步扩展示例，再次分析元素之间的层级关系。
- 根据下面的示例：
- <span> 和 <a> 元素互为兄弟元素。
- <span> 和 <a> 元素都是 div 元素的后代元素。
- <span> 和 <a> 都是 <p> 元素的子元素。
- <p> 元素是 <div> 元素的子元素。
<div>
<p>
<span>Hello CSS Selectors</span>
<a href="https://coddykit.com">
Go CoddyKit
</a>
</p>
</div>分析树模型
让我们更仔细地看看上面的图片。
下面的 HTML 代码示例已转换为树模型。
请注意，树模型实际上就是父子层级关系的反映。
<!DOCTYPE html>
<html>
<head>
<title>CoddyKit</title>
<meta charset="UTF-8">
</head>
<body>
<h1>This is a Heading</h1>
<p>
<a href="#">Link</a>
<br/>
<span>lorem ipsum</span>
</p>
</body>
</html>
那么，我们什么时候使用这种层级关系呢？
那么，我们什么时候使用这种层级关系呢？
让我们先做一个示例并提出一个问题，然后看看如何利用这种层级关系提供解决方案。
让我们看看下面的代码示例。
假设我们想将所有文本涂成红色。到目前为止，我们学过两种不同的用法。
- 第一种，也是最糟糕的一种，是为每个元素添加行内 style 属性（style = "color: red"）。
- 第二种，是定义一个名为 red-txt 的 class，并将其作为属性分配给每个元素（class = "red-txt"）。
但还有一种更简单的方法。🥳
<div class="root">
<span>This is a span element</span>
<div>
<p>This is a p element</p>
<p><span>
This is a span element
</span>
</p>
</div>
</div>那么我们什么时候使用这种层级关系？2
让我们再次查看上面的代码。
注意 class 名为 root 的 div 元素，我们会发现它实际上是示例中所有元素的祖先元素。
人类的遗传特征会从祖先传递给后代。在 CSS 中，为祖先元素指定的样式也会反映到后代元素上。
在这种情况下，当我们定义一个选中相关 div 元素的样式时，可以预期它的所有后代元素都会受到这一设置的影响。
让我们来实现它。
那么我们什么时候使用这种层级关系？3
借助点运算符定义一个名为 root 的类，并在其中定义样式（color: red）。
它会选中所有具有 root 类的元素，并将这些元素及其后代元素的文本颜色设置为红色。
查看预览部分时，我们会看到所有文本都变成了红色。
<style>
.root{
color:red;
}
</style>
<div class="root">
<span>This is a span element</span>
<div>
<p>This is a p element</p>
<p>
<span>
This is a span element
</span>
</p>
</div>
</div>继承
在 CSS 中，我们可以将这一概念称为 继承。借助这一特性，我们学会了如何编写更短的代码。
与前面的示例一样，我们没有逐个为每个元素定义相同的属性，而是将该属性定义在祖先元素上，从而避免了代码重复。
head 元素中的放置位置
在前面的示例中，我们将 style 元素添加在所编写的 HTML 元素旁边。
但是，正确的做法是将 style 标签插入 head 标签之间。
因此，正确的用法如下。
<!DOCTYPE html>
<html>
<head>
<style>
.hello{
font-size:30px;
}
</style>
</head>
<body>
<h1 class="hello">This is a Heading</h1>
</body>
</html>尽可能简短且可复用地编写代码
编写代码时，我们需要让代码尽可能简短，并且可以复用。
恭喜
恭喜您 🎉
在本部分中，我们一起学习了选择器和继承的概念。
下一部分中，我们将学习 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 反馈 — 无需本地设置。