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