码农教程 - 一技在手,衣食无忧! tools

HTML 样式

❮ 上一节 下一节 ❯

HTMLstyle属性用于向元素添加样式，例如颜色、字体、大小等。

示例

我是红

我很郁闷

我很大

亲自试一试 »

HTML 样式属性

设置 HTML 元素的样式，可以使用style属性。

HTMLstyle属性具有以下语法：

< tagname style=" property: value;">

这个property是一个 CSS 属性。这value是一个 CSS 值。

您将在本教程后面了解有关 CSS 的更多信息。

背景颜色

CSSbackground-color属性定义 HTML 元素的背景颜色。

示例

将页面的背景颜色设置为粉蓝色：

<body style="background-color:powderblue;">

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
亲自试一试 »

示例

为两个不同的元素设置背景颜色：

<body>

<h1 style="background-color:powderblue;">This is a heading</h1>
<p style="background-color:tomato;">This is a paragraph.</p>

</body>
亲自试一试 »

文字颜色

CSScolor属性定义 HTML 元素的文本颜色：

示例

<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
亲自试一试 »

字体

CSSfont-family属性定义 HTML 元素使用的字体：

示例

<h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>
亲自试一试 »

字体大小

CSSfont-size属性定义 HTML 元素的文本大小：

示例

<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>
亲自试一试 »

文本对齐

CSStext-align属性定义 HTML 元素的水平文本对齐方式：

示例

<h1 style="text-align:center;">Centered Heading</h1>
<p style="text-align:center;">Centered paragraph.</p>
亲自试一试 »

章节总结

  • 使用style用于设置 HTML 元素样式的属性
  • 使用background-color用于背景颜色
  • 使用color对于文本颜色
  • 使用font-family对于文本字体
  • 使用font-size对于文本大小
  • 使用text-align用于文本对齐

HTML练习

通过练习测试一下

练习:

使用正确的 HTML 属性和 CSS 将段落的颜色设置为 "blue"。

<p =" ;">This is a paragraph.</p>

开始练习


❮ 上一节 下一节 ❯