07-顏色屬性
我是段落
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>07-顏色屬性</title> <style> p{ /*color: red;*/ /*color: rgb(255,0,0);*/ /*color: rgba(255,0,0,1);*/ color: #FF0000; color: #F00; /*color: rgba(255,0,0,0.2);*/ color: #ffee00; color: #fe0; color: #769abb; } </style> </head> <body> <!-- 1.在CSS中如何通過color屬性來修改文字顏色 格式: color: 值; 取值: 1.1英文單詞 一般情況下常見的顏色都有對應(yīng)的英文單詞, 但是英文單詞能夠表達(dá)的顏色是有限制的,
也就是說不是所有的顏色都能夠通過英文單詞來表達(dá) 1.2rgb rgb其實就是三原色, 其中r(red 紅色) g(green 綠色) b(blue 藍(lán)色) 格式: rgb(0,0,0) 那么這個格式中的 第一個數(shù)字就是用來設(shè)置三原色的光源元件紅色顯示的亮度 第二個數(shù)字就是用來設(shè)置三原色的光源元件綠色顯示的亮度 第三個數(shù)字就是用來設(shè)置三原色的光源元件藍(lán)色顯示的亮度 這其中的每一個數(shù)字它的取值是0-255之前, 0代表不發(fā)光, 255代表發(fā)光, 值越大就越亮 紅色: rgb(255,0,0); 綠色: rgb(0,255,0); 藍(lán)色: rgb(0,0,255); 黑色: rgb(0,0,0); 白色: rgb(255,255,255); 在前端開發(fā)中其實并不常用黑色 只要讓紅色/綠色/藍(lán)色的值都一樣就是灰色 而且如果這三個值越小那么就越偏黑色, 越大就越偏白色 例如: color: rgb(200,200,200); 1.3rgba rgba中的rgb和前面講解的一樣, 只不過多了一個a 那么這個a呢代表透明度, 取值是0-1, 取值越小就越透明 例如: color: rgba(255,0,0,0.2); 1.4十六進(jìn)制 在前端開發(fā)中通過十六進(jìn)制來表示顏色, 其實本質(zhì)就是RGB 十六進(jìn)制中是通過每兩位表示一個顏色 例如: #FFEE00 FF表示R EE表示G 00表示B 什么是十六進(jìn)制? 十六進(jìn)制和十進(jìn)制一樣都是一種計數(shù)的方式 在十進(jìn)制中取值范圍0-9, 逢十進(jìn)一 在十六進(jìn)制中取值范圍0-F, 逢十六進(jìn)一 9 a 10 b 11 c 12 d 13 e 14 f 15 10 16 11 17 12 18 十六進(jìn)制和十進(jìn)制轉(zhuǎn)換的公式 用十六進(jìn)制的第一位*16 + 十六進(jìn)制的第二位 = 十進(jìn)制 15 == 1*16 + 5 = 21 12 == 1*16 + 2 = 18 FF == F*16 + F == 15*16 + 15 == 240 + 15 = 255 00 == 0*16 + 0 = 0 1.5十六進(jìn)制縮寫 在CSS中只要十六進(jìn)制的顏色每兩位的值都是一樣的, 那么就可以簡寫為一位 例如: #FFEE00 == #FE0 注意點: 1.如果當(dāng)前顏色對應(yīng)的兩位數(shù)字不一樣, 那么就不能簡寫 #123456; 2.如果兩位相同的數(shù)字不是屬于同一個顏色的, 也不能簡寫 #122334 --> <p>我是段落</p> </body> </html>
【 微信掃一掃 】
