Всего 12 строк CSS — и ваш сайт преобразится. Этот трюк нельзя пропустить!

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

Я собрал подборку универсальных стилей, которые станут отличной базой для любого сайта. Базовые правила дизайна уже учтены — остаётся сконцентрироваться на содержимом и творчестве.

Естественное управление размерами блоков

Сохраняем порядок в верстке

Если вы когда-либо разбирались с CSS, наверняка сталкивались с понятием «box model» — и удивлялись, почему размеры элементов ведут себя так странно. Даже опытные верстальщики натыкаются на подводные камни стандартной модели расчёта размеров. Поэтому я всегда советую сразу прописывать box-sizing:

По умолчанию стоит значение content-box: указанные ширина и высота не считают ни внутренние отступы, ни рамки. Допустим, вы задали блоку ширину 50% и добавили паддинги — итоговая ширина «выползет» за пределы. А если выбрать border-box, ширина и высота тут же начнут включать и padding, и границу. Верстка сразу становится проще и предсказуемей.

11 секретов быстрого освоения современного CSS

Рабочие приёмы, которые всегда пригодятся.

В итоге border-box — самый логичный и удобный способ контролировать размеры. Установите это значение для html и заставьте все элементы его наследовать — а если нужно, всегда можно сменить на что-то другое для конкретного случая.

Идеальная длина строки

Как не превратить текст в «портянку»

Книги и журналы делают страницы вертикальными неслучайно: длинные строки читать тяжело, взгляд быстро теряется. Чем шире строка — тем быстрее устаёшь.

Профи по типографике советуют держать ширину строки в районе 45–75 символов. Для этого отлично подходит свойство max-width с единицей измерения ch — ширина символа «0» в выбранном шрифте.

Единица ch не слишком известна, но очень удобна. Она позволяет ограничить максимальное количество знаков в строке даже при пропорциональном шрифте — получается почти ювелирно точно. Абсолютной точности не будет, но для комфорта этого более чем достаточно.

Горизонтальное выравнивание контента

Никто не любит читать текст, прижатый к краю экрана

Когда вы ограничиваете ширину строки, весь контент по умолчанию «прилипает» к левому краю, особенно на больших мониторах. Гораздо удобнее, когда текст находится по центру — так не приходится постоянно двигать взгляд из стороны в сторону.

Решение простое: добавьте авто-отступы слева и справа с помощью margin: 0 auto:

Важно: этот приём будет работать только если у блока есть ограниченная ширина — иначе авто-отступы смысла не имеют. Уже прописанный max-width как раз это и обеспечивает.

Комфортное межстрочное расстояние (line-height)

Отличная читаемость всегда важна

В типографике расстояние между строками называют «лидирование» (leading), а в CSS для этого как раз и существует свойство line-height. Обычно по умолчанию оно около 1.2 — по 10% сверху и снизу.

Термин «leading» остался нам со времён, когда межстрочные просветы прокладывали полосками свинца в печатных прессах.

Такой стандарт чаще всего делает текст слишком тесным, читать неудобно. Оптимально ставить line-height около 1.4 — сразу становится легче воспринимать большие объёмы текста:

Шрифт, который действительно удобно читать

Базовый размер часто откровенно маловат

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

10 игр, которые превратят изучение CSS в увлекательное приключение

Заряд адреналина, стратегия и веселье!

Лучше всего увеличивать размер шрифта через относительные единицы — em. Тогда если пользователь поменяет размер текста в браузере, сайт будет подстраиваться автоматически. Например: чтобы увеличить с 16px до 20px, достаточно font-size: 1.25em.

Как подобрать шрифты для заголовков и основного текста

Различие — залог хорошего восприятия

По умолчанию браузеры ставят для текстов гарнитуру с засечками (serif). Для основного текста это нормально, но вот заголовки часто смотрятся лучше без засечек (sans-serif). Часто дизайнеры комбинируют подходящие пары шрифтов для стильного эффекта.

В качестве стартовой точки используйте стандартные группы serif и sans-serif. Они отображаются в любом браузере, а пользователь при желании всегда может выбрать предпочитаемый вариант в настройках, например, в Chrome:

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

Что такое serif и sans serif — простой разбор

Serif, sans serif: разница наглядно.

Адаптивные изображения без головной боли

Пусть верстка не ломается из-за картинок

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

Не забудьте про height: auto! Иначе картинки, у которых в прописана высота, будут растягиваться и смотреться неестественно. max-width ограничит ширину, а авто-высота сохранит правильные пропорции.

Максимальная читаемость за счёт контраста

Текст, который невозможно не заметить

Чем сильнее контраст между текстом и фоном — тем легче читать сайт. Если цвета сильно похожи, глаза устают, а людям с плохим зрением становится совсем трудно.

По мировым стандартам рекомендован контраст не ниже 7:1. Например: чёрный текст (#000000) на белом фоне (#ffffff) даёт максимум — 21:1, но такой резкий скачок быстро утомляет глаза. Стоит чуть смягчить оттенок — и сразу становится приятнее:

Очень тёмно-серый текст (#222222) на белом фоне — коэффициент 12.63:1. Это всё ещё отличный контраст, но воспринимается куда деликатнее и мягче для глаз.

Как стильно убрать подчеркивание ссылок

Всё решает вкус и задумка

С самого появления HTML синие подчёркнутые ссылки были стандартом — это привычно и понятно, особенно для обычных пользователей.

Подпишитесь на рассылку с лучшими лайфхаками по CSS

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

Цвет ссылки пусть остаётся классически синим — пользователь точно не растеряется. Навигация с клавиатуры всё равно будет работать: браузер сам добавляет заметный контур при фокусе.

Хотите поэкспериментировать с видами подчёркивания? Обратите внимание на свойства text-underline-offset и text-underline-position.

Всё волшебство CSS в 12 строках!

Вы не обязаны подключать все фишки сразу. Даже пара приёмов уже делает ваш сайт аккуратнее и удобнее — без кучи сложных настроек.

Образец кода

Видно разницу сразу!

Вот так выглядит простая HTML-разметка без каких-либо стилей:

А вот так будет выглядеть этот же документ, если применить всего пару строк стилей:

Используйте эти простые основы и выводите свой сайт на новый уровень!

Этот минимальный набор CSS мгновенно сделает ваш сайт приятнее для чтения и внешне привлекательней. Просто попробуйте — и вы не захотите возвращаться к унылым заготовкам из коробки.

Если вам понравилась эта статья, подпишитесь, чтобы не пропустить еще много полезных статей!

Премиум подписка — это доступ к эксклюзивным материалам, чтение канала без рекламы, возможность предлагать темы для статей и даже заказывать индивидуальные обзоры/исследования по своим запросам!

Подробнее о том, какие преимущества вы получите с премиум подпиской, можно узнать здесь

Также подписывайтесь на нас в:

• Telegram: https://t.me/gergenshin
• Youtube: https://www.youtube.com/@gergenshin
• Яндекс Дзен: https://dzen.ru/gergen
• Официальный сайт: https://www-genshin.ru