Menu
CoddyTech

内部 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 文档中的所有元素。

challenge icon

挑战

简单

给你一个 HTML 文档。使用内部 CSS,通过以下属性设置文档样式:

  1. 将 body 的背景颜色设置为 lightgreen。
  2. 将所有 h1 标题的文本颜色设置为 red。
  3. 将所有段落(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>
quiz icon自我测试

这节课包含一个小测验。开始学习即可作答,并记录你的进度。

使用 CSS 添加样式中的所有课

自己练习: Web 在线编辑器