Фарқи байни синфи селектори CSS ва id чист? истифодаи id ва синф дар HTML

Фарқи байни синфи селектори CSS ва id чист? истифодаи id ва синф дар HTML

Чен Вейлянайни замон иҷро карда мешавадSEO, оптимизатсияи сайтWordPressмавзӯъ.

Гарчанде ки ман қаблан баъзе донишҳои асосии HTML ва CSS-ро омӯхтам, аммо ман онро муддате истифода накардаам, махсусан истифодаи қисми CSS, фаромӯш кардан осон аст.

Ҳамин тавр, фарқият ва истифодаи id ва синфи селектори CSS-ро дар ин ҷо сабт ва ҷамъбаст кунед:

• id ба #div мувофиқат мекунад
• синф ба .div мувофиқат мекунад

Фарқи байни id ва синф

тавсифи ID

• id теги собит аст, ки барои муайян кардани услуби калонтар дар саҳифаи веб истифода мешавад, ки дар шакли #div муайян карда мешавад
• Масалан: тақсим кардани сутунҳо, боло, бадан, поён ва ғайра...
• Барои муайян кардани унсури мушаххас истифода мешавад, ки он метавонад танҳо як маротиба дар як саҳифа пайдо шавад ва онро такроран даъват кардан мумкин нест.

тавсифи синф

• Класс як гурӯҳи услубҳо мебошад, ки барои муайян кардани услубҳои муфассал дар саҳифаи веб истифода мешавад.Дар шакли .div муайян карда мешавад ва онро такрор кардан мумкин аст.
• Масалан: менюи мушаххас, сатри матн ва ғайра...
• Дар як саҳифа, он метавонад аз ҷониби якчанд унсурҳо такроран даъват карда шавад

Худи селектори div ягон хосият надорад.Бо муайян кардани css-и худ, он баъзе тарҳҳоро ба монанди паҳнӣ, баландӣ, ранги замина ва андозаи матни div идора мекунад.

УмумӣТиҷорати электронӣвебсайт,як вебсайт созедСаҳифаи веби html, ки аз ҷониби барнома тавлид шудааст, барои амалӣ кардани тарҳбандии саҳифа тавассути CSS мебошад.

Селектор чист?

Таърифи ҳар як услуби CSS аз 2 қисм иборат аст:

选择器 {样式}

• Қисми пеш аз {} "интихобкунанда" аст.
• "Интихобкунанда" "сабки" -и {}-ро, ки ба он амал мекунад, нишон медиҳад.
• Яъне, ин "сабки" дар кадом унсури веб саҳифа кор мекунад?

мисоли код

Ин аст тарзи интихоб ва услуби элементи class="panel":

.sidebar
{ 
background-color:black;
}

Ин аст тарзи интихоб ва услуби элемент бо id="footer":

#footer
{ 
background-color:black;
}