H5 顏色屬性

時間 2019-11-10
標籤 h5 顏色屬性简体版
原文原文鏈接
07-顏色屬性html
我是段落前端
<!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>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。