Skip to content

Як використовувати кілька класів CSS на одному елементі

1 de Липень de 2021

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

E + / Getty Images
Залежно від того, який атрибут ви додаєте до елемента, ви можете написати селектор CSS, щоб застосувати необхідні візуальні стилі, необхідні для досягнення зовнішнього вигляду цього елемента та веб-сайту в цілому. Хоча або ідентифікатори, або класи працюють з метою підключення їх до правил CSS, сучасні методи веб-дизайну віддають перевагу класам над ідентифікаторами, частково, тому що вони менш конкретні та з ними легше працювати.

Один або кілька класів у CSS?

У більшості випадків ви присвоюєте елементу один атрибут класу, але насправді ви не обмежуєтесь лише одним класом, яким ви є з ідентифікаторами. Хоча елемент може мати лише один атрибут ID, ви можете дати елементу кілька класів, і в деяких випадках це зробить вашу сторінку простішою для стилізації та набагато гнучкішою. Якщо вам потрібно призначити елементу кілька класів, додайте додаткові класи та просто розділіть їх пробілом у своєму атрибуті. Наприклад, цей параграф має три класи:













Це буде текст абзацу type = “code”> Це встановлює такі три класи тегу абзацу:

  • Pullquote
  • Рекомендовані
  • Ліворуч

Зверніть увагу на пробіли між кожним із цих значень класу. Ці простори – це те, що визначає їх як різні, індивідуальні класи. Ось чому назви класів не можуть мати пробілів, оскільки це робить їх окремими класами. Отримавши значення класу в HTML, ви можете призначити їх як класи у своєму CSS та застосувати стилі, які ви хочете додати. Наприклад.

.pullquote {…}
.визначено {…}
p.left {…}

type = “code”> У цих прикладах декларації CSS і пари значень з’являються всередині фігурних дужок, саме так ці стилі застосовуватимуться до відповідного селектора. Якщо ви встановите клас для певного елемента (наприклад, стор. ліворуч), ви все ще можете використовувати його як частину списку класів; однак пам’ятайте, що це вплине лише на ті елементи, які вказані в CSS. Іншими словами, стор. ліворуч стиль застосовуватиметься лише до абзаців із цим класом, оскільки ваш селектор насправді говорить, що застосовуватиме його до “абзаців із значенням класу зліва, “На відміну від цього, інші два селектори у прикладі не вказують певний елемент, тому вони застосовуватимуться до будь-якого елемента, що використовує ці значення класу.

Кілька занять, семантика та JavaScript

Ще однією перевагою використання декількох класів є те, що це збільшує можливості інтерактивності. Застосовуйте нові класи до існуючих елементів за допомогою JavaScript, не видаляючи жодного з початкових класів. Ви також можете використовувати класи для визначення семантики елемента – додайте додаткові класи, щоб визначити, що цей елемент означає семантично. Цей підхід полягає в тому, як працюють мікроформати.

Переваги декількох класів

Розкладання декількох класів може спростити додавання спецефектів до елементів без необхідності створювати для цього елемента абсолютно новий стиль. Наприклад, щоб плавати елементи ліворуч або праворуч, ви можете написати два класи: лівий

type = “code”> і праворуч

type = “code”> з просто float: left;

type = “code”> та float: right;

type = “code”> в них. Потім, щоразу, коли у вас є елемент, який вам потрібно плавати вліво, ви просто додаєте клас “ліворуч” до його списку класів. Однак тут є тонка лінія для прогулянки. Пам’ятайте, що веб-стандарти диктують поділ стилю та структури. Структура обробляється за допомогою HTML, а стиль – у CSS. Якщо ваш HTML-документ заповнений елементами, що мають усі назви класів, такі як “червоний” або “лівий”, які імена визначають, як елементи повинні виглядати, а не те, якими вони є, ви перетинаєте цю межу між структурою та стилем.

Недоліки декількох класів

Найбільшим недоліком використання кількох одночасних класів для ваших елементів є те, що це може зробити їх трохи громіздкими для перегляду та управління з часом. Можливо, стане важко визначити, які стилі впливають на елемент і чи впливають на нього сценарії. Багато доступних сьогодні фреймворків, наприклад Bootstrap, широко використовують елементи з декількома класами. Цей код може вийти з-під контролю і з ним важко працювати, якщо ви не будете обережні. Коли ви використовуєте кілька класів, ви також ризикуєте, щоб стиль одного класу перевизначив стиль іншого. Тоді це зіткнення може ускладнити з’ясування, чому ваші стилі не застосовуються, навіть коли здається, що вони повинні. Слідкуйте за конкретністю, навіть з атрибутами, застосованими до цього одного елемента. Використовуючи такий інструмент, як інструменти для веб-майстрів у Google Chrome, ви можете легше побачити, як ваші класи впливають на ваші стилі, і уникнути цієї проблеми, що суперечить стилям та атрибутам.

Формат mla apa chicago Ваше посилання

Кірнін, Дженніфер. “Як використовувати кілька класів CSS на одному елементі.” ThoughtCo, 9 червня 2021 р., Thinkco.com/using-multiple-classes-on-single-element-3466930.
Кірнін, Дженніфер. (2021, 9 червня). Як використовувати кілька класів CSS на одному елементі. Отримано з https://www.thoughtco.com/using-multiple-classes-on-single-element-3466930
Кірнін, Дженніфер. “Як використовувати кілька класів CSS на одному елементі.” ДумкаCo. https://www.thoughtco.com/using-multiple-classes-on-single-element-3466930 (доступ 1 липня 2021 р.).