§ 21. Стилевое форматирование

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

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

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

Селектор — часть правила, указывающая, к каким элементам страницы применяется стиль. Например, селектор p выбирает абзацы, созданные тегом p. Он нужен, чтобы браузер понимал, какие именно элементы следует оформить по правилу.

Свойство и значение — пара в стилевом правиле: свойство задаёт характеристику оформления, а значение — конкретный вариант этой характеристики. Например, свойство color отвечает за цвет текста, а значение blue задаёт синий цвет. Такая запись позволяет описать оформление точно и понятно для браузера.

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

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

Правило CSS записывают в виде селектора и блока объявлений в фигурных скобках: p { color: blue; }. Селектор стоит перед скобками, а внутри находятся свойства и значения. Двоеточие связывает характеристику с её вариантом, а точка с запятой отделяет одно объявление от следующего. Благодаря такой записи браузер может разобрать правило на части и применить каждую настройку.

Когда браузер обрабатывает страницу, он сравнивает селекторы с элементами HTML. Если селектор подходит элементу, браузер применяет к нему объявления из правила. Например, p соответствует всем абзацам, созданным тегом p, поэтому одно правило может повлиять сразу на несколько таких элементов. Если совпадения нет, правило не изменит внешний вид этого элемента.

Свойства CSS позволяют настраивать разные стороны оформления. Свойство color задаёт цвет текста, font-size — размер, text-align — выравнивание, а background-color — цвет фона. Свойство font-family выбирает гарнитуру, то есть вид шрифта. Значения указывают конкретно: например, можно выбрать синий цвет, размер 18px, выравнивание по центру или название шрифта.

Общее правило полезно, когда одинаково оформляют много элементов: вместо отдельных настроек для каждого абзаца достаточно правила для селектора p. Если понадобится изменить оформление всех абзацев, нужно будет поправить это правило, а не искать каждый элемент отдельно. Это помогает сохранять единый вид страницы и уменьшает число повторяющихся записей. Отдельные правила при этом могут задавать оформление другим типам элементов.

Примеры стилевых свойств CSS

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

Разбор задач

Синий цвет заголовков первого уровня

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

1. Заголовки первого уровня в HTML обозначаются тегом h1, поэтому селектором будет h1.
2. Для цвета текста выбираем свойство color, а для синего цвета — значение blue.
3. Записываем объявление внутри фигурных скобок и завершаем его точкой с запятой: h1 { color: blue; }.

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

Размер и выравнивание всех абзацев

Условие. Нужно оформить все абзацы страницы: задать размер шрифта и выравнивание по ширине. Так как оформление должно относиться ко всем абзацам, сначала выбираем общий для них селектор. Затем в одном правиле записываем два объявления.

1. Абзацы обозначаются тегом p, поэтому селектор правила — p.
2. Размер текста задаёт font-size, а выравнивание — text-align. Для размера можно выбрать, например, значение 16px, а для выравнивания по ширине — justify.
3. Помещаем оба объявления в один блок: p { font-size: 16px; text-align: justify; }. После каждого объявления ставим точку с запятой.

Ответ. Запись p { font-size: 16px; text-align: justify; } применит размер 16px и выравнивание по ширине ко всем абзацам p. Если требуется другой размер, можно заменить 16px, не меняя селектор и свойство выравнивания.

Определяем, какие элементы изменятся

Условие. Есть фрагмент HTML и таблица стилей; нужно определить, какие элементы изменят цвет, размер и выравнивание. Например, в HTML встречаются h1 и p, а в стилях записаны правила для h1 и p. Чтобы решить задачу, необходимо не просто посмотреть на свойства, а сопоставить каждый селектор с элементами.

1. Выписываем элементы HTML и их теги: например, заголовок h1 и абзацы p. Это помогает увидеть, какие элементы вообще могут получить оформление.
2. Проверяем каждый селектор в таблице стилей. Правило h1 относится к заголовку первого уровня, а правило p — ко всем абзацам; другие элементы эти правила не выбирают.
3. Для совпавших элементов читаем объявления: color меняет цвет текста, font-size — размер, text-align — выравнивание. Если у элемента совпало несколько правил, учитываем каждое подходящее объявление.

Ответ. Цвет, размер и выравнивание изменятся только у тех элементов, которые подходят под соответствующие селекторы. Чтобы назвать конкретные элементы, сверяйте теги в HTML с селекторами в таблице стилей, а затем выписывайте заданные для них свойства.

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

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

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

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

Иногда ожидают, что правило изменит элемент, которого нет на странице или который не подходит под селектор. Причина — проверяют только таблицу стилей, не сверяя её с HTML. Найдите на странице элемент и проверьте, совпадает ли его тег с селектором; если совпадения нет, это правило на него не подействует.

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

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

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

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

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