3.4 KiB
title, localeTitle
| title | localeTitle |
|---|---|
| CSS Classes | Классы CSS |
Классы CSS
Классы - это эффективный способ группировки элементов HTML, чтобы они могли использовать одни и те же стили. Классы CSS (каскадные таблицы стилей) могут использоваться для упорядочивания и оформления элементов веб-страницы.
При написании HTML вы можете добавлять классы к элементу. Просто добавьте атрибут class="myclass" к элементу. Несколько элементов могут иметь один и тот же класс, а один элемент может иметь несколько классов. Вы можете назначить несколько классов элементу, добавив все необходимые имена классов, разделенные пробелом, к атрибуту class в HTML.
<h1 class="super-man other-class third-class">"Here I come to save the day!"</h1>
<p>is a popular catchphrase that <span class="super-man">Super Man</span> often said.</p>
Затем вы можете стилизовать эти элементы с помощью CSS. Классы ссылаются на период (.) Перед ними в CSS, но вы не должны помещать периоды в свой HTML.
.super-man {
color: red;
background-color: blue;
}
Этот код дает синий фон и красный цвет текста всем элементам, которые имеют класс super-man . Просмотрите этот пример в CodePen .
Вы также можете объявить более одного класса для своего элемента, например:
<div class="ironMan alfred">
We're going to save you.
</div>
Затем в вашем файле css:
.ironMan{
color:red;
}
.alfred{
background-color: black;
}
Примечание: имена классов традиционно являются строчными, каждое слово в имени многословного класса разделяется дефисом (например, «супер-человек»).
Вы также можете комбинировать классы в одной строке:
.superMan .spiderMan {
color: red;
background-color: blue;
}
Вы можете увидеть результат приведенного выше кода здесь . Узнайте , как объединить классы CSS , используя селекторы здесь .