整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
SS Text(文本)屬性可定義文本的外觀，比如文本的顏色、對齊文本、裝飾文本、文本縮進、行間距等。
用的最多的就是文本顏色，color屬性用于定義文本的顏色。語法如下:
div {
color:red;
}
顏色的表現形式有:
預定義的顏色值: red、green、pink等
十六進制: #FF0000、#FF6600、#29D794等
RGB代碼: rgb(255,0,0)或rgb(100%,0%,0%)等
看下效果:
對應的代碼為：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
color: blue;
}
</style>
</head>
<body>
<div>人保說的是還有7次洗車，5次還是3次道路救援啥的</div>
</body>
</html>
所有div對應的都為藍色。
使用第二種方法，16進制顏色來表示,先看下效果:
對應代碼為:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* div {
color: blue;
} */
div {
color: #FF0000;
}
</style>
</head>
<body>
<div>人保說的是還有7次洗車，5次還是3次道路救援啥的</div>
</body>
</html>
最后使用第三種方法，看下效果:
對應的代碼為:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<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。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
