HTML Классы
HTML атрибут class используется для указания класса для элемента HTML.
Несколько HTML элементов могут совместно использовать один и тот же класс.
Использование атрибута class
Атрибут class часто используется для указания на имя класса в таблице стилей.
Он также может быть использован JavaScript для доступа и манипулирования элементами с определенным именем класса.
В следующем примере мы имеем три элемента <div>
с атрибутом class и со значением "city".
Все три элемента <div> будут стилизованы одинаково в соответствии с определением стиля
.city в головном разделе:
Пример
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: black;
color: white;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="city">
<h2>Лондон</h2>
<p>Лондон - столица Англии.</p>
</div>
<div class="city">
<h2>Париж</h2>
<p>Париж - столица Франции.</p>
</div>
<div class="city">
<h2>Токио</h2>
<p>Токио - столица Японии.</p>
</div>
</body>
</html>
Результат:
Лондон
Лондон - столица Англии.
Париж
Париж - столица Франции.
Токио
Токио - столица Японии.
Использование атрибута class для встроенных элементов
Атрибут class также может быть использован для встроенных элементов:
Пример
<!DOCTYPE html>
<html>
<head>
<style>
.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>Мой <span class="note">Important</span> Заголовок</h1>
<p>Это уже кое-что <span class="note">important</span> text.</p>
</body>
</html>
Попробуйте сами »
Совет: Атрибут class может быть использован на каждом HTML элементе.
Примечание: Имя класса чувствительно к регистру!
Совет: Вы можете узнать гораздо больше о CSS в разделе CSS Учебник.
Определение стилей для класса
Чтобы определить свойства CSS для класса, напишите точку (.) символ, за которым следует название класса. Затем добавьте свойства CSS в фигурные скобки {}:
Пример
Стиль всех элементов с именем класса "city":
<style>
.city {
background-color: tomato;
color: white;
padding:
10px;
}
</style>
<h2 class="city">Лондон</h2>
<p>Лондон - столица Англии.</p>
<h2 class="city">Париж</h2>
<p>Париж - столица Франции.</p>
<h2 class="city">Токио</h2>
<p>Токио - столица Японии.</p>
Результат:
Лондон
Лондон - столица Англии.
Париж
Париж - столица Франции.
Токио
Токио - столица Японии.
Несколько классов
HTML элементы могут иметь более одного имени класса.
Чтобы указать несколько классов, разделите имена классов пробелом, например <div class="city main">. Это позволяет объединить несколько классов CSS для одного HTML элемента.
В следующем примере первый элемент <h2> принадлежит обоим классам
city, а также к классу main, и получит стили CSS от обоих классов:
Пример
<h2 class="city main">Лондон</h2>
<h2 class="city">Париж</h2>
<h2 class="city">Токио</h2>
Попробуйте сами »
Различные элементы могут иметь один и тот же класс
Различные HTML элементы могут указывать на одно и то же имя класса.
В следующем примере оба варианта <h2> и <p>
указывает на то, что класс "city" будет разделять один и тот же стиль:
Использование атрибута class в JavaScript
Имя класса также может использоваться JavaScript для выполнения определенных задач для определенных элементов.
JavaScript может получить доступ к элементам с определенным именем класса с помощью метода getElementsByClassName():
Пример
Нажмите на кнопку, чтобы скрыть все элементы с именем класса "city":
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>
Попробуйте сами »
Не волнуйтесь, если вы не понимаете код в приведенном выше примере.
Вы узнаете больше о JavaScript в разделе HTML JavaScript, или вы можете изучить, JavaScript Учебник.
Краткое содержание главы
- HTML атрибут
classуказывает одно или несколько имен классов для элемента - Классы используются CSS и JavaScript для выбора и доступа к определенным элементам
- Атрибут
classможет быть использован для любого HTML элемента - Имя класса чувствительно к регистру
- Различные элементы HTML могут указывать на одно и то же имя класса
- JavaScript может получить доступ к элементам с определенным именем класса с помощью мтода
getElementsByClassName()