В этой статье мы рассмотрим инструмент, без которого не обходится создание практически ни одной веб-страницы. CSS, или каскадные таблицы стилей, — это формальный язык, позволяющий управлять обликом страниц в интернете.
Для чего используется CSS
Каскадные таблицы стилей применяются для описания внешнего вида HTML-документов, а иногда — XML-документов. Использование разных инструментов для создания разметки и управления оформлением документа позволяет отделить содержимое от представления страницы, что значительно улучшает процесс разработки.
Для того чтобы описать все детали оформления, которые позволяют настроить этот язык, можно написать отдельную статью. Поэтому здесь мы рассмотрим лишь некоторые из них, а также свойства CSS, которые для этого применяются:
- управление шрифтами осуществляется свойствами font-style, font-variant, font-weight, font-stretch, font-size и font-family;
- управление цветами элементов — color, background-color, border-color и outline-color;
- управление оформлением списков — list-style, list-style-image, list-style-position и list-style-type;
- управление внутренними (padding) и внешними (margin) отступами — padding, padding-bottom, padding-left, padding-right и padding-top;
- создание анимации — animation, animation-timing-function, animation-iteration-count, animation-direction и animation-play-state.
Это лишь малая часть возможностей данного языка.
Как использовать каскадные таблицы стилей
Здесь мы рассмотрим, как применять стили CSS к HTML-документам. Есть 3 варианта использования:
- Встроенные стили — Inline Styles. Такие стили применяются в HTML-коде с помощью атрибута style. Этот метод подходит, если необходимо изменить оформление конкретного элемента.
Пример:
/* Зададим цвет и размер шрифта */
<p style="color: blue; font-size: 14px;">Текст</p>2. Внутренние стили — Internal Styles. Внутри тега <head> помещается тег <style>, в таком случае оформление применяется ко всему документу. Чаще всего такой метод применяется для оформления отдельных страниц или же очень небольших сайтов.
Пример:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Internal Styles</title>
<style>
body {
background-color: #f0f0f0;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>H1</h1>
</body>3. Внешние стили — External Styles. Данный метод подразумевает подключение отдельного CSS-файла к HTML-документу через тег <link>. Это гибкий и удобный метод оформления, который позволяет управлять изменениями на всех страницах сайта. В большей части случаев применяется именно он.
Пример:
/* styles.css */
body {
background-color: #f0f0f0;
}
h1 {
color: green;
}
/* index.html */
<html lang="en">
<head>
<meta charset="UTF-8">
<title>External Styles</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>H1</h1>
</body>Стоит также отметить, что применение двух первых вариантов может замедлить загрузку сайта.
Синтаксис CSS
Синтаксис языка довольно прост и не требует длительного времени на изучение. Все построено на указании селектора и блока деклараций. Блок деклараций содержит одно или несколько объявлений. Объявление — это пара свойство-значение с разделителем «:». Между собой объявления разделяются точкой с запятой. Рассмотрим синтаксис на небольшом примере:
body {
font-family: Arial;
font-size: 20px;
color: black;
}В данном случае блок деклараций состоит из 3 объявлений. Для тега body — селектора — устанавливается семейство шрифта, его размер и цвет текста.
Каскад в CSS
В этом разделе поговорим о том, почему таблицы стилей называются каскадными. Дело в том, что указания к оформлению страницы применяются в зависимости от их приоритетности, которая основывается на трех факторах: специфичность, или приоритет, важность и порядок следования.
Приоритеты в CSS
Специфичность определяется типом селектора:
- Селекторы типа — h1, p: специфичность 0001.
- Селекторы класса — .class: специфичность 0010.
- Идентификаторы — #id: специфичность 0100.
- Inline Styles — специфичность 1000.
Пример:
/* HTML-код */
<p id="id" class="class">Текст</p>
/* CSS-код */
p {
color: blue;
}
.class {
color: green;
}
#id {
color: red;
}В этом случае будет применен красный цвет, так как идентификатор здесь имеет наивысшую специфичность.
Важность задается ключевым словом !important, которое придает наивысший приоритет:
p {
color: blue !important;
}Важно сказать и про порядок следования: при одинаковой специфичности и важности применен будет тот стиль, который появляется в коде последним:
p {
color: blue;
}
p {
color: green;
}В данном случае текст будет зеленого цвета.
Помимо этого, иногда встречаются комбинированные селекторы, например:
/* Тогда специфичность определяется путем сложения ее числовых показателей */
/* 0001 (специфичность p) + 0010 (специфичность .class) = 0011 */
p .class {
color: blue;
}Методологии CSS
Существует множество методологий, каждая из которых позволяет организовать код так, чтобы в нем было проще разобраться как самому разработчику, так и тем, кто этот код будет читать, корректировать и поддерживать. Здесь мы разберем самые популярные из них.
BEM — БЭМ, «блок, элемент, модификатор». В данной методологии блок, например .button, может существовать сам по себе и применяться в нескольких местах. Элементы, например .button_text, — это часть блока, соответственно, сам по себе элемент существовать не может. Модификатор, например .button--primary, — это свойство блока или элемента, и именно он отвечает за их внешний вид. Следование этой методологии позволяет переиспользовать компоненты и эффективнее управлять оформлением страницы.
SMACSS — масштабируемая и модульная архитектура для CSS. Эта методология предлагает делить код на 5 категорий:
- Base rules — оформление основных элементов: body и button.
- Layout rules — оформление структурных элементов страницы: header и footer.
- Modules rules — оформление компонентов, которые будут использованы не один раз: button и card.
- State rules — оформление состояний компонентов: visible и hidden.
- Theme rules — оформление темы сайта, например, праздничное оформление. Часто сюда попадают стили, которые изменятся со временем.
Основная цель методологии — сокращение объема кода.
OOCSS расшифровывается как объектно-ориентированный CSS. Суть методологии соответствует ее названию: она призывает нас писать код по принципам ООП-программирования, то есть разделять структуру элемента — сетку и размер, и его оформление — цвет и границы. Следование этому принципу позволяет переиспользовать компоненты и повысить производительность благодаря сокращению объема кода. При этом для применения данного подхода придется создать множество классов для одного элемента в HTML-документе, что может запутать разработчика и усложнить дальнейшую работу.
Преимущества CSS
Поговорим об основных достоинствах языка CSS:
- широкие возможности для оформления страниц без больших затрат времени;
- высокая скорость загрузки страниц, которая достигается путем кэширования таблицы стилей при первом посещении сайта;
- гибкость и удобство использования: одни и те же стили можно применять к разным страницам сайта и использовать их повторно, а также вносить точечные изменения в конкретные элементы;
- отделение контента от представления — внешнего вида, что позволяет упростить процесс разработки и поддержку кода.
Что такое CSS3
CSS3 — это последняя, улучшенная версия языка. Она предоставляет новые селекторы и цвета, а также расширенные возможности для форматирования текста, стилизации границ блоков и создания градиентов. Отдельно стоит отметить внедрение свойств для создания анимаций, так как сегодня анимации можно встретить на большинстве сайтов.
Стоит ли изучать CSS
Изучать язык CSS необходимо тем, кто хочет стать веб-дизайнером, заниматься версткой и развиваться в сфере фронтенд- и веб-разработки. При этом важно учитывать тот факт, что знаний CSS будет недостаточно без освоения HTML. Сейчас все больше вакансий требуют знания Figma, навыков программирования на JavaScript и опыт работы с Git. Но часто требований больше, эти лишь являются самыми популярными. Поэтому при изучении CSS нужно помнить о том, что это только часть необходимых знаний.