class в html коде

Содержание

1. Использование атрибута Class
2. Пример
3. London
4. Paris
5. Tokyo
6. London
7. Paris
8. Tokyo
9. Использование атрибута Class в JavaScript
10. Пример
11. Несколько классов
12. Пример
13. London
14. Paris
15. Tokyo
16. принадлежит как классу «City», так и классу «Main».
17. Тот же класс, другой тег
18. Одновременное использование разных классов
19. Вопросы для проверки
20. Определение и применение
21. Поддержка браузерами и значения атрибута
22. Пример использования
23. Отличия HTML 4.01 от HTML 5

Использование атрибута Class

Атрибут class указывает одно или несколько имен классов для элемента HTML.

Имя класса может использоваться CSS и JavaScript для выполнения определенных задач для элементов с указанным именем класса.

В CSS, чтобы выбрать элементы с определенным классом, напишите символ точки (.), за которым следует имя класса:

Пример

Используйте CSS для оформления всех элементов с именем класса «City»:

London

London is the capital of England.

Paris

Paris is the capital of France.

Tokyo

Tokyo is the capital of Japan.

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»:

London

Paris

Tokyo

В приведенном выше примере первый элемент

принадлежит как классу «City», так и классу «Main».

Тот же класс, другой тег

Различные теги, такие как

, могут иметь одно и то же имя класса и тем самым использовать один и тот же стиль:

Классы применяют, когда необходимо определить стиль для индивидуального элемента веб-страницы или задать разные стили для одного тега. При использовании совместно с тегами синтаксис для классов будет следующий.

Внутри стиля вначале пишется желаемый тег, а затем, через точку пользовательское имя класса. Имена классов должны начинаться с латинского символа и могут содержать в себе символ дефиса (-) и подчеркивания (_). Использование русских букв в именах классов недопустимо. Чтобы указать в коде HTML, что тег используется с определённым классом, к тегу добавляется атрибут (пример 8.1).

Пример 8.1. Использование классов

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат данного примера показан на рис. 8.1.

Рис. 8.1. Вид текста, оформленного с помощью стилевых классов

Первый абзац выровнен по ширине с текстом чёрного цвета (этот цвет задаётся браузером по умолчанию), а следующий, к которому применен класс с именем cite — отображается синим цветом и с линией слева.

Можно, также, использовать классы и без указания тега. Синтаксис в этом случае будет следующий.

При такой записи класс можно применять к любому тегу (пример 8.2).

Пример 8.2. Использование классов

HTML5 CSS 2.1 IE Cr Op Sa Fx

Результат применения классов к тегам и показан на рис. 8.2.