一些基礎(chǔ)小樣式
shortcut icon,特指瀏覽器中地址欄左側(cè)顯示的圖標(biāo),一般大小為16x16,后綴名為.icon;
icon,指的是圖標(biāo),格式可為PNG\GIF\JPEG,尺寸一般為16x16、24x24、36x36等
line-height:行高 設(shè)置文字間上下距離
height:高度 就是定義一個(gè)層 或某樣?xùn)|西的高度啦
也就是說(shuō)line-height是特指單行高度,height可以為所有元素的高度
s,i,em標(biāo)簽的意思
讓H等標(biāo)簽不加粗的方法是: font-weight:normal
不傾斜 font-style:Normal
不下劃 不刪除線 text-decoration:normal
先弄清楚padding與margin的含義,兩者為啥要比較一個(gè)更好呢? 內(nèi)部邊距padding一般是element的content與border的距離;margin是外邊距,即可理解為多個(gè)element的border之間距離。
繼承性
能繼承的屬性
有一些屬性,當(dāng)給自己設(shè)置的時(shí)候,自己的后代都繼承上了,這個(gè)就是繼承性。
哪些屬性能繼承:color、 text-開(kāi)頭的、line-開(kāi)頭的、font-開(kāi)頭的。
這些關(guān)于文字樣式的,都能夠繼承; 所有關(guān)于盒子的、定位的、布局的屬性都不能繼承。
繼承性的傳遞和權(quán)重計(jì)算原則
繼承性是從自己開(kāi)始,直到最小的元素。
當(dāng)選擇器,選擇上了某個(gè)元素的時(shí)候,那么要這么統(tǒng)計(jì)權(quán)重:
id的數(shù)量,類的數(shù)量,標(biāo)簽的數(shù)量
權(quán)重問(wèn)題大總結(jié):
1) 先看有沒(méi)有選中,如果選中了,那么以(id數(shù),類數(shù),標(biāo)簽數(shù))來(lái)計(jì)權(quán)重。誰(shuí)大聽(tīng)誰(shuí)的。如果都一樣,聽(tīng)后寫(xiě)的為準(zhǔn)。
2) 如果沒(méi)有選中,那么權(quán)重是0。如果大家都是0,就近原則。
important的總結(jié)
important是英語(yǔ)里面的“重要的”的意思。我們可以通過(guò)語(yǔ)法:
k:v !important;
來(lái)給一個(gè)屬性提高權(quán)重。這個(gè)屬性的權(quán)重就是無(wú)窮大。
!important需要強(qiáng)調(diào)3點(diǎn):
1 !important提升的是一個(gè)屬性,而不是一個(gè)選擇器
p{
color:red !important; → 只寫(xiě)了這一個(gè)!important,所以就字體顏色屬性提升權(quán)重
font-size: 100px ; → 這條屬性沒(méi)有寫(xiě)!important,所以沒(méi)有提升權(quán)重
}
#para1{
color:blue;
font-size: 50px;
}
.spec{
color:green;
font-size: 20px;
}
所以,綜合來(lái)看,字體顏色是red(聽(tīng)important的);字號(hào)是50px(聽(tīng)id的);
!important無(wú)法提升繼承的權(quán)重,該是0還是0
比如HTML結(jié)構(gòu):
<div>
<p>哈哈哈哈哈哈哈哈</p>
</div>
有CSS樣式:
div{
color:red !important;
}
p{
color:blue;
由于div是通過(guò)繼承性來(lái)影響文字顏色的,所以!important無(wú)法提升它的權(quán)重,權(quán)重依然是0。
干不過(guò)p標(biāo)簽,因?yàn)閜標(biāo)簽是實(shí)實(shí)在在選中了,所以字是藍(lán)色的(以p為準(zhǔn))。