В этом уроке мы разберемся с базовым синтаксисом для написания правил CSS. Правила CSS являются строительными блоками любой таблицы стилей, которая ее составляет. Каждое правило представляет собой отдельный оператор, который определяет, какие элементы следует стилизовать и как эти стили следует применять.
Синтаксис CSS
Базовый синтаксис для написания простого правила CSS выглядит следующим образом:
selector {
property1: value1;
property2: value2;
/* more declarations */}
Эта структура определяет базовый формат или синтаксис для написания правил CSS. В этом синтаксисе есть четыре основные части правила CSS: селектор, блок объявления, свойство и значение. Важно понимать эти четыре термина и их определения.
Селектор: сообщает браузеру, какой элемент(ы) на веб-странице следует стилизовать.
Блок объявлений: Код между открывающейся фигурной скобкой ({) и закрывающейся фигурной скобкой (}) называется блоком объявлений. Он может содержать одно или несколько объявлений, определяющих стили, применяемые к элементу(ам) HTML. Каждое объявление состоит из двух частей: свойства и значения, разделенных двоеточием (:). Объявление всегда заканчивается точкой с запятой (;).
Свойство: Свойство — это аспект выбранных элементов HTML, который вы хотите применить. Это может быть одно слово или слово с дефисом, например, color, overflow, background-color, font-size, list-style-type и т. д. Широкий диапазон свойств определяется официальной спецификацией CSS.
Значение: оно присваивается свойству. Например, свойство цвета может иметь значение синий.
Пример правил CSS
Давайте рассмотрим несколько допустимых примеров написания правил CSS на основе приведенного выше синтаксиса.
Пример 1:
/* Style for all h1 elements */h1 {
color: blue; /* Sets the text color to blue */ font-size: 24px; /* Sets the font size to 24 pixels */ text-align: center; /* Centers the text */}
В этом примере h1 — селектор. Он стилизует все элементы <h1> на веб-странице. За селектором h1 следует блок объявлений, заключенный в фигурные скобки {}. Внутри этого блока объявлений есть несколько объявлений, таких как color: blue;, font-size: 24px; и text-align: center;, как показано на рисунке ниже.
В первом объявлении color — это имя свойства, а blue — это его значение, присвоенное ему. Во втором объявлении font-size — это свойство, а 24px — это значение свойства. Аналогично, text-align — это свойство, а center — это значение свойства в третьем объявлении. Каждое объявление разделяется двоеточием и заканчивается точкой с запятой.
Декларация color: blue; устанавливает цвет текста всех элементов <h1> на синий. Декларация font-size: 24px; устанавливает размер шрифта всех элементов <h1> на 24 пикселя. Аналогично, декларация text-align: center; выравнивает текст всех элементов <h1> по центру.
Пример 2:
/* Style for all p elements */p {
color: green; /* Sets the text color to green */ font-size: 18px; /* Sets the font size to 18 pixels */ line-height: 1.5; /* Sets the line height to 1.5 times the font size */}
В этом примере p — селектор, тогда как color: green;, font-size: 16px и line-height: 1.5 — объявления в блоке объявлений.
Давайте рассмотрим пример, в котором мы реализуем все указанные выше свойства CSS, определенные с использованием базового синтаксиса CSS.
Пример 3:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS Example</title>
<style>
h1 {
color: blue;
font-size: 24px;
text-align: center;
}
p {
color: green;
font-size: 18px;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>This is a h1 heading.</h1>
<p>This is a paragraph.</p>
</body>
</html>
Синтаксис для объединения правил CSS
Если два или более правил стиля в CSS используют один и тот же селектор, мы можем объединить их, перечислив их объявления в фигурных скобках. Важно включить конечную точку с запятой для разделения двух объединенных таким образом правил.
Рекомендуется, чтобы вы обязательно писали конечную точку с запятой, даже если вы объявляете только одно объявление в блоке объявлений. Базовый синтаксис для объединения двух или более правил стиля CSS с одним и тем же селектором в блоке объявлений следующий:
selector {property1: value1; property: value2; property3: value3;.... }
Пример 4:
p { color: blue; }
p { font-size: large; }
Вы можете объединить эти правила в одно правило, например, так:
p { color: blue; font-size: large; }
Вы также могли бы записать правило следующим образом:
p {
color: blue; font-size: large;
}
Обратите внимание, что браузеры не обращают внимания на пробелы.
Объединение правил CSS с одинаковыми объявлениями и разными селекторами
Вы также можете объединить несколько правил CSS, если они имеют одинаковые объявления и разные селекторы. Вы можете объединить их в одно правило, перечислив селекторы, разделенные запятыми. Общий синтаксис для объединения правил CSS, имеющих одинаковые объявления, но разные селекторы, выглядит следующим образом:
selector1, selector2, selector3 {
property1: value1;
property2: value2;
/* same declarations */}
Написание правил CSS таким образом помогает сделать код более лаконичным и удобным для поддержки за счет сокращения повторений.
Пример 5:
/* Combining rules with the same declarations */h1, h2, h3 {
color: blue;
font-size: 24px;
text-align: center;
}
В этом примере CSS применяет то же правило стилизации, например, color: blue, font-size: 24px, text-align: center к элементам <h1>, <h2> и <h3>. Мы можем избежать избыточности в этом коде CSS, объединив эти селекторы в одно правило, разделенное запятыми.
Объединение правил CSS с множественными селекторами и объявлениями
Вы можете использовать более одного селектора вместе с несколькими объявлениями в CSS. Это совершенно законно и очень распространено. Более того, вы также можете написать дополнительные правила для дальнейшей стилизации этих селекторов вместе или по отдельности. Посмотрите на пример кода ниже.
Пример 6:
/* Styling multiple selectors with multiple declarations */h1, h2 {
color: blue;
font-size: 24px;
}
p {
color: green;
font-size: 16px;
}
/* Additional rule for h1 selector */h1 {
text-align: center;
}
/* Additional rule for h2 selector */h2 {
text-decoration: underline;
}
В этом примере:
- Оба элемента
<h1>и<h2>оформлены в синем цвете и имеют размер шрифта 24 пикселя. - Все элементы
<p>оформлены в зеленом цвете и имеют размер шрифта 16 пикселей. - Более того, элемент
<h1>выровнен по центру, а элемент<h2>украшен подчеркиванием.
Здесь показано, как можно объединить несколько селекторов с несколькими объявлениями и написать дополнительные правила для дальнейшей стилизации этих селекторов как вместе, так и по отдельности.
Как браузер интерпретирует правила стиля CSS?
Веб-браузер интерпретирует правило CSS, выполняя следующие шаги:
(1) Чтение файла CSS: браузер считывает файл CSS, связанный с документом HTML, или правила стиля CSS, добавленные внутри тега <style>, определенного в разделе заголовка документа HTML.
(2) Определите селектор: браузер идентифицирует селекторную часть правила CSS, чтобы определить, какие элементы HTML он должен применить.
(3) Сопоставление элементов: браузер сопоставляет селектор с соответствующими элементами в HTML-документе.
(4) Применить объявления: если совпадение найдено, браузер применяет объявления (пары «свойство-значение»), указанные в правиле, к соответствующим элементам.
(5) Каскадирование и специфичность: если к одному и тому же элементу применяется несколько правил, браузер определяет, какое правило имеет приоритет, на основе правил каскадирования CSS и специфичности селекторов.
(6) Отображение стилей: Наконец, браузер отображает стили на веб-странице, отображая элементы в соответствии с примененными свойствами CSS.
