HTML主要是用来写页面布局的，过程中经常需要设置页面某些字体的颜色，通常有三种常见方式可以进行自定义设置：
1、通过外部CSS样式来设置。可以在head标签中增加style样式，在body中的其他标签，如h1，p，div等开始标签中，增加class="上述style中定义的名称，如blue"即可。代码实现如下：
2、通过内部CSS样式来设置。在body中的其他标签，如h1，p，div等开始标签中，增加style="color:whitefont-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”等等，无论电脑怎么设置，打印出来永远就是这么大。
参考资料百度百科：HTML
1、图为黑色、红色和紫色的HTML颜色代码表：
2、图为碧色、蓝色、绿色HTML颜色代码表：
3、图为绿色、黄色、橙色HTML颜色代码表：
4、图为深红色、棕色、深紫色HTML颜色代码表：
相关内容：
超文本标记语言，标准通用标记语言下的一个应用。
“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
超文本标记语言的结构包括“头”部分（英语：Head）、和“主体”部分（英语：Body），其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
HTML5 简单的颜色选取器
<!DOCTYPE html><html lang="zh">
<head>
<meta charset="gbk" />
<title>Canvas Example 4 (Detecting Colors)</title>
<script>
window.onload = function () {
//获取页面DOM元素
var preview = document.getElementById('preview')
var r = document.getElementById('r')
var g = document.getElementById('g')
var b = document.getElementById('b')
var a = document.getElementById('a')
var mx = document.getElementById('mx')
var my = document.getElementById('my')
var canvas = document.getElementById('myCanvas')
//绑定鼠标移动事件
canvas.addEventListener('mousemove', move, false)
var c = canvas.getContext('2d')
var building = new Image()
building.src = "cinema.png"//加载图片
building.onload=draw
function draw () {
c.drawImage(building, 0, 0, canvas.width, canvas.height)
}
function move (e) {
//在页面显示鼠标相对于窗口的坐标
mx.innerHTML = e.clientX
my.innerHTML = e.clientY
//获取图像数据
var img = c.getImageData(e.clientX, e.clientY, 1, 1)
var idata = img.data
//获取像素值
var red = idata[0]
var green = idata[1]
var blue = idata[2]
var alpha = idata[3]
//在页面显示像素的R，G，B，A值
r.innerHTML = red
g.innerHTML = green
b.innerHTML = blue
a.innerHTML = (alpha > 0) ? alpha : 'Transparent'
preview.style.backgroundColor = 'rgba(' + red + ', ' + green + ', ' + blue + ', ' + alpha + ')'
}
}
</script>
<style type="text/css" media="screen">
body { margin: 0px padding: 0px }
canvas {
border: 1px solid black
float: left
}
ul {
list-style: none
margin: 10px 10px 10px 10px
padding: 0px
float: left
}
ul li { font-weight: bold }
ul li span { font-weight: normal }
ul li #preview { width: 50px height: 50px border: 1px solid black }
</style>
</head>
<body>
<canvas id="myCanvas" width="300" height="300">
Your browser doesn't include support for the canvas tag.
</canvas>
<ul>
<li><div id="preview"></div></li>
<li>Red: <span id="r">NULL</span></li>
<li>Green: <span id="g">NULL</span></li>
<li>Blue: <span id="b">NULL</span></li>
<li>Alpha: <span id="a">NULL</span></li>
<li>Mouse X: <span id="mx">NULL</span></li>
<li>Mouse Y: <span id="my">NULL</span></li>
</ul>
</body>
</html>
