07-顏色屬性 我是段落 ...
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英文單詞 一般情況下常見的顏色都有對應的英文單詞, 但是英文單詞能夠表達的顏色是有限制的, 也就是說不是所有的顏色都能夠通過英文單詞來表達 1.2rgb rgb其實就是三原色, 其中r(red 紅色) g(green 綠色) b(blue 藍色) 格式: rgb(0,0,0) 那麼這個格式中的 第一個數字就是用來設置三原色的光源元件紅色顯示的亮度 第二個數字就是用來設置三原色的光源元件綠色顯示的亮度 第三個數字就是用來設置三原色的光源元件藍色顯示的亮度 這其中的每一個數字它的取值是0-255之前, 0代表不發光, 255代表發光, 值越大就越亮 紅色: rgb(255,0,0); 綠色: rgb(0,255,0); 藍色: rgb(0,0,255); 黑色: rgb(0,0,0); 白色: rgb(255,255,255); 在前端開發中其實並不常用黑色 只要讓紅色/綠色/藍色的值都一樣就是灰色 而且如果這三個值越小那麼就越偏黑色, 越大就越偏白色 例如: color: rgb(200,200,200); 1.3rgba rgba中的rgb和前面講解的一樣, 只不過多了一個a 那麼這個a呢代表透明度, 取值是0-1, 取值越小就越透明 例如: color: rgba(255,0,0,0.2); 1.4十六進位 在前端開發中通過十六進位來表示顏色, 其實本質就是RGB 十六進位中是通過每兩位表示一個顏色 例如: #FFEE00 FF表示R EE表示G 00表示B 什麼是十六進位? 十六進位和十進位一樣都是一種計數的方式 在十進位中取值範圍0-9, 逢十進一 在十六進位中取值範圍0-F, 逢十六進一 9 a 10 b 11 c 12 d 13 e 14 f 15 10 16 11 17 12 18 十六進位和十進位轉換的公式 用十六進位的第一位*16 + 十六進位的第二位 = 十進位 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十六進位縮寫 在CSS中只要十六進位的顏色每兩位的值都是一樣的, 那麼就可以簡寫為一位 例如: #FFEE00 == #FE0 註意點: 1.如果當前顏色對應的兩位數字不一樣, 那麼就不能簡寫 #123456; 2.如果兩位相同的數字不是屬於同一個顏色的, 也不能簡寫 #122334 --> <p>我是段落</p> </body> </html>
