Menu
CoddyTech

内联 CSS

本课属于 Coddy HTML 学习旅程的“使用 CSS 添加样式”单元。第 6 课,共 76 课。

内联 CSS 是一种通过 style 属性直接向 HTML 元素添加 CSS 样式的方法。这种方式可以让你为单个元素应用独特的样式,而无需使用外部或内部样式表。内联样式适合快速修改单个元素的特定样式。

以下是使用内联 CSS 的基本语法:

<element style="property: value;"></element>
  • <element>:你想设置样式的 HTML 元素。
  • style:包含 CSS 声明的属性。
  • property:你想设置的 CSS 属性(例如,color、font-size)。
  • value:你想为该属性设置的值(例如,blue、16px)。

例如:

<p style="color: blue; font-size: 16px;">This is a paragraph with inline styles.</p>

在这个示例中,段落元素包含内联样式,将文字颜色设为蓝色,字体大小设为 16 像素。这些样式只会应用于这个特定的段落元素。

challenge icon

挑战

简单

给你一个包含段落元素的 HTML 文档。使用内联 CSS 设置段落的样式,具体属性如下:

  1. 将文本颜色设为红色。
  2. 将字体大小设为 18 像素。

查看课中的示例,获取指导!

亲手试试

<!DOCTYPE html>
<html>
<head>
    <title>Inline CSS</title>
</head>
<body>
    <p>This is a paragraph.</p>
</body>
</html>
quiz icon自我测试

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

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

自己练习: Web 在线编辑器