选择器简介
本课属于 Coddy HTML 学习旅程的“使用 CSS 添加样式”单元。第 10 课,共 76 课。
在 CSS 中,选择器是用于选中你想要设置样式的 HTML 元素的模式。它们是 CSS 规则的重要组成部分,因为它们决定了样式将应用于哪些元素。
选择器有多种类型,每种选择器定位元素的方式都不同。理解选择器是掌握 CSS 并创建样式良好的网页的基础。
这是一个带有选择器的基本 CSS 规则:
selector {
property: value;
}selector:选择要设置样式的 HTML 元素。property:你想要更改的样式属性(例如 color、font-size)。value:你想为属性设置的值(例如 blue、16px)。
例如:
p {
color: blue;
font-size: 16px;
}在这个示例中,p 是选择器,用于选中所有段落元素。声明将所有段落的文本颜色设为蓝色,字号设为 16 像素。
挑战
简单给你一个 HTML 文档。使用内部 CSS 设置文档的样式,具体属性如下:
- 将所有
h1标题的背景颜色设为green。 - 将所有
h1标题的文本颜色设为white。 - 将所有段落(
p)的字体大小设为18px。
已为你提供初始 CSS 代码。
亲手试试
<!DOCTYPE html>
<html>
<head>
<title>Selectors</title>
<style>
h1 {
}
p {
}
</style>
</head>
<body>
<h1>John Doe</h1>
<p>Web Developer</p>
</body>
</html>这节课包含一个小测验。开始学习即可作答,并记录你的进度。
使用 CSS 添加样式中的所有课
自己练习: Web 在线编辑器