【学习笔记二】你知道HTML中如何设置字体颜色和大小吗

最新推荐文章于 2024-04-13 14:35:33 发布

weixin_34212189

最新推荐文章于 2024-04-13 14:35:33 发布

阅读量1.8k

点赞数 1

文章标签：前端 ViewUI

原文链接：https://juejin.im/post/5bb02d905188255c94464668

版权

接触过前端开发的人都知道，HTML主要是用来写页面布局的。我们在写这些布局时，经常需要设置页面某些字体的颜色和大小。

那你知道，HTML中如何设置字体颜色和大小吗？这篇文章就来总结下HTML中设置字体颜色和大小的常见方法有哪些。

常见方法一：通过外部CSS样式来设置

具体实现步骤如下：

在head标签中增加style样式
在body中的其他标签，如h1，p，div等开始标签中，增加class="上述style中定义的名称，如blue"即可。

代码实现如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8"/>
    <title>HTML属性</title>
    <style>
        .blue{
            color:blue;
            font-size:20px;
        }
    </style>
</head>
<body bgcolor="black">
<h1 align="left" class="blue">我是标题一，居左显示</h1>
<p align="left" class="blue">我是段落，上面标题通过属性align设置了left，使标题居左显示。</p>
</body>

</html>
复制代码

常见方法二：通过内部CSS样式来设置

具体实现步骤如下：

在body中的其他标签，如h1，p，div等开始标签中，增加style="color:white;font-size:25px;"即可。

代码实现如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8"/>
    <title>HTML属性</title>
    <style>
        .blue{
            color:blue;
            font-size:20px;
        }
    </style>
</head>
<body bgcolor="black">
<h2 align="center" style="color:white;font-size:25px;">我是标题二，居中显示</h2>
<p align="center" style="color:white;font-size:25px">我是段落，上面标题通过属性align设置了center，使标题居中显示。</p>
</body>

</html>
复制代码

常见方法三：通过font标签来设置

具体实现步骤如下：

在body中其他标签内容中，增加font标签来设置字体颜色和大小，如color="yellow" size="5"。需要注意的是，size的最大值是7，并且设置字体颜色和大小都是用等号赋值，前两种CSS样式是通过英文的冒号来赋值。

代码实现如下：

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8"/>
    <title>HTML属性</title>
    <style>
        .blue{
            color:blue;
            font-size:20px;
        }
    </style>
</head>
<body bgcolor="black">
<h3 align="right"><font color="yellow" size="5">我是标题三，居右显示</font></h3>
<p align="right"><font color="yellow" size="5">我是段落，上面的标题通过属性align设置了right，使标题居右显示</font></p>
</body>

</html>
复制代码

三种方法的对比

方法	灵活性	统一性
方法一	Yes	Yes
方法二	Yes	No
方法三	Yes	No

由上表比较可以看出：

方法一，通过外部CSS样式来设置字体颜色和大小是比较规范的做法，也比较灵活，统一修改一个地方即可。

方法二，通过内部CSS样式来设置字体颜色和大小也比较灵活，但不规范，每个地方单独设置，如果要修改就比较麻烦。

方法三，通过font标签来设置字体颜色和大小，和方法二类似，但HTML5.0已不支持标签，在 HTML 4.01 中，元素已废弃，不建议使用此标签，提示用CSS来代替font标签的使用。

所以，在此还是建议大家使用外部CSS样式来设置字体颜色和大小比较好。

希望这篇文章对大家有所帮助。如果您还有更好的方法，请评论留言。

weixin_34212189

关注

1
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
【学习笔记二】你知道HTML中如何设置字体颜色和大小吗

接触过前端开发的人都知道，HTML主要是用来写页面布局的。我们在写这些布局时，经常需要设置页面某些字体的颜色和大小。那你知道，HTML中如何设置字体颜色和大小吗？这篇文章就来总结下HTML中设置字体颜色和大小的常见方法有哪些。常见方法一：通过外部CSS样式来设置具体实现步骤如下：在head标签中增加style样式在body中的其他标签，如h1，p，div等开始标签中，增加class="...
复制链接

扫一扫