CSS的一些基礎(chǔ)概念

一些基礎(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))。

如果大家都是繼承來(lái)的!important不影響就近原則
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案? 參考答案 (1)瀏覽器兼容問(wèn)題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,093評(píng)論 1 92
  • 深入理解傅里葉變換Mar 12, 2017 這原本是我在知乎上對(duì)傅立葉變換、拉普拉斯變換、Z變換的聯(lián)系?為什么要進(jìn)...
    價(jià)值趨勢(shì)技術(shù)派閱讀 5,935評(píng)論 2 2
  • CSS基礎(chǔ) 本文包括CSS基礎(chǔ)知識(shí)選擇器(重要?。。。├^承、特殊性、層疊、重要性CSS格式化排版單位和值盒模型浮動(dòng)...
    廖少少閱讀 3,423評(píng)論 0 40
  • 引子 成文原因有二:其一,復(fù)習(xí)鞏固知識(shí)、站在巨人的肩膀上,老羅講話:“人生苦短,能一步走完的路,盡量別走三步”;其...
    只敲代碼不偷桃閱讀 911評(píng)論 0 0
  • 1.CSS簡(jiǎn)介 Cascading Style Sheet 層疊樣式表 主要用來(lái)定義頁(yè)面中的表現(xiàn),HTML 描述頁(yè)...
    hyt222閱讀 994評(píng)論 0 0

友情鏈接更多精彩內(nèi)容