HTML Атрибуты class
Атрибут class указывает одно или несколько имен классов для элемента HTML.
Имя класса может использоваться CSS и JavaScript для выполнения определенных задач для элементов с указанным именем класса.
В CSS, чтобы выбрать элементы с определенным классом, напишите символ точки (.), за которым следует имя класса:
Пример
Используйте CSS для оформления всех элементов с именем класса «City»:
<style>
.city <
background-color: tomato;
color: white;
padding: 10px;
>
</style>
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
London
London is the capital of England.
Paris
Paris is the capital of France.
Tokyo
Tokyo is the capital of Japan.
Совет: Атрибут Class можно использовать для любого элемента HTML.
Примечание: Имя класса чувствительно к регистру!
Совет: Вы можете узнать больше о CSS в нашем учебнике по CSS.
Использование атрибута Class в JavaScript
JavaScript может получить доступ к элементам с указанным именем класса с помощью getElementsByClassName() method:
Пример
Когда пользователь щелкает по кнопке, скройте все элементы с именем класса "city":
Совет: Изучайте JavaScript в главе HTML JavaScriptили в нашем Справочнике по JavaScript.
Несколько классов
Элементы HTML могут иметь более одного имени класса, каждое имя класса должно быть разделено пробелами.
Пример
Элементы стиля с именем класса "City", а также элементы стиля с именем класса "Main":
В приведенном выше примере первый элемент <h2> принадлежит как классу «City», так и классу «Main».
Тот же класс, другой тег
Различные теги, такие как <h2> и <p> , могут иметь одно и то же имя класса и тем самым использовать один и тот же стиль:
class
Глобальный атрибут class это разделённый пробелом список регистров зависимых классов элемента. Классы позволяют CSS и Javascript выбирать и получать доступ с помощью селекторов класса или функций, таких как методы DOM document.getElementsByClassName .
Интерактивный пример
Хотя спецификация не предъявляет требований к именам классов, веб-разработчикам рекомендуется использовать имена, описывающие семантическое назначение элемента, а не представление элемента. Например, атрибут описывает атрибут, а не курсив, хотя элемент этого класса может быть представлен курсивом. Семантические имена остаются логичными даже при изменении представления страницы.
HTML атрибут class
HTML атрибут class используется для определения класса для HTML элемента.
Несколько элементов HTML могут совместно использовать один и тот же класс.
Использование атрибута class
Атрибут class часто используется для указания на название класса в таблице стилей. Он также может использоваться JavaScript для доступа и управления элементами с указанным именем класса.
В следующем примере мы имеем три элемента <div> с атрибутом class со значением "city". Все три элемента <div> будут одинаково стилизованные в соответствии с определением стиля .city в разделе head:
Пример
В следующем примере мы имеем два элемента <span> с атрибутом class со значением "note". Оба элемента <span> будут одинаково стилизованы в соответствие определению .note в разделе head:
Пример
Совет: Атрибут class может быть использован на любом HTML элементе.
Примечание: Название класса чуствительно к регистру!
Совет: Вы можете узнать намного больше про CSS в CSS Учебнике на нашем сайте W3Schools.
Синтаксис для класса
Создайте класс; напишите символ точки (.), а потом название класса. Потом определите свойства CSS в фигурных скобках <>:
Пример
Создайте класс с именем «city»:
<h2 > <p>Лондон — це столиця Англії.</p>
<h2 > <p>Париж — це столиця Франції.</p>
<h2 > <p>Токіо — це столиця Японії.</p>
Несколько классов
Элементы HTML могут принадлежать более чем одному классу.
Чтобы определить несколько классов, отделите названия классов пробелом, например <div main">. Элемент будет стилизован в соответствии со всеми указанными классами.
В следующем примере первый элемент <h2> принадлежит как классу city так и классу main и получает стили CSS с обеих классов:
Пример
Различные элементы могут разделять один и тот же класс
Различные элементы HTML могут указывать на одно и то же название класса.
В следующем примере как <h2> так и <p> указывает на "city" класс и будет разделять одинаковый стиль:
Пример
Использование атрибута class в JavaScript
Имя класса также может использоваться JavaScript для выполнения определенных задач для определенных элементов.
JavaScript может получить доступ к элементам с определенным именем класса с помощью метода getElementsByClassName() :
Пример
Кликните на кнопку, чтобы скрыть все элементы с названием класса "city":
Не волнуйтесь, если вы не понимаете код в приведенном выше примере.
Вы узнаете больше о JavaScript в разделе HTML JavaScript или вы можете изучить JavaScript Учебник на нашем сайте W3Schools.
Резюме
- HTML атрибут class определяет одно или несколько имен классов для элемента
- Классы используются CSS и JavaScript для выбора и доступа к определенным элементам
- Атрибут class может применяться к любому элементу HTML
- Имя класса чувствительно к регистру
- Различные элементы HTML могут указывать на одно и то же название класса
- JavaScript может получить доступ к элементам с определенным именем класса с помощью метода getElementsByClassName()
HTML Упражнения
Вопросы для самоконтроля
- Для чего необходим HTML-атрибут class ?
- Сколько HTML-элементов могут совместно использовать один и тот же класс?
- Имеет ли значение регистр для написания названия класса?
- С помощью какого символа указывается название класса в CSS?
- Могут ли HTML-элементы принадлежать больше чем одному классу?
- Может ли JavaScript использовать имена классов?
ПАЛИТРА ЦВЕТОВ
ПРИСОЕДИНЯЙТЕСЬ!
Получите ваш
Сертификат сегодня!
Связь с админом
Если вы хотите сообщить об ошибке, а также внести предложение о работе сайта, добавить объявление или рекламу на сайт, не стесняйтесь отправить админу электронное письмо на email:
Топ Учебники
Топ Справочники
Топ Примеры
Веб Сертификаты
Этот сайт оптимизирован для обучения и тестирования. Примеры могут быть упрощены для улучшения чтения и базового понимания. Учебные пособия, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность и работоспособность всего контента. Используя этот сайт, вы соглашаетесь с тем, что прочитали и приняли условия использования, cookie и политику конфиденциальности.
Также вы можете абсолютно бесплатно скачать офлайн версию сайта W3Schools на русском архивом с GitHub и пользоваться локально на своём компьютере.
Также доступна версия сайта W3Schools на украинском языке.
Copyright 1999-2021 by Refsnes Data. All Rights Reserved.
Сайт работает на фреймворке W3.CSS.
HTML Class Attribute
The HTML class attribute is used to specify one or more class names for an element. Commonly, the class attribute points to a class in a style sheet. The class name is case sensitive.
This attribute can also be used by JavaScript via the HTML DOM to make certain changes to HTML elements with a specified class name.
In HTML5, you can use the class attribute for any HTML element.
Although there aren’t specific requirements for the name of classes, it’s better to use names describing the semantic purpose of the element, and not its presentation. The name should begin with a letter a-z or A-Z, and it can be followed by letters, digits (0-9), underscores («_»), and hyphens («-«).
Syntax
Example of the HTML class attribute:
In CSS, if you want to select elements with a specific class, use a period (.) character followed by the class name.
Example of the HTML class attribute used with CSS:
HTML elements can also have more than one class name. Each of them must be separated by a space.
Example of the HTML class attribute with multiple class names:
Different tags, such as <h2> and <p> can have the same class name and the same style.