Некоторые дизайнеры до сих пор считают CSS пугающим и трудным для изучения. Хорошая новость в том, что вам не нужно знать всё, чтобы освоить CSS и создавать привлекательные интерфейсы. Обладая знаниями CSS, вы получаете гораздо больше контроля над своими дизайнами — вы можете реализовывать их именно так, как задумано. Плюс вам не потребуется помощь разработчика для устранения проблем.
Хотя HTML и CSS — это разные языки, их никогда не используют по отдельности. Если вы ещё не прошли курс «HTML для дизайнеров», мы рекомендуем начать с него перед изучением CSS.
Каскад
Чтобы лучше понять, что такое CSS, давайте внимательнее посмотрим, что означает аббревиатура — Cascading Style Sheets (каскадные таблицы стилей). Слово «каскадные» означает, что правила стилизации «каскадируют» вниз с разных уровней. Другими словами, в синтаксисе CSS порядок имеет значение. Когда правила стиля имеют одинаковую специфичность, приоритет имеет то правило, которое указано последним в файле, и оно переопределяет указанные выше.
Например, представьте, что вы дизайнер, и клиент присылает вам задачу: «Сделай заголовок <h1> красным». Через час он пишет обновление: «Сделай <h1> синим». Какой цвет вы зададите заголовку? Последнее слово имеет больший вес. Заголовок должен быть синим. Да, у него более низкий приоритет, но так работает CSS.
Применение CSS
Допустим, вы составили таблицу стилей, и она готова к применению. Как подключить CSS к HTML-странице? Есть 3 способа:
- Внешняя таблица стилей: вы подключаете отдельный CSS-файл из внешнего ресурса. Один такой файл может изменить внешний вид всего сайта.
- Внутренняя таблица стилей: вы добавляете элемент <style> в секцию <head> HTML-файла, и стили применяются только к этой конкретной странице.
- Встроенный стиль (inline): применяет уникальные правила к одному элементу через атрибут style.
Стиль страницы по умолчанию в CSS
Стиль по умолчанию — это как чистое полотно художника (или в нашем случае — разработчика), к которому ещё не прикасались. Каждый браузер имеет свой собственный стиль по умолчанию, также называемый встроенной таблицей стилей браузера (user-agent stylesheet), которая существует для того, чтобы сделать любой сайт читаемым, даже если стили не применялись вовсе.
Стиль по умолчанию немного отличается в разных браузерах, но, как правило, включает базовые настройки для кнопок, ссылок, отступов, рамок, различных заголовков и других полезных элементов. Если вы хотите увидеть стандартные стили браузера, чтобы понять, как они будут взаимодействовать с вашими каскадными таблицами, вы можете найти их онлайн, например, стили Chrome по умолчанию. Некоторые разработчики используют специальные инструменты, такие как CSS Reset от Meyerweb или Normalize.css, чтобы удалить эти стили.
Свойство background-color в CSS
Для задания фона элементов используется свойство background-color. Чтобы указать цвет, разработчики обычно используют допустимые HTML-имена, HEX, RGB или другие коды, поддерживаемые CSS.
Свойство CSS для задания цвета текста
С помощью CSS вы можете применять широкий набор свойств форматирования к тексту. Можно изменить цвет текста, выровнять его положение, задать направление, указать межстрочный интервал, сделать текст жирным, курсивом или подчеркнутым — всё, что угодно! В приведённом примере для изменения цвета заголовка используется свойство color через внутреннюю таблицу стилей. Как и в случае со свойством background-color, разработчики используют HTML-имена цветов, HEX, RGB или другие цветовые коды для задания нужного цвета.
В этом примере стили были подключены с помощью внешнего CSS-файла, то есть CSS-код вынесен отдельно от HTML и подключён через элемент <link>.
Свойство CSS padding
Padding создаёт пространство внутри элемента — между его содержимым и границами контейнера. Отступы необходимы, чтобы дать контенту «подышать» и повысить визуальную чёткость дизайна. CSS предоставляет полный контроль над отступами внутри элемента.
Можно использовать общее свойство padding и задать сразу все четыре значения (верх, право, низ, лево) через пробел. Или указать каждое значение отдельно через padding-top, padding-right, padding-bottom и padding-left.
Свойство CSS margin
В отличие от padding, margin отвечает за внешние отступы. Оно создаёт свободное пространство вне границ элемента и предотвращает его «столкновение» с другими частями контента. Без margin дизайн превращается в тесное нагромождение без «воздуха» — то есть без негативного пространства.
Можно воспользоваться сокращённой формой margin и указать все значения через пробел, либо задать отступы по сторонам отдельно — через margin-top, margin-right, margin-bottom, margin-left.
Свойство CSS text-align
Для горизонтального выравнивания текста используется свойство text-align. Оно позволяет выравнивать текст по центру, по левому или правому краю, а также использовать выравнивание по ширине (justify), при котором строки растягиваются до одинаковой длины.
Центрирование, как в примере, подходит для заголовков и коротких фрагментов текста, а выравнивание по левому краю — самый распространённый тип для больших блоков текста.
Свойство CSS font-size
С помощью CSS вы можете менять размер шрифта — это само собой. Но не стоит использовать это свойство, чтобы, например, абзац выглядел как заголовок, или наоборот. Используйте соответствующие HTML-теги для заголовков (<h1>…<h6>) и абзацев (<p>) и задавайте значения в зависимости от иерархии контента на странице. Это важно для визуальной структуры и удобства восприятия.
Существует два способа указать размер шрифта: с использованием абсолютных или относительных единиц измерения. Абсолютные значения не позволяют пользователям менять размер текста в браузере, что плохо с точки зрения доступности. Но они хороши, когда текст должен точно соответствовать физическим размерам других элементов в дизайне.
Относительные единицы, наоборот, позволяют пользователю изменять размер текста. Это лучший выбор для длинных текстов. Разработчики обычно используют пиксели (px) для абсолютных значений и em — для относительных.