HTML атрибут class
используется для указания класса элемента HTML.
Несколько элементов HTML могут иметь один и тот же класс.
Атрибут class
часто используется для указания имени класса в таблице стилей. Он также может использоваться JavaScript для доступа и управления элементами с определенным именем класса.
В следующем примере у нас есть три элемента <div>
с атрибутом class со значением "city
". Все три элемента <div>
будут иметь одинаковый стиль в соответствии с определением стиля .city
в разделе head
:
Москва столица России.
Берлин столица Германии.
Токио столица Японии.
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: rgba(137,171,204,1);
color: white;
border: 2px solid 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>
В следующем примере у нас есть два элемента <span>
с атрибутом class
со значением "note
". Оба элемента <span>
будут иметь одинаковый стиль в соответствии с определением стиля .note
в разделе заголовка:
Это некоторый важный текст.
<!DOCTYPE html>
<html>
<head>
<style>
.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>Мой <span class="note">Важный</span> Заголовок</h1>
<p>Это некоторый <span class="note">важный</span> текст.</p>
</body>
</html>
Для того чтобы создать класс; напишите символ точки (.), за которым следует имя класса. Затем определите свойства CSS в фигурных скобках {}.
Используйте CSS для стилизации элементов с именем класса "city
":
Москва столица России.
Берлин столица Германии.
Токио столица Японии.
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: rgba(137,171,204,1);
color: white;
border: 2px solid white;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<h2 class="city">Москва</h2>
<p>Москва столица России.</p>
<h2 class="city">Берлин</h2>
<p>Берлин столица Германии.</p>
<h2 class="city">Токио</h2>
<p>Токио столица Японии.</p>
</body>
</html>
HTML-элементы могут принадлежать более чем одному классу.
Чтобы определить несколько классов, разделите их имена пробелом, например. <div class=city main">. В итоге элемент будет оформлен в соответствии со всеми указанными классами.
В следующем примере первый элемент <h2>
принадлежит как классу city
, так и к main
классу, и получит стили CSS от обоих классов:
Здесь все три элемента h2
принадлежат классу "city
". Кроме того, Москва также относится к классу "main
", который выравнивает текст по центру.
<h2 class="city main">Москва</h2>
<h2 class="city">Берлин</h2>
<h2 class="city">Токио</h2>
Различные элементы HTML могут указывать на одно и то же имя класса.
В следующем примере и <h2>
, и <p>
указывают на класс "city
" и будут иметь один и тот же стиль:
Берлин столица Германии
Даже если два элемента имеют разные имена тегов, они оба могут указывать на один и тот же класс и иметь один и тот же стиль CSS.
<h2 class="city">Берлин</h2>
<p class="city">Берлин столица Германии.</p>
Имя класса также может использоваться JavaScript для выполнения определенных задач для определенных элементов.
JavaScript может получить доступ к элементам с определенным именем класса с помощью метода getElementsByClassName()
:
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>
class
указывает одно или несколько имен классов для элемента;class
можно использовать в любом элементе HTML;getElementsByClassName()
.Вопрос по атрибуту Class
Проверьте себя, насколько хорошо вы запомнили материал.