内部 CSS
本课属于 Coddy HTML 学习旅程的“使用 CSS 添加样式”单元。第 7 课,共 76 课。
内部 CSS 是一种向 HTML 文档添加 CSS 样式的方法,你可以将样式放在文档 <head> 部分的 <style> 标签中。这种方式可以让你为单个页面上的多个元素应用样式,而不需要外部样式表。内部 CSS 适用于为单个文档设置样式或快速更改样式。
以下是使用内部 CSS 的基本语法:
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
body {
background-color: lightblue;
}
p {
color: blue;
font-size: 16px;
}
</style>
</head>
<body>
<h1>Welcome to My Page</h1>
<p>This is a paragraph of text.</p>
</body>
</html>在这个示例中,<style> 标签包含 CSS 规则,用于将 body 的背景颜色设为浅蓝色,将 p(段落)的颜色设为蓝色,并将字体大小设为 16 像素。这些样式会应用于 HTML 文档中的所有元素。
挑战
简单给你一个 HTML 文档。使用内部 CSS,通过以下属性设置文档样式:
- 将
body的背景颜色设置为lightgreen。 - 将所有
h1标题的文本颜色设置为red。 - 将所有段落(
p)的字体大小设置为18px。
已为你提供 CSS 起始代码。
亲手试试
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS</title>
<style>
body {
}
h1 {
}
p {
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>这节课包含一个小测验。开始学习即可作答,并记录你的进度。
使用 CSS 添加样式中的所有课
自己练习: Web 在线编辑器