主页 > 电子产品 >

如何更改HTML中的文本颜色

2024-01-16 18:14 电子产品

方法 1使用CSS

更改文本颜色的最佳方法是使用CSS。HTML5不支持旧版HTML的 <font> 属性。因此，最好是使用CSS来定义各元素的样式。

这种方法同样适用于外部样式表（单独的CSS文件）。下面是一些使用内部样式表的HTML文件示例。

如果你使用的内部样式表，那就能在该标签中定义自己的样式。

当<style>标签在<head>标签中时，<style>标签内部的CSS将被应用于页面上任何适用的元素。当您完成时，HTML文件的开头部分看起来就像是下面这样：

<!DOCTYPE html><html><head><style></style></head>

您会使用<style>部分来定义页面上不同元素的外观。比如说，要更改页面所有正文的样式，则输入以下内容：

<!DOCTYPE html><html><head><style>body {}</style></head>

color:属性将告诉页面对该元素使用哪种文本颜色。在本例中，它将更改所有正文文本的颜色，而这些文本也是页面上所有文本的默认元素：

<!DOCTYPE html><html><head><style>body {color:}</style></head>

输入颜色的方法分为三种：名称、十六进制值或RGB值。例如，要设为蓝色，则可以输入blue、rgb(0, 0, 255)或#0000FF。

<!DOCTYPE html><html><head><style>body {color: red;}</style></head>

你可以使用不同的选择器来更改页面不同部分的文本颜色：

<!DOCTYPE html><html><head><style>body {color: red;}h1 {color: #00FF00;}p {color: rgb(0,0,255)}</style></head><body><h1>This header will be green.</h1><p>This paragraph will be blue.</p>This body text will be red.</body></html>

你可以定义一个类，然后将其应用于整个页面上的任何元素，从而马上添加这种类样式。例如，在以下文件中，".redtext"类会让应用于的所有元素都使用红色文本：

<!DOCTYPE html><html><head><style>.redtext {color: red;}</style></head><body><h1 class="redtext">This heading will be red</h1><p>This paragraph will be normal.</p><p class="redtext">This paragraph will be red</p></body></html>