目录导航

在这里,我们将学习如何使用样式属性来样式化HTML元素。可以使用以下属性在HTML文档中设置文本样式:

  • background-color - 用于设置背景颜色。
  • font-family - 用于设置文本字体。
  • color - 用于设置文本颜色。
  • text-align- 用于设置文本对齐。
  • font-size - 设置文字大小。

下面是HTML样式元素的一般形式:

style="property1:value1;property2:value2;..."

在上面的代码片段中,property是CSS属性,value是CSS值。

1. HTML样式更改文本对齐方式

HTML text-align属性定义HTML元素的水平文本对齐方式。以下示例演示了如何更改HTML中的文本对齐方式:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>HTML教程</title>    
</head>
<body>
    <h2>HTML样式示例</h2>    
    <p style="text-align:center;">Welcome to nxtutor.com(中间对齐)</p>
    <p style="text-align:left;">这是向左边对齐的段落</p>    
    <p style="text-align:right;">这是向右边对齐的段落</p>
</body>
</html>

在浏览器中打开上面代码文件,显示结果如下:
HTML样式更改文本对齐方式

2. HTML样式更改背景颜色

一般来说网页的默认的背景色是白色,下面示例演示了如何更改网页的背景色:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>HTML教程</title>    
</head>
<body style="background-color:blue;color:white;">
    <h2>HTML样式示例</h2>    
    <p>使用 style 属性更改背景和文本颜色</ p>
    <p>可以使用background-color更改背景颜色。</ p>
    <p>使用 color 更改文本的颜色。</ p>
</body>
</html>

在浏览器中打开上面代码文件,显示结果如下:

3. HTML样式更改文本颜色

网页默认的文本颜色是黑色,下面示例演示如何更改网页中文本的颜色。

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>HTML教程</title>    
</head>
<body>
    <h2>HTML样式示例</h2>    
    <p style="color:red;">这是红色的文本。</p>    
    <p style="color:purple;">这是紫色(purple)的文本。</p>
    <p style="color:yellow;">这是黄色的文本,这白底有些看不清楚了。</p>
    <p style="color:green;">这是绿色的文本。</p>
    <p style="color:blue;">这是蓝色的文本。</p>
</body>
</html>

在浏览器中打开上面代码文件,显示结果如下:
HTML样式更改文本颜色

4. HTML样式来更改文本字体

可以使用HTML font-family属性来指定HTML元素的字体。以下示例显示了如何更改HTML中的文本字体:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>HTML教程</title>    
</head>
<body>
    <h2>HTML样式示例</h2>    
    <p style="font-family:sans-serif">HTML样式更改字体 (sans-serif)</p>
    <p style="font-family:Microsoft Yahei">HTML样式更改字体 (Microsoft Yahei)</p>
    <p style="font-family:courier">HTML样式更改字体 (courier)</p>
</body>
</html>

在浏览器中打开上面代码文件,显示结果如下:

HTML样式来更改文本字体