「测试开发全栈-HTML」(12)css字体颜色属性

SS Text(文本)属性可定义文本的外观，比如文本的颜色、对齐文本、装饰文本、文本缩进、行间距等。

用的最多的就是文本颜色，color属性用于定义文本的颜色。语法如下:

div {

color:red;

}

颜色的表现形式有:

预定义的颜色值: red、green、pink等

十六进制: #FF0000、#FF6600、#29D794等

RGB代码: rgb(255,0,0)或rgb(100%,0%,0%)等

看下效果:

对应的代码为：

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

div {

color: blue;

}

</style>

</head>

<body>

<div>人保说的是还有7次洗车，5次还是3次道路救援啥的</div>

</body>

</html>

所有div对应的都为蓝色。

使用第二种方法，16进制颜色来表示,先看下效果:

对应代码为:

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

/* div {

color: blue;

} */

div {

color: #FF0000;

}

</style>

</head>

<body>

<div>人保说的是还有7次洗车，5次还是3次道路救援啥的</div>

</body>

</html>

最后使用第三种方法，看下效果:

对应的代码为:

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

/* div {

color: blue;

} */

/* div {

color: #FF0000;

} */

div {

color: rgb(255, 193, 100);

}

</style>

</head>

<body>

<div>人保说的是还有7次洗车，5次还是3次道路救援啥的</div>

</body>

</html>

rgb竟然是red、green、blue，也是今天才知道的。

今天就先到这里了，中午休息~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>颜色渐变的文字</title>
<script language="javascript">
function Delta(sHex1,sHex2,iNum){
//计算每个字的变化量
var iHex1 = parseInt("0x"+sHex1);
var iHex2 = parseInt("0x"+sHex2);
return (iHex2 - iHex1)/(iNum-1);
}
function Colorful(sText,sColor1,sColor2){
if(sText.length<=1){
//如果只有一个字符，渐变无从谈起，直接输出并返回
document.write("<font style='color:#"+sColor1+";'>"+sText+"</font>");
return;
}
//RGB三色分离，分别获取变化的小量delta
var fDeltaR = Delta(sColor1.substring(0,2),sColor2.substring(0,2),sText.length);
var fDeltaG = Delta(sColor1.substring(2,4),sColor2.substring(2,4),sText.length);
var fDeltaB = Delta(sColor1.substring(4,6),sColor2.substring(4,6),sText.length);
var sColorR = parseInt("0x"+sColor1.substring(0,2));
var sColorG = parseInt("0x"+sColor1.substring(2,4));
var sColorB = parseInt("0x"+sColor1.substring(4,6));
for(var i=0;i<sText.length;i++){
document.write("<font style='color:rgb("+Math.round(sColorR)+","+Math.round(sColorG)+","+Math.round(sColorB)+");'>"+sText.substring(i,i+1)+"</font>");
/*每输出一个字符，颜色的三个分量都相应的变化
当字符输出完成时，正好由sColor1变成sColor2*/
sColorR += fDeltaR;
sColorG += fDeltaG;
sColorB += fDeltaB;
}
}
Colorful("春节(Spring Festival)中国民间最隆重最富有特色的传统节日，它标志农历旧的一年结束和新的一年的开始 。春节一般指除夕和正月初一 。但在民间，传统意义上的春节是指从腊月初八的腊祭或腊月二十三或二十四的祭灶，一直到正月十五，其中以除夕和正月初一为高潮。在春节期间，我国的汉族和很多少数民族都要举行各种活动以示庆祝。这些活动均以祭祀神佛、祭奠祖先、除旧布新、迎禧接福、祈求丰年为主要内容。活动丰富多彩，带有浓郁的民族特色。","FF3300","3366FF");
</script>
</head>
<body>
</body>
</html>

用时直接调用函数Colorful(),输入文字以及起始颜色和终止颜色值。

站开发入门指南：多种色值写法。

接下来给大家介绍几个常用的设置颜色色值的方式。颜色色值的设置在样式设置中是非常常用的，包括背景颜色、渐变颜色、边框颜色、字体颜色等等，很多的地方都可能需要用到颜色色值的设置。

·之前已经讲过一种最基础的方式，就是这种关键字的方式，也就是用英文单词这样的方式。之前讲过有很多颜色的名字都是可以用的，像之前一直用的设置颜色的方法也都是这种色值的方式，这种关键字的方式。

·另外一种是非常常用的，是十六进制。十六进制概念如果不理解其实也没有关系，可以简单的把它理解为有十六个数，0123456789，然后是aobcdef，从0到f是从小到大的逻辑。

它的写法大概是这样的样子，16进制的颜色的写法大概是这样的样子。这个样子的特点就是一开头这里是有个井号，然后是两两一组的，第一组就是表示红色，第二组是表示绿色，第三组是表示蓝色。

·ff就表示颜色，比如这里是红色，它是最浓的，颜色强度是最大的。三种颜色就相当于也是三原色去拼，拼起来就混合成一种最终的颜色效果。

·00就表示颜色没有绿色的色值，这里如果也是ff就表示蓝色也是最浓的。所以可以尝试的去把它设置一下，会发现它就变成了这样的颜色。

·像这种写法其实如果两两的字符是一样，其实可以简写成这样的一种写法。这两者其实相当于是一样的了。

有几种非常常用的颜色的色值，其实一看就应该知道的，给大家罗列一下。比如这种3个f，也就是这种6个f，其实是一样的，这个明显就是一个白色了，3个0就是没有，这个跟6个0是一样的，就是纯黑。

像这种直接写6个的，就是红色，正红色，ff放中间其实就是绿色，这样就是一个蓝色，这个应该都很好理解，就是三原色的概念。如果不了解三原色的概念，可以自己去查资料了解一下，可以给它去设置一下，看一下是不是蓝色，大家可以看到就是一个蓝色，这是16进制的最基本的用法。

但是它其实还可以加两位，加两位之后，最后的两位就是表示的是不透明度的概念。不透明度的概念其实这里也可以称作是alpha，阿尔法其实就是可以表示是不透明度的概念。像这00就是最小，就是0的不透明度，就是最小的不透明度，就是完全透明。

也可以试一下，比如用这里给它加一个00，这就没有了，ff其实不加不透明度的设定，其实它的不透明度就是1，就是完全的看得见，没有任何的透明的状态。

像这个颜色，这个16进制的色值，其实是不用去记的，因为很多设计软件里面都非常方便的去给到颜色的16进制的色值。比如可以看到这样的figma设计软件，选择填充颜色，会看到这里有很多的颜色的选项可以选，其中最好复制的就是HEX，HEX就是表示16进制，16进制颜色一复制，放到CSS代码里面，就直接就可以用了。它就可以生效了，所以是不用去记，不用去算某个色值是多少。

·然后像其他的后面要介绍这种rgb、hsl这几种，就是这里也能够让我们去很好的去知道具体的颜色的色值的设置。但是复制起来我觉得最方便的还是HEX，也就是16进制的，所以这个东西一般来说就是直接复制过来用。

·然后来看下RG.B，RG.B就很好理解了，RGB就是red、green还有就是blue，就是也是三原色，就这样一个设置，注意它的写法是这样的，RGB然后一个原跨号，然后里面是三个颜色的色值，然后中间用这种逗号来分隔一下，然后这个都是每一个颜色的色值都是0到255，0到255，0是最小，25是最大。

·如果说像这个，车里就是红色强度已经是最强了，是这样的一个意思，它这个数值越小，颜色强度就越弱。比如说可以把这个颜色给它复制过来看一下，它就是这样的一个颜色，比如说可以调一下，比如说125就变成这样的一个颜色了。

·那它也有一个RGBA，其实就是后面再加一位这种0到1的值，比如说0.2，0.2就是它的一个不透明度了，不透明度，比如说给它这里去设置一个0.2，那它就有这个不透明度透明的效果了。

·这个是RGB和RG.BA，这个也很好理解，注意它每一位都是0到255这样的一个设置方式，每一位的这个数值。

·如果是这个纯白纯黑，其实这里255、255、255，在255、255、255，三个255其实就是一个纯白，跟这个ff是一样的，然后纯黑是这样，零零零三个0。

·那这个其他的红色、这个就更好理解。红色就是255，其他都是0。绿色就是第二个255，其他都是0。蓝色255，其他都是0。

·来看一下另外一个叫HSL和H.S.LA。这个a大家一看就知道什么意思了，a还是阿尔法的意思，也就是它的不透明的值。

·HSL是什么意思？a是一种颜色模式。它其实英文的全称应该是Hue Saturation，还有lightnes.s，也就是色相、饱和度、亮度三个这样的方面来设置颜色的值。它的写法大概是这个样子，给大家看一下，这个我也很少用，是这样的写法。

·它这里其实就是HSL，三个部分分别对应H.SL。H其实是色轮的概念，它就是有个360度，所以H的范围是0到360。另外的两个S就是0到100%，L也是一样的0%到10.0%。如果是HSLA，它其实也是0到1，比如0.2，是这样一个模式。

所以它这个写法其实跟RGB的基本的格式是一样的，都是它的颜色模式的名字，圆括号，里面再是每一个对应的设置内容的值。这是这三种颜色的色值的设置模式。

·自己最常用的就是16进制的，还有比较常用的，还有就是RGB和RGBA。

在线咨询

上一篇：打造丝般顺滑的 H5 翻页库
下一篇：Web前端开发入门，HTML一张图学会，还在看数小时视频浪费时间？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

「测试开发全栈-HTML」(12)css字体颜色属性

您的项目需求