CSS-синтаксис
CSS-синтаксис состоит из 3 частей: селектора, свойства и значения. Изучайте с примерами на W3Docs!
CSS-синтаксис — это набор правил, сообщающих браузеру, как стилизовать HTML. Каждое CSS-правило следует одному и тому же шаблону, поэтому, освоив структуру одного правила, вы сможете читать их все. В этой главе разбирается шаблон на три части, приводится рабочий пример и объясняется написание комментариев.
Если вы только начинаете изучать CSS, сначала прочитайте введение в CSS, чтобы узнать, как таблицы стилей подключаются к странице.
Структура CSS-правила
CSS правило (также называемое набором правил) состоит из двух частей: селектора и блока объявлений. Внутри блока объявлений каждое объявление представляет собой пару property: value.
selector {
property: value;
}В целом правило включает три ключевых элемента:
- Селектор — какой элемент (или элементы) стилизовать.
- Свойство — какой аспект изменить.
- Значение — настройка, которую нужно применить.
Селектор
Селектор выбирает HTML-элемент, который нужно стилизовать. Это может быть любой тег, например <h1> или <p>, класс или идентификатор. Один селектор может содержать одно или несколько объявлений. Селекторы — отдельная тема; полный список см. в разделе CSS-селекторы.
Свойство
Свойство — это конкретная характеристика, которую вы хотите изменить, например color, border или font-size. Каждое свойство принимает определённый тип значения, и у каждого свойства должно быть пара значение.
Значение
Значение — то, что вы присваиваете свойству. Например, значением свойства color может быть ключевое слово red или шестнадцатеричный код #f1f1f1.
Синтаксические правила, которые нужно помнить
- Двоеточие (
:) разделяет свойство и его значение. - Точка с запятой (
;) завершает каждое объявление и разделяет одно объявление от следующего. - Весь блок объявлений заключается в фигурные скобки (
{ }). - CSS игнорирует лишние пробелы и переводы строк между селекторами, свойствами и значениями, поэтому правила можно форматировать для удобства чтения.
Селектор может иметь более одного объявления, каждое из которых разделяется точкой с запятой:
p {
color: #1c87c9;
font-size: 16px;
line-height: 1.5;
}Пример CSS-синтаксиса
Пример CSS-синтаксиса
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
a {
color: #1c87c9;
}
</style>
</head>
<body>
<a>The color of this link is #1c87c9.</a>
</body>
</html>Результат
В приведённом выше примере тег <a> является селектором, color — свойством, а #1c87c9 — значением. Свойство и его значение находятся внутри фигурных скобок, разделены двоеточием и завершены точкой с запятой.
Комментарии CSS
Комментарии позволяют добавлять пояснения или заметки в таблицу стилей. Браузеры их игнорируют, поэтому они никак не влияют на страницу. Они удобны для документирования причины существования правила, маркировки разделов или временного отключения объявления при отладке.
Комментарий CSS начинается с /* и заканчивается */:
Пример комментариев в CSS
/* This is a comment */Комментарии также могут занимать несколько строк, что удобно для одновременного отключения нескольких объявлений:
/*
This whole block is ignored by the browser.
color: red;
font-size: 20px;
*/Обратите внимание, что комментарии CSS не могут быть вложенными — как только вы открываете /*, первый же */ завершает комментарий. Также помните, что // — это не корректный CSS-комментарий; он работает в некоторых препроцессорах, например в Sass, но не в обычном CSS.
Пример комментариев CSS
Примеры комментариев CSS
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
padding-left: 10px;
font-size: 26px;
line-height: 30px;
/*color:red;*/
}
p {
color: #1c87c9;
/*font-size:25px;
border:1px solid red;
*/
padding: 10px;
line-height: 30px;
}
</style>
</head>
<body>
<h1>CSS Comments</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</p>
</body>
</html>Итог
- CSS-правило — это селектор и блок объявлений в фигурных скобках.
- Каждое объявление — это пара
property: value, завершаемая точкой с запятой. - Пробелы игнорируются, поэтому правила можно форматировать так, как удобно для чтения.
- Комментарии записываются в виде
/* ... */и могут занимать несколько строк, но не могут быть вложенными.
Далее узнайте, как применять эти правила к странице в разделе HTML-стили, а затем изучите CSS-селекторы, чтобы точно выбирать нужные элементы.