Введение в CSS. Типы стилей

CSS (Cascading Style Sheets, каскадные таблицы стилей) — это набор правил, управляющих внешним видом и положением тегов на веб странице. Применяется к HTML, XML и основанных на них форматах документов, в том числе SVG.
При помощи CSS вы можете сделать сухую и однообразную HTML-разметку стильной и привлекательной, тем самым увеличив время пребывания пользователя на вашем сайте, повысив конверсию продаж и т.д. В конце концов, красивые сайты просто бывают на слуху у всего интернета, что также положительно влияет на бизнес.

CSS начал разрабатываться в 1994 Хоконом Ли и Бертом Босом, а в 1996 году был одобрен W3C и официально отнесён к стандартам Web. С тех пор CSS прошёл довольно большой путь развития, и на текущий момент актуальная версия — CSS 3. Пример обыкновенного кода CSS:

                

                .user-card{
    width: 30vw;
    padding: 0 15px;
    font-size: 1.2rem;
}
.user-card__avatar{
    display: block;
    width: 100%;
    object-fit: cover;
}

Как видите, CSS состоит из селекторов, например .user-card, определяющих какой-то тег (в данном случае по классу), а также правил-свойств, помещённых в фигурные скобки. Свойства и значения разделены двоеточием, перед новой строкой ставится точка с запятой. Это небольшое введение в синтаксис, а подробнее об этом будет рассказано в дальнейшем.

Типы стилей

Можно разделить стили на несколько типов, исходя из того, кто их устанавливает для документа.

Стили браузера

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

Такие браузерные стили можно назвать дефолтными (default). В панели разработчика они носят название user agent stylesheet. Соответственно user agent — это ваш браузер.

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

Стили автора

Это те самые стили, которые пишут разработчики сайтов и затем подключают к HTML-документу. Они имеют более высокий приоритет, нежели дефолтные стили браузера, поэтому и меняют отображение элементов.

В примере мы видим, что добавленные разработчиком в документ стили переопределяют браузерные. Также в панели разработчика они для удобства отображаются выше.

Стили пользователя

Это стили, которые пользователь может установить персонально для себя в настройках браузера. Изначально, когда пользователь устанавливает браузер на свой компьютер, такие стили не установлены. Пользователи с собственными стилями отображения веб-страниц встречаются довольно редко. Обыкновенно это люди со слабым зрением или с нарушением цветовосприятия. Они регулируют яркость\контрастность\размеры шрифтов для своего удобства. Эти стили обладают самым высоким приоритетом и их изменить трудно, хотя всё-таки возможно, добавив в авторские стили директиву !important. Непосредственно о директиве поговорим позже, а пока что стоит сказать, что переопределять таким образом пользовательские стили не следует. Конечно, это приведёт ваш сайт к тому виду, который требуется по дизайну, даже если у пользователя будут установлены свои стили. Однако такое изменение явно негативно скажется на впечатлении пользователя о вашем сайте, ведь если человек плохо видит и потому поставил в браузере крупный шрифт, вряд ли он будет доволен, если вы поставите приоритет своим стилям с соответствующими дизайну, но мелкими шрифтами.