Яка різниця між класом селектора CSS та id? використання ідентифікатора та класу в HTML

Яка різниця між класом селектора CSS та id? використання ідентифікатора та класу в HTML

Чень ВейлянНещодавно впроваджуєтьсяSEOОптимізуйте веб-сайтWordPressтема.

Хоча я раніше вивчив деякі базові знання HTML та CSS, легко забути використання CSS, особливо після того, як деякий час не практикувався.

Таким чином, у цьому документі зафіксовано та узагальнено відмінності та використання ідентифікатора та класу селектора CSS:

• id відповідає #div
• Клас відповідає файлу .div.

Різниця між ідентифікатором та класом

Опис ідентифікатора

• `id` — це фіксований тег, який використовується для визначення більших стилів на веб-сторінці, визначених за допомогою формату `#div`.
• Наприклад: поділ тексту на розділи: верхній, основний, нижній тощо.
• Використовується для визначення певного елемента, який може з'являтися лише один раз на сторінці та не може викликатися повторно.

опис класу

• Клас — це група стилів, яка використовується для визначення детальніших стилів на веб-сторінці. Він визначається за допомогою формату .div і може повторюватися.
• Наприклад: певний пункт меню, рядок тексту тощо.
• На одній сторінці його можна викликати неодноразово кількома елементами.

Сам селектор div не має атрибутів. Ви керуєте макетом div, таким як його ширина, висота, колір фону та розмір тексту, визначаючи його CSS.

ЗагальніЕлектронна комерціявебсайт,Побудуйте станціюHTML-сторінки, згенеровані програмою, використовують CSS для досягнення макета сторінки.

Що таке селектор?

Визначення кожного стилю CSS складається з 2 частин:

选择器 {样式}

• Частина перед фігурними дужками {} — це «селектор».
• «Селектор» вказує на об'єкт, до якого застосовується «стиль» {}.
• Іншими словами, на який елемент веб-сторінки впливає цей «стиль»?

Приклади коду

Нижче наведено кроки для вибору та налаштування стилю елементів за допомогою class="sidebar":

.sidebar
{ 
background-color:black;
}

Нижче наведено кроки для вибору та встановлення стилю елемента з id="footer":

#footer
{ 
background-color:black;
}