Атрибут class
Атрибут class задает один или несколько классов для элемента (под элементом имеется ввиду тег).
Это делается для того, чтобы затем обратиться через CSS к группе элементов, у которых задан одинаковый класс, и применить для него определенные свойства (к примеру, сменить цвет текста, размер шрифта и так далее).
Существует также атрибут id, который подобно атрибуту class позволяет выбирать элементы на HTML странице.
Разница между атрибутом class и атрибутом id в том, что class выбирает группу элементов (даже если он дан одному элементу — его в последствии можно дать и другому), а id выбирает уникальный элемент (больше элемента с таким id не должно быть на странице сайта, иначе будет конфликт).
Как понять, что давать элементу — класс или id? Класс дается тем элементам, которые повторяются на страницах сайта (чтобы по несколько раз не писать один и тот же CSS код). Даже если у вас сейчас данный элемент один, но вы чувствуете, что похожие элементы могут появится в дальнейшем — давайте этому элементу класс. Если же вы уверены, что такой элемент уникальный — то давайте ему id. Хотя в настоящее время есть тенденция к тому, чтобы всем элементам давать класс, а id оставить для JavaScript, но она не является общепринятой.
Элементу можно задать несколько классов, в этом случае их следует перечислять через пробел.
Названия классов должны быть набраны английскими буквами, цифрами, без пробелов (пробел отделяет классы друг от друга, вместо него можно использовать подчеркивание или дефис). Классы не должны начинаться с цифры (в HTML5 уже можно, но не будет работать в старых браузерах).
Имена классам следует давать на английском языке (а не на русском, просто английскими буквами!). Имена должны быть осмысленными, отражать суть класса.
Пример
Давайте всем абзацам с классом test зададим красный цвет текста:
Абзац с классом test.
Контрольный абзац без класса.
.test < color: red; >
Пример . Несколько классов для элемента
А здесь давайте первому абзацу зададим несколько классов — test1 и test2 (запишем их через пробел). Класс test1 задает красный цвет тексту, а класс test2 задает размер шрифта в 20px . Второму абзацу дан только класс test1 (этот абзац станет красным), а третьему абзацу — класс test2 (этот абзац будет иметь размер шрифта в 20px). Первый абзац, у которого два класса, будет иметь одновременно и красный цвет и размер шрифта в 20px :
Абзац с двумя классами test1 и test2.
Абзац с классом test1.
Абзац с классом test2.
Контрольный абзац без классов.
.test1 < color: red; >.test2 < font-size: 20px; >
class
Глобальный атрибут class это разделённый пробелом список регистров зависимых классов элемента. Классы позволяют CSS и Javascript выбирать и получать доступ с помощью селекторов класса или функций, таких как методы DOM document.getElementsByClassName .
Интерактивный пример
Хотя спецификация не предъявляет требований к именам классов, веб-разработчикам рекомендуется использовать имена, описывающие семантическое назначение элемента, а не представление элемента. Например, атрибут описывает атрибут, а не курсив, хотя элемент этого класса может быть представлен курсивом. Семантические имена остаются логичными даже при изменении представления страницы.
Спецификация
| Specification |
|---|
| HTML Standard # global-attributes:classes-2 |
Совместимость с браузерами
BCD tables only load in the browser
Смотреть также
- Все глобальные атрибуты.
Атрибут class
Задает стилевой класс, который позволяет связать определенный тег со стилевым оформлением. В значении допускается указывать сразу несколько классов, разделяя их между собой пробелом.
Синтаксис
class="имя"Значения
Имена классов могут содержать в себе латинские буквы (A–Z, a–z), цифры (0–9), символ дефиса (-) и подчеркивания (_). Использование русских букв в классах недопустимо.
Значение по умолчанию
Применяется к тегам
Пример
HTML5 IE Cr Op Sa Fx
Атрибут class Для искусственного освещения помещения применяются люминесцентные лампы. Они отличаются высокой световой отдачей, продолжительным сроком службы, малой яркостью светящейся поверхности, близким к естественному спектральным составом излучаемого света, что обеспечивает хорошую цветопередачу.
Статьи по теме
Атрибут class в HTML на примерах
Атрибут class используется для добавления CSS-классов элементам HTML. Классы позволяют применять одни и те же стили CSS или поведение JavaScript к разным элементам на странице.
Так, одному элементу можно присвоить один или несколько классов, разделяя их пробелами.
�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
Как это работает
Чтобы атрибут class сработал, вам нужно не просто указать правильное имя класса, но и добавить его в CSS-файл или в теге .
Этот текст будет выделен. И настраиваем его в CSS:
.highlighted-text
В этом примере текст внутри элемента
с классом highlighted-text будет иметь жёлтый фон и размер шрифта 18px .
Этот текст будет выделен.
Использование атрибута class в JavaScript
Мы можем работать с классами и через JS. Например, найти все элементы с классом clickable и добавить обработчик, который покажет сообщение при клике на элемент.
const elements = document.querySelectorAll('.clickable'); elements.forEach(element => < element.addEventListener('click', () =>< alert('Клик!'); >); >); Теперь, когда пользователь кликает на любую из кнопок с классом clickable , появляется всплывающее окно с сообщением Клик! .
Сложные селекторы в CSS
В некоторых случаях нам нужно применить класс только к определенному HTML-тегу, игнорируя все другие. Например, так:
/* Только для элементовс классом special-text */ p.special-text
Тогда первый текст в этом случае будет синим, а второй — как есть.
Этот текст будет синим.
А этот останется без изменений. Вот как это работает:
Разработчики постоянно используют атрибут class . Он не только упрощает стилизацию, но и помогает лучше организовать код и проще его поддерживать.
Подробнее о сложных селекторах — в отдельной очень подробной статье, обязательно прочитайте:
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Осмысленный alt-текст: 6 правил
Альтернативный текст — это описание изображения словами. Это описание должно помогать людям, которые читают или слышат это описание, иначе оно не нужно и лучше вообще его не указывать.
Мы уже обсудили основные правила написания alt-текста для фотографий и изображений. В этот раз поговорим о том, каким именно должно быть описание, чтобы в нём был смысл.
�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
- 27 февраля 2024
Что такое Lazy Loading и как её включить на сайте
Ленивая загрузка (буквально, lazy loading) — это возможность отложить загрузку ненужного прямо сейчас медиаконтента.
Ленивая загрузка делает сайт быстрее и экономит трафик, если у пользователя мобильный интернет с ограничениями.
�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
- 22 ноября 2023
Знакомство с HTML
Привет, будущие фронтенд-разработчики! Добро пожаловать в увлекательный мир веб-разработки. Перед тем как двигаться дальше, давайте разберёмся с основами — языком разметки гипертекста или просто HTML.
HTML (Hypertext Markup Language) — это стандартный язык, который используется для создания веб-страниц. Представьте, что ваша веб-страница — это книга. Тогда HTML — это скелет этой книги, костяк, который определяет структуру: где будет заголовок, абзацы, изображения и так далее.
�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
- 1 ноября 2023
Специальные символы в HTML
HTML использует особенные комбинации символов, чтобы корректно отображать определенные знаки на веб-страницах. Например, вместо простого знака «меньше» мы видим комбинацию <. В этой статье представлен список таких символов. Это небольшой справочник для тех, кто хочет быстро найти нужный код.
�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
- 23 октября 2023
Зачем нужен метатег viewport
Каждый из нас хоть раз в жизни сталкивался с веб-страницами, которые кажутся «сломанными» или странно отображаются на мобильных устройствах. Одной из причин такого поведения может быть отсутствие маленького, но важного элемента в коде страницы — метатега viewport .
Метатеги — это инструкции для браузера о том, как отображать содержимое страницы. Один из таких метатегов — viewport , который говорит браузеру, как масштабировать и отображать страницу на разных устройствах, особенно на смартфонах и планшетах.
�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
Важно, чтобы сайты классно выглядели не только на компьютерах, но и на маленьких экранах смартфона. Если не использовать viewport , то сайт может выглядеть как уменьшенная версия десктопного сайта на мобильном экране, что делает его трудночитаемым и неудобным для использования. Конечно, нужно ещё много всего сделать для адаптивности, но viewport тоже нужен.
- 18 сентября 2023
В чём отличия цитат
В HTML есть разные теги для цитирования и указания источников. Основные из них: , и . Давайте разберёмся в их различиях.
�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
- 12 сентября 2023
Растровая и векторная графика
Давайте попробуем разобраться, в чём отличие растровой графики от векторной.
�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
- 13 июня 2023
Как отличить h1, h2 и h3
Заголовки используются для организации и структурирования содержимого на сайте. В HTML существует шесть уровней заголовков, обозначаемых тегами от до . Каждый уровень заголовка имеет свой семантический вес, где имеет наибольший вес, а — наименьший.
Часто кажется, что заголовок — это простой и понятный тег. Но это впечатление обманчиво, потому что не всегда крупный и выделенный текст на макете является заголовком.
�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
При вёрстке сайта важно соблюдать семантику, чтобы все теги использовались корректно и ресурс работал без ошибок. Если напутать уровни заголовков, то структура страницы будет не семантичной, а скринридеры неправильно прочтут сайт.
В статье разберёмся, как верно определять заголовки по макету, какие из них лучше делать скрытыми и почему.
- 8 июня 2023
Как правильно вставлять SVG
Есть несколько способов вставки SVG-изображения. Выбор одного из них зависит от задач, которые стоят перед верстальщиком.
SVG — это формат векторной графики, дословно: масштабируемая векторная графика. МВГ? SVG! В векторных форматах хранится не само изображение, а инструкция по его построению по точкам и кривым.
�� Сегодня вам бесплатно доступен тренажёр по HTML и CSS.
В растровых форматах информация о конкретном числе точек изображения плотно упакована в бинарный кирпич. В него бесполезно заглядывать и менять его можно только в редакторах графики.
�PNG IH�aV PLTE�������0� IDAcZ�d���� �W= S�3�o;���]P ���IEND�B`�~ Формат SVG тоже можно создавать и менять в редакторах графики, например, в Illustrator или Figma. Но ещё он текстовый, а значит его можно открыть как HTML или CSS в любом редакторе кода.
SVG — это как отдельная HTML-страница. Когда вставляете SVG, вы, на самом деле, вставляете не просто картинку, а целую страницу. Со своей системой координат, вьюпортом, стилями, скриптами и удивительными особенностями.
Если смотреть на SVG как на отдельную страницу — становится понятнее, какой способ вставки вам нужен.
- 1 июня 2023
Как создавать адаптивные изображения. Атрибут srcset
Адаптивные изображения автоматически изменяют свой размер, чтобы соответствовать экрану пользователя, что улучшает вид страницы и ускоряет загрузку.
Давайте рассмотрим несколько способов создания адаптивных изображений.
�� В статье мы говорим о пикселях и ретина-дисплеях. Если вы не знаете, что это такое — прочитайте статью.
- 25 мая 2023