怎么在HTML中更改字体颜色

这篇文章介绍如何在HTML文件中更改颜色。HTML5已不再使用HTML字体标记,你可以使用CSS来更改HTML页面文字的颜色。如果你正在使用旧版HTML,那就还是可根据需要使用HTML字体颜色标记。

方法 1 的 2:

使用CSS

  1. {"smallUrl":"https:\/\/www.zenmeban.com\/images_en\/thumb\/8\/86\/122247-1-1.jpg\/v4-460px-122247-1-1.jpg","bigUrl":"https:\/\/www.zenmeban.com\/images\/thumb\/8\/86\/122247-1-1.jpg\/v4-728px-122247-1-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 1 选择文字颜色。你可以使用红色等基础颜色来显示文字,但如果需要更细致的色调,就要用到HTML颜色生成器:
    • 在电脑浏览器中,前往 https://www.w3schools.com/colors/colors_picker.asp 。
    • 在页面顶部的六角形色盘中选择一种基础颜色。
    • 在页面右侧滚动至要使用的色调。
    • 留意色调右侧的6位数编号。
  2. {"smallUrl":"https:\/\/www.zenmeban.com\/images_en\/thumb\/3\/35\/122247-2-1.jpg\/v4-460px-122247-2-1.jpg","bigUrl":"https:\/\/www.zenmeban.com\/images\/thumb\/3\/35\/122247-2-1.jpg\/v4-728px-122247-2-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 2 打开HTML文档。打开要更改字体颜色的文档。
    • 如果没有HTML文档,先创建一个,然后继续下一步。
  3. {"smallUrl":"https:\/\/www.zenmeban.com\/images_en\/thumb\/d\/dc\/122247-3-1.jpg\/v4-460px-122247-3-1.jpg","bigUrl":"https:\/\/www.zenmeban.com\/images\/thumb\/d\/dc\/122247-3-1.jpg\/v4-728px-122247-3-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 3 找到要更改颜色的文字。在文档中滚动,找到要更改颜色的段落、标题或其他形式的文字。
  4. {"smallUrl":"https:\/\/www.zenmeban.com\/images_en\/thumb\/c\/c5\/122247-4-1.jpg\/v4-460px-122247-4-1.jpg","bigUrl":"https:\/\/www.zenmeban.com\/images\/thumb\/c\/c5\/122247-4-1.jpg\/v4-728px-122247-4-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 4 注意文字的标记。例如,如果是标题,你会在起始位置看到“<h1>”。
  5. {"smallUrl":"https:\/\/www.zenmeban.com\/images_en\/thumb\/4\/48\/122247-5-1.jpg\/v4-460px-122247-5-1.jpg","bigUrl":"https:\/\/www.zenmeban.com\/images\/thumb\/4\/48\/122247-5-1.jpg\/v4-728px-122247-5-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 5 在文档的顶部加上“head”和“style”部分。在“<html>”标记下输入<head>,按 Enter,在“<head>”标记下输入<style>,按两次 Enter,然后输入两者的结束标记。结果应如下所示:
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    
    </style>
    </head>
    
    <body>
    
  6. {"smallUrl":"https:\/\/www.zenmeban.com\/images_en\/thumb\/d\/d6\/122247-6-1.jpg\/v4-460px-122247-6-1.jpg","bigUrl":"https:\/\/www.zenmeban.com\/images\/thumb\/d\/d6\/122247-6-1.jpg\/v4-728px-122247-6-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 6 输入“color”样式标记。单击“<style></style>”标记中间的空格,然后输入以下代码,注意要将“red”替换为自己选择的颜色代码,将“<h1>”替换为要更改颜色的文字标记:
    <h1> {
           color: red;
    }
    
  7. {"smallUrl":"https:\/\/www.zenmeban.com\/images_en\/thumb\/7\/71\/122247-7-1.jpg\/v4-460px-122247-7-1.jpg","bigUrl":"https:\/\/www.zenmeban.com\/images\/thumb\/7\/71\/122247-7-1.jpg\/v4-728px-122247-7-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 7 复查文档。页面标题应如下所示:
    <!DOCTYPE html>
    <html>
    <head>
    <style>
    <h1> {
           color: red;
    }
    </style>
    </head>
    <body>
    
  8. {"smallUrl":"https:\/\/www.zenmeban.com\/images_en\/thumb\/6\/68\/122247-8-1.jpg\/v4-460px-122247-8-1.jpg","bigUrl":"https:\/\/www.zenmeban.com\/images\/thumb\/6\/68\/122247-8-1.jpg\/v4-728px-122247-8-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 8 统一正文的颜色。如果要把文档的正文更改为同一种颜色,那就输入以下代码,并把“black”替换为想要的颜色:
    body {
           color: black;
    }
    
方法 2 的 2:

使用HTML标记

  1. {"smallUrl":"https:\/\/www.zenmeban.com\/images_en\/thumb\/0\/08\/122247-9-1.jpg\/v4-460px-122247-9-1.jpg","bigUrl":"https:\/\/www.zenmeban.com\/images\/thumb\/0\/08\/122247-9-1.jpg\/v4-728px-122247-9-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 1 选择文字颜色。你可以使用红色等基础颜色来显示文字,但如果需要更细致的色调,就要用到HTML颜色生成器:
    • 在电脑浏览器中,前往 https://www.w3schools.com/colors/colors_picker.asp 。
    • 在页面顶部的六角形色盘中选择基础颜色。
    • 在页面右侧滚动至要使用的色调。
    • 留意色调右侧的6位数编号。
  2. {"smallUrl":"https:\/\/www.zenmeban.com\/images_en\/thumb\/8\/80\/122247-10-1.jpg\/v4-460px-122247-10-1.jpg","bigUrl":"https:\/\/www.zenmeban.com\/images\/thumb\/8\/80\/122247-10-1.jpg\/v4-728px-122247-10-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 2 打开HTML文档。打开要更改字体颜色的文档。
    • 如果没有HTML文档,先创建一个,然后继续下一步。
  3. {"smallUrl":"https:\/\/www.zenmeban.com\/images_en\/thumb\/a\/a1\/122247-11-1.jpg\/v4-460px-122247-11-1.jpg","bigUrl":"https:\/\/www.zenmeban.com\/images\/thumb\/a\/a1\/122247-11-1.jpg\/v4-728px-122247-11-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 3 找到要更改颜色的文字。滚动文档,直到找到要更改颜色的段落、标题或其他形式的文字。
  4. {"smallUrl":"https:\/\/www.zenmeban.com\/images_en\/thumb\/b\/be\/122247-12-1.jpg\/v4-460px-122247-12-1.jpg","bigUrl":"https:\/\/www.zenmeban.com\/images\/thumb\/b\/be\/122247-12-1.jpg\/v4-728px-122247-12-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 4 添加“font”起始标记。单击要更改颜色的文字左侧,然后输入以下代码,注意要将“red”改成想要的颜色:[1]
    <font color="red">
    
  5. {"smallUrl":"https:\/\/www.zenmeban.com\/images_en\/thumb\/3\/33\/122247-13-1.jpg\/v4-460px-122247-13-1.jpg","bigUrl":"https:\/\/www.zenmeban.com\/images\/thumb\/3\/33\/122247-13-1.jpg\/v4-728px-122247-13-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"} 5 添加“font”结束标记。单击要更改颜色的文字末尾,然后输入</font>
    <font color="red">This text is red!</font>
    

小提示

  • HTML颜色代码分为以下几个部分:前两个字符代表红色的色度,中间两个字符代表绿色的色度,最后两个字符代表蓝色的色度。可以在“00”到“99”之间选择每种颜色的含量。如果要最大限度地使用某种颜色,输入“FF”来代替数字,例如“0000FF”代表纯蓝。
  • 提高页面的阅读体验。如果在白色的背景上使用亮色,或在黑色背景上使用暗色,就会很难看清文字。
  • 型号较老的显示器只能显示约65000种颜色,某些更老的型号甚至只能显示256色,但绝大部分网络用户都能看到你指定的颜色。[2]

警告

  • XHTML 1.0 Strict DTD不支持字体元素。

<<:  怎么在生活中寻找快乐

>>:  怎么解梦

怎么煎鱼肉

煎肉和煎鱼是法国烹饪方式中很常见的技术。传统中,煎鱼都是用的鲑鱼,但是如今,各种类型的家禽和海鲜都可...

怎么煮栗子

你可能明白这句话的每个字 "在火上烤栗子" ,但你知道要如何煮栗子吗? 栗子有丰盛的味道有如坚果般的...

怎么求根式的乘积

根号 (√)代表了一个数字的平方根。你可以在很多地方看到这个符号,比如在算数中,甚至在木工设计里,以...

怎么对待女朋友

你找到了心仪的那个她,想把自己最好的都给她?善待女友并不难。只要你按照文中的一些基本要求做,如说话要...

怎么风干湿地毯

如果家里的小地毯湿了,最好的方法是将整张地毯移开晾干。但是如果是居室满铺地毯,或是其他面积太大、不方...