§ 31. Оформление HTML-страницы

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

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

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

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

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

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

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

Правило CSS строится так: сначала записывают селектор, затем в фигурных скобках — пары «свойство: значение». Селектор определяет круг элементов, а объявления описывают, какие изменения с ними произойдут. Двоеточие отделяет название свойства от его настройки, а точка с запятой разделяет соседние объявления.

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

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

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

Способы задать оформление HTML-страницы

Выбирайте способ по масштабу задачи. Если нужно изменить один объект, достаточно встроенного стиля; для набора правил одной страницы подойдёт внутренняя таблица. Внешний файл удобнее всего для многостраничного сайта, потому что единые правила не приходится копировать.

Разбор задач

Синий цвет одного абзаца

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

1. Найдите нужный элемент абзаца в HTML-коде.
2. Добавьте ему атрибут style и укажите свойство color со значением blue: <p style="color: blue;">Текст</p>.
3. Проверьте, что атрибут находится именно у нужного абзаца, а не у другого элемента или общего правила.

Ответ: запись style="color: blue;" изменит цвет только выбранного абзаца. Остальные элементы останутся без этого изменения. Такой способ подходит для единичного, а не массового оформления.

Зелёные заголовки по центру

Условие: нужно сделать все заголовки второго уровня зелёными и выровнять по центру. Один селектор h2 выберет все такие заголовки на странице. В одном блоке можно задать оба свойства, поэтому отдельное правило для каждого изменения не требуется.

1. Запишите селектор h2, так как он соответствует элементам заголовков второго уровня.
2. Откройте фигурные скобки и добавьте color: green; для цвета текста.
3. В той же области укажите text-align: center; для выравнивания, затем закройте блок: h2 { color: green; text-align: center; }.

Ответ: правило применится ко всем элементам h2 на данной странице. Их текст станет зелёным и будет выровнен по центру. Другие уровни заголовков автоматически не изменятся, поскольку не подходят под селектор.

Общее оформление двух страниц

Условие: нужно подключить одну таблицу стилей к двум HTML-страницам и изменить цвет заголовков сразу на обеих. Общее правило следует вынести в файл, например site.css, а затем связать с ним оба документа. Тогда источник оформления будет один, и изменение в нём не придётся повторять дважды.

1. Создайте файл site.css и запишите в него правило h1 { color: navy; }.
2. В заголовке каждой HTML-страницы подключите этот файл записью <link rel="stylesheet" href="site.css">.
3. Сохраните файлы, проверьте правильность имени и пути, затем обновите обе страницы в браузере.

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

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

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

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

Селектор иногда путают со свойством, потому что оба записываются рядом в одном правиле. Селектор выбирает элементы, а свойство называет настраиваемую характеристику, например color. Чтобы проверить себя, задайте два вопроса: «что выбираем?» и «что изменяем?».

Внешний файл стилей не заработает, если HTML-документ неправильно с ним связан. Причиной может быть неверное имя файла, путь к папке или отсутствие записи подключения в заголовке. Проверьте совпадение имени и расположения файлов, а также наличие подключения в каждом нужном документе.

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

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

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

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

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