1、新建html文件和css文件
①在桌面新建一个文件夹，然后新建两个text文件；
②分别将text文件重命名为index.html和css.css。
2、输入html代码
①用记事本打开index.html文件，输入以下代码；
<html>
<head>
<title>html修改字体颜色的几种方式</title>
<link href="css.css"/>
</head>
<body>
<p>字体颜色的不同设置方法</p>
</body>
</html>
②用浏览器打开浏览效果。
3、标签内嵌入字体标签设置颜色。
①编辑index.html，在<p>标签内输入以下代码；
<font color="#008252">字体颜色的不同设置方法</font>
②浏览器浏览效果。
4、标签内嵌入style样式设置颜色。
①另起一行字体，并在标签内输入以下代码；
<p style="color:#FF0000">
②在浏览器中检查效果。
5、网页内部嵌入标签选择器样式设置颜色。
①给文字的<p>标签命名一个ID；
②在<head></head>之间输入以下代码；
<style>
#p1{color:#FFFF00;/*标签选择器*/}
</style>
③浏览器中查看效果。
6、网页内嵌入类选择器设置颜色。
①给文字的标签命名一个Class；
②在<style></style>中输入以下代码；
.p1{color:#D1f3c6;/*类选择器*/}
③浏览器查看效果。
7、外部CSS样式设置颜色。
①在网页头部输入以下连接CSS外部文件代码；
<link href="css.css"/>
②在网页中写入以下代码；
<p id="p2">字体颜色的不同设置方法</p>
<p class="p2">字体颜色的不同设置方法</p>
③用记事本方式打开css文件，输入以下代码；
④浏览器检查效果变化。
HTML主要是用来写页面布局的，过程中经常需要设置页面某些字体的颜色，通常有三种常见方式可以进行自定义设置：
1、通过外部CSS样式来设置。可以在head标签中增加style样式，在body中的其他标签，如h1，p，div等开始标签中，增加class="上述style中定义的名称，如blue"即可。代码实现如下：
2、通过内部CSS样式来设置。在body中的其他标签，如h1，p，div等开始标签中，增加style="color:white;font-size:25px;"即可。代码实现如下：
3、通过font标签来设置。在body中其他标签内容中，增加font标签来设置字体颜色和大小，如color="yellow" size="5"。需要注意的是，size的最大值是7，并且设置字体颜色和大小都是用等号赋值，前两种CSS样式是通过英文的冒号来赋值。代码实现如下：
扩展资料
HTML网页上定义字体大小有常见三种单位，分别是：px、em、pt。
1、px是pixel缩写，是基于像素的单位.在浏览网页过程中，屏幕上的文字、图片等会随屏幕的分辨率变化而变化，一个100px宽度大小的图片，在800×600分辨率下，要占屏幕宽度的1/8，但在1024×768下，则只占约1/10。所以如果在定义字体大小时，使用px作为单位，那一旦用户改变显示器分辨率从800到1024，用户实际看到的文字就要变“小”（自然长度单位），甚至会看不清，影响浏览。
2、em即％，是相对单位，是一个相对长度单位，最初是指字母M的宽度，故名em。现指的是字符宽度的倍数，用法类似百分比，如：0.8em, 1.2em,2em等。通常1em=16px。，一般用来测量长度的通用单位(例如元素周转的页边空白和填充),当用于指定字体大小时,em单位是指父元素的字体大小。
3、pt是point(磅)缩写，是一种固定长度的度量单位,大小为1/72英寸。如果在web上使用pt做单位的文字，字体的大小在不同屏幕（同样分辨率）下一样，这样可能会对排版有影响，但在Word中使用pt相当方便。因为使用Word主要目的都不是为了屏幕浏览，而是输出打印。当打印到实体时，pt作为一个自然长度单位就方便实用了：比如Word中普通的文档都用“宋体 9pt”，标题用“黑体 16pt”等等，无论电脑怎么设置，打印出来永远就是这么大。
参考资料
<span style='color:red;'>红色</span><br />
使用<span>标签不会有<p>段落的大间距，不会像<font>标签的不易维护,
因其本身的不固定格式，是最灵活的
color="#F00>红色</font>
可以直接用这个代码，
#F00
这个是代表红色，可以更换其他颜色。
