HTML5+CSS3 从入门到精通（2）
生活随笔
收集整理的這篇文章主要介紹了
HTML5+CSS3 从入门到精通（2）
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
目錄
CSS是什么？
常用選擇器
1. id選擇器
?2. 類選擇器
3. 通用選擇器
?復合選擇器
1. 交集選擇器
?2. 選擇器分組（并集選擇器）
?關(guān)系選擇器
1. 子元素選擇器
2. 后代選擇器
3. 兄弟選擇器
4. 通用兄弟選擇器
?屬性選擇器
?偽類選擇器
:first-child
:last-child
:nth - child( )
:first - of - type
:last - of - type
:nth - of - type
:not( )否定偽類
?超鏈接的偽類
:link
:visited
:hover?
:active
偽元素
::first - letter
::first-line
::selection
?編輯::before
::after
?繼承
?選擇器的權(quán)重
?! important
?像素和百分比
?em 與 rem
?RGB值
RGB
RGBA
?hsl
CSS是什么？
CSS 是“Cascading Style Sheet”的縮寫，中文意思為“層疊樣式表”。
CSS作用：
????????CSS 的主要作用是美化網(wǎng)頁，對網(wǎng)頁中元素的位置、字體、顏色、背景等屬性進行精確控制。
????????CSS 不僅可以靜態(tài)地修飾網(wǎng)頁，還可以配合 JavaScript 動態(tài)地修改網(wǎng)頁中元素的樣式。
常用選擇器
1. id選擇器
作用: 根據(jù)元素的id屬性值選中一個元素
語法: #id屬性值
例子: #box{ }
?2. 類選擇器
作用: 根據(jù)元素的class屬性值選中一組元素
語法:? .class屬性值
注意:? 類選擇器的定義需要用到一個英文的句號.
<!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>/* 選中類(class)是box的元素 */.box{}</style> </head> <body><!-- 定義個類 --><div class="box"></div> </body> </html>3. 通用選擇器
作用:? 選中頁面中的所有元素
語法:? *
用途：通用選擇器用星號*表示，它不匹配某個特定的 HTML 元素，而是匹配 HTML 文檔中的每個元素。在開發(fā)中，我們通常使用通用選擇器來清除 HTML 元素中默認的內(nèi)外邊距。
*{margin: 0;padding: 0;}?復合選擇器
1. 交集選擇器
作用: 選中同時復合多個條件的元素
語法: 選擇器1選擇器2選擇器3選擇器n { }?
注意點: 交集選擇器中如果有元素選擇器，必須使用元素選擇器開頭
<!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>/* 將class為red的div字體設置為紅色 */div.red{color: red;}</style> </head> <body><div class="red">hello world</div><span class="red">你好~ 朋友</span> </body> </html>?運行結(jié)果如下圖所示：
?
?2. 選擇器分組（并集選擇器）
作用：同時選擇多個選擇器對應的元素
語法：選擇器1,選擇器2,選擇器3,選擇器n{ }
比如：#b1,.p1,h1,span,div.red{ }
未設置字體大小前：
?設置后：
?關(guān)系選擇器
- 父元素
? 直接包含子元素的元素叫做父元素 - 子元素
? 直接被父元素包含的元素是子元素 - 祖先元素
? 直接或間接包含后代元素的元素叫做祖先元素，一個元素的父元素也是它的祖先元素 - 后代元素
? 直接或間接被祖先元素包含的元素叫做后代元素，子元素也是后代元素 - 兄弟元素
? 擁有相同父元素的元素是兄弟元素
1. 子元素選擇器
子選擇器只會匹配某個元素的直接后代
選擇器之間用大于號?>?分隔開
<!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 > span{color: tomato;}</style> </head> <body><div><span>我是第一個span</span><p><span>我是第二個span</span></p></div> </body> </html>運行結(jié)果如下圖所示：
?2. 后代選擇器
后代選擇器的定義方式就是將標簽名、class 屬性或 id 屬性等按照標簽的嵌套關(guān)系由外到內(nèi)的依次羅列，中間使用空格分開
<!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后所有的span元素 */div span{color: tomato;}</style> </head> <body><div><span>我是第一個span</span><p><span>我是第二個span</span></p></div> </body> </html>?運行結(jié)果如下圖所示：
?
?3. 兄弟選擇器
一、相鄰兄弟選擇器用于匹配某個元素之后緊鄰的另一個元素，這兩個元素擁有同一個父級元素并且不存在嵌套關(guān)系。
二、相鄰兄弟選擇器的定義需要用到加號?+，加號兩邊為相鄰的兩個元素，選擇器會匹配加號后面的元素。
<!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>/* 選中p相鄰的span元素 */p + span{color: blue;}</style> </head> <body><div><span>我是第1個span</span><p><span>我是第2個span</span></p><span>我是第3個span</span><span>我是第4個span</span><span>我是第5個span</span><span>我是第6個span</span></div> </body> </html>??運行結(jié)果如下圖所示：
?
?4. 通用兄弟選擇器
通用兄弟選擇器需要用到波浪號?~，波浪號兩邊為同一父級元素下的兩個元素，選擇器會匹配波浪號后面的元素
<!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>/* 選中與p是同級別的，p后面的所有span元素 */p ~ span{color: blue;}</style> </head> <body><div><span>我是第1個span</span><p><span>我是第2個span</span></p><span>我是第3個span</span><span>我是第4個span</span><span>我是第5個span</span><span>我是第6個span</span></div> </body> </html>運行結(jié)果如下圖所示：
?屬性選擇器
一、屬性選擇器用來匹配具有特定屬性的元素。
二、屬性選擇器的定義方式與標簽選擇器相似，只不過需要在標簽的后面使用方括號[ ]來指定標簽具有的屬性信息。
<!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[title]{color: chocolate;}</style> </head> <body><div title="hello">第一個</div><div title="hello">第二個</div><div title="hello">第三個</div><div>第四個</div> </body> </html>運行結(jié)果如下圖所示：
<!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[title = hello]{color: chocolate;}</style> </head> <body><div title="hello">第一個</div><div title="he">第二個</div><div title="hello">第三個</div><div>第四個</div> </body> </html>
運行結(jié)果如下圖所示：
<!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[title ^= h]{color: chocolate;}</style> </head> <body><div title="hello">第一個</div><div title="he">第二個</div><div title="hello">第三個</div><div title="world">第四個</div> </body> </html>
運行結(jié)果如下圖所示：
<!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>/* 選擇屬性值以指定值結(jié)尾的元素 */div[title $= o]{color: chocolate;}</style> </head> <body><div title="hello">第一個</div><div title="he">第二個</div><div title="hello">第三個</div><div title="world">第四個</div> </body> </html>
運行結(jié)果如下圖所示：
<!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[title *= o]{color: chocolate;}</style> </head> <body><div title="hello">第一個</div><div title="he">第二個</div><div title="hello">第三個</div><div title="world">第四個</div> </body> </html>
運行結(jié)果如下圖所示：
?偽類選擇器
偽類（不存在的類，特殊的類)? ? -?偽類用來描述一個元素的特殊狀態(tài)
比如：第一個子元素、被點擊的元素、鼠標移入的元素... 偽類一般情況下都是使用?:?開頭
:first-child
<!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>ul li:first-child{color: chocolate;}</style> </head> <body><ul><li>我是第1個</li><li>我是第2個</li><li>我是第3個</li><li>我是第4個</li><li>我是第5個</li></ul> </body> </html>運行結(jié)果如下圖所示：
?:last-child
<!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>ul li:last-child{color: chocolate;}</style> </head> <body><ul><li>我是第1個</li><li>我是第2個</li><li>我是第3個</li><li>我是第4個</li><li>我是第5個</li></ul> </body> </html>運行結(jié)果如下圖所示：
?:nth - child( )
特殊值:
n表示第n個 ，n的范圍0到正無窮
2n 或 even表示選中偶數(shù)位的元素
2n+1 或 odd 表示選中奇數(shù)位的元素
<!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>/* 選中奇數(shù)位 */ul li:nth-child(odd){color: chocolate;}</style> </head> <body><ul><li>我是第1個</li><li>我是第2個</li><li>我是第3個</li><li>我是第4個</li><li>我是第5個</li></ul> </body> </html>?運行結(jié)果如下圖所示：
?
: first - of - type
這些個偽類的功能和上述的類似，不通點是他們是在同類型元素中進行排序
<!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>/* 選中同類型第一個 */ul li:first-of-type{color: chocolate;}</style> </head> <body><ul><span>我是span</span><li>我是第1個</li><li>我是第2個</li><li>我是第3個</li><li>我是第4個</li><li>我是第5個</li></ul> </body> </html>?運行結(jié)果如下圖所示：
: last - of - type
<!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>/* 選中同類型最后一個 */ul li:last-of-type{color: chocolate;}</style> </head> <body><ul><span>我是span</span><li>我是第1個</li><li>我是第2個</li><li>我是第3個</li><li>我是第4個</li><li>我是第5個</li></ul> </body> </html>??運行結(jié)果如下圖所示：
?
: nth - of - type
<!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>/* 選中同類型的第二個 */ul li:nth-of-type(2){color: chocolate;}</style> </head> <body><ul><span>我是span</span><li>我是第1個</li><li>我是第2個</li><li>我是第3個</li><li>我是第4個</li><li>我是第5個</li></ul> </body> </html>??運行結(jié)果如下圖所示：
?:not( )否定偽類
將符合條件的元素從選擇器中去除
注意：:nth-child()是整體一個大的排序，而:nth-of-type()是同類型的排序
<!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>/* 選中除了第二個元素以外的所有的li */ul li:not(:nth-child(2)){color: chocolate;}</style> </head> <body><ul><span>我是span</span><li>我是第1個</li><li>我是第2個</li><li>我是第3個</li><li>我是第4個</li><li>我是第5個</li></ul> </body> </html>??運行結(jié)果如下圖所示：
<!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>/* 選中除了同類型第三個元素以外的所有的li */ul li:not(:nth-of-type(3)){color: chocolate;}</style> </head> <body><ul><span>我是span</span><li>我是第1個</li><li>我是第2個</li><li>我是第3個</li><li>我是第4個</li><li>我是第5個</li></ul> </body> </html>
??運行結(jié)果如下圖所示：
?超鏈接的偽類
:link
:link 用來表示沒訪問過的鏈接（正常的鏈接)
?當點擊鏈接為#的超鏈接，鏈接就會變一個顏色，而沒訪問過的鏈接就是正常的藍色??
如下圖：
注：?javascript:; 與 # 都可用作超鏈接的占位符
?我們可以用:link來設置沒訪問過的鏈接
<!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>/* 設置沒訪問過的鏈接，為橙色 */a:link{color: orange;}</style> </head> <body><a href="#">訪問過的</a><br><a href="javascript:;">我是沒訪問過的</a> </body> </html>?運行結(jié)果如下：
?
?:visited
:visited用來表示訪問過的鏈接
<!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>/* 設置沒訪問過的鏈接，為橙色 */a:link{color: orange;}/* 設置訪問過的鏈接，為紅色 */a:visited{color: red;}</style> </head> <body><a href="#">訪問過的</a><br><a href="javascript:;">我是沒訪問過的</a> </body> </html>??運行結(jié)果如下：
?注意：link 和 visited 只能給a使用，是超鏈接獨有的
:hover?
: hover用來表示鼠標移入的狀態(tài)
<!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>/* 設置沒訪問過的鏈接，為橙色 */a:link{color: orange;}/* 設置訪問過的鏈接，為紅色 */a:visited{color: red;}/* 設置鼠標移入超鏈接后，背景顏色為灰色 */a:hover{background-color: gray;}</style> </head> <body><a href="#">訪問過的</a><br><a href="javascript:;">我是沒訪問過的</a> </body> </html>?運行結(jié)果如下：
?:active
: active用來表示鼠標點擊
<!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>/* 設置沒訪問過的鏈接，為橙色 */a:link{color: orange;}/* 設置訪問過的鏈接，為紅色 */a:visited{color: red;}/* 設置鼠標移入超鏈接后，背景顏色為灰色 */a:hover{background-color: gray;}/* 當鼠標點擊，背景顏色變?yōu)?bfa */a:active{background-color: #bfa;}</style> </head> <body><a href="#">訪問過的</a><br><a href="javascript:;">我是沒訪問過的</a> </body> </html>??運行結(jié)果如下：
?
補充：?
?鏈接偽類先后順序被稱為?LVHA 順序：:link?—?:visited?—?:hover?—?:active。
?hover 和 active 可以綁定任意元素?
偽元素
偽元素：表示頁面中一些特殊的并不真實的存在的元素（特殊的位置)
偽元素使用::開頭
::first - letter
::first-line
::first - letter 表示第一個字母
::first - line 表示第一行
<!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>/* 將第一個字母 L大小設置為30個像素 */p::first-letter{font-size: 30px;}/* 設置第一行的背景顏色 */p::first-line{background-color: rgba(0, 0, 0, .3);}</style> </head> <body><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia cum non molestiae deleniti suscipit, earum odio distinctio et optio, pariatur ipsum tenetur ad praesentium nesciunt ut vitae neque dolor fuga.</p> </body> </html>??運行結(jié)果如下：
?::selection
表示選中的內(nèi)容
<!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>/* 將第一個字母 L大小設置為30個像素 */p::first-letter{font-size: 30px;}/* 設置第一行的背景顏色 */p::first-line{background-color: rgba(0, 0, 0, .3);}/* 設置選中后，字體顏色變?yōu)閞ed */p::selection{color: red;}</style> </head> <body><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia cum non molestiae deleniti suscipit, earum odio distinctio et optio, pariatur ipsum tenetur ad praesentium nesciunt ut vitae neque dolor fuga.</p> </body> </html>??運行結(jié)果如下：
::before
::after
: : before元素的開始
: : after元素的最后
? ?-? ??before 和 after 必須結(jié)合content屬性來使用
通過?content?屬性來為一個元素添加修飾性的內(nèi)容，此元素默認為行內(nèi)元素。
<!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>/* 在p元素的開頭加個 “綠色的心” */p::before{content: '?';color: #bfa;}/* 在span元素的結(jié)尾加個“紅心” */span::after{content: '?';color: red;}</style> </head> <body><p>您好啊</p><span>歡迎來學習</span> </body> </html>??運行結(jié)果如下：
?繼承
樣式的繼承，我們為一個元素設置的樣式同時也會應用到它的后代元素上繼承是發(fā)生在祖先與后代之間的
繼承的設計是為了方便我們的開發(fā)
利用繼承我們可以將一些通用的樣式統(tǒng)一設置到共同的祖先元素上
這樣只需設置一次即可讓所有的元素都具有該樣式
???運行結(jié)果如下：
注意:
并不是所有的樣式都會被繼承
比如背景相關(guān)的，布局相關(guān)……這些樣式都不會被繼承。
?運行結(jié)果如下：
?選擇器的權(quán)重
樣式的沖突
????????當我們通過不同的選擇器，選中相同的元素，并且為相同的樣式設置不同的值時，此時就發(fā)生了樣式的沖突。
????????發(fā)生樣式?jīng)_突時，應用哪個樣式由選擇器的權(quán)重（優(yōu)先級）決定
?選擇器的權(quán)重：
?
- 比較優(yōu)先級時，需要將所有的選擇器的優(yōu)先級進行相加計算，最后優(yōu)先級越高，則越優(yōu)先顯示（分組選擇器是單獨計算的)
- 選擇器的累加不會超過其最大的數(shù)量級，類選擇器在高也不會超過id選擇器
- 如果優(yōu)先級計算后相同，此時則優(yōu)先使用靠下的樣式
即使同一類相加起來再高，也不會超過其最大級
<!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>#first{color: red;}.red.blue.yello.hello{color: blue;}</style> </head> <body><div id="first" class="red blue yello hello"><span>您好！</span></div> </body> </html>運行結(jié)果如下：
?! important
可以在某一個樣式的后邊添加?! important ，則此時該樣式會獲取到最高的優(yōu)先級，甚至超過內(nèi)聯(lián)樣式。
注意：在開發(fā)中這個一定要慎用！
運行結(jié)果如下：
?
?像素和百分比
長度單位：
????????像素
????????屏幕（顯示器）實際上是由一個一個的小點點構(gòu)成的
????????不同屏幕的像素大小是不同的，像素越小的屏幕顯示的效果越清晰，所以同樣的200px在不同的設備下顯示效果不一樣
?百分比：
????????也可以將屬性值設置為相對于其父元素屬性的百分比
????????設置百分比可以使子元素跟隨父元素的改變而改變
<!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>.box1{width: 200px;height: 200px;background-color: tomato;}/* 子元素的寬高是父元素的50% */.box2{width: 50%;height: 50%;background-color: aqua;}</style> </head> <body><div class="box1"><div class="box2"></div></div> </body> </html>運行結(jié)果如下：
?em 與 rem
?em
-
em是相對于元素的字體大小來計算的
-
1em = 1 font-size
-
em會根據(jù)字體大小的改變而改變
rem
- rem是相對于根元素(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>.box1{font-size: 20px;/* 相當于 20em*20px=400px */width: 20em;/* 15em*20px=300px */height: 15em;background-color: chocolate;}</style> </head> <body><div class="box1"></div> </body> </html>
運行結(jié)果如下：
<!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>html{font-size: 10px;}.box1{font-size: 20px;/* 20*10 */width: 20rem;/* 15*10 */height: 15rem;background-color: chocolate;}</style> </head> <body><div class="box1"></div> </body> </html>
運行結(jié)果如下：
?RGB值
RGB
- RGB通過三種顏色的不同濃度來調(diào)配出不同的顏色
- R red, G green, B blue
- 每一種顏色的范圍在0 ~?255 (0% - 100%)之間
- 語法: RGB(紅色, 綠色, 藍色)
運行結(jié)果如下：
RGBA
- 就是在rgb的基礎上增加了一個a，a表示不透明度
- 需要四個值，前三個和rgb一樣，第四個表示不透明度
- 1表示完全不透明，0表示完全透明，.5半透明
運行結(jié)果如下：
?
?十六進制的RGB值
- 語法:#紅色綠色藍色
- 顏色濃度用?00~ ff 調(diào)整
- 如果顏色兩位兩位重復可以進行簡寫
例如：
#aabbcc? >???#abc
#aabbce? 不可簡寫
?hsl
hsl值 與 hsla值
- h色相(0 - 360)
- s飽和度，顏色的濃度0% -100%
- l亮度，顏色的亮度0%-100%
- a不透明度
望大牛指點，更新中…?
總結(jié)
以上是生活随笔為你收集整理的HTML5+CSS3 从入门到精通（2）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 简单绘图软件实现mfc大作业_纸笔书写｜
- 下一篇： 前端之 XMLHttpRequest