HTML样式

本文概述

HTML样式用于更改或添加现有HTML元素上的样式。每个HTML元素都有一个默认样式, 例如背景颜色为白色, 文本颜色为黑色等。

样式属性可以与任何HTML标记一起使用。要将样式应用于HTML标签, 你应该具有CSS属性的基本知识, 例如颜色, 背景色, 文本对齐, 字体系列, 字体大小等。

样式属性的语法如下:

style= "property:value"

HTML样式颜色

color属性用于定义文本颜色。

让我们看一个简单的示例, 通过css的color属性对html标签进行样式设置。

<h3 style="color:green">This is Green Color</h3>
<h3 style="color:red">This is Red Color</h3>

立即测试

输出:

这是绿色

这是红色


HTML样式背景色

background-color属性用于定义HTML标签的背景色。

让我们看一个通过css background-color属性设置html标签样式的示例

<h3 style="background-color:yellow;">This is yellow background</h3>
<h3 style="background-color:red;color:white">This is red background</h3>

立即测试

输出:

这是黄色的背景

这是红色背景


HTML Style字体家族

font-family属性指定HTML标签的字体系列。

让我们看一个通过css font-family属性设置html标签样式的示例

<h3 style="font-family:times new roman">This is times new roman font family</h3>
<p style="font-family:arial">This is arial font family</p>

立即测试

输出:

这是时代新的罗马字体家族

这是arial字体家族


HTML样式的字体大小

font-size属性用于定义HTML标签的文本大小。

让我们看一个font-size属性的例子

<h3 style="font-size:200%">This is 200% h3 tag</h3>
<p style="font-size:200%">This is 200% p tag</p>

立即测试

输出:

这是200%的h3标签

这是200%p标签


HTML样式文本对齐

text-align属性用于定义HTML元素的水平文本对齐方式。

让我们看一个通过css text-align属性设置html标签样式的示例

<h3 style="text-align:right;background-color:pink;">This text is located at right side</h3>
<p style="text-align:center;background-color:pink;">This text is located at center side</p>

立即测试

如果要将标题放在中心或左边, 请分别使用“ text-align:center”或“ text-align:left”。

输出:

此文字位于右侧

这段文字位于中间

HTML5不支持旧版HTML中支持的<center>标记。

支持的浏览器

Element Chrome IE Firefox Opera Safari
style attribute Yes Yes Yes Yes Yes

如果你想进一步了解HTML样式, 可以在CSS教程中阅读。

微信公众号
手机浏览(小程序)
0
分享到:
没有账号? 忘记密码?