Страница без стилей — как чистый лист: пусто и невзрачно. А стандартные браузерные оформления оставляют желать лучшего. Можно долго возиться с шрифтами, отступами и цветами, подгоняя их под себя. Поэтому в начале чаще всего приходится избавляться от ненужных дефолтных шрифтов и настраивать внешний вид заново.
Я собрал подборку универсальных стилей, которые станут отличной базой для любого сайта. Базовые правила дизайна уже учтены — остаётся сконцентрироваться на содержимом и творчестве.
Естественное управление размерами блоков
Сохраняем порядок в верстке
Если вы когда-либо разбирались с 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