§ 6. Структура CSS. Встроенные и внешние стили

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

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

CSS-правило — конструкция из селектора и блока объявлений. Общая форма: селектор { свойство: значение; }. Такие правила нужны, чтобы указать браузеру, какие элементы оформить и каким образом.

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

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

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

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

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

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

Внешние стили хранят в отдельном файле с расширением .css, а HTML-документ связывают с ним элементом link в head. В атрибуте rel указывают stylesheet, чтобы обозначить таблицу стилей, а в href — путь к файлу. Если путь указан неверно, браузер не сможет найти правила и оформление не применится.

Атрибут style записывает CSS прямо в открывающий тег отдельного элемента, поэтому заданное там оформление относится к этому элементу. Такой способ полезен для единичного изменения, но правило неудобно повторять для многих элементов. При выборе способа учитывают область действия и то, потребуется ли использовать оформление снова.

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

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

Разбор задач

Задача 1. Для всех абзацев страницы нужно задать синий цвет текста. Запишите правило с селектором по имени тега. Требуется выбрать все абзацы, а не перечислять их по одному. Для этого имя тега p используют как селектор.

1. Выбираем селектор p: он соответствует элементам абзаца.
2. Для цвета текста используем свойство color.
3. Задаём значение blue и заключаем объявление в фигурные скобки.

Ответ: p { color: blue; }. Браузер применит это правило ко всем абзацам страницы.

Задача 2. Добавьте к HTML-странице встроенные правила, чтобы заголовки h1 отображались зелёным цветом, а абзацы — шрифтом Arial. Поскольку правила нужны странице, их можно разместить в элементе style внутри head. Для двух разных типов элементов нужны два отдельных селектора.

1. Внутри head добавляем элемент style, чтобы браузер распознал текст внутри него как CSS.
2. Для заголовка выбираем h1 и задаём свойство color со значением green.
3. Для абзацев выбираем p и задаём свойство font-family со значением Arial.

Ответ: <head><style> h1 { color: green; } p { font-family: Arial; } </style></head>. Каждый селектор получает собственный блок объявлений, поэтому настройки заголовка и абзаца не смешиваются.

Задача 3. Правила оформления должны храниться в файле styles.css и применяться к странице. Нужно указать, что добавить в HTML-документ и где. Поскольку файл внешний, его нельзя подключить одним лишь упоминанием имени: HTML-документу нужна ссылка на него.

1. Находим в HTML-документе элемент head: там размещают информацию о подключаемых таблицах стилей.
2. Добавляем link и указываем rel="stylesheet", чтобы обозначить тип подключаемого файла.
3. В атрибуте href записываем путь styles.css, соответствующий расположению файла.

Ответ: внутри head добавить <link rel="stylesheet" href="styles.css">. Если файл находится в другой папке, в href указывают соответствующий путь, иначе браузер не сможет загрузить стили.

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

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

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

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

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

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

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

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

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

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

• CSS описывает оформление элементов веб-страницы.
• CSS-правило состоит из селектора и блока объявлений.
• В объявлении свойство отделяется от значения двоеточием.
• Объявления внутри блока разделяются точками с запятой.
• Элемент style размещает таблицу стилей внутри HTML-документа.
• Элемент link подключает внешний CSS-файл и обычно находится в head.
• Атрибут style задаёт оформление непосредственно для отдельного HTML-элемента.