Оформляем страницу

Теперь ваша очередь: всю таблицу стилей вы напишете сами.

Ваша страница или наша? В редакторе снова лежит наша страница приюта для кошек. Если вы предпочитаете оформить собственную страницу из курса HTML, выделите весь код в index.html и вставьте поверх него код своей страницы. В начале style.css находится наш образец плана: замените его своим.

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

Текст и цвета. Сначала подключите style.css к странице. Затем начните с правила для body: шрифт, цвет текста и цвет фона. Элементы внутри body наследуют шрифт и цвет текста, так что это одно правило меняет всю страницу. Для веб-шрифта выберите шрифт на Google Fonts, дайте сайту показать код для вставки (кнопка Get embed code) и скопируйте элементы link в head, как на уроке о тексте и шрифтах. Размеры шрифтов задавайте в rem, чтобы они учитывали размер текста, который посетитель выбрал в браузере.

Блоки и отступы. Правило * { box-sizing: border-box; } делает так, что ширина каждого элемента включает его внутренний отступ и рамку, и размеры проще рассчитывать. Текст, растянутый на всю ширину широкого экрана, читать трудно, поэтому поместите содержимое в колонку посередине страницы. На этот раз используйте max-width (максимальная ширина) вместо width: элемент такой широкий, какой позволяет место, но никогда не шире заданного значения. На большом экране получится узкая колонка, а на телефоне она сожмётся по ширине экрана.

main {
	max-width: 50rem;
	margin: 0 auto;
}

Если окно предпросмотра уже, чем max-width, колонка просто заполнит его. Затем добавьте пространство: внутренний отступ (padding) внутри блоков, например шапки или карточек, и внешний отступ (margin) между ними. Скруглённые углы (border-radius) придают карточкам, кнопкам и изображениям более мягкий вид.

Классы. На нашей странице у карточек класс card, а у элемента, который их содержит, — класс cards. Если вы оформляете свою страницу, добавьте атрибут class элементам, которым хотите дать особый вид.

Раскладка. Flexbox подходит для элементов в одной строке, например для ссылок навигации, а сетка — для строк и столбцов сразу, например для карточек. Если на вашей странице нет ничего подобного, добавьте: например, элемент nav в header со ссылками на части вашей страницы или несколько коротких блоков (элементов div с классом) с фактами о вашей теме. С помощью flexbox можно также расположить части формы из курса HTML в ряд.

Последний штрих. Наконец, сделайте так, чтобы что-нибудь менялось при наведении мыши, например ссылки или карточки.

Совет. Ваш код не сохраняется, когда вы покидаете это упражнение. Когда всё проверено, сохраните его: создайте на компьютере папку и в текстовом редакторе сохраните в неё код index.html как файл index.html, а код style.css — как файл style.css. В следующем упражнении вы узнаете, почему оба файла должны лежать в одной папке и как открыть страницу.