Основы CSS

Изучите базовый синтаксис и элементы CSS и то, как он может использоваться для стилизации веб-страниц.

CSS — это язык таблиц стилей, используемый для стилизации HTML-элементов. Отдельный язык оформления позволяет фронтенд-разработчикам и дизайнерам проявить креативность и создавать уникальные дизайнерские решения.

CSS использует собственный синтаксис, который отличается от HTML, хотя и работает с его элементами и атрибутами. Чтобы понять, как работает CSS, нужно знать, из чего он состоит.

Мы используем CSS для написания правил, которые делают всё таким, каким мы это представляем. Однако создание CSS-правил невозможно без понимания анатомии и назначения селекторов, деклараций, свойств и их значений.

Определение CSS

У всех языков есть базовый словарный запас, которым пользуются как носители, так и туристы, желающие заказать еду или спросить дорогу. Продвинутые учащиеся или носители языка обладают более широким и богатым словарным запасом, что делает их речь изысканной и выразительной. Точно так же HTML — это основа любого сайта, а CSS — его красивая спутница.

CSS (Cascading Style Sheets — каскадные таблицы стилей) — это язык, который веб-разработчики используют для оформления HTML-элементов, отображаемых на экране. Стили обычно сохраняются в отдельных внешних CSS-файлах.

Правила синтаксиса CSS

Синтаксис CSS состоит из набора правил. Правило, в свою очередь, состоит из двух частей: селектора и блока деклараций. Селектор указывает на элемент (или элементы), который вы хотите стилизовать, а декларации определяют, какой стиль вы хотите применить.

Например, вот правило для стилизации всех заголовков <h1> с размером шрифта 32px:

h1 {
font-size: 32px;
}

Каждая декларация заканчивается точкой с запятой (;), а блок деклараций должен быть заключён в фигурные скобки ({ }).

Селектор CSS

Селектор — это часть синтаксиса CSS, которая указывает на HTML-элемент, который вы хотите стилизовать. Например, чтобы стилизовать заголовки <h1> на странице, мы используем селектор h1. Правило для этого селектора повлияет на все элементы <h1> на странице, потому что мы используем селектор по типу элемента.

Существует множество типов селекторов в CSS, позволяющих точнее выбирать элементы: по id, классам, атрибутам или на основе их расположения.

Блок деклараций CSS

Блок деклараций определяет одно или несколько свойств элемента, на который указывает селектор. Количество деклараций зависит от количества свойств, которые вы хотите задать. Каждая декларация включает имя свойства CSS и значение — так же, как при использовании встроенного CSS.

Например, следующее CSS-правило содержит две декларации: одну, которая задаёт цвет текста для абзацев <p> как lavender, и другую, которая устанавливает размер шрифта в 12px:

p {
color: Lavender; font-size: 12px;
}

Свойства CSS

Каждая декларация состоит из двух частей — свойства и значения — разделённых двоеточием. Свойство указывает на характеристику, которую вы хотите определить. Например, чтобы задать размер шрифта, используется свойство font-size.

С помощью свойств можно стилизовать практически всё на странице: текст, выравнивание, макет, таблицы и т. д. Алфавитные списки всех CSS-свойств можно найти на разных ресурсах.

Значение CSS-свойства

Каждое CSS-свойство должно иметь значение. Значение определяет, как именно будет отображаться заданное свойство.

У каждого свойства в CSS есть набор допустимых значений. Большинство значений — это простые ключевые слова или числовые значения. Некоторые свойства принимают всего несколько вариантов. Например, свойство text-align может принимать 6 значений: left, right, center и ещё пару более специфических.

Другие свойства, такие как color, могут принимать множество значений и типов значений. Цвет можно задать с помощью hex-кодов, RGB-значений и цветовых ключевых слов.

Применение одних и тех же CSS-правил к нескольким элементам

В стилевых таблицах часто бывают элементы, для которых применяются одинаковые правила CSS. Допустим, вы хотите задать красный цвет для всех элементов <h1>, <h2> и <p>. Чтобы сократить количество кода, можно сгруппировать селекторы, указав их через запятую:

h1, h2, p {
color: red;
}

Совет! Некоторые считают такой синтаксис комбинаторным селектором типа «или».

Фигурные скобки в CSS

Во всех языках есть правила — не потому что люди их обожают, а потому что именно они делают возможным понимание. Например, фразы «Казнить нельзя помиловать» и «Казнить, нельзя помиловать» отличаются только запятой, но смысл — противоположный. Люди догадаются по контексту разговора, а компьютеру нужна точная инструкция.

Что произойдёт, если вы используете не те скобки или забудете их совсем? Ничего — буквально. Браузер не поймёт, что перед ним декларация, и не применит стиль к элементам. Убедитесь, что фигурные скобки всегда есть и обрамляют блок деклараций с двух сторон.

Порядок свойств и значений в CSS

Иногда порядок имеет значение, а иногда нет. В случае с CSS-декларациями порядок критически важен. Сначала нужно указать свойство, а затем его значение. Если перепутать порядок, браузер не поймёт ваш код и не применит стили. Также помните, что между свойством и значением обязательно должно быть двоеточие (:).

Использование точки с запятой для завершения декларации в CSS

В более ранних версиях CSS точка с запятой (;) использовалась для разделения деклараций в блоке. Однако это вызывало проблемы, так как разработчики часто забывали ставить символ при добавлении новых деклараций.

Сегодня точка с запятой нужна не для разделения, а для завершения декларации. Без неё правило не отработает или отработает некорректно.