§ 31. Оформление НТМL-страницы

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

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

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

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

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

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

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

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

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

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

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

Способы задания стилей для HTML-страницы

Выбирайте строку по масштабу оформления: один элемент, одна страница или несколько страниц. Если одинаковый стиль нужен на разных страницах, внешний файл избавляет от дублирования правил. Для разовой проверки можно применить встроенный стиль, но большие наборы стилей удобнее хранить отдельно.

Разбор задач

Изменить цвет текста одного заголовка, не затрагивая остальные элементы страницы

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

1. Добавим нужному заголовку атрибут id, например id="main-title". Значение идентификатора должно отличать этот элемент от остальных на странице.
2. Создадим правило с селектором #main-title и объявлением color: red;. Символ # перед именем указывает, что селектор обращается к элементу с таким id.
3. Проверим результат в браузере: измениться должен только заголовок с этим идентификатором. Если цвет поменялся у других элементов, значит выбран более общий селектор.

Ответ: задайте цвет через CSS-селектор уникального id, например #main-title { color: red; }. Это правило не предназначено для остальных заголовков.

Сделать все заголовки второго уровня на странице синими и увеличить размер шрифта

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

1. Выберем селектор h2, который соответствует заголовкам второго уровня.
2. В фигурных скобках зададим color: blue; и font-size: 24px;. Первое объявление меняет цвет, второе — размер шрифта.
3. Проверим все заголовки h2 на странице. Если правило написано верно, оно повлияет на каждый из них, но не изменит заголовки других уровней.

Ответ: используйте правило h2 { color: blue; font-size: 24px; }. Значения можно заменить, если нужен другой оттенок или размер.

Оформить одинаково несколько HTML-страниц и обеспечить возможность изменить их оформление в одном месте

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

1. Создадим отдельный файл, например site.css, и запишем в него общие правила оформления.
2. Подключим таблицу в разделе head каждой HTML-страницы элементом link, указав правильный адрес файла в атрибуте href.
3. Откроем страницы в браузере и проверим, что стили загрузились. Для изменения общего вида будем редактировать site.css, а не копии правил в HTML-документах.

Ответ: вынесите правила в общий внешний файл CSS и подключите его ко всем нужным страницам. Тогда единое оформление можно будет менять в одном месте.

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

Селектор и свойство часто принимают за одно и то же, потому что оба записываются в правиле CSS. Однако селектор выбирает элементы, а свойство задаёт характеристику их оформления. Чтобы проверить себя, спросите отдельно: «Что выбираю?» и «Что меняю?» В записи h2 { color: blue; } h2 — селектор, а color — свойство.

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

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

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

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

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

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

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