Text Code-Text Color - 书目录

Text Code-Text Color

Text Color

在HTML中,您可以使用层叠样式表(CSS)更改文本颜色。您可以使用内联样式表,嵌入式样式表或外部样式表更改文本颜色。

出于这些示例的目的,我们将使用内联样式表,但是,我鼓励您尽可能使用外部样式表。

在HTML中,您可以使用颜色名称,十六进制值(也称为“十六进制值”或“ 十六进制颜色代码 ”)或RGB值指定颜色。

颜色名称

您可以使用颜色名称来更改文字颜色:

<p style="color:blue;">You can change the text color of a whole sentence or paragraph...</p>
<p>...or you can change the text color of one <span style="color:green;">word</span> or even a single l<span style="color:red;">e</span>tter.</p>

十六进制值

您可以使用十六进制值指定文本颜色。

完整的十六进制符号

您可以使用完整的十六进制值更改文本颜色:

<p style="color:#0000ff;">You can change the text color of a whole sentence or paragraph...</p>
<p>...or you can change the text color of one <span style="color:#00ff00;">word</span> or even a single l<span style="color:#ff0000;">e</span>tter.</p>

十六进制速记

根据完整的十六进制值,可以将其从六位数缩短为三位数。如果六位数值由三个双打组成(每个双倍代表红色,绿色或蓝色),则只能执行此操作。比如990000可以缩短为900。您可以这样做,因为在简写版本中,每个数字代表两位数字。

例如,你不能缩短,fe0f00因为红色和绿色值由不同的数字(fe和0f分别)组成。

以下是使用十六进制速记更改文本颜色的示例:

<p style="color:#00f;">You can change the text color of a whole sentence or paragraph...</p>
<p>...or you can change the text color of one <span style="color:#0f0;">word</span> or even a single l<span style="color:#f00;">e</span>tter.</p>

RGB值

您也可以使用RGB值指定文字颜色。您可以指定整数值或百分比值。例如,您可以将颜色表达red为rgb(255,0,0)或rgb(100%,0%,0%)。

RGB整数范围

<p style="color:rgb(0,0,255);">You can change the text color of a whole sentence or paragraph...</p>
<p>...or you can change the text color of one <span style="color:rgb(0,255,00);">word</span> or even a single l<span style="rgb(255,0,0);">e</span>tter.</p>

RGB百分比范围

<p style="color:rgb(0%,0%,100%);">You can change the text color of a whole sentence or paragraph...</p>
<p>...or you can change the text color of one <span style="color:rgb(0%,100%,0%);">word</span> or even a single l<span style="rgb(100%,0%,0%);">e</span>tter.</p>

RGBA值

使用CSS3,您可以使用RGBA值指定文本颜色。在这种情况下,“A”是指“Alpha透明度”或不透明度。

请注意,在撰写本文时,CSS3仍处于草稿状态,并且指定颜色的RGBA方法的浏览器支持受到限制。因此,如果您的浏览器未正确显示此示例,则可能是因为它不支持RGBA方法。

<div style="background-image:url(http://www.html.am/images/html-codes/links/boracay-white-beach-sunset-300x225.jpg);width:300px;height:225px;">
<p style="font-size:140px;font-weight:bold;color:rgba(255,205,0,0.7);">YES</p>
</div>

HSL价值

CSS3还允许您使用HSL颜色值设置文本颜色。HSL代表色调 – 饱和度 – 亮度,并且是创建颜色的更直观的方式。

请注意,在撰写本文时,此方法的浏览器支持受到限制。因此,如果此示例无法正确显示,可能是因为您的浏览器不支持HSL方法来指定颜色。

<p style="color:hsl(240,100%,50%);">You can change the text color of a whole sentence or paragraph...</p>
<p>...or you can change the text color of one <span style="color:hsl(240,100%,50%);">word</span> or even a single l<span style="hsl(240,100%,50%);">e</span>tter.</p>

HSLA价值

与RGBA模型类似,HSLA模型允许您指定alpha透明度。

<div style="background-image:url(http://www.html.am/images/html-codes/links/boracay-white-beach-sunset-300x225.jpg);width:300px;height:225px;">
<p style="font-size:140px;font-weight:bold;color:hsla(240,100%,50%,0.7);">YES</p>
</div>

HTML文本颜色生成器

您还可以使用文本生成器快速为HTML生成颜色代码。

133766

 

英语原文:http://www.html.am/html-codes/text/text-color.cfm 由工具自动翻译,由书目录整理