§ 7. Основные характеристики, описываемые в CSS

Определения и обозначения

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

Свойство CSS — характеристика элемента, которую можно настроить. Например, свойство color отвечает за цвет текста, а font-size — за его размер. Свойства нужны, чтобы точно описать, что именно следует изменить у выбранного элемента. Одному элементу можно задать сразу несколько свойств.

Значение свойства — конкретная настройка, которую ему присваивают. Например, red может быть значением цвета, а 18px — значением размера шрифта в пикселях. Значение уточняет браузеру, как применить свойство к элементу. Одно и то же свойство может иметь разные значения: текст можно сделать синим, красным или зелёным.

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

Как это устроено

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

Объявление состоит из названия свойства и его значения, разделённых двоеточием: color: blue;. Точка с запятой завершает объявление и отделяет его от следующего. Благодаря одинаковому порядку браузеру проще распознать, что именно настраивают и какое значение применяют. Несколько объявлений можно расположить в одном блоке, каждое с новой строки.

Цвет текста и цвет фона задают разными свойствами. color меняет цвет букв, а background-color — цвет области элемента за содержимым. Разделение позволяет, например, сделать тёмный текст на светлом фоне или изменить только цвет букв. Если указать лишь color, фон не станет автоматически такого же цвета.

Шрифтовые свойства отвечают за разные особенности букв. font-family задаёт гарнитуру — общий рисунок букв, например Arial; font-size устанавливает размер, а font-weight — насыщенность, от обычной до более жирной. Эти настройки разделены, потому что один и тот же текст может сохранить гарнитуру, но стать крупнее или жирнее. Для размера обычно указывают единицу измерения, например 18px.

Свойства форматирования текста меняют расположение или представление содержимого, не заменяя сам текст. Например, text-align задаёт горизонтальное выравнивание: по левому краю, по центру или по правому краю. Это полезно, когда нужно оформить заголовок или абзац, сохранив его слова без изменений. Значение свойства указывают после двоеточия, как и в других объявлениях CSS.

Основные свойства CSS и их назначение

Чтобы воспользоваться таблицей, сначала определите, какую характеристику элемента нужно изменить, а затем найдите соответствующее свойство. В третьем столбце приведены примеры значений, но для конкретного оформления можно выбрать и другие подходящие значения. Проверяйте, что значение относится именно к выбранному свойству.

Разбор задач

Задача 1. Нужно задать заголовку синий цвет текста с помощью CSS. По условию меняется только цвет букв, поэтому для настройки подходит свойство color, а не свойство фона. Выберем селектор h1, если речь идёт о заголовке первого уровня. Запишем значение цвета blue.

1. Выбираем селектор h1, чтобы правило относилось к заголовку первого уровня.
2. Записываем в фигурных скобках объявление color: blue;.
3. Проверяем, что сначала стоит свойство, после него двоеточие и значение, а в конце точка с запятой.

Ответ: h1 { color: blue; }. В этом правиле меняется цвет текста заголовка, а цвет его фона не задаётся. Если в документе несколько заголовков h1, правило может примениться ко всем таким элементам.

Задача 2. Нужно оформить абзац: задать цвет фона, размер шрифта и выравнивание по центру. Здесь нужны три разные характеристики, поэтому одного объявления недостаточно. Для абзацев возьмём селектор p, фон зададим через background-color, размер — через font-size, а выравнивание — через text-align. В качестве примеров значений используем lightyellow, 18px и center.

1. Записываем селектор p и открываем блок объявлений фигурной скобкой.
2. Добавляем background-color: lightyellow;, чтобы изменить фон абзаца.
3. Добавляем font-size: 18px; и text-align: center;, разделяя объявления точками с запятой.
4. Закрываем блок фигурной скобкой и проверяем написание свойств и значений.

Ответ: p { background-color: lightyellow; font-size: 18px; text-align: center; }. Все три настройки относятся к абзацам, выбранным селектором p. При необходимости можно заменить значения, не меняя названия свойств.

Задача 3. Найдите и исправьте ошибки в правиле, где для текста заданы цвет, гарнитура и размер шрифта: p { blue color; font-family Arial; font-size: 18; }. Сначала проверим, соблюдён ли порядок частей объявления, затем — присутствуют ли двоеточия и точки с запятой. Отдельно проверим значение размера: число 18 записано без единицы измерения. Такой разбор по шагам помогает не ограничиваться поиском одной опечатки.

1. В первом объявлении переставляем части: пишем color: blue;.
2. Во втором добавляем двоеточие между font-family и значением: font-family: Arial;.
3. В третьем указываем единицу измерения: font-size: 18px;.
4. Проверяем, что все объявления разделены точками с запятой, а блок закрыт фигурной скобкой.

Ответ: p { color: blue; font-family: Arial; font-size: 18px; }. Теперь каждое объявление начинается с названия свойства, за которым следуют двоеточие и значение. Запись размера с px указывает браузеру, в каких единицах заданы 18.

Типичные ошибки

Не путайте color и background-color: первое свойство задаёт цвет текста, второе — фона элемента. Ошибку допускают, потому что оба свойства связаны с цветом. Чтобы проверить себя, представьте результат: должны измениться буквы или область за ними? Выберите свойство по этой характеристике.

Не ставьте значение перед названием свойства и не пропускайте двоеточие. Правильный порядок — сначала свойство, затем двоеточие и значение, например color: red;. Перестановка часто возникает, когда запись читают как обычную фразу. Проверьте каждое объявление по схеме «свойство: значение».

Если между несколькими объявлениями пропущена точка с запятой, браузеру может быть сложнее правильно разобрать следующую настройку. Обычно её забывают при добавлении нового объявления или переносе строки. Проверьте, что каждый параметр отделён точкой с запятой от следующего. Это также делает правило понятнее при чтении.

Для размера шрифта не ограничивайтесь числом, например 18: укажите единицу измерения, например 18px. Число без единицы не объясняет, в каких единицах задан размер. Ошибку легко пропустить, если проверять только наличие значения после двоеточия. Перечитайте объявление font-size и убедитесь, что у числа есть подходящее обозначение единицы.

Связь с другими темами

Для работы с CSS полезно понимать, как HTML задаёт структуру веб-страницы и что такое HTML-элемент. Именно элементы выбирают для оформления, а CSS задаёт им внешний вид. Если не различать структуру и оформление, будет трудно понять, к чему применяется правило. Например, HTML создаёт абзац, а CSS может изменить его цвет и выравнивание.

Знание основных свойств помогает создавать оформление страниц и служит основой для следующих тем. Селекторы позволяют точнее выбирать элементы, каскад объясняет, как браузер решает, какие стили применить, а адаптивная вёрстка помогает подстраивать страницу под разные экраны. Понимание записи свойства и значения пригодится при чтении всех этих правил. Поэтому сначала важно уверенно разбираться в простых объявлениях.

Что запомнить

• HTML задаёт структуру страницы, а CSS — её оформление.
• Правило CSS связывает селектор с набором объявлений.
• Объявление состоит из свойства и его значения.
• Свойство color задаёт цвет текста, а background-color — цвет фона.
• font-family, font-size и font-weight отвечают за разные характеристики шрифта.
• Несколько объявлений в одном правиле разделяют точками с запятой.