在超文本中可以使用 <font> 标签来改变文本的颜色,然而新版本HTML5不再支持这种方法。你需要改为使用CSS来自定义网页中各元素的文本颜色。这样将确保网页能与各种浏览器兼容。
步骤
方法 1 的 2:
使用CSS
{"smallUrl":"https:\/\/www.zenmeban.com\/images_en\/thumb\/4\/4a\/157292-1.jpg\/v4-460px-157292-1.jpg","bigUrl":"https:\/\/www.zenmeban.com\/images\/thumb\/4\/4a\/157292-1.jpg\/v4-728px-157292-1.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
1
打开HTML文件。 更改文本颜色的最佳方法是使用CSS。HTML5不支持旧版HTML的 <font> 属性。因此,最好是使用CSS来定义各元素的样式。
这种方法同样适用于外部样式表(单独的CSS文件)。下面是一些使用内部样式表的HTML文件示例。
{"smallUrl":"https:\/\/www.zenmeban.com\/images_en\/thumb\/3\/31\/157292-2.jpg\/v4-460px-157292-2.jpg","bigUrl":"https:\/\/www.zenmeban.com\/images\/thumb\/3\/31\/157292-2.jpg\/v4-728px-157292-2.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
2
将光标放在<head> 标签内。 如果你使用的内部样式表,那就能在该标签中定义自己的样式。
{"smallUrl":"https:\/\/www.zenmeban.com\/images_en\/thumb\/d\/d1\/157292-3.jpg\/v4-460px-157292-3.jpg","bigUrl":"https:\/\/www.zenmeban.com\/images\/thumb\/d\/d1\/157292-3.jpg\/v4-728px-157292-3.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
3
输入<style> 来创建一个内部样式表。 当<style>标签在<head>标签中时,<style>标签内部的CSS将被应用于页面上任何适用的元素。当您完成时,HTML文件的开头部分看起来就像是下面这样:[1]
<!DOCTYPE html>
< html >
< head >
< style >
</ style >
</ head >
{"smallUrl":"https:\/\/www.zenmeban.com\/images_en\/thumb\/7\/7a\/157292-4.jpg\/v4-460px-157292-4.jpg","bigUrl":"https:\/\/www.zenmeban.com\/images\/thumb\/7\/7a\/157292-4.jpg\/v4-728px-157292-4.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
4
输入要更改其文本颜色的元素。 您会使用<style>部分来定义页面上不同元素的外观。比如说,要更改页面所有正文的样式,则输入以下内容:
<!DOCTYPE html>
< html >
< head >
< style >
body {
}
</ style >
</ head >
{"smallUrl":"https:\/\/www.zenmeban.com\/images_en\/thumb\/0\/0b\/157292-5.jpg\/v4-460px-157292-5.jpg","bigUrl":"https:\/\/www.zenmeban.com\/images\/thumb\/0\/0b\/157292-5.jpg\/v4-728px-157292-5.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
5
在元素选择器中输入color: 属性。 color: 属性将告诉页面对该元素使用哪种文本颜色。在本例中,它将更改所有正文文本的颜色,而这些文本也是页面上所有文本的默认元素:
<!DOCTYPE html>
< html >
< head >
< style >
body {
color :
}
</ style >
</ head >
{"smallUrl":"https:\/\/www.zenmeban.com\/images_en\/thumb\/e\/ed\/157292-6.jpg\/v4-460px-157292-6.jpg","bigUrl":"https:\/\/www.zenmeban.com\/images\/thumb\/e\/ed\/157292-6.jpg\/v4-728px-157292-6.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
6
输入文本颜色。 输入颜色的方法分为三种:名称、十六进制值或RGB值。例如,要设为蓝色,则可以输入blue 、rgb(0, 0, 255) 或#0000FF 。
<!DOCTYPE html>
< html >
< head >
< style >
body {
color : red ;
}
</ style >
</ head >
{"smallUrl":"https:\/\/www.zenmeban.com\/images_en\/thumb\/0\/0e\/157292-7.jpg\/v4-460px-157292-7.jpg","bigUrl":"https:\/\/www.zenmeban.com\/images\/thumb\/0\/0e\/157292-7.jpg\/v4-728px-157292-7.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
7
添加其他选择器来更改不同元素的颜色。 你可以使用不同的选择器来更改页面不同部分的文本颜色:
<!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 >
{"smallUrl":"https:\/\/www.zenmeban.com\/images_en\/thumb\/a\/ab\/157292-8.jpg\/v4-460px-157292-8.jpg","bigUrl":"https:\/\/www.zenmeban.com\/images\/thumb\/a\/ab\/157292-8.jpg\/v4-728px-157292-8.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
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:
使用级联样式属性
{"smallUrl":"https:\/\/www.zenmeban.com\/images_en\/thumb\/9\/94\/157292-9.jpg\/v4-460px-157292-9.jpg","bigUrl":"https:\/\/www.zenmeban.com\/images\/thumb\/9\/94\/157292-9.jpg\/v4-728px-157292-9.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
1
打开HTML文件。 你可以使用级联样式属性来更改页面中某个元素的样式。这种方法对快速更改一两处样式很有用,但不建议用于大范围更改。如果是全面的样式更改,还是要用上一种方法。[2]
{"smallUrl":"https:\/\/www.zenmeban.com\/images_en\/thumb\/0\/0c\/157292-10.jpg\/v4-460px-157292-10.jpg","bigUrl":"https:\/\/www.zenmeban.com\/images\/thumb\/0\/0c\/157292-10.jpg\/v4-728px-157292-10.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
2
在文件中找到要更改的元素。 你可以使用级联样式属性来更改任何元素的文本颜色。例如,你想更改特定标题的文本颜色,则要在文件中找到它:
<!DOCTYPE html>
< html >
< body >
< h1 > This is the header you want to change</ h1 >
</ body >
</ html >
{"smallUrl":"https:\/\/www.zenmeban.com\/images_en\/thumb\/5\/5c\/157292-11.jpg\/v4-460px-157292-11.jpg","bigUrl":"https:\/\/www.zenmeban.com\/images\/thumb\/5\/5c\/157292-11.jpg\/v4-728px-157292-11.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
3
将样式属性添加到元素。 在要更改的元素的开始标记内输入style="" :
<!DOCTYPE html>
< html >
< body >
< h1 style = "" > This is the header you want to change</ h1 >
</ body >
</ html >
{"smallUrl":"https:\/\/www.zenmeban.com\/images_en\/thumb\/e\/ea\/157292-12.jpg\/v4-460px-157292-12.jpg","bigUrl":"https:\/\/www.zenmeban.com\/images\/thumb\/e\/ea\/157292-12.jpg\/v4-728px-157292-12.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
4
在内输入color: 属性"" 。 例如:
<!DOCTYPE html>
< html >
< body >
< h1 style = "color:" > This is the header you want to change</ h1 >
</ body >
</ html >
{"smallUrl":"https:\/\/www.zenmeban.com\/images_en\/thumb\/7\/76\/157292-13.jpg\/v4-460px-157292-13.jpg","bigUrl":"https:\/\/www.zenmeban.com\/images\/thumb\/7\/76\/157292-13.jpg\/v4-728px-157292-13.jpg","smallWidth":460,"smallHeight":345,"bigWidth":728,"bigHeight":546,"licensing":"<div class=\"mw-parser-output\"><\/div>"}
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