Введение в CSS

Cascading Style Sheets (CSS, «каскадные таблицы стилей») описывает внешний вид страницы. HTML обозначает заголовки, абзацы и другие элементы, а CSS задаёт их цвет, шрифт, размеры и отступы. Одно правило может изменить сразу несколько элементов, поэтому оформление удобно хранить отдельно от содержимого.

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

Подключение и синтаксис CSS

Создайте в проекте папку assets/css/ и файл style.css. Тренировочный файл practice.html, если он остался после первой работы, можно сохранить рядом с index.html.

Подключите файл внутри уже существующего <head> в index.html. Создавать второй <head> не нужно.

<link rel="stylesheet" href="assets/css/style.css">

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

p {
    color: #243247;
    font-size: 18px;
}

Такое правило задаёт всем абзацам цвет #243247 и размер шрифта 18 пикселей. Единица px задаёт размер в пикселях. Цвет можно записать именем, например navy, или шестнадцатеричным кодом. Для заметок в CSS используются комментарии между /* и */.

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

Изменится ли фон страницы сразу после создания пустого style.css? Добавьте в него правило body { background-color: #edf2f7; }, сохраните файл и обновите страницу. Сравните результат с предположением.

Дополните уже созданное правило body цветом текста, размером и семейством шрифта, а также межстрочным интервалом. Например, можно выбрать шрифт Arial и тёмный текст на светлом фоне.

body {
    background-color: #edf2f7;
    color: #243247;
    font-family: Arial, sans-serif;
    font-size: 18px;
    line-height: 1.5;
}

Браузер попробует использовать Arial, а если этот шрифт недоступен, выберет шрифт без засечек из семейства sans-serif. Значение line-height: 1.5 задаёт высоту строки в полтора раза больше размера шрифта. При font-size: 18px она составит 27 пикселей.

Запись text-align: center выровняет текст внутри абзаца по центру. Сам абзац от этого не переместится. Подчёркивание помогает отличать ссылки от обычного текста. Чтобы убрать его у ссылки, используют text-decoration: none. При этом ссылка должна оставаться узнаваемой, например благодаря оформлению всего меню.

У абзаца ниже задано line-height: 1.5. Во вкладке CSS можно уменьшить его до 1 и увидеть, как строки станут плотнее. При замене text-align: left на center строки выровняются по центру. Начертание ссылки задаётся через font-style, а её подчёркивание через text-decoration.

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

Селекторы и состояния элементов

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

У одного элемента может быть несколько классов, разделённых пробелами, например class="note highlight". Запись .note.highlight выбирает элемент, у которого есть оба класса. Если поставить пробел и написать .note .highlight, правило будет искать потомка с классом highlight внутри элемента .note.

Какой текст получит подчёркивание, если убрать пробел в .note .highlight? Раскройте «Сравнить селекторы» под редактором и выберите этот селектор в поле «Подсветить». Затем измените селектор в CSS и проверьте результат. HTML оставьте прежним. Пунктирная обводка помогает увидеть, какие элементы выбраны.

Состояния элементов описываются псевдоклассами. Например, :hover срабатывает при наведении курсора, а :focus-visible позволяет выделить элемент при клавиатурной навигации. Сделаем так, чтобы ссылки меню темнели при наведении, а при переходе клавишей Tab вокруг них появлялась рамка.

nav a {
    color: #174ea6;
    text-decoration: underline;
}

nav a:hover {
    color: #10356f;
}

nav a:focus-visible {
    outline: 2px solid #174ea6;
    outline-offset: 3px;
}

Свойство outline рисует обводку, которая не меняет размер элемента и положение соседей. В записи 2px solid #174ea6 указаны её толщина, сплошной тип линии и цвет. Свойство outline-offset отодвигает обводку от края элемента на 3 пикселя. По ней видно, какая ссылка выбрана при переходе клавишей Tab.

Добавьте класс intro первому абзацу раздела «О себе» и задайте ему отдельное оформление, например полужирное начертание через font-weight: 600. Общим правилом оформите заголовки <h1> и <h2>, затем добавьте состояния ссылок меню из примера выше. Проверьте ссылки мышью и клавишей Tab. Значения id, которые используются для навигации по визитке, сохраните.

Каскад и наследование

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

Ранее для оформления абзацев использовались селектор p и класс .intro. Если задать через них разные цвета одному абзацу, браузер выберет цвет по более специфичному селектору. Селектор по ID имеет больший вес, чем селектор по классу, а класс имеет больший вес, чем тег. При равной специфичности побеждает объявление, записанное позже.

Абзац ниже окрашен в синий цвет. Селектор .intro более специфичен, чем p, поэтому побеждает даже при расположении выше. Что произойдёт, если заменить второй селектор p на .intro? Предположите цвет, затем внесите замену, сохранив оба объявления цвета.

Многие текстовые свойства наследуются от родителя. Например, font-family и color, заданные для body, могут применяться и к его потомкам. Однако правило, задающее цвет непосредственно элементу, используется вместо унаследованного значения. Отступы, границы и фон автоматически не наследуются.

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

Теперь разместим фотографию по центру. Оберните её в абзац <p class="portrait">…</p> и запишите в style.css правило .portrait { text-align: center; }. Свойство text-align выравнивает текст и строчное изображение внутри абзаца. Если фотография уже находится в абзаце, достаточно добавить ему класс. Если раньше вы задавали такое выравнивание через атрибут style, удалите его, чтобы оформление бралось из файла CSS.

Размеры и отступы

По умолчанию разделы <section>, абзацы <p> и контейнеры <div> располагаются друг под другом. Они образуют блоки, которым можно задать ширину и высоту. Ссылки <a> и фрагменты <span> остаются внутри строки. Обычный строчный <span> не изменит размер от width или height. Это поведение задаётся свойством display.

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

Свойства width и height задают ширину и высоту. Если высота обычного текстового блока остаётся автоматической, он растёт по мере добавления текста. При фиксированной высоте вроде height: 100px длинный текст может выйти за его границы. Для разделов визитки высоту лучше оставить автоматической.

Сравним два блока, созданных с помощью <div>. Одинаковый класс box задаёт им общие свойства, а дополнительный класс box--border меняет модель расчёта у второго блока.

При box-sizing: content-box значение width задаёт ширину содержимого. Если ширина равна 200 пикселям, padding составляет 20 пикселей со всех сторон, а граница имеет толщину 5 пикселей, полная ширина с рамкой будет 200 + 2 × 20 + 2 × 5 = 250px. Внешний margin в эти 250 пикселей не входит.

При box-sizing: border-box указанная ширина уже включает внутренние отступы и рамку. С теми же отступами и рамкой блок займёт 200 пикселей, а для содержимого останется 150.

Каким станет каждый блок, если уменьшить padding с 20 до 10 пикселей? Сначала рассчитайте ширину, затем раскройте «Сравнить размеры блоков» под редактором и проверьте ответ ползунком. Переключатель «Первый блок» позволяет сравнить модели. После этого задайте padding: 10px во вкладке CSS редактора. Для проверки упражнения сохраните у первого блока content-box, у второго border-box.

Одно значение padding, например 20px, задаёт одинаковые внутренние отступы со всех сторон. Запись из двух значений, например padding: 12px 20px, задаёт отступы сверху и снизу, затем слева и справа. Отдельное свойство вроде margin-bottom меняет отступ только с одной стороны.

Для проекта удобно включить border-box общим правилом. Универсальный селектор * выбирает все элементы, а две дополнительные записи распространяют настройку на псевдоэлементы.

*,
*::before,
*::after {
    box-sizing: border-box;
}

Свойство max-width ограничивает максимальную ширину блока. Например, при max-width: 800px обычный блок с автоматической шириной сможет сжаться в узком окне, а в широком не станет больше 800 пикселей. Запись margin: 0 auto задаёт нулевой вертикальный отступ и автоматические боковые отступы, позволяя расположить такой блок по центру.

Ширина блока в широком и узком контейнере

У первого блока задано width: 300px, у второго только max-width: 300px. Пока контейнер достаточно широкий, оба блока занимают 300 пикселей. Если контейнер сузится до 200 пикселей, первый блок выйдет за его край, а второй уменьшится вместе с контейнером.

Так ведут себя обычные блочные элементы без дополнительных отступов и границ. У второго блока ширина остаётся автоматической, поскольку свойство width не задано. Если прописать ему ещё и width: 300px, ограничение max-width: 300px не поможет сжаться до 200 пикселей.

Свойства min-width и min-height задают минимальный размер. Например, min-height: 100px оставит блоку высоту не меньше 100 пикселей, но позволит ему вырасти вместе с текстом. Слишком большая min-width может мешать блоку помещаться в узком окне.

Схлопывание внешних отступов

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

У первого блока зададим margin-bottom: 24px, а у второго margin-top: 16px.

<div class="first">Первый блок</div>
<div class="second">Второй блок</div>

.first,
.second {
    padding: 12px;
    background-color: #e0ebf7;
}

.first {
    margin-bottom: 24px;
}

.second {
    margin-top: 16px;
}

Промежуток составит 24 пикселя. Если увеличить верхний отступ второго блока до 32 пикселей, промежуток тоже увеличится до 32. Внутренний padding у каждого блока при этом сохранится и продолжит отделять текст от края фона.

Горизонтальные отступы и padding не схлопываются. У соседних элементов внутри Flexbox и Grid такого схлопывания тоже нет. Отступы могут схлопываться и между родителем и первым дочерним блоком, если сверху их не разделяют рамка, внутренний отступ или содержимое. Чтобы отодвинуть заголовок от верхнего края раздела, задайте padding-top самому разделу.

Другие случаи, включая отрицательные отступы, разобраны в описании схлопывания отступов на MDN.

Добавьте общее правило border-box в начало style.css, а затем задайте отступы и ограничьте ширину основных частей визитки. Если селектор уже есть в файле, добавьте свойства в его существующий блок. В частности, сохраните у body настроенные ранее фон и шрифт, дополнив их отступами.

body {
    margin: 0;
    padding: 24px;
}

header,
nav,
main,
footer {
    max-width: 800px;
    margin: 0 auto;
}

nav {
    margin-bottom: 24px;
}

section {
    margin-bottom: 24px;
    padding: 20px;
    background-color: white;
    border: 1px solid #d5dce5;
    border-radius: 8px;
}

Запись border: 1px solid #d5dce5 задаёт толщину, сплошной тип линии и цвет границы. Свойство border-radius скругляет углы блока.

В конце оформите уже существующую таблицу навыков. Свойство border-collapse: collapse объединяет соседние границы ячеек в общую линию, а padding оставляет место вокруг текста. Запись width: 100% задаёт таблице ширину родительского контейнера. Свойство overflow-wrap: anywhere разрешает переносить длинные слова внутри ячеек, чтобы они не растягивали таблицу на узком экране.

Правило max-width: 100% ограничит изображение шириной его контейнера, а height: auto сохранит пропорции при уменьшении.

table {
    width: 100%;
    border-collapse: collapse;
}

th,
td {
    padding: 8px;
    border: 1px solid #d5dce5;
    text-align: left;
    overflow-wrap: anywhere;
}

img {
    max-width: 100%;
    height: auto;
}

Проверьте, что между разделами есть расстояние, текст не прижимается к рамкам, а таблица остаётся читаемой.

CSS-переменные

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

Такие переменные называют пользовательскими свойствами. Их имена начинаются с двух дефисов, например --accent-color. Имя выбирается по назначению значения, поэтому --accent-color удобнее, чем --blue. Акцентный цвет позднее может стать зелёным, а смысл имени сохранится.

Общие значения объявите в начале style.css через :root. В HTML этот псевдокласс выбирает корневой элемент <html>.

:root {
    --accent-color: #174ea6;
    --border-color: #d5dce5;
    --section-gap: 24px;
}

Чтобы использовать значение, запишите var() с именем переменной. Например, color: var(--accent-color) подставит акцентный цвет, а margin-bottom: var(--section-gap) задаст отступ в 24 пикселя. Одно объявление переменной само по себе не окрашивает элементы и не меняет отступы. Для этого её нужно использовать в обычном CSS-свойстве.

У заголовков и ссылки ниже общий акцентный цвет. Замените значение --accent-color на #236148 и посмотрите, какие элементы изменятся одновременно. Затем поменяйте значение --section-gap с 24px на 40px и сравните расстояние между разделами.

Теперь замените повторяющиеся значения в существующих правилах визитки, сохранив остальные свойства.

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

#contacts {
    --accent-color: #236148;
}

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

Проверка и требования к работе

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

Перед сдачей проверьте результат по списку.

• Файл assets/css/style.css подключён через <link>, изменения в нём видны после обновления страницы.
• Сохранились содержимое визитки и работающие ссылки из первой лабораторной.
• Основной текст имеет единые шрифт, цвет и межстрочный интервал, заголовки выделяются.
• Первый абзац оформлен через класс, ссылки меню имеют состояния наведения и видимый клавиатурный фокус.
• Фотография центрируется через класс portrait, оформление страницы хранится во внешнем CSS.
• Разделы имеют внутренние и внешние отступы, границы таблицы заданы через CSS, изображение помещается в узком окне.
• В :root объявлены и используются через var() как минимум три переменные для акцентного цвета, цвета границ и общего отступа. Каждая применяется в нескольких местах, изменение значения обновляет все связанные элементы.
• Код не содержит случайных дубликатов правил и !important, добавленного для обхода непонятного конфликта.

При необходимости вставьте CSS в валидатор W3C. Он проверяет код, но не определяет, насколько удачно подобраны цвета или удобно расположены элементы.

Сохраните index.html, assets/css/style.css и изображение в общей папке website. Эта визитка станет основой следующей лабораторной по расположению элементов.

Полезные источники и инструменты

• Основы CSS на MDN помогут повторить подключение стилей и базовый синтаксис.
• Справочник CSS на MDN пригодится для поиска свойств и примеров значений.
• Селекторы и комбинаторы MDN поясняют разницу между выбором по тегу, классу, атрибуту и вложенности. Материал на английском.
• Блочная модель MDN содержит схемы размеров и отступов. Материал на английском.
• Значения и единицы CSS на MDN помогут разобраться с пикселями, процентами и размерами относительно шрифта. Материал на английском.
• Оформление текста на MDN поясняет работу со шрифтами, выравниванием и подчёркиванием. Материал на английском.
• CSS-переменные на MDN поясняют объявление, наследование и использование пользовательских свойств. Материал на английском.
• CSS Diner позволяет потренировать селекторы на небольших игровых задачах. Достаточно выбрать несколько знакомых типов селекторов, игра на английском.
• MDN Playground и CodePen подходят для экспериментов с небольшими фрагментами HTML и CSS.
• Проверка CSS в Chrome DevTools поможет разобраться с применяемыми правилами в браузере. Материал на английском.