Что такое CSS: синтаксис, примеры, особенности, методологии
Оглавление:
CSS (от английского Cascading Style Sheets) — это «каскадные таблицы стилей». Являются формальным языком для задания дизайна документа на HTML или в других веб-форматах (XHTML, XML). Другими словами, этот язык описывает, как именно HTML-компоненты страницы должны отображаться на экране или других носителях, например, бумажных. Сегодня большая часть сайтов в глобальном интернете работает именно благодаря каскадным таблицам стилей. Также термин CSS используется для обозначения файла «стилей» сайта — такой файл не может использоваться отдельно от HTML-файла сайта. CSS-файл экономит время веб-программиста и верстальщика, так как позволяет оптимизировать управление дизайном для всех страниц сайта. Внешние таблицы стилей хранятся в CSS-файле, обычно, он один для всего сайта.
Простыми словами, CSS — это язык описания внешнего вида веб-страницы, который используется для настройки: цветов, типографики, местоположения компонентов страницы, «стилей» элементов и любого другого дизайна компонентов страницы.
Как работает CSS
В HTML-документе находятся данные только о структуре веб-страницы. Чтобы правильно вывести её на экран, с учётом дизайна сайта и особенности экрана пользовательского устройства, браузер объединяет HTML-документ с файлом «стилей», который есть у любого сайта. Такое объединение происходит поэтапно. Вот основные шаги, как работает CSS:
- Пользователь открывает сайт, например, переходя на него со страницы результатов поиска.
- Браузер начинает загрузку HTML-документа.
- Файл преобразуется в DOM, чтобы использовать компьютерную память.
- Браузер анализирует все компоненты, на которые в HTML-документе есть URL, и которые связаны с таким документом. К таким ресурсам и компонентам как раз и относятся «стили» (а также, например, любые медиафайлы: картинки, GIF, видеофайлы). Внимание: если ссылки в HTML-документе на «стили» нет, то браузер не сможет получить к ним доступ. JS-код обрабатывается далее, но не на этом этапе.
- Браузер начинает проверять файл «стилей». В частности, он пытается отсортировать правила, содержащиеся в нём (по их типу селектора). Каждое правило определяется в свою категорию или bucket (например, ID, элемент, класс). Далее, на этом промежуточном шаге, также происходит связывание обнаруженных селекторов с правилами. Правила применяются к определенным DOM-узлам, а затем к каждому из них привязывается определённый «стиль». Всё, теперь браузер знает, как именно нужно отрисовывать страницу.
- Происходит отрисовка страницы уже с настроенным дизайном её элементов.
Если вышеуказанная последовательность работы CSS показалась для вас слишком сложный, посмотрите на эту схему:
Последовательность работы «стилей» в браузере
Вообще существует не один, а несколько методов сформировать правила «стилей». Это не только задание набора свойств с фиксированными значениями, но и метод при помощи селекторов, например.
Основы: синтаксис CSS
Начнём с подключения «стилей» к веб-странице. Файл «стилей» может публиковаться разными способами, внутренними и внешними. Самый частый сценарий подключения CSS — самостоятельный файл, который затем подключается к веб-странице через link:
<!DOCTYPE html>
<html>
<head>
.....
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
.....
</body>
</html>Другой способ подключения «стилей» к сайту — самостоятельный, без файла-родителя. Для этого можно использовать import в style-элементе:
<!DOCTYPE html>
<html>
<head>
.....
<style media="all">
@import url(style.css);
</style>
</head>
</html>При этом CSS может быть указан непосредственно внутри документа: (опять же, обратите внимание на элемент Style внутри Head)
<!DOCTYPE html>
<html>
<head>
.....
<style>
body {
color: red;
}
</style>
</head>
<body>
.....
</body>
</html>Наконец, CSS может быть указан в атрибутах style-элемента:
<!DOCTYPE>
<html>
<head>
.....
</head>
<body>
<p style="font-size: 20px; color: green; font-family: arial, helvetica, sans-serif">
.....
</p>
</body>
</html>Теперь давайте посмотрим на важные особенности синтаксиса CSS. Напомним, главная цель CSS — передать браузеру инструкции, согласно которым он будет отрисовывать страницу. Согласно этой идее главными будут являться два элемента: property и value.
- Первый элемент (property) — это непосредственное свойство, которое и будет изменено.
- Второй элемент (value) — это значение, которым движок браузера будет обрабатывать свойство. Вот от этих двух блоков и строится дальнейший синтаксис «стилей».
Объявления. Два вышеуказанных блока (property and value) используются в качестве объявлений.
Так работает объявление или declaration в CSS
Поиск совпадений между такими объявлениями и элементами — основная задача движка «стилей». Посмотрите на этот пример синтаксиса CSS:
selectorlist { property: value; [more property:value; pairs] }Как видим для списка селекторов указываются: свойство, затем его значение, затем — добавляются аналогичные пары. Здесь всё просто. Но большое разнообразие свойств и огромное количество допустимых значений, часто приводят к тому, что новички допускают ошибки в синтаксисе (и не только). А если выбрано некорректное значение для какого-либо элемента, то браузер не будет выполнять такое объявление.
Ещё один простой пример синтаксиса CSS:
strong { color: red; }
div.menu-bar li:hover > ul { display: block; }Важно: данные внутри пары свойство / значение всегда зависимы от регистра. Пробелы, при этом, игнорируется (в любых местах). Сама пара всегда отделяется при помощи знака «:» (двоеточие).
Блоки. Традиционно объявления в CSS объединяются в блоки. Их синтаксис подразумевает открывающую и закрывающую фигурную скобку. Схематично вышесказанное можно представить вот так:
Между фигурными скобками располагается содержимое
Блок объявлений. Подразумевает отделение самих объявлений внутри при помощи знака ;
Вот как работают объявления, блоки и блоки объявлений друг с другом:
Первым указываются объявления. Точка с запятой — используется для разделения двух объявлений
Операторы CSCS (они же statements)
Наборы правил — своего рода кирпичики для постройки финального файла стиля для сайта. Обычно — это длинный-длинный список из разных параметров.
Пример пересечения действия операторов at-rules и rulesets
Но не только данные о внешнем виде элементов страницы передают в «стилях». Также есть технические сведения, которые должны передаваться движку браузера (например, данные о счетчиках веб-аналитики, наборах, настройках типографики и другое). Для таких данных задействуются иные, специфические виды утверждений. Это, в первую очередь, at-rules и rulesets (наборы правил).
At-rules. Их характерный маркер — наличие символа @ в начале. Например, вот так:
/* Наша структура */
@ID (ПРАВИЛО);
/* Пример: приказывает браузеру задействовать UTF-8 кодировку*/
@charset "utf-8";Примеры:
- @charset — установка кодировки. Определяет кодировку символов, используемую таблицей «стилей».
- @import — нужно задействовать внешний файл CSS.
- @namespace — содержимое документа должно интегрироваться как для XML (только пространство имён).
Существуют и вложенные at-rules. Это множество CSS-операторов, которое допустимо задействовать в качестве разных правил в какой-либо группе или как самостоятельный оператор-CSS. Примеры вложенных операторов: @media, @page, @viewport, @supports.
Rulesets (наборы правил). Применяемость CSS файла по отдельности к каждому элементу на странице — это хорошо, но неудобно. Именно поэтому в «стиле» подразумевают применение любых объявлений к любым частям веб-страницы. В «стилях» вы можете объединить наборы правил с конкретными блоками объявлений.
Чтобы соединить наборы правил с блоками объявлений, каждому блоку должен предшествовать селектор
Парные селекторы объявления — это и есть набор правил CSS. Но здесь есть некоторые сложности, например: часто определённому элементу в документе релевантны сразу несколько селекторов. Для определения приоритета иерархичности используется каскадный алгоритм. Именно он уточнит иерархию какого-либо свойства, если оно упоминается с различными значениями.
О селекторах, комбинаторах и псевдоэлементах CSS
Селектор устанавливает точное правило, которое будет использоваться для конкретного элемента веб-страницы.
В «стилях» распространено большое количество контейнеров: по атрибуту, универсальный, по ID, по типу элемента, по классу. Также для работы с селекторами предусмотрены комбинаторы и псевдоэлементы (используются для выбора того, что отсутствует в HTML-коде). Что касается комбинаторов, то они упрощают выбор элементов. Например, комбинатор adjacent sibling — позволяет выбирать последующие соседние элементы, но только если у них имеется общий родитель.
Комбинатор comma (в качестве него используется знак запятой). Он позволяет сгруппировать и выделить все идентичные узлы следующего соседнего элемента. Также есть отдельные комбинаторы для всех соседних элементов, для потомков, дочерних элементов.
Важно: при помощи селекторов вы не сможете выбрать родительский элемент с контейнером внутри.
Мы затронули далеко не все элементы CSS, так как это обзорная статья — с самыми главными моментами. Получить полное представление о каскадной таблице «стилей», вы можете записавшись на курс «Основы вёрстки сайтов». Вы досконально изучите не только таблицу «стилей», но и HTML, а также другие важные для создания сайтов технологии — всего за 5 недель.
Разбираем пример CSS верстки
Чтобы лучше усвоить всю информацию выше — предлагаем изучить реальный пример файла «стилей» у сайта.
p {
font-family: Liberation Sans, helvetica, sans-serif;
}
h2 {
font-size: 22pt;
color: green;
background: white;
}
.note {
color: green;
background-color: white;
font-weight: bold;
}
p#paragraph1 {
padding-left: 12px;
}
a:hover {
text-decoration: none;
}
#news p {
color: green;
}
[type="button"] {
background-color: green;
}Давайте посмотрим, что есть в этом коде и как его расшифровать.
Сразу в глаза бросается наличие семи CSS-правил с различающимися селекторами. Рассмотрим их подряд сверху вниз, также, как они расписаны в этом коде.
- Правило для абзаца обозначено привычным элементом р. Шрифт по умолчанию — Liberation Sans, но если он не может быть загружен, то будут использоваться другие шрифты.
Если Liberation Sans будет недоступен, его заменит Helvetica
- Правило для заголовка второго уровня обозначено элементом H2. Начертание такого заголовка должно иметь зеленый цвет, а бэкграунд — белый цвет. Обратите внимание, что указан весьма крупный шрифт (22 pt).
Это правило для всех H2-заголовков
- Правило для одного или нескольких элементов c class-атрибутом note. Устанавливает зеленый цвет в качестве основного и белый в качестве цвета бэкграунда. Кроме того, это правило задаёт элементам note-атрибута полужирное начертание.
Настраиваем внешний вид элементам note
- Правило для конкретного элемента р (с идентификатором paragraph1). Устанавливает отступ в 12 px для указанного элемента.
Настраиваем отступ для параграфа
- Правило убирает подчеркивание по умолчанию во всех ссылках при наведении курсора на такой элемент.
Убираем подчеркивание при наведении для URL
- Правило для конкретных Р-элементов, расположенных внутри другого компонента, привязанных к идентификатору news.
Теперь этот элемент будет иметь зеленый цвет
- Правило только для элементов с type-атрибутом со значением button. Устанавливает цвет бэкграунда зелёным
Поменяли задний фон у кнопок на зеленый
Методологии CSS
Методологии CSS регулируют способы работы и написания кода. Они также устанавливают то, как именно будет выглядеть итоговый код и по каким правилам он должен писаться.
В разное время существовали несколько популярных методологий. Часть из них — продолжает жить, другая часть — была забыта по разным причинам. Упоминать все существующие когда-либо методологии — не имеет смысла. Ведь в конце 2022 — начале 2023 разработчики активно используют только пять из них:
BEM. Вся суть этой методологии сразу становится понятна, если знать, как расшифровывается это название — модификатор блочных элементов. Посмотрите на этот код:
<form class="loginform loginform--errors">
<label class="loginform__username loginform__username--error">
Username <input type="text" name="username" />
</label>
<label class="loginform__password">
Password <input type="password" name="password" />
</label>
<button class="loginform__btn loginform__btn--inactive">
Sign in
</button>
</form>При помощи BEM мы формируем такие компоненты, которые можно задействовать повторно, а также повторно применить для целей фронт-разработки. Ненадолго вернёмся к примеру выше. Обратите внимание — loginform-класс включает в себя три компонента:
- loginform__username (используется для приема имени пользователя).
- loginform__password (используется для приема пароля пользователя).
- loginform__btn (используется для того, чтобы пользователю было позволено отправить форму).
Systematic, она же систематическая. В этой методологии можно обнаружить большую часть принципов, заложенных в популярных SUIT CSS, OOCSS, SMACSS и конечно BEM. Systematic CSS — довольно интуитивная методология, которая является хорошей альтернативой искусственно усложненным системам. Вот как может выглядеть код CSS, согласно этой методологии, для вывода панели навигации и поисковой формы.
Пример кода по методологии Systematic
Объектно-ориентированная, она же OOCSS. Хорошо продуманная методология, которая отличается гибкостью и возможностью заменять некоторые компоненты. Нужно просто привыкнуть к ней. Набор кода станет более логичным и прозрачным. Модульность — ещё одна черта OOCSS. Пример:
.button {
box-sizing: border-box;
height: 60px;
width: 90%;
}
.grey-btn {
background: #EEE;
border: 2px solid #DDD;
box-shadow: rgba(0, 0, 0, 0.5) 2px 2px 4px;
color: #666;Как видим, мы установили стиль кнопки при помощи двух классов (button используем для показа структуры, а gret-btn — для настройки дизайна элемента).
HTML-файл, с учетом вышесказанного, будет выглядеть следующим образом:
<button class="button grey-btn">
Нажми здесь!
</button>SMA CSS. Неплохая методология для CSS. Чтобы не объяснять словами, сразу проведём пример кода, который хорошо иллюстрирует особенности этой методологии:
<section class="our-footer">
<form class="search is-submitted">
<input type="search" />
<input type="button" value="Search">
</form>
</section>Atomizer-подход (назван в честь одноименной CSS-библиотеки). Вот несколько маркеров этой методологии: имена базируются на внешнем поведении функции, а одноцелевые классы — становятся основными строительными блоками. Но вместо подробного описания, лучше посмотрите на пример ниже:
<div class="Bgc(#0280ae.5) C(#fff) P(20px)">
Primer
</div>Мы определили цвет, задав значение в шестнадцатеричной системе. Примечательно, как реализован opacity-канал — он сделан через применение одноименного параметра к hex-цвету.
-
Как устроен интернет
-
HTML и CSS
-
Кроссбраузерная вёрстка
-
Работа с макетами
-
Workflow