轻松上手,快乐学习!

HTML 样式


HTML style 属性用于改变 HTML 元素的样式。


实例

我是红色的

我是蓝色的

我是很大的

亲自试一试 »

HTML 的 style 属性

设置 HTML 元素的样式,可以通过 style 属性完成。

HTML style 属性语法:

<tagname style="property:value;">

property 是 CSS 属性。 value 是 CSS 属性值。

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


背景色

CSS background-color 属性定义HTML元素背景色。

实例

将页面的背景色设置为 powderblue:

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

<h1>这是一个标题</h1>
<p>这是一个段落。</p>

</body>
亲自试一试 »

实例

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

<body>

<h1 style="background-color:powderblue;">这是一个标题</h1>
<p style="background-color:tomato;">这是一个段落。</p>

</body>
亲自试一试 »

文本颜色

文本颜色 color 属性定义 HTML 元素的文本颜色:

实例

<h1 style="color:blue;">这是一个标题</h1>
<p style="color:red;">这是一个段落。</p>
亲自试一试 »

字体

CSS font-family 属性定义要用于 HTML 元素的字体:

实例

<h1 style="font-family:verdana;">这是一个标题</h1>
<p style="font-family:courier;">这是一个段落。</p>
亲自试一试 »

字体尺寸

CSS font-size 属性定义 HTML 元素的文本字体大小:

实例

<h1 style="font-size:300%;">这是一个标题</h1>
<p style="font-size:160%;">这是一个段落。</p>
亲自试一试 »

文本对齐

CSS text-align 文本对齐属性定义 HTML 元素的水平文本对齐方式:

实例

<h1 style="text-align:center;">居中标题</h1>
<p style="text-align:center;">居中段落。</p>
亲自试一试 »

本章小结

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

HTML 实验

学习训练

练习题:

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

<p =";">这是一个段落。</p>

开始练习