如何更改HTML中的文本颜色

在超文本中可以使用 <font> 标签来改变文本的颜色，然而新版本HTML5不再支持这种方法。你需要改为使用CSS来自定义网页中各元素的文本颜色。这样将确保网页能与各种浏览器兼容。

在超文本中可以使用 <font> 标签来改变文本的颜色，然而新版本HTML5不再支持这种方法。你需要改为使用CSS来自定义网页中各元素的文本颜色。这样将确保网页能与各种浏览器兼容。

步骤

方法 1

方法 1 的 2:

使用CSS

1
打开HTML文件。更改文本颜色的最佳方法是使用CSS。HTML5不支持旧版HTML的
<font>
属性。因此，最好是使用CSS来定义各元素的样式。
- 这种方法同样适用于外部样式表（单独的CSS文件）。下面是一些使用内部样式表的HTML文件示例。
2
将光标放在<head>标签内。如果你使用的内部样式表，那就能在该标签中定义自己的样式。
3
输入<style>来创建一个内部样式表。当<style>标签在<head>标签中时，<style>标签内部的CSS将被应用于页面上任何适用的元素。当您完成时，HTML文件的开头部分看起来就像是下面这样：
```
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
```
4
输入要更改其文本颜色的元素。您会使用<style>部分来定义页面上不同元素的外观。比如说，要更改页面所有正文的样式，则输入以下内容：
```
<!DOCTYPE html>
<html>
<head>
<style>
body {
}
</style>
</head>
```
5
在元素选择器中输入color:属性。
color:
属性将告诉页面对该元素使用哪种文本颜色。在本例中，它将更改所有正文文本的颜色，而这些文本也是页面上所有文本的默认元素：
```
<!DOCTYPE html>
<html>
<head>
<style>
body {
	color:
}
</style>
</head>
```
6
输入文本颜色。输入颜色的方法分为三种：名称、十六进制值或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>

8
定义一个CSS类而不是去更改一个元素。你可以定义一个类，然后将其应用于整个页面上的任何元素，从而马上添加这种类样式。例如，在以下文件中，".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>
```

方法 2

方法 2 的 2:

使用级联样式属性

1
打开HTML文件。你可以使用级联样式属性来更改页面中某个元素的样式。这种方法对快速更改一两处样式很有用，但不建议用于大范围更改。如果是全面的样式更改，还是要用上一种方法。
2
在文件中找到要更改的元素。你可以使用级联样式属性来更改任何元素的文本颜色。例如，你想更改特定标题的文本颜色，则要在文件中找到它：
```
<!DOCTYPE html>
<html>
<body>
<h1>This is the header you want to change</h1>
</body>
</html>
```

将样式属性添加到元素。在要更改的元素的开始标记内输入

style=""

：

<!DOCTYPE html>
<html>
<body>
<h1 style="">This is the header you want to change</h1>
</body>
</html>

在内输入color:属性""。例如：

<!DOCTYPE html>
<html>
<body>
<h1 style="color:">This is the header you want to change</h1>
</body>
</html>

5
输入要将文本更改为的颜色。表示颜色的方法有三种。你可以输入颜色的名称、RGB值或者十六进制值。例如，要把颜色更改为黄色，你可以输入
yellow;
、
rgb(255,255,0);
或
#FFFF00;
：
```
<!DOCTYPE html>
<html>
<body>
<h1 style="color:#FFFF00;">This header is now yellow</h1>
</body>
</html>
```

小提示

你可以通过以下链接来查看支持的颜色名称及其十六进制值的列表：http://www.w3schools.com/colors/colors_names.asp

创意手工

《如何更改HTML中的文本颜色》由 dsbk 采用知识共享署名 4.0 国际许可协议进行许可, 转载请注明出处 https://dsbk.wdbfg.com/计算机与电子产品/如何更改HTML中的文本颜色.html

暂无评论