CSS Синтаксис
Курс по основам CSS. W3Schools на русском языке. Уроки для начинающих
CSS Синтаксис
Набор правил CSS состоит из селектора и блока объявления (декларации):
Селектор указывает на элемент HTML, который вы хотите стилизовать.
Блок объявлений содержит одно или несколько объявлений, разделенных точкой с запятой.
Каждое объявление включает имя свойства CSS и значение, разделенное двоеточием.
Объявление CSS всегда заканчивается точкой с запятой, а блоки объявления заключаются в фигурные скобки.
Пример
В этом примере все <p> элементы будут выровнены по центру с текстом красного цвета:
p
{
color: red;
text-align: center;
}
Попробуй сам »
CSS Селекторы
CSS селекторы используются для "поиска" (или выбора) HTML элементов на основе их имени, идентификатора (id), класса (class), атрибута и т.д.
Элемент Селектор
Элемент Селектор выбирает элементы на основе имени элемента.
Пример
Вы можете выбрать все <p> элементы на странице вот так (здесь все элементы <p> будут выровнены по центру с текстом красного цвета):
p
{
text-align: center;
color: red;
}
Попробуй сам »
Селектор id
Селектор идентификаторов использует атрибут id HTML элемента для выбора определенного элемента.
Идентификатор элемента должен быть уникальным на странице, поэтому селектор id используется для выбора одного уникального элемента!
Чтобы выбрать элемент с определенным идентификатором, сначала пишется символ хеша (#), за которым следует id элемента.
Пример
Приведенное ниже правило стиля будет применено к HTML элементу с id="para1":
#para1
{
text-align: center;
color: red;
}
Попробуй сам »
Примечание: Название id не может начинаться с цифры!
Селектор class
Селектор class выбирает элементы с определенным атрибутом класса.
Чтобы выбрать элементы с определенным классом, введите символ точки (.), а затем имя класса.
Пример
В этом примере все HTML элементы с class="center" будут красными и выровненными по центру:
.center {
text-align: center;
color: red;
}
Попробуй сам »
Вы также можете указать, что класс должен затрагивать только определенные HTML элементы.
Пример
В этом примере только <p> элементы с class="center" будут выровнены по центру:
p.center {
text-align: center;
color: red;
}
Попробуй сам »
HTML элементы также могут ссылаться на несколько классов.
Пример
В этом примере <p> элемент будет стилизован в соответствии с class="center" и class="large":
<p class="center large">This paragraph refers to two classes.</p>
Попробуй сам »
Примечание: Имя класса не может начинаться с цифры!
Группировка селекторов
Если у вас есть элементы с одинаковыми определениями стиля, как эти:
h1
{
text-align: center;
color: red;
}
h2
{
text-align: center;
color: red;
}
p
{
text-align: center;
color: red;
}
Будет лучше сгруппировать селекторы, чтобы минимизировать код.
Чтобы сгруппировать селекторы, разделяйте каждый селектор запятой.
Пример
В этом примере мы сгруппировали селекторы из кода выше:
h1, h2, p
{
text-align: center;
color: red;
}
Попробуй сам »
CSS Комментарии
Комментарии используются для пояснения кода и могут помочь при редактировании исходного кода позднее.
Комментарии игнорируются браузерами и нужны только для людей, которые будут просматривать код.
Пример
CSS комментарий начинается с /* и заканчивается */. Комментарии также могут занимать несколько строк:
p
{
color: red;
/* Это однострочный комментарий */
text-align: center;
}
/* Это
многострочный
комментарий */
Попробуй сам »