Оформление текста с помощью css.

Выравнивание текста в CSS

Выравнивание текста по горизонтали задаётся свойством text-align, которое может принимать следующие значения:

left — выравнивание по левому краю;
right — выравнивание по правому краю;
center — выравнивание по центру;
justify — выравнивание по всей ширине.

С помощью свойства vertical-align выполняется выравнивание текста по вертикали.

Данное свойство может принимать следующие значения:

baseline — выравнивание линии элемента по базовой линии родительского элемента;
middle — выравнивание средней элементной точки по базовой линии родительского элемента;
text-top — выравнивание верхней части элемента по верху шрифта родительского элемента;
top — выравнивание верха элемента по верхней части самого высокого элемента строки;
sub, super — отображение элемента в виде нижнего и верхнего индексов соответственно.

Пример:

<title>Выравнивание текста по вертикали</title>
</head>
<body>
<table height="80" cellpadding="10" border="1">
<tr>
<td style="vertical-align:top">Текст 1</td>
<td style="vertical-align:bottom">Текст 2</td>
<td style="vertical-align:middle">Текст 3</td>
</tr>
</table>

Таким образом, возможности CSS позволяют произвести практически любые манипуляции с оформлением текста на веб-сайте для улучшения его восприятия пользователями.

Желаем удачи в изучении веб-дизайна!

АМАнтон Малаховавтор

Шрифты[править]

font-familyправить

Семейство шрифта

В этом свойстве через запятую перечисляются шрифты в порядке приоритета. Браузер будет использовать первый из списка. Если первый не будет найден, будет использоваться следующий и так далее. Если ни один не будет найден, тогда браузер применит шрифт по умолчанию. Если в имени шрифта есть пробелы, его необходимо заключать в одинарные или двойные кавычки.

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

Пример:

p {
  font-family Verdana, Helvetica, Arial, sans-serif;
}

Существуют 5 семейств шрифтов:

serif — шрифты с засечками
sans-serif — шрифты без засечек
monospace — моноширинные
cursive — курсивные
fantasy — декоративные

Пример, как выглядят такие шрифты:

serif
sans-serif
monospace
cursive
fantasy

font-styleправить

Стиль шрифта

Существуют три значения этого свойства:

normal — обычный (значение по умолчанию)
italic — курсив
oblique — наклонный

Браузеры последний стиль обычно отображают как курсивный

font-variantправить

Вариант шрифта

normal — обычный (значение по умолчанию)
small-caps — капитель, то есть все строчные символы становятся уменьшенными заглавными

font-weightправить

Вес шрифта

Это свойство устанавливает вес (насыщенность) шрифта.

Возможные значения:

100
200
300
400 или normal (значение по умолчанию)
500
600
700 или bold
800
900

font-sizeправить

Размер шрифта

Возможные значения этого свойства:

абсолютные константы: xx-small, x-small, small, medium (значение по умолчанию), large, x-large, xx-large
относительные константы: smaller, larger
абсолютные и относительные единицы измерения CSS

line-heightправить

Межстрочный интервал, часто применяется вместе с font-size

Возможные значения:

normal — нормальное значение (по умолчанию)
number — число (больше либо равно 0), на которое умножается текущий размер шрифта
length — фиксированное значение в единицах измерения CSS
% — проценты от текущего размера шрифта

fontправить

Это сокращённая форма записи свойств шрифта. Необходимо лишь указать font-size и font-family. Остальные свойства шрифта указываются при желании

Пример:

p {
  font bold italic small-caps 150%1.4 Arial, Helvetica, sans-serif;
}

Также можно указывать ключевые слова: caption, icon, menu, message-box, small-caption, status-bar

web-шрифтыправить

Свойство, которое позволяет отображать на экране компьютера любой шрифт. Впервые появилось в CSS2. Используется правило

Шрифты бывают следующих типов:

eot — embedded opentype (.eot)
ttf — truetype (.ttf)
otf — opentype (.ttf, .otf)
svg — svg-шрифты (.svg, .svgz)
woff — web open font format (.woff)

Font-family — задаем имя шрифта в CSS

Начнем с атрибута стиля font-family с помощью которого можно задать гарнитуру и тип шрифта, которым будет выведен текст html-элемента (например текст заголовка или абзаца p). Синтаксис применения атрибута выглядит так:

font-family: <список имен шрифтов разделенных запятыми>

Список имен шрифтов задается в виде их названий (например Arial, Verdana или Times New Roman). Если имя шрифта содержит пробелы, то его необходимо взять в кавычки. Можно указать несколько наименований шрифтов, разделив их запятыми. В этом случае браузер сначала будет искать первый из указанных шрифтов, в случае неудачного поиска — второй, третий и так далее:

p { font-family: Arial, Verdana, ‘Times New Roman’, san-serif; }

В данном примере браузер сначала будет искать на компьютере пользователя шрифт Arial и если найдет, то отобразит все элементы p этим же шрифтом. Если же Arial на компьютере пользователя не найдется, тогда браузер будет искать Verdana, затем, в случае неудачи — Times New Roman, и так далее. Последним в списке имен шрифтов в данном примере идет не имя конкретного шрифта, а имя целого семейства шрифтов, представляющего целые наборы аналогичных шрифтов.

Таким образом можно задавать целые семейства шрифтов. Таких семейств всего пять:

serif — шрифты с засечками;
sans-serif -шрифты без засечек;
cursive — шрифты, имитирующие рукописный текст;
fantasy — декоративные шрифты;
monospace — моноширинные шрифты.

Кроме имен шрифтов, свойству font-family можно задать особое значение inherit, которое говорит браузеру, что текст данного элемента нужно отображать таким же шрифтом, как и текст родительского элемента.

Текст[править]

text-alignправить

Выравнивание текста

Возможные значения:

left — по левому краю (значение по умолчанию)
right — по правому краю
center — по центру
justify — по ширине

letter-spacing/word-spacingправить

Интервал между буквами/словами

normal — нормальное значение (по умолчанию)
length — значение в единицах измерения CSS (допускаются отрицательные значения)

text-decorationправить

Оформление текста

Возможные значения:

underline — подчёркнутый текст
overline — линия над текстом
line-through — перечёркнутый текст
blink — мигающий текст
none — отмена всех эффектов (значение по умолчанию)

text-indentправить

Отступ первой строки

length — фиксированное значение в единицах измерения CSS (значение по умолчанию равно 0)
% — проценты от ширины строки

text-transformправить

Трансформация текста

Возможные значения:

none — нет трансформации (значение по умолчанию)
uppercase — преобразование всех строчных символов в заглавные
lowercase — преобразование всех заглавных символов в строчные
capitalize — преобразование первой буквы каждого слова в заглавную

vertical-alignправить

Выравнивание элемента по вертикали

Применяется только к строчным элементам и к ячейкам таблицы

Возможные значения для строчных элементов:

baseline — по базовой линии (значение по умолчанию)
sub — нижний индекс
super — верхний индекс
top — верх элемента выравнивается с самым высоким элементом строки
text-top — верх элемента выравнивается с верхом шрифта родительского элемента
middle — по середине
bottom — по нижней части
text-bottom — низ элемента выравнивается с низом шрифта родительского элемента
проценты
величины CSS

Для ячеек таблицы:

baseline — содержимое ячейки по базовой линии (значение по умолчанию)
top — по верхнему краю
bottom — по нижнему краю
middle — по середине ячейки таблицы

Для строчных элементов это свойство выравнивает сам элемент, а не его содержимое. Для ячеек таблицы — наоборот

white-spaceправить

Пробелы между словами

Возможные значения:

normal — обычное поведение (значение по умолчанию)
pre — пробелы и переносы учитываются
nowrap — пробелы и переносы не учитываются
pre-wrap — пробелы учитываются, текст переносится
pre-line — пробелы не учитываются, текст переносится

text-shadowправить

Добавление тени к тексту (CSS3)

Возможные значения:

h-shadow — смещение тени по горизонтали
v-shadow — смещение тени по вертикали
blur — радиус размытия тени
color — цвет тени
none — нет тени (значение по умолчанию)

Атрибуты

Атрибут — это переменная, связанная с объектом или классом. Грубо говоря, если я хочу, чтобы у объекта «Пользователь» появилась фамилия, я должен сделать пользователю атрибут «Фамилия».

Для программистов: у класса есть атрибуты, свойства и поля. В зависимости от языка программирования эти три параметра могут означать одно и то же, а могут различаться. В этой статье мы разбираем академический подход к структуре класса вида «атрибут — значение».

Возьмём в качестве примера метафору — производство телефонов. У нас есть класс «Смартфон» — некий абстрактный смартфон, по лекалам которого изготавливают конкретные объекты-смартфоны.

У класса «Смартфон» могут быть такие атрибуты:

задняя камера
передняя камера
датчики объёма
батарейка
память

Это у нас будут атрибуты класса «Смартфон». Они могут принимать конкретные значения: камеры могут быть разных моделей, память может быть 64 или 256 гигабайт, а батарейка — 2500 мАч или 3500 мАч.

Когда мы задаём атрибут для класса, мы как будто настраиваем производственную линию: «Тут у нас будет станок по установке камер, там — по вклеиванию батареи». Когда мы задали класс с определёнными атрибутами, все объекты, произведённые из этого класса, будут появляться на свет с этими атрибутами.

Синтаксис

Кастомные свойства позволяют сконфигурировать будущий макет ещё до начала разработки компонентов. Верстальщик получает от дизайнера вместе с макетом набор правил, по которым будет выстраиваться палитра сайта, типографика, сетка. До появления кастомных свойств верстальщики использовали препроцессоры, чтобы изначально задать подобную систему в коде и следовать принципу «DRY» (Don’t Repeat Yourself с англ. «не повторяйся»). Они сохраняли набор этих правил в отдельные Sass- или Less-переменные, писали миксины и в целом применяли комплекс мер по оптимизации своей работы и структурированию кода. Это круто и удобно, но требует последующей компиляции в CSS, ведь этот язык понимает браузер.

Теперь часть этих задач можно решать нативно, средствами платформы через кастомные свойства. Например, дизайнер определил цветовую палитру нашего будущего сайта. Для простоты пусть в нём будут два цвета — чёрный (ну, не совсем чёрный) и белый. Так выглядит глобальная конфигурация этих цветов на CSS:

В этом коде мы определили два кастомных свойства с именами и и присвоили им значения. Эти свойства определены для селектора — корневого элемента документа. Для HTML-документа — это элемент html, а для SVG — svg

Важно, что кастомные свойства работают и с HTML-документами, и с SVG

Weekend Offer для фронтенд-разработчиков
19–20 марта, Онлайн, Беcплатно

tproger.ru

События и курсы на tproger.ru

Определив кастомное свойство на уровне корневого элемента, можно обращаться к его значению по имени кастомного свойства внутри блоков CSS, атрибутов в HTML или атрибутов SVG-документа.

Синтаксис, которым нужно пользоваться:

Можно даже вынести настройки палитры в отдельный файл, чтобы хранить там всю глобальную конфигурацию. В примере мы вынесли глобальные кастомные свойства в файл palette.css , а значения использовали в CSS- и SVG-элементах:

Эти принципы должны быть вам знакомы, если вы использовали переменные в препроцессорах. Но почувствуйте разницу: вы работаете нативно, можете использовать кастомные свойства внутри атрибутов HTML и SVG.

Эффект частичной тени

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

CSS:

body {

    background: #441369;  

}

h1#gradient {

    text-align:center;

}

h1#gradient span {

    position:relative;

    display: inline-block;

    color: #FF0052; /* Запасной цвет */

    text-transform: uppercase;

    font-weight: bold;

    font-family: helvetica;

    text-align:center;

    font-size: 70px;

    letter-spacing: -4px;

    text-shadow: 4px 4px 0px #441369, 8px 8px 0px rgba(255,255,255,.1);  /* Запасная тень */

}

@media screen and (-webkit-min-device-pixel-ratio:0) {

    h1#gradient span{

        background: -webkit-gradient(linear,left top,left bottom,from(#FF0052),to(#802F7B));

        -webkit-background-clip: text;

        -webkit-text-fill-color: transparent;

        text-shadow:none !important;

    }

    h1#gradient span:after {

        background: none;

        content: attr(data-text);

        left: ;

        position: absolute;

        text-shadow: 4px 4px 0px #441369, 8px 8px 0px rgba(255,255,255,.1); // эффект частичной тени

        top: ;

        z-index: -1;

    }
}

Универсальные атрибуты

Каждый HTML-тег наделён собственным набором атрибутов. Некоторые атрибуты могут быть доступны для нескольких тегов, другие же могут работать только с одним. Ещё есть группа универсальных (глобальных) атрибутов, которые можно использовать с любым тегом. Вкратце ознакомимся с атрибутами этой категории.

accesskey позволяет задать сочетание клавиш для доступа к определённому объекту страницы. Например, вы можете сделать так, чтобы с помощью комбинации клавиш Alt+1 пользователь переходил по определённой ссылке. Таким образом разработать систему клавишной навигации.

В качестве значения атрибута могут выступать цифры 0-9 или буквы латинского алфавита:

      <a acceskey=”1” href=”https://youtube.com”>Ссылка будет открываться по нажатию сочетания клавиш с единицей</a>

class позволяет связать тег с заранее заданным с помощью CSS оформлением. Использование атрибута позволяет существенно уменьшить код, ведь вместо того, чтобы повторять ввод одного и того же блока CSS, можно просто ввести имя соответствующего ему класса.
С помощью contenteditable можно разрешить пользователю редактировать любой элемент HTML-страницы: удалять, вставлять, изменять текст. Этот же атрибут даёт возможность редактирование и запретить. Значения имеет всего два: true — правку разрешить, false — запретить.
При помощи атрибута contextmenu вы можете наделить любой элемент документа уникальными пунктами контекстного меню на своё усмотрение. Само меню создаётся в теге <menu>, а атрибуту contextmenu присваивается его идентификатор.
dir определяет направление текста: слева направо (ltr) или справа налево (rtl).
draggable позволяет запретить (false) или разрешить (true) пользователю перетаскивать наделённый этим атрибутом элемент страницы.
dropzone указывает браузеру, что делать с перетаскиваемым элементом: копировать (значение copy), перемещать (move) или создать на него ссылку (link).
hidden — атрибут, позволяющий скрыть содержимое элемента, чтобы оно не отображалось в браузере. Если атрибуту задано значение false, объект отображается, true — скрывается.
id задаёт идентификатор элемента — своего рода имя, которое нужно для простой смены стиля объекта, а также для того, чтобы к нему могли обращаться скрипты. Значением атрибута и будет его имя. Начинаться оно должно обязательно с латинской буквы, и может содержать цифры, буквы всё того же латинского алфавита (большие и маленькие), а также символы дефиса (-) и подчёркивания (_). Русских букв содержать не может.
lang помогает браузеру понять, на каком языке написан контент, и задать ему соответствующий стиль (например, в языках могут использоваться разные кавычки). Значениями выступают коды языков (русский — ru, английский — en и т. п.).
spellcheck включает (true) или отключает (false) проверку правописания. Особенно полезно использовать атрибут в тегах полей форм, куда текст будет вводить пользователь.
style позволяет задать оформление элемента с помощью CSS-кода.
tabindex даёт возможность определить, сколько раз пользователю придётся нажать клавишу Tab, чтобы фокус получил объект с этим атрибутом. Количество нажатий определяет значение атрибута — целое положительное число.
title — всплывающая подсказка, которая появится, если подвести мышку к элементу и на некоторое время оставить её неподвижной. Строка в значении и будет подсказкой.

      <a title=”Ссылка, ведущая на Яндекс” href=”http://yandex.ru”>Поиск</a>

translate разрешает (yes) или запрещает (no) перевод содержимого тега.
align задаёт выравнивание элемента. Например, с его помощью можно выровнять текст по левому краю (значение left), по правому краю (right), по центру (center) или по ширине (justify). Для изображений (тег <img>) также доступно выравнивание по верхней границе самого высокого элемента строки (top), по нижней границе (bottom), а значение middle делает так, что средняя линия картинки совпадает с базовой линией строки.

Стоит иметь в виду, что использовать атрибут align не рекомендуется, а выравнивать текст лучше с помощью CSS.

Форматирование

Существуют различные свойства для форматирования текста, рассмотрим некоторые из них. Свойство text-decoration позволяет сделать текст подчеркнутым, установить черту над текстом или сделать текст перечеркнутым. Для управления строчными и прописными буквами в тексте используется свойство text-transform. Если необходимо увеличить или уменьшить расстояние между символами в тексте, в этом вам поможет свойство letter-spacing:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Название документа</title>
    <style>
      p.class1 {
        text-transform: uppercase; 
        text-decoration: overline;
      }
      p.class2 {
        text-transform: lowercase;
        text-decoration: line-through;
      }
      p.class3 {
        text-transform: capitalize;
        text-decoration: underline;
      }
    </style>
  </head>

  <body>
    <p class="class1">Первый абзац.</p>
    <p class="class2">Второй абзац.</p>
    <p class="class3">Третий абзац.</p>
    <p style="letter-spacing:3px;">Расстояние между символами в тексте изменено
    с помощью свойства letter-spacing.</p>
  </body>
</html>

Попробовать »

С этой темой смотрят:

Выравнивание текста в CSS
Цвет и тень текста в CSS
Как изменить шрифт в CSS
CSS стиль и размер шрифта
Стандартные (безопасные) шрифты

Атрибут class

Чтобы определить стиль для особого типа элементов, добавьте атрибут класса к элементу:

Я элемент у которого присвоен атрибут класс

1	<pclass=»error»>Яэлементукоторогоприсвоенатрибуткласс</p>

затем определите стиль для элементов с определенным классом:

p.error {
color: red;
}

1
2
3

p.error{

colorred;

}

<!DOCTYPE html>
<html>
<head>
<style>
p.error {
color: red;
}
</style>
</head>
<body>

На первый второй рассчитайсь!
Первый
Второй
Первый
Я красный расчет закончен!

</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<!DOCTYPEhtml>

<html>

<head>

<style>

p.error {

colorred;

}
</style>

</head>

<body>

Напервыйвторойрассчитайсь!

Первый

<pclass=»error»>Второй

Первый

<pclass=»error»>Якрасныйрасчетзакончен!

</body>

</html>

Вот, что получается в нашем примере:

CSS оформление select — используем свойство appearance

Очень часто дизайнеры рисуют макеты с нестандартными элементами форм, т.е. оформление чекбоксов, радиокнопок, инпутов и селектов отличается от того, что рендерит браузер по умолчанию. Таким образом, перед верстальщиком возникает задача кастомизировать оформление, в том числе это касается элементов select.

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

С другой стороны такой подход позволяет:

1. Не писать javascript код, который эмулировал бы поведение селектов. Вся логика возлагается на браузер. Плагинов на сегодняшний день очень много, но не часто встретишь такой, который обрабатывал бы все крайние случаи, возникающие у пользователя при взаимодействии с этим контролом. Примером такого крайнего случая может служить автоматический выбор положения выпадающего списка (открытие вниз или вверх).

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

Итак, как уже было сказано, для оформления select достаточно CSS3 свойств.

Основное свойство, которое позволит изменить внешний вид селекта, это . Оно заставляет какой-либо элемент принять вид того, что вы захотите, например, можно заставить див стать кнопкой. Однако в рамках нашей задачи интересно значение , которое означает, что к элементу вообще не нужно применять какой-либо стиль. Таким образом, мы сможем убрать специфичный для селекта атрибут — стрелочку вниз справа.

Как видно, убрать стрелку не составило труда, теперь остаётся добавить несколько тривиальных CSS-свойств вроде рамки, шрифта и прочего. Здесь конечно же можно добавить и скругление уголков, и тени и прочее, всё как нарисовал дизайнер в макете. Главное выпадающий список остаётся нативным.

Теперь остаётся добавить фоном стрелку или какую-либо другую иконку. Использовать фон будем, поскольку псевдоэлементы вроде и для селекта работать не будут. Для лучшего отображения сайтов на различных устройствах с разным плотностью пикселей, на различных масштабах и т.п. принято использовать SVG иконки. Поэтому с помощью онлайн URL-encoder для SVG сконвертируем иконку в data URI

При этом важно помнить, что тег SVG должен иметь атрибут

Получится следующий результат.

Поскольку стрелка используется нестандартная, то можно переместить её влево или использовать вместо стрелки любое другое изображение, а можно и вовсе обойтись без иконок.

Атрибут style

Атрибут style используется для стилизации элементов непосредственно в HTML коде. Цель атрибута style заключается в предоставлении простого способа изменения внешнего вида практически любого HTML элемента.

Примечание: тут мы рассматриваем атрибут для формирования общего представления об использовании CSS стилей для оформления веб-страниц. Подробнее о возможностях CSS вы можете почитать в CSS самоучителе.

Код примера познакомит вас с новым способом форматирования документа:

<html>
  <body style="background-color:ivory;">

    <h1>Посмотрите на цвета и стили</h1>
    <p style="font-family:verdana;color:red;">
      Этот текст написан красным цветов с помощью шрифта Verdana.
    </p>
    <p style="font-family:times;color:green;">
      Этот текст написан зеленым цветом с помощью шрифта Times.
    </p>
    <p style="font-size:30px;">Этот текст имеет размер 30 пикселей.</p>

  </body>
</html>

Попробовать »

Внимательно посмотрите на пример, с помощью атрибута мы задаем CSS стиль внутри HTML-элементов, такой способ задания стилей называется встроенным стилем. применяется только к элементу, в котором он был определён, и к его дочерним элементам (если применённые CSS свойства наследуются).

Примечание: посмотреть наследуется ли значение применённого свойства дочерними элементами или нет, можно в CSS справочнике на странице с данным свойством.

Структурная семантика

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

Это важно, так как они предлагают лучший способ наметить структуру страницы и это более значимое решение чем

Скрытие содержимого

Время от времени вы пожелаете скрыть блок содержимого на странице, возможно, показывая или скрывая элемент в зависимости от статуса пользователя. К примеру, сообщение об успешном выполнении скрывается от пользователя, пока он не выполнит желаемое действие. Чаще всего это делается с помощью записи display: none. Хотя это действительно работает, но семантически некорректно.

Лучшим вариантом является применение логического атрибута hidden, который является глобальным атрибутом, доступным для всех элементов. Функционально он выполняется так же, как декларация CSS, но семантически представляет собой элемент, который должен быть скрыт или до поры до времени проигнорирован. Экранные читалки и другие устройства распознают атрибут, временно пропуская элемент, чего они не могут сделать с декларацией CSS.

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

Заключение

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

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