CSS三大特性（129-135 ）
生活随笔
收集整理的這篇文章主要介紹了
CSS三大特性（129-135 ）
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
CSS有三個(gè)非常重要的三個(gè)特性:層疊性、繼承性、優(yōu)先級(jí)
一、層疊性
相同選擇器給設(shè)置相同的樣式,此時(shí)一個(gè)樣式就會(huì)覆蓋(層疊)另一個(gè)沖突的樣式。層疊性主要解決樣式?jīng)_突的問題。
層疊性原則：·
- 樣式?jīng)_突,遵循的原則是就近原則,哪個(gè)樣式離結(jié)構(gòu)近,就執(zhí)行哪個(gè)樣式·
- 樣式不沖突,不會(huì)層器
代碼如下：
<!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>CSS層疊性</title><style>div {color: red;font-size: 12px;}div {color: pink;}</style> </head> <body><!-- 顯示pink，根據(jù)就近原則 --><div>長(zhǎng)江后浪推前浪，淺浪死在沙灘上</div> </body> </html>效果：?
?
二、繼承性
2.1 CSS中的繼承子標(biāo)簽會(huì)繼承父標(biāo)簽的某些樣式,如文本顏色和字號(hào)。簡(jiǎn)單的理解就是:子承父業(yè)。
- 恰當(dāng)?shù)厥褂美^承可以簡(jiǎn)化代碼,降低CSS樣式的復(fù)雜性。
- 子元素可以繼承父元素的樣式( text-, font , line-這些元素開頭的可以繼承,以及color屬性)
- 繼承性口訣:龍生龍,鳳生鳳,老鼠生的孩子會(huì)打洞
代碼如下：?
<!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>CSS繼承性</title><style>div {color: pink;font-size: 14px;}</style> </head> <body><div><!-- p標(biāo)簽繼承了div的屬性 --><p>龍生龍,鳳生鳳,老鼠生的孩子會(huì)打洞</p></div> </body> </html>效果：?
2.2 行高的繼承
行高可以跟單位也可以不跟單位
如果子元素沒有設(shè)置行高,則會(huì)繼承父元素的行高為1.5
此時(shí)子元素的行高是:當(dāng)前子元素的文字大小*1.5
body行高1.5這樣寫法最大的優(yōu)勢(shì)就是里面子元素可以根據(jù)自己文字大小自動(dòng)調(diào)整行高
?代碼如下：?
<!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>行高的繼承</title><style>body {color: pink;fonts: 12px/1.5 'Microsoft YaHei';}div {/* 子元素繼承了父元素body的行高1.5 *//* 這個(gè)1.5是當(dāng)前元素字體大小font-size 的1.5倍，相當(dāng)于14*1.5=21 */font-size: 14px;}p {/* 當(dāng)前行高 16 * 1.5 = 24 */font-size: 16px;}</style> </head><body><div>粉色的回憶</div><p>粉色的回憶</p> </body> </html>效果：?
?
三、優(yōu)先級(jí)
選擇器權(quán)重如下表：
| 選擇器 | 選擇器權(quán)重 |
| 繼承或* | 0,0,0,0 |
| 元素選擇器 | 0,0,0,1 |
| 類選擇器、偽類選擇器 | 0,0,1,0 |
| ID選擇器 | 0,1,0,0 |
| 行內(nèi)樣式style="" | 1,0,0,0 |
| !important?重要的 | 無窮大 |
?
<!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>優(yōu)先級(jí)</title><style>/* 類選擇器 */.test {color: red;}/* 標(biāo)簽選擇器 */div {color: pink;!important}/* id選擇器 */#demo {color: green;}</style> </head> <body><!-- 行內(nèi)樣式style --><div class="test" id="demo" style="color: purple;">你笑起來真好看 </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>優(yōu)先級(jí)之權(quán)重注意點(diǎn)</title><style>body {color: red;}p {color: pink;}/* a鏈接瀏覽器默認(rèn)制訂了一個(gè)樣式 藍(lán)色的 有下劃線的，所以當(dāng)這個(gè)屏蔽后他不會(huì)跟著body顯示為紅色 */a {color:green;}</style> </head> <body><div id="father"><p>你還是很好看</p></div><a href="#">我是單獨(dú)的樣式</a> </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>CSS優(yōu)先級(jí)之權(quán)重疊加</title><style>/* ui li 權(quán)重 0,0,0,1 + 0,0,0,1 = 0,0,0,2 */ul li {color: green;}/* li 權(quán)重 0,0,0,1 */li {color: red;}/* .nav li 權(quán)重 0,0,1,0 + 0,0,0,1 = 0,0,1,1 */.nav li {color: pink;}</style> </head><body><ul class="nav"><li>大豬肘子</li><li>大肘子</li><li>豬尾巴</li></ul> </body> </html>效果：?
?權(quán)重疊加：如果是復(fù)合選擇器，則會(huì)有權(quán)重疊加，需要計(jì)算權(quán)重。
- div ul li? ? ------>? ?0,0,0,3
- .nav ul li? ?------>? ?0,0,1,2
- a:hover? ? ------>? ?0,0,1,1
- .nav a? ? ? ------>? ?0,0,1,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>CSS優(yōu)先級(jí)之權(quán)重疊加2</title><style>/* .nav li 權(quán)重是 11 */.nav li {color: red;}/* .pink 權(quán)重是 10 .nav .pink 權(quán)重是20 ，所以要加.nav才能改變成粉色 */.nav .pink {color: pink;font-weight: 700;}</style> </head> <body><ul class="nav"><li class="pink">人生四大悲劇</li><li>家里沒寬帶</li><li>網(wǎng)速不夠快</li><li>手機(jī)沒流量</li><li>學(xué)習(xí)沒WIFI</li></ul> </body> </html>效果：
總結(jié)
以上是生活随笔為你收集整理的CSS三大特性（129-135 ）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 数字通信介绍（5）什么是MIMO？
- 下一篇： 一、以太网基础知识