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

HTML_CSS 专栏收录该内容
2 篇文章 0 订阅

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

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

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

具体实现步骤如下:

  1. 在head标签中增加style样式
  2. 在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中其他标签内容中,增加标签来设置字体颜色和大小,如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>

三种方法的对比

方法灵活性统一性
方法一YesYes
方法二YesNo
方法三YesNo

由上表比较可以看出:

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

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

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

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

希望这篇文章对大家有所帮助。如果您还有更好的方法,请评论留言。
在这里插入图片描述

©️2022 CSDN 皮肤主题:编程工作室 设计师:CSDN官方博客 返回首页

打赏作者

天外来客1009

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值