Вы находитесь на странице: 1из 227

2

CSS
CSS3
2.1. Основы CSS
o Виды таблиц стилей
o Виды селекторов
o Комбинация селекторов
o Группировка селекторов
o Наследование и каскад
2.2. CSS блочная модель
o Определение блочной модели
o Отступы элемента
o Схлопывание вертикальных отступов
o Выпадание вертикальных отступов
o Физические свойства отступов: свойства margin-top, margin-right, margin-
bottom, margin-left
o Краткая запись отступов: свойство margin
o Поля элемента
o Физические свойства полей: свойства padding-top, padding-right, padding-
bottom, padding-left
o Краткая запись полей: свойство padding
o Рамки элемента
2.3. Блочные и строчные элементы
o Модель визуального форматирования
o Определение термина «содержащий блок»
o Блочные элементы и блочные контейнеры
o Строчные элементы и строчные контейнеры
o Строчно-блочные элементы
o Ширина содержимого: свойство width
o Минимальная и максимальная ширина: свойства min-width и max-width
o Высота содержимого: свойство height
o Минимальная и максимальная высота: свойства min-height и max-height
o Расчет высоты строки: свойства line-height и vertical-align
o Изменение блочной модели: свойство box-sizing
2.4. CSS-позиционирование
o Содержащий блок
o Выбор схемы позиционирования: свойство position
o Смещение блока: свойства top, right, bottom, left
o Обтекание: свойство float
o Управление потоком рядом с плавающими элементами: свойство clear
o Определение контекста наложения: свойство z-index
o Контекст наложения
2.5. CSS-текст
o Преобразование текста: свойство text-transform
o Обработка пробелов и переносы строк: свойство white-space
o Настройка табуляции: свойство tab-size
o Правила разрыва для букв: свойство word-break
o Разрыв строки: свойство line-break
o Расстановка переносов: свойство hyphens
o Переполнение блока-обертки: свойство overflow-wrap/word-wrap
o Выравнивание текста: свойство text-align
o Выравнивание текста по умолчанию: свойство text-align-all
o Выравнивание последней строки: свойство text-align-last
o Промежутки между словами: свойство word-spacing
o Трекинг: свойство letter-spacing
o Отступ первой строки: свойство text-indent
2.6. CSS-шрифты
o Семейство шрифтов: свойство font-family
o Насыщенность шрифта: свойство font-weight
o Ширина шрифта: свойство font-stretch
o Начертание шрифта: свойство font-style
o Размер шрифта: свойство font-size
o Относительный размер шрифта: свойство font-size-adjust
o Сокращенная запись свойств шрифта: свойство font
o Управление синтезом шрифтов: свойство font-synthesis
2.7. CSS-ссылки
o Псевдоклассы состояний гипертекстовых ссылок
o Выборка отдельных ссылок
o Подчеркивание ссылок
o Изображения для ссылок
o Использование фонового изображения
o Ссылки-кнопки
o Примеры оформления ссылок
2.8. CSS-таблицы
o Границы таблицы border
o Как задать ширину и высоту таблицы
o Как задать фон таблицы
o Столбцы таблицы
o Как добавить таблице заголовок
o Как убрать промежуток между рамками ячеек
o Как увеличить промежуток между рамками ячеек
o Как скрыть пустые ячейки таблицы
o Компоновка макета таблицы table-layout
o Лучшие макеты таблиц
2.9. CSS-списки
o Тип маркера списка list-style-type
o Изображения для элементов списка list-style-image
o Местоположение маркера списка list-style-position
o Краткая форма задания стилей списка list-style
o Примеры красивого оформления списков
2.10. CSS-фон
o Базовый цвет: свойство background-color
o Источник изображения: свойство background-image
o Укладка изображений: свойство background-repeat
o Фиксация изображения: свойство background-attachment
o Позиционирование изображений: свойство background-position
o Область рисования: свойство background-clip
o Область расположения фона: свойство background-origin
o Размер изображений: свойство background-size
o Краткая запись свойств фона: свойство background
o Множественные фоны
2.11. CSS-рамка
o Стиль рамки border-style
o Цвет рамки border-color
o Ширина рамки border-width
o Задание рамки одним свойством border
o Задание рамки для одной границы элемента
2.12. CSS-content
o Свойство content
o Добавление специального символа
o Добавление текста
o Добавление изображения
o Добавление блочного содержимого
o Добавление значения атрибута
o Добавление кавычек
o Добавление счетчика элементов
o Свойство display: list-item
o Форматирование кавычек: свойство quotes
2.13. CSS-цвета
o Приоритетные цвета: свойство color
o Основные ключевые слова
o Числовые значения цвета
o Цвета модели RGB
o Цвета модели RGBA
o Ключевое слово transparent
o HSL-цвета
o HSLA-значения цвета
o Расширенные ключевые слова цвета
o Ключевое слово currentColor
2.14. CSS-генераторы
2.15. CSS3 UI
o Свойства внешнего контура
o Краткая запись внешнего контура: свойство outline
o Толщина внешнего контура: свойство outline-width
o Узор внешнего контура: свойство outline-style
o Цвет внешнего контура: свойство outline-color
o Смещение внешнего контура: свойство outline-offset
o Изменение размера блоков: свойство resize
o Стилизация курсора: свойство cursor
o Цвет каретки вставки: свойство caret-color

2.16. CSS3-градиент
o Линейный градиент: linear-gradient()
o Радиальный градиент: radial-gradient()
o Повтор градиента: repeating-linear-gradient() и repeating-radial-gradient()
o Кроссбраузерный градиент
o Комбинация градиента и фонового изображения
2.17. CSS3-рамка
o Закругление углов с помощью border-radius
o Рамки-изображения border-image
o Ширина рамки-изображения border-image-width
o Ресурс рамки-изображения border-image-source
o Элементы рамки-изображения border-image-slice
o Повтор рамки-изображения border-image-repeat
o Смещение рамки-изображения border-image-outset
o Смещение внешней рамки outline-offset
o Градиентная рамка
2.18. CSS3-оформление текста
o Оформление линии: подчеркивание, обводка и зачеркивание
o Вид линии оформления: свойство text-decoration-line
o Стиль линии оформления: свойство text-decoration-style
o Цвет линии оформления: свойство text-decoration-color
o Краткая запись свойств линии оформления: свойство text-decoration
o Расположение линии оформления: свойство text-underline-position
o Тень текста: свойство text-shadow
o Примеры тени текста
o Эффекты тени при наведении
o Анимация тени
2.19. CSS3-тень блока
o Синтаксис свойства box-shadow
o Примеры тени для блока
o Эффекты для тени при наведении
o Анимация тени
2.20. CSS3-переходы
o Название свойства transition-property
o Продолжительность перехода transition-duration
o Функция перехода transition-timing-function
o Задержка перехода transition-delay
o Краткая запись перехода transition
o Плавный переход нескольких свойств
o Примеры переходов для различных свойств
2.21. CSS3-трансформации
o Функции 2D-трансформации transform
o Точка трансформации transform-origin
o Множественные трансформации
o Трансформации на практике: как сделать ленточки
2.22. CSS3-анимация
o Ключевые кадры
o Название анимации: свойство animation-name
o Продолжительность анимации: свойство animation-duration
o Временная функция: свойство animation-timing-function
o Задержка анимации: свойство animation-delay
o Повтор анимации: свойство animation-iteration-count
o Направление анимации: свойство animation-direction
o Краткая запись анимации: свойство animation
o Проигрывание анимации: свойство animation-play-state
o Состояние элемента до и после воспроизведения анимации: свойство
animation-fill-mode
o Множественные анимации

2.23. CSS3 flexbox


o Свойство display: flex
o Выравнивание элементов по горизонтали justify-content
o Выравнивание элементов по вертикали align-items
o Направление главной оси flex-direction
o Многострочность элементов flex-wrap
o Краткая запись направления и многострочности flex-flow
o Многострочное выравнивание align-content
o Порядок отображения элементов order
o Базовая ширина элемента flex-basis
o Растяжение элементов flex-grow
o Сужение элементов flex-shrink
o Задание базовой ширины и трансформации элемента одним свойством flex
o Выравнивание отдельных элементов align-self
2.24. CSS3 columns
o Количество и ширина колонок
o Ширина колонок: свойство column-width
o Количество колонок: свойство column-count
o Установка колонок с помощью одного свойства columns
o Промежутки между колонками и разделительные линии
o Промежутки между колонками: свойство column-gap
o Цвет разделительной линии: свойство column-rule-color
o Стиль разделительной линии: свойство column-rule-style
o Ширина разделительной линии: свойство column-rule-width
o Краткая запись свойств разделительной линии: свойство column-rule
o Разрыв колонок
o Охват колонок: свойство column-span
o Заполнение колонок содержимым: свойство column-fill
o Переполнение
o Переполнение внутри многоколоночных контейнеров
o Разбивка на страницы и переполнение вне многоколоночных контейнеров
2.25. CSS3 3D-трансформации
o Установка 3D перспективы perspective
o Задание точки трансформации для 3D элемента perspective-origin
o Стиль 3D преобразований transform-style
o Видимость обратной стороны элемента backface-visibility
o Функции 3D трансформации
2.26. CSS3-медиазапросы
o Структура медиазапроса @media
o Логические операторы
o Тип носителя
o Характеристики носителя
o На какие разрешения экрана нужно ориентироваться
2.27. CSS3-фильтры
2.28. CSS Grid
o Концепция сетки и основные понятия
o Контейнер-сетка
o Определение сетки
o Строки и столбцы
o Именованные области
o Краткая запись явной сетки
o Неявная сетка
o Краткая запись сетки
o Элементы сетки
o Размещение и переупорядочивание элементов сетки
o Выравнивание элементов сетки и промежутки между элементами
2.29. CSS3-шрифты
o Кернинг: свойство font-kerning
o Лигатуры: свойство font-variant-ligatures
o Подстрочные и надстрочные формы: свойство font-variant-position
o Преобразование в заглавные буквы: свойство font-variant-caps
o Форматирование цифр: свойство font-variant-numeric
o Визуализация восточноазиатского текста: свойство font-variant-east-asian
o Общее сокращение для рендеринга шрифтов: свойство font-variant
o Низкоуровневое управление настройками шрифтов: свойство font-feature-
settings
2.30. CSS3-переполнение
o Типы переполнения
o Прокрутка и обрезка переполнения: свойства overflow-x, overflow-y и overflow
o Автоматическое многоточие
o Многоточие при переполнении: свойство text-overflow
2.31. CSS3-способы письма
o Введение
o Направление вдоль линии строки и двунаправленность
o Задаем направление: свойство direction
o Встраивание и переопределение: свойство unicode-bidi
o Вертикальное письмо
o Направление потока блоков: свойство writing-mode
o Введение в вертикальное расположение текста
o Ориентация текста: свойство text-orientation

2.1. Основы CSS


Опубликовано: 2 января 2015Обновлено: 17 марта 202158 Comments
CSS (Cascading Style Sheets) — язык таблиц стилей, который позволяет прикреплять
стиль (например, шрифты и цвет) к структурированным документам (например,
документам HTML и приложениям XML).
Обычно CSS-стили используются для создания и изменения стиля элементов веб-
страниц и пользовательских интерфейсов, написанных на языках HTML и XHTML, но
также могут быть применены к любому виду XML-документа, в том числе XML, SVG и
XUL.

Отделяя стиль представления документов от содержимого документов, CSS


упрощает создание веб-страниц и обслуживание сайтов.

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

Каскадные таблицы стилей описывают правила форматирования элементов с


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

Объявление стиля состоит из двух частей: селектора и объявления. В HTML имена


элементов нечувствительны к регистру, поэтому «h1» работает так же, как и «H1».
Объявление состоит из двух частей: имя свойства (например,  color ) и значение
свойства ( grey ). Селектор сообщает браузеру, какой именно элемент
форматировать, а в блоке объявления (код в фигурных скобках) перечисляются
форматирующие команды — свойства и их значения.

РИС. 1. СТРУКТУРА
ОБЪЯВЛЕНИЯ

Хотя приведенный пример пытается влиять только на пару свойств, необходимых


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

Виды каскадных таблиц стилей и их специфика


 Содержание:
 1. Виды таблиц стилей
 2. Виды селекторов
 3. Комбинация селекторов
 4. Группировка селекторов
 5. Наследование и каскад
1. Виды таблиц стилей
1.1. Внешняя таблица стилей

Внешняя таблица стилей представляет собой текстовый файл с


расширением  .css , в котором находится набор CSS-стилей элементов. Файл
создаётся в редакторе кода, так же как и HTML-страница. Внутри файла могут
содержатся только стили, без HTML-разметки. Внешняя таблица стилей
подключается к веб-странице с помощью тега  <link> , расположенного внутри
раздела  <head></head> . Такие стили работают для всех страниц сайта.
К каждой веб-странице можно присоединить несколько таблиц стилей, добавляя
последовательно несколько тегов  <link> , указав в атрибуте
тега  media  назначение данной таблицы стилей.  rel="stylesheet"  указывает тип
ссылки (ссылка на таблицу стилей).

<head>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/assets.css" media="all">
</head>

HTML

Атрибут  type="text/css"  не является обязательным по стандарту HTML5, поэтому


его можно не указывать. Если атрибут отсутствует, по умолчанию используется
значение  type="text/css" .
1.2. Внутренние стили

Внутренние стили встраиваются в раздел  <head></head>  HTML-документа и


определяются внутри тега  <style></style> . Внутренние стили имеют приоритет
над внешними, но уступают встроенным стилям (заданным через атрибут  style ).

<head>
<style>
h1,
h2 {
color: red;
font-family: "Times New Roman", Georgia, Serif;
line-height: 1.3em;
}
</style>
</head>
<body>
...
</body>

HTML
1.3. Встроенные стили

Когда мы пишем встроенные стили, мы пишем CSS-код в HTML-файл,


непосредственно внутри тега элемента с помощью атрибута  style :

<p style="font-weight: bold; color: red;">Обратите внимание на этот текст.</p>

HTML

Такие стили действуют только на тот элемент, для которого они заданы.

1.4. Правило @import

Правило  @import  позволяет загружать внешние таблицы стилей. Чтобы


директива  @import  работала, она должна располагаться в таблице стилей
(внешней или внутренней) перед всеми остальными правилами:

<style>
@import url(mobile.css);
p {
font-size: 0.9em;
color: grey;
}
</style>

HTML

Правило  @import  также используется для подключения веб-шрифтов:

@import url(https://fonts.googleapis.com/css?
family=Open+Sans&subset=latin,cyrillic);

CSS

2. Виды селекторов
Селекторы представляют структуру веб-страницы. С их помощью создаются правила
для форматирования элементов веб-страницы. Селекторами могут быть элементы,
их классы и идентификаторы, а также псевдоклассы и псевдоэлементы.
2.1. Универсальный селектор

Соответствует любому HTML-элементу. Например,  * {margin: 0;}  обнулит


внешние отступы для всех элементов сайта. Также селектор может использоваться в
комбинации с псевдоклассом или псевдоэлементом:  *:after {CSS-
стили} ,  *:checked {CSS-стили} .
2.2. Селектор элемента

Селекторы элементов позволяют форматировать все элементы данного типа на всех


страницах сайта. Например,  h1 {font-family: Lobster, cursive;}  задаст
общий стиль форматирования всех заголовков  h1 .
2.3. Селектор класса

Селекторы класса позволяют задавать стили для одного и более элементов с


одинаковым именем класса, размещенных в разных местах страницы или на разных
страницах сайта. Например, для создания заголовка с
классом  headline  необходимо добавить атрибут  class  со значением  headline  в
открывающий тег  <h1>  и задать стиль для указанного класса. Стили, созданные с
помощью класса, можно применять к другим элементам, не обязательно данного
типа.

<h1 class="headline">Инструкция пользования персональным компьютером</h1>

HTML

.headline {
text-transform: uppercase;
color: lightblue;
}

CSS

Если элемент имеет несколько атрибутов класса, их значения объединяются с


пробелами.

<h1 class="headline post-title">Инструкция пользования персональным


компьютером</h1>

HTML

2.4. Селектор идентификатора

Селектор идентификатора позволяет форматировать один конкретный элемент.


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

<div id="sidebar"></div>

HTML
#sidebar {
width: 300px;
float: left;
}

CSS

2.5. Селектор потомка

Селекторы потомков применяют стили к элементам, расположенным внутри


элемента-контейнера. Например,  ul li {text-transform: uppercase;}  —
выберет все элементы  li , являющиеся потомками всех элементов  ul .
Если нужно отформатировать потомки определенного элемента, этому элементу
нужно задать стилевой класс:

o p.first a {color: green;}  — данный стиль применится ко всем ссылкам,


потомкам абзаца с классом  first ;
o p .first a {color: green;}  — если добавить пробел, то будут стилизованы
ссылки, расположенные внутри любого тега класса  .first , который является
потомком элемента  <p> ;
o .first a {color: green;}  — данный стиль применится к любой ссылке,
расположенной внутри другого элемента, обозначенного классом  .first .
2.6. Дочерний селектор

Дочерний элемент является прямым потомком содержащего его элемента. У одного


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

Например,  p > strong  — выберет все элементы  strong , являющиеся дочерними


по отношению к элементу  p .
2.7. Сестринский селектор

Сестринские отношения возникают между элементами, имеющими общего родителя.


Селекторы сестринских элементов позволяют выбрать элементы из группы
элементов одного уровня:

o h1 + p  — выберет все первые абзацы, идущие непосредственно за любым


тегом  <h1> , не затрагивая остальные абзацы;
o h1 ~ p  — выберет все абзацы, являющиеся сестринскими по отношению к любому
заголовку  h1  и идущие сразу после него.
2.8. Селектор атрибута

Селекторы атрибутов выбирают элементы на основе имени атрибута или значения


атрибута:
o [атрибут]  — все элементы, содержащие указанный атрибут,  [alt]  — все
элементы, для которых задан атрибут  alt ;
o селектор[атрибут]  — элементы данного типа, содержащие указанный
атрибут,  img[alt]  — только картинки, для которых задан атрибут  alt ;
o селектор[атрибут="значение"]  — элементы данного типа, содержащие
указанный атрибут с конкретным значением,  img[title="flower"]  — все картинки,
название которых содержит слово  flower ;
o селектор[атрибут~="значение"]  — элементы частично содержащие данное
значение, например, если для элемента задано несколько классов через
пробел,  p[class~="feature"]  — абзацы, имя класса которых содержит  feature ;
o селектор[атрибут|="значение"]  — элементы, список значений атрибута
которых начинается с указанного слова,  p[class|="feature"]  — абзацы, имя класса
которых  feature  или начинается на  feature ;
o селектор[атрибут^="значение"]  — элементы, значение атрибута которых
начинается с указанного значения,  a[href^="http://"]  — все ссылки,
начинающиеся на  http:// ;
o селектор[атрибут$="значение"]  — элементы, значение атрибута которых
заканчивается указанным значением,  img[src$=".png"]  — все картинки в
формате  png ;
o селектор[атрибут*="значение"]  — элементы, значение атрибута которых
содержит в любом месте указанное слово,  a[href*="book"]  — все ссылки, название
которых содержит  book .
2.9. Селектор псевдокласса

Псевдоклассы — это классы, фактически не прикрепленные к HTML-тегам. Они


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

Псевдоклассы характеризуют элементы со следующими свойствами:

o :link  — не посещенная ссылка;


o :visited  — посещенная ссылка;
o :hover  — любой элемент, по которому проводят курсором мыши;
o :focus  — интерактивный элемент, к которому перешли с помощью клавиатуры или
активировали посредством мыши;
o :active  — элемент, который был активизирован пользователем;
o :valid  — поля формы, содержимое которых прошло проверку в браузере на
соответствие указанному типу данных;
o :invalid  — поля формы, содержимое которых не соответствует указанному типу
данных;
o :enabled  — все активные поля форм;
o :disabled  — заблокированные поля форм, т.е., находящиеся в неактивном
состоянии;
o :in-range  — поля формы, значения которых находятся в заданном диапазоне;
o :out-of-range  — поля формы, значения которых не входят в установленный
диапазон;
o :lang()  — элементы с текстом на указанном языке;
o :not(селектор)  — элементы, которые не содержат указанный селектор — класс,
идентификатор, название или тип поля формы —  :not([type="submit"]) ;
o :target  — элемент с символом  # , на который ссылаются в документе;
o :checked  — выделенные (выбранные пользователем) элементы формы.
2.10. Селектор структурных псевдоклассов

Структурные псевдоклассы отбирают дочерние элементы в соответствии с


параметром, указанным в круглых скобках:

o :nth-child(odd)  — нечётные дочерние элементы;


o :nth-child(even)  — чётные дочерние элементы;
o :nth-child(3n)  — каждый третий элемент среди дочерних;
o :nth-child(3n+2)  — выбирает каждый третий элемент, начиная со второго
дочернего элемента  (+2) ;
o :nth-child(n+2)  — выбирает все элементы, начиная со второго;
o :nth-child(3)  — выбирает третий дочерний элемент;
o :nth-last-child()  — в списке дочерних элементов выбирает элемент с
указанным местоположением, аналогично с  :nth-child() , но начиная с последнего, в
обратную сторону;
o :first-child  — позволяет оформить только самый первый дочерний элемент
тега;
o :last-child  — позволяет форматировать последний дочерний элемент тега;
o :only-child  — выбирает элемент, являющийся единственным дочерним
элементом;
o :empty  — выбирает элементы, у которых нет дочерних элементов;
o :root  — выбирает элемент, являющийся корневым в документе — элемент  html .
2.11. Селектор структурных псевдоклассов типа

Указывают на конкретный тип дочернего тега:

o :nth-of-type()  — выбирает элементы по аналогии с  :nth-child() , при этом


берёт во внимание только тип элемента;
o :first-of-type  — выбирает первый дочерний элемент данного типа;
o :last-of-type  — выбирает последний элемент данного типа;
o :nth-last-of-type()  — выбирает элемент заданного типа в списке элементов в
соответствии с указанным местоположением, начиная с конца;
o :only-of-type  — выбирает единственный элемент указанного типа среди
дочерних элементов родительского элемента.
2.12. Селектор псевдоэлемента

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


с помощью свойства  content :
o :first-letter  — выбирает первую букву каждого абзаца, применяется только к
блочным элементам;
o :first-line  — выбирает первую строку текста элемента, применяется только к
блочным элементам;
o :before  — вставляет генерируемое содержимое перед элементом;
o :after  — добавляет генерируемое содержимое после элемента.
3. Комбинация селекторов
Для более точного отбора элементов для форматирования можно использовать
комбинации селекторов:

o a[href][title]  — выберет все ссылки, для которых заданы


атрибуты  href  и  title ;
o img[alt*="css"]:nth-of-type(even)  — выберет все четные картинки,
альтернативный текст которых содержит слово  css .
4. Группировка селекторов
Один и тот же стиль можно одновременно применить к нескольким элементам. Для
этого необходимо в левой части объявления перечислить через запятую нужные
селекторы:

h1,
h2,
p,
span {
color: tomato;
background: white;
}

CSS

5. Наследование и каскад
Наследование и каскад — два фундаментальных понятия в CSS, которые тесно
связаны между собой.

Наследование заключается в том, что элементы наследуют свойства от своего


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

Наследование является механизмом, с помощью которого определенные свойства


передаются от предка к его потомкам. Спецификацией CSS предусмотрено
наследование свойств, относящихся к текстовому содержимому страницы, таких
как  color ,  font ,  letter-spacing ,  line-height ,  list-style ,  text-align , 
text-indent ,  text-transform ,  visibility ,  white-space  и  word-spacing .
Во многих случаях это удобно, так как не нужно задавать размер шрифта и
семейство шрифтов для каждого элемента веб-страницы.
Свойства, относящиеся к форматированию блоков, не наследуются.
Это  background ,  border ,  display ,  float  и  clear ,  height  и  width ,  margin
,  min-max-height  и  -width ,  outline ,  overflow ,  padding ,  position ,  text-
decoration ,  vertical-align  и  z-index .
Принудительное наследование

С помощью ключевого слова  inherit  можно принудить элемент наследовать любое


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

Стили могут наследоваться от родительского элемента (наследуемые свойства или с


помощью значения  inherit ).
Стили, расположенные в таблице стилей ниже, отменяют стили, расположенные в
таблице выше.

К одному элементу могут применяться стили из разных источников. Проверить,


какие стили применяются, можно в режиме разработчика браузера. Для этого над
элементом нужно щёлкнуть правой кнопкой мыши и выбрать пункт «Посмотреть код»
(или что-то аналогичное). В правом столбце будут перечислены все свойства,
которые заданы для этого элемента или наследуются от родительского элемента, а
также файлы стилей, в которых они указаны, и порядковый номер строки кода.
РИС. 2. РЕЖИМ РАЗРАБОТЧИКА В БРАУЗЕРЕ GOOGLE CHROME

При определении стиля можно использовать любую комбинацию селекторов —


селектор элемента, псевдокласса элемента, класса или идентификатора элемента.

<div id="wrap" class="box clear"></div>

HTML
div {border: 1px solid #eee;}
#wrap {width: 500px;}
.box {float: left;}
.clear {clear: both;}

CSS

5.2. Каскад

Каскадирование — это механизм, который управляет конечным результатом в


ситуации, когда к одному элементу применяются разные CSS-правила. Существует
три критерия, которые определяют порядок применения свойств — правило  !
important , специфичность и порядок, в котором подключены таблицы стилей.
Правило !important

Вес правила можно задать с помощью ключевого слова  !important , которое


добавляется сразу после значения свойства, например,  span {font-weight:
bold!important;} . Правило необходимо размещать в конец объявления перед
закрывающей скобкой, без пробела. Такое объявление будет иметь приоритет над
всеми остальными правилами. Это правило позволяет отменить значение свойства и
установить новое для элемента из группы элементов в случае, когда нет прямого
доступа к файлу со стилями.
Специфичность

Для каждого правила браузер вычисляет специфичность селектора, и если у


элемента имеются конфликтующие объявления свойств, во внимание принимается
правило, имеющее наибольшую специфичность. Значение специфичности состоит из
четырех частей:  0, 0, 0, 0 . Специфичность селектора определяется следующим
образом:
o для  id  добавляется  0, 1, 0, 0 ;
o для  class  добавляется  0, 0, 1, 0 ;
o для каждого элемента и псевдоэлемента добавляется  0, 0, 0, 1 ;
o для встроенного стиля, добавленного непосредственно к элементу —  1, 0, 0, 0 ;
o универсальный селектор не имеет специфичности.

h1 {color: lightblue;} /*специфичность 0, 0, 0, 1*/


em {color: silver;} /*специфичность 0, 0, 0, 1*/
h1 em {color: gold;} /*специфичность: 0, 0, 0, 1 + 0, 0, 0, 1 = 0, 0, 0, 2*/
div#main p.about {color: blue;} /*специфичность: 0, 0, 0, 1 + 0, 1, 0, 0 + 0,
0, 0, 1 + 0, 0, 1, 0 = 0, 1, 1, 2*/
.sidebar {color: grey;} /*специфичность 0, 0, 1, 0*/
#sidebar {color: orange;} /*специфичность 0, 1, 0, 0*/
li#sidebar {color: aqua;} /*специфичность: 0, 0, 0, 1 + 0, 1, 0, 0 = 0, 1, 0,
1*/

CSS
В результате к элементу применятся те правила, специфичность которых больше.
Например, если на элемент действуют две специфичности со значениями  0, 0, 0,
2  и  0, 1, 0, 1 , то выиграет второе правило.
Порядок подключённых таблиц

Вы можете создать несколько внешних таблиц стилей и подключить их к одной веб-


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

2.2. CSS блочная модель


Опубликовано: 31 декабря 2019Обновлено: 17 марта 20210 Comments

Модуль CSS Box Model описывает свойства  padding  и  margin , которые создают
поля внутри и отступы снаружи CSS блока. Размеры блока также могут быть
увеличены за счет рамки.
Каждый блок имеет прямоугольную область содержимого в центре, поля
вокруг содержимого, рамку вокруг полей и отступ за пределами рамки. Размеры
этих областей определяют свойства  padding  и его подсвойства —  padding-
left ,  padding-top и т.д.,  border  и его подсвойства,  margin  и его подсвойства.

CSS блочная модель в деталях


 Содержание:
 1. Определение блочной модели
 2. Отступы элемента
 2.1. Схлопывание вертикальных отступов
 2.2. Выпадение вертикальных отступов
 2.3. Физические свойства отступов: свойства margin-top, margin-right, margin-bottom,
margin-left
 2.4. Краткая запись отступов: свойство margin
 3. Поля элемента
 3.1. Физические свойства полей: свойства padding-top, padding-right, padding-bottom,
padding-left
 3.2. Краткая запись полей: свойство padding
 4. Рамки элемента
1. Определение блочной модели
Каждый блок имеет область содержимого, в которой находится текст, дочерние
элементы, изображение и т.п., и необязательные окружающие
ее  padding ,  border  и  margin . Размер каждой области определяется
соответствующими свойствами и может быть нулевым, или, в случае  margin ,
отрицательным.
margin
padding
borderобласть содержимого
 край содержимого

 край поля

 край рамки

 край отступа

ФИГУРА 1. ОБЛАСТИ И КРАЯ БЛОКА


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

Фон области содержимого, полей и рамки блока определяется свойствами фона.


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

* {
margin: 0;
padding: 0;
}

CSS
2. Отступы элемента
Отступы окружают край рамки элемента, обеспечивая расстояние между соседними
блоками. Свойства отступов определяют их толщину. Применяются ко всем
элементам, кроме внутренних элементов таблицы. Сокращенное
свойство  margin  задает отступы для всех четырех сторон, а его подсвойства
задают отступ только для соответствующей стороны.
Смежные вертикальные отступы элементов в блочной модели схлопываются.

2.1. Схлопывание вертикальных отступов


Смежные вертикальные отступы двух или более элементов уровня
блока  margin  объединяются (перекрываются). При этом ширина общего отступа
равна ширине большего из исходных. Исключение составляют отступы корневого
элемента, которые не схлопываются.
 Область содержимого

margin-bottom: 30px;
 Область содержимого

margin-top: 15px;
 Область содержимого

margin-bottom: 30px; width: 100%; display: inline-block;


 
 Область содержимого

margin-top: 15px; width: 100%; display: inline-block;


ФИГУРА 2. СХЛОПЫВАНИЕ ОТСТУПОВ И ОДИН ИЗ ВАРИАНТОВ РЕШЕНИЯ
Объединение отступов выполняется только для блочных элементов в нормальном
потоке документа. Если среди схлопывающихся отступов есть отрицательные
значения, то браузер добавит отрицательное значение к положительному, а
полученный результат и будет расстоянием между элементами. Если
положительных отступов нет, то максимум абсолютных значений соседних отступов
вычитается из нуля.

Отступы не схлопываются:

o Между плавающим блоком и любым другим блоком;


o У плавающих элементов и элементов со значением  overflow , отличным
от  visible , со своими дочерними элементами в потоке;
o У абсолютно позиционированных элементов, даже с их дочерними
элементами;
o У строчно-блочных элементов.
Для предотвращения проблемы схлопывания рекомендуется задавать для всех
элементов только верхний или нижний  margin .
2.2. Выпадение вертикальных отступов

Если внутри одного блока расположить другой блок и задать ему  margin-top , то
внутренний блок прижмется к верхнему краю родительского, а у родительского
элемента появится отступ сверху, т.е. внутренний блок «выпадет» из родительского
блока. Если у родительского элемента также был задан верхний отступ, то
выберется наибольшее из значений.
Чтобы избавиться от эффекта выпадения, можно задать родительскому
элементу  padding-top  или добавить  border-top: 1px solid transparent .
2.3. Физические свойства отступов: свойства margin-top, margin-right, margin-
bottom, margin-left
Свойства устанавливают верхний, правый, нижний и левый отступ блока элемента
соответственно. Отрицательные значения допускаются, но могут существовать
ограничения для конкретной реализации.

Свойства не наследуются.

margin-top/margin-right/margin-bottom/margin-left

Значения:

длина Размер отступа задается в единицах длины, например,  px ,  in ,  em . Значение по


умолчанию  0 .

% Вычисляется относительно ширины блока контейнера. Изменяются, если изменяется


ширина родительского элемента.

auto Для элементов уровня строки, плавающих ( float ) значения  margin-


left  или  margin-right  вычисляются в  0 . Если для элементов уровня блока
задано  margin-left: auto  или  margin-right: auto  — соответствующее
поле расширяется до края содержащего блока, если оба — их значения становятся
равными, что горизонтально центрирует элемент относительно краев содержащего
блока.

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

Синтаксис

margin-top: 20px;
margin-right: 1em;
margin-bottom: 5%;
margin-left: auto;
margin-top: inherit;
margin-right: initial;

CSS
2.4. Краткая запись отступов: свойство margin

Свойство  margin  является сокращенным свойством для установки  margin-


top ,  margin-right ,  margin-bottom  и  margin-left  в одном объявлении.
Если существует только одно значение, оно применяется ко всем сторонам.

Если два — верхний и нижний отступы устанавливаются на первое значение, а


правый и левый — устанавливаются на второе.

Если имеется три значения — верхний отступ устанавливается на первое значение,


левый и правый — на второе, а нижний — на третье.
Если есть четыре значения — они применяются сверху, справа, снизу и слева
соответственно.

3. Поля элемента
Область полей представляет собой пространство между краем области содержимого
и рамкой элемента. Свойства полей определяют толщину их области. Применяются
ко всем элементам, кроме внутренних элементов таблицы (за исключением ячеек
таблицы). Сокращенное свойство  padding  задает поля для всех четырех сторон, а
подсвойства устанавливают только их соответствующие стороны.
Фоны элемента по умолчанию закрашивают поля элемента и пространство под его
рамкой. Это поведение можно настроить с помощью свойств background-
origin и background-clip.
3.1. Физические свойства полей: свойства padding-top, padding-right, padding-
bottom, padding-left

Свойства устанавливают верхнее, правое, нижнее и левое поля соответственно.


Отрицательные значения недопустимы.

Свойства не наследуются.

padding-top/padding-right/padding-bottom/padding-left

Значения:

длина Поля элемента задаются при помощи единиц длины, например,  px ,  pt ,  cm .


Значение по умолчанию  0 .

% Вычисляются относительно ширины родительского элемента, могут меняться при


изменении ширины элемента. Поля сверху и снизу равны полям слева и справа, т.е.
верхние и нижние поля тоже вычисляются относительно ширины элемента.

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

Синтаксис

padding-top: 0.5em;
padding-right: 0;
padding-bottom: 2cm;
padding-left: 10%;
padding-top: inherit;
padding-bottom: initial;

CSS
3.2. Краткая запись полей: свойство padding

Свойство  padding  является сокращенным свойством для установки  padding-


top ,  padding-right ,  padding-bottom  и  padding-left  в одном объявлении.
Если существует только одно значение, оно применяется ко всем сторонам.
Если есть два значения, верхнее и нижнее поля устанавливаются на первое
значение, а правое и левое — на второе.

Если имеется три значения, верхнее поле устанавливается на первое значение,


левое и правое — на второе, а нижнее — на третье.

Если есть четыре значения — они применяются сверху, справа, снизу и слева
соответственно.

4. Рамки элемента
Рамки элемента заполняют область рамок, визуально очерчивая края блока.
Свойства рамок определяют толщину области границы блока, а также ее стиль и
цвет.
По материалам CSS Box Model Module Level 3

2.3. Блочные и строчные элементы


Опубликовано: 14 декабря 2014Обновлено: 21 октября 202051 Comments

Выделяют две основные категории HTML-элементов, которые соответствуют типам


их содержимого и поведению в структуре веб-страницы — блочные и строчные
элементы. С помощью блочных элементов можно создавать структуру веб-
страницы, строчные элементы используются для форматирования текстовых
фрагментов (за исключением элементов  <area>  и  <img> ).
Разделение элементов на блочные и строчные используется в спецификации HTML
до версии 4.01. В HTML5 эти понятия заменены более сложным набором категорий
контента, согласно которым каждый HTML-элемент должен следовать правилам,
определяющим, какой контент для него допустим.
Модель визуального форматирования CSS в деталях
 Содержание:
 1. Модель визуального форматирования
 2. Блочные элементы и блочные контейнеры
 3. Строчные элементы и строчные контейнеры
 4. Строчно-блочные элементы
 5. Ширина содержимого: свойство width
 6. Минимальная и максимальная ширина: свойства min-width и max-width
 7. Высота содержимого: свойство height
 8. Минимальная и максимальная высота: свойства min-height и max-height
 9. Расчет высоты строки: свойства line-height и vertical-align
 10. Изменение блочной модели: свойство box-sizing
1. Модель визуального форматирования
HTML-документ организован в виде дерева элементов и текстовых узлов. Модель
визуального форматирования CSS представляет собой алгоритм, который
обрабатывает HTML-документ и выводит его на экран устройства.

Каждый блок в дереве представляет соответствующий элемент или псевдоэлемент,


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

Чтобы создать дерево блоков, CSS сначала использует каскадирование и


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

Затем для каждого элемента CSS генерирует ноль или более блоков в соответствии
со значением свойства  display  этого элемента. Как правило, элемент генерирует
один основной блок, который представляет самого себя и содержит свое
содержимое. Некоторые значение свойства  display , например,  display: list-
item; , генерируют блок основного блока и блок дочернего маркера. Другие,
например,  display: none; , приводят к тому, что элемент и/или его потомки
вообще не генерируют блоки.
Положение блоков на странице определяется следующими факторами:

o размером элемента (с учётом того, заданы они явно или нет);


o типом элемента (строчный или блочный);
o схемой позиционирования (нормальный поток, позиционированные или
плавающие элементы);
o отношениями между элементами в DOM (родительский — дочерний элемент);
o внутренними размерами содержащихся изображений;
o внешней информацией (например, размеры окна браузера).
2. Блочные элементы и блочные контейнеры
Блочные элементы — элементы высшего уровня, которые форматируются
визуально как блоки, располагаясь на странице в окне браузера вертикально.
Значения свойства  display , такие как  block ,  list-item  и  table  делают
элементы блочными. Блочные элементы генерируют основной блок, который
содержит только блок элемента. Элементы со значением  display: list-
item  генерируют дополнительные блоки для маркеров, которые позиционируются
относительно основного блока.
<address> ,  <article> ,  <aside> ,
<blockquote> ,
<dd> ,  <div> ,  <dl> ,  <dt> ,  <details> ,
<fieldset> ,  <figcaption> ,  <figure> ,  <footer> ,  <form> ,
<h1>-<h6> ,  <header> ,  <hr> ,
<li> ,  <legend> ,
<nav> ,  <noscript> ,
<ol> ,  <output> ,  <optgroup> ,  <option> ,
<p> ,  <pre> ,
<section> ,  <summary> ,
<table> ,
<ul>
Блочные элементы могут размещаться непосредственно внутри элемента  <body> .
Они создают разрыв строки перед элементом и после него, образуя прямоугольную
область, по ширине занимающую всю ширину веб-страницы или блока-родителя.
Блочные элементы могут содержать как строчные, так и блочные элементы, но не
оба типа элементов сразу. При необходимости, строки текста, принадлежащие
блочному контейнеру, могут быть обёрнуты анонимными контейнерами, которые
будут вести себя внутри блока как элементы со значением  display: block; , а
строчные элементы обёрнуты элементом  <p> . Блочные элементы могут
содержаться только в пределах блочных элементов.
Элемент  <p>  относится к блочным элементам, но он не должен содержать внутри
себя другой элемент  <p> , а также любой другой блочный элемент.
Анонимные блоки уровня блока

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

РИС. 1. АНОНИМНЫЕ БЛОКИ УРОВНЯ БЛОКА


3. Строчные элементы и строчные контейнеры
Встроенные (строчные) элементы генерируют внутристрочные контейнеры. Они не
формируют новые блоки контента. Значения свойства  display , такие
как  inline  и  inline-table  делают элементы строчными.
<a> ,  <area> ,
<b> ,  <bdo> ,  <bdi> ,
<cite> ,  <code> ,
<dfn> ,  <del> ,
<em> ,
<i> ,  <iframe> ,  <img> ,  <ins> ,
<kbd> ,
<label> ,
<map> ,  <mark> ,
<s> ,  <samp> ,  <small> ,  <span> ,  <strong> ,  <sub> ,  <sup> ,
<time> ,
<q> ,
<ruby> ,
<u> ,
<var>
РИС. 2. ОТЛИЧИЕ ВОЗДЕЙСТВИЯ CSS-СВОЙСТВ PADDING И MARGIN НА СТРОЧНЫЕ
И СТРОЧНО-БЛОЧНЫЕ ЭЛЕМЕНТЫ
Строчные элементы могут содержать только данные и другие строчные элементы.
Исключение составляет элемент  <a> , который согласно спецификации HTML5
может оборачивать целые абзацы, списки, таблицы, заголовки и целые разделы при
условии, что они не содержат другие интерактивные элементы — другие ссылки и
кнопки.
Анонимные блоки уровня строки

Любой текст, содержащийся непосредственно внутри блочного элемента и не внутри


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

РИС. 3. АНОНИМНЫЙ БЛОК УРОВНЯ СТРОКИ


4. Строчно-блочные элементы
Существует еще одна группа элементов, которые браузер обрабатывает как строчно-
блочные  {display: inline-block;} . Такие элементы являются встроенным, но
для них можно задавать поля, отступы, ширину и высоту.
<audio> ,
<button> ,
<canvas> ,
<embed> ,
<input> ,
<keygen> ,
<meter> ,
<object> ,
<progress> ,
<select> ,
<textarea> ,
<video> .
5. Ширина содержимого: свойство width
Свойство  width  определяет ширину содержимого блока.
Это свойство не применяется к незамещаемым строчным элементам  display:
inline; . Ширина содержимого встроенных блоков определяется шириной
отображаемого содержимого внутри них. Встроенные блоки сливаются в линейные
блоки. Ширина линейных блоков определяется шириной содержащего блока, но
может быть уменьшена из-за наличия свойства  float .
Отрицательные значения не допускаются.

Свойство не наследуется.

width

Значения:

длина Ширина элемента задается в единицах длины, например,  px ,  em  и т.д.

% Вычисляется относительно ширины содержащего блока. Для абсолютно


позиционированных элементов процент вычисляется с учетом ширины
области отступов  padding  содержащего блока.

auto Ширина вычисляется в зависимости от значений других свойств. Значение по


умолчанию.

inherit Наследует значение свойства от родительского элемента.

Синтаксис

width: 100px;
width: 10em;
width: 50%;
width: auto;
width: inherit;

CSS
6. Минимальная и максимальная ширина: свойства min-width и max-
width
Свойства  min-width  и  max-width  позволяют ограничивать ширину содержимого
до определенного диапазона. Значения не могут быть отрицательными. Для  min-
width  значение по умолчанию  0 , для  max-width  —  none .
Свойства не наследуются.

min-width/max-width

Значения:

длина Задает фиксированную минимальную или максимальную используемую


ширину.

% Указывает процент для определения используемого значения. Процент


рассчитывается относительно ширины содержащего блока.

none Означает отсутствие ограничений ширины блока.

inherit Наследует значение свойства от родительского элемента.

Синтаксис

min-width: 100px;
min-width: 10em;
min-width: 50%;
min-width: inherit;

CSS

max-width: 500px;
max-width: 20em;
max-width: 80%;
max-width: none;
max-width: inherit;

CSS
7. Высота содержимого: свойство height
Свойство  height  определяет высоту содержимого блока. Это свойство не
применяется к незамещаемым строчным элементам. Значения длины не могут быть
отрицательными.
Свойство не наследуется.

height

Значения:

длина Высота области содержимого задается в единицах длины.


% Задает высоту в процентах. Процент рассчитывается относительно высоты
содержащего блока. Если высота содержащего блока не указана явно (то
есть зависит от высоты содержимого) и этот элемент не является абсолютно
позиционированным, значение вычисляется как  auto . Для абсолютно
позиционированных элементов процент вычисляется с учетом высоты
области отступов  padding  содержащего блока.

auto Высота зависит от значений других свойств. Значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

Синтаксис

height: 100px;
height: 10em;
height: 50%;
height: auto;
width: inherit;

CSS
8. Минимальная и максимальная высота: свойства min-height и max-
height
Иногда полезно ограничить высоту элементов определенным диапазоном.
Свойства  min-height  и  max-height  предлагают эту функциональность.
Свойства не наследуются.

min-height/max-height

Значения:

длина Задает фиксированную минимальную или максимальную вычисленную


высоту в единицах длины. Значения не могут быть отрицательными.

% Указывает процент для определения используемого значения. Процент


рассчитывается относительно высоты содержащего блока. Если высота
содержащего блока не указана явно (т.е. зависит от высоты содержимого) и
этот элемент не является абсолютно позиционированным, процентное
значение обрабатывается как  0  для  min-height  или  none  для  max-
height .

none Отсутствие ограничений высоты блока, только для  max-height .

inherit Наследует значение свойства от родительского элемента.

Синтаксис

min-height: 100px;
min-height: 2em;
min-height: 50%;
min-height: inherit;

CSS

max-height: 500px;
max-height: 20em;
max-height: 80%;
max-height: none;
max-height: inherit;

CSS
9. Расчет высоты строки: свойства line-height и vertical-align
Как описано выше, пользовательские агенты (браузеры) передают блоки
встроенного уровня в вертикальный стек линейных блоков. Высота линейного блока
определяется следующим образом:

o Высота каждого встроенного прямоугольника в линейном блоке вычисляется.


Для замещаемых,  inline-block  и  inline-table  элементов это высота их
области поля (margin box).
o Блоки уровня строки выравниваются вертикально в соответствии со значением
свойства  vertical-align . Если они выровнены по верху или по низу, они
должны быть выровнены так, чтобы минимизировать высоту линейного блока.
Высота линейного блока — это расстояние между самой верхней и самой нижней
частью блока. Пустые встроенные элементы генерируют пустые встроенные блоки,
но эти блоки по-прежнему имеют поля, отступы, границы, высоту строки и, таким
образом, влияют на эти вычисления также, как и элементы с содержимым.

В элементе уровня блока, содержимое которого состоит из элементов встроенного


уровня, свойство  line-height  определяет минимальную высоту линейных блоков
внутри элемента. Минимальная высота состоит из минимальной высоты над базовой
линией и минимальной глубины под ней.
Для элементов уровня строки свойство  line-height  указывает высоту, которая
используется при расчете высоты линейного блока.
Отрицательные значения не допустимы.

Свойство наследуется.

line-height

Значения:

normal Сообщает пользовательским агентам установить «разумное» значение на


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

число Используемое значение свойства — это число, умноженное на размер


шрифта элемента.

% Вычисленное значение свойства — это процент, умноженный на вычисленный


размер шрифта элемента.

inherit Наследует значение свойства от родительского элемента.

Синтаксис

line-height: normal;
line-height: 2em;
line-height: 1.5;
line-height: 50%;
line-height: inherit;

CSS

РИС. 4. КОНТЕЙНЕР СТРОКИ


Свойство  vertical-align  влияет на вертикальное позиционирование в линейном
блоке элементов уровня строки:  display: inline  и  display: table-cell .
Значения этого свойства имеют другие значения в контексте таблиц.
Свойство не наследуется.

vertical-align

Значения:

baseline Выравнивает базовую линию элемента по базовой линии его родителя,


совмещая среднюю линию элемента со средней линией родительского
элемента.

sub Делает элемент подстрочным (аналогично с тегом  <sub> ). Величина


понижения элемента может меняться в зависимости от браузера
пользователя.

super Делает элемент надстрочным (аналогично с тегом  <sup> ). При этом


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

text-top Верхний край элемента совмещается с верхним краем шрифта родительского


элемента.

middle Средняя линия элемента (обычно изображения) совмещается с линией,


проходящей через середину родительского элемента.

bottom Нижний край элемента совмещается с нижним краем самого низкого


элемента в линии.

text-bottom Нижний край элемента совмещается с нижним краем шрифта родительского


элемента.

% Не позволяет устанавливать  middle , вычисляется как часть  line-


height  элемента, а не его родителя, т.е. если установить
значение  vertical-align , равное  50%  для элемента с  line-
height  равным  20рх , то базовая линия элемента поднимется на  10px .

длина Устанавливает значение в единицах длины, перемещая элемент на заданное


расстояние.

inherit Наследует значение свойства от родительского элемента.

Синтаксис

vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;
vertical-align: 6em;
vertical-align: 10px;
vertical-align: 25%;
vertical-align: inherit;

CSS
РИС. 5. СВОЙСТВО VERTICAL-ALIGN
10. Изменение блочной модели: свойство box-sizing
Свойство  box-sizing  переключает блочную модель с фиксированных размеров
длины и ширины на  content-box  и  border-box . Это влияет на интерпретацию
всех свойств, определяющих размеры, включая  flex-basis .
Свойство не наследуется.

box-sizing

Значения:

content-box Это поведение ширины и высоты, как указано в CSS2.1. Заданные ширина и
высота (и соответствующие min/max-свойства) применяются к ширине и
высоте области содержимого элемента. Поля  padding  и
рамка  border  элемента располагаются за пределами указанной ширины и
высоты. Значение по умолчанию.

border-box Любые  padding  или  border , заданные для элемента, размечаются и


отрисовываются внутри указанных значений ширины и высоты. Ширина и
высота содержимого вычисляются путем вычитания ширины границ и полей
соответствующих сторон из указанных свойств ширины и высоты.
Значение  auto  свойств  width  и  height  не зависит от свойства  box-
sizing  и всегда устанавливает размер блока с содержимым.
Сумма  padding  и  border  не должна превышать заданные
значения  width  и  height , в противном случае размер области
содержимого будет равен нулю.

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

Некоторые html-элементы, например,  <button> , по умолчанию имеют  box-


sizing: border-box .
Синтаксис

box-sizing: content-box;
box-sizing: border-box;
box-sizing: inherit;
box-sizing: initial;

CSS

2.4. CSS-позиционирование
Опубликовано: 18 ноября 2014Обновлено: 26 октября 202096 Comments

CSS рассматривает макет html-документа как дерево элементов. Уникальный


элемент, у которого нет родительского элемента, называется корневым элементом.
Модуль CSS-позиционирование описывает, как любой из элементов может быть
размещен независимо от порядка документа (т.е. извлечен из «потока»).
В CSS2 каждый элемент в дереве документа генерирует ноль или более блоков в
соответствии с блочной моделью. Модуль CSS3 дополняет и расширяет схему
позиционирования. Расположение этих блоков регулируется:

o размерами и типом элемента,


o схемой позиционирования (нормальный поток, обтекание и абсолютное
позиционирование),
o отношениями между элементами в дереве документа,
o внешней информацией (например, размер области просмотра, внутренними
размерами изображений и т.д.).

Схемы позиционирования
 Содержание:
 1. Содержащий блок
 2. Выбор схемы позиционирования: свойство position
 3. Смещение блока: свойства top, right, bottom, left
 4. Обтекание: свойство float
 5. Управление потоком рядом с плавающими элементами: свойство clear
 6. Определение контекста наложения: свойство z-index
 6.1. Контекст наложения
В CSS блок элемента может быть расположен в соответствии с тремя схемами
позиционирования:

Нормальный поток

Нормальный поток включает блочный контекст форматирования (элементы


с  display   block ,  list-item  или  table ), строчный (встроенный) контекст
форматирования (элементы с  display   inline ,  inline-block  или  inline-
table ), и относительное и «липкое» позиционирование элементов уровня блока и
строки.
Обтекание

В обтекающей модели блок удаляется из нормального потока и позиционируется


влево или вправо. Содержимое обтекает правую сторону элемента с  float: left  и
левую сторону элемента с  float: right .
Абсолютное позиционирование

В модели абсолютного позиционирования блок полностью удаляется из нормального


потока и ему присваивается позиция относительно содержащего блока. Абсолютное
позиционирование реализуется с помощью значений  position:
absolute;  и  position: fixed; .
Элементом «вне потока» может быть плавающий, абсолютно позиционированный
или корневой элемент.

1. Содержащий блок
Положение и размер блока(ов) элемента иногда вычисляются относительно
некоторого прямоугольника, называемого содержащим блоком элемента
(containing block). В общих словах, содержащий блок — это блок, который содержит
другой элемент. В случае нормального потока корневой элемент  html  является
содержащим блоком для элемента  body , который, в свою очередь, является
содержащим блоком для всех его дочерних элементов и так далее. В случае
позиционирования содержащий блок полностью зависит от типа позиционирования.
Содержащий блок элемента определяется следующим образом:
o Содержащий блок, в котором находится корневой элемент, представляет
собой прямоугольник — так называемый начальный содержащий блок.
o Для некорневого элемента с  position: static;  или  position:
relative;  содержащий блок формируется краем области содержимого
ближайшего родительского блока уровня блока, ячейки таблицы или уровня
строки.
o Содержащим блоком элемента с  position: fixed;  является окно
просмотра.
o Для некорневого элемента с  position: absolute;  содержащим блоком
устанавливается ближайший родительский элемент со значением  position:
absolute/relative/fixed  следующим образом:
— если предок — элемент уровня блока, содержащим блоком будет область
содержимого плюс поля элемента  padding ;
— если предок — элемент уровня строки, содержащим блоком будет область
содержимого;
— если предков нет, то содержащий блок элемента определяется как начальный
содержащий блок.
o Для «липкого» блока содержащим блоком является ближайший предок с
прокруткой или окно просмотра, в противном случае.
2. Выбор схемы позиционирования: свойство position
Свойство  position  определяет, какой из алгоритмов позиционирования
используется для вычисления положения блока.
Свойство не наследуется.

position

Значение:

static Блок располагается в соответствии с нормальным потоком.


Свойства  top ,  right ,  bottom  и  left  не применяются. Значение по
умолчанию.

relative Положение блока рассчитывается в соответствии с нормальным потоком. Затем блок


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

Относительно позиционированный блок создает новый содержащий блок для


абсолютно позиционированных потомков.

Влияние  position: relative;  на элементы таблицы определяется следующим


образом:
Элементы с  table-row-group ,  table-header-group ,  table-footer-
group  иd  table-row  смещаются относительно их обычной позиции в таблице.
Если ячейки таблицы занимают несколько строк, смещаются только ячейки
начальной строки.
table-column-group ,  table-column  не смещает соответствующий столбец и
не оказывает визуального влияния.
table-caption and table-cell смещаются относительно своего нормального положения в
таблице. Если ячейка таблицы охватывает несколько столбцов или строк, то она
смещается целиком.

absolute Положение блока (и, возможно, размер) задается с помощью


свойств  top ,  right ,  bottom  и  left . Эти свойства определяют явное смещение
относительно его содержащего блока. Абсолютно позиционированные блоки
полностью удаляется из нормального потока, не влияя на расположение сестринских
элементов.
Отступы  margin  абсолютно позиционированных блоков не схлопываются.
Абсолютно позиционированный блок создает новый содержащий блок для дочерних
элементов нормального потока и потомков с  position: absolute; .
Содержимое абсолютно позиционированного элемента не может обтекать другие
блоки. Абсолютно позиционированный блок могут скрывать содержимое другого
блока (или сами могут быть скрыты), в зависимости от значения  z-
index  перекрывающихся блоков.

sticky Положение блока рассчитывается в соответствии с нормальным потоком. Затем блок


смещается относительно своего ближайшего предка с прокруткой или окна
просмотра, если ни у одного из предков нет прокрутки.
«Липкий» блок может перекрывать другие блоки, а также создавать полосы
прокрутки в случае переполнения.

«Липкий» блок сохраняет свои размеры, включая разрывы строк и пространство,


первоначально зарезервированное для него.

«Липкий» блок создает новый содержащий блок для абсолютно и относительно


позиционированных потомков.

fixed Фиксированное позиционирование аналогично абсолютному позиционированию, с


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

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

Синтаксис

position: static;
position: relative;
position: absolute;
position: sticky;
position: fixed;
position: initial;
position: inherit;

CSS

РИС. 1. РАЗНИЦА МЕЖДУ СТАТИЧНЫМ, ОТНОСИТЕЛЬНЫМ И АБСОЛЮТНЫМ


ПОЗИЦИОНИРОВАНИЕМ
3. Смещение блока: свойства top, right, bottom, left
Элемент считается позиционированным, если свойство  position  имеет значение,
отличное от  static . Позиционированные элементы генерируют
позиционированные блоки и могут быть расположены в соответствии со
следующими четырьмя физическими свойствами:
top

Значение:

auto Влияние значения зависит от типа элемента. Значение по умолчанию.

длина Смещение на фиксированном расстоянии от указанного края. Отрицательные


значения допускаются.

% Процентные значения вычисляются относительно высоты содержащего блока. Для


«липкого» блока — относительно высоты корневого элемента. Отрицательные
значения допускаются.

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

Синтаксис
top: 10px;
top: 2em;
top: 50%;
top: auto;
top: inherit;
top: initial;

CSS
Свойство  top  задает расстояние, на которое верхний край абсолютно
позиционированного блока (с учетом его  margin ) смещается ниже верхнего края
содержащего блока. Для относительно позиционированных блоков определяет
смещение относительно верхнего края самого блока (то есть блоку задается позиция
в нормальном потоке, а затем смещение от этой позиции в соответствии с этим
свойством).
right

Значение:

auto Влияние значения зависит от типа элемента. Значение по умолчанию.

длина Смещение на фиксированном расстоянии от указанного края. Отрицательные


значения допускаются.

% Процентные значения вычисляются относительно ширины содержащего блока. Для


«липкого» блока — относительно ширины корневого элемента. Отрицательные
значения допускаются.

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

Синтаксис

right: -10px;
right: .5em;
right: -10%;
right: auto;
right: inherit;
right: initial;

CSS
Свойство  right  указывает расстояние, на которое правый край абсолютно
позиционированного блока (с учетом его  margin ) смещен влево от правого края
содержащего блока. Для относительно позиционированных блоков определяет
смещение относительно правого края самого блока.
bottom

Значение:
auto Влияние значения зависит от типа элемента. Значение по умолчанию.

длина Смещение на фиксированном расстоянии от указанного края. Отрицательные


значения допускаются.

% Процентные значения вычисляются относительно высоты содержащего блока. Для


«липкого» блока — относительно высоты корневого элемента. Отрицательные
значения допускаются.

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

Синтаксис

bottom: 50px;
bottom: -3em;
bottom: -50%;
bottom: auto;
bottom: inherit;
bottom: initial;

CSS
Свойство  bottom  указывает расстояние, на которое нижний край блока смещен
вверх относительно нижнего края содержащего блока. Для относительно
позиционированных блоков определяет смещение относительно нижнего края
самого блока.
left

Значение:

auto Влияние значения зависит от типа элемента. Значение по умолчанию.

длина Смещение на фиксированном расстоянии от указанного края. Отрицательные


значения допускаются.

% Процентные значения вычисляются относительно ширины содержащего блока. Для


«липкого» блока — относительно ширины корневого элемента. Отрицательные
значения допускаются.

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

Синтаксис

left: 50px;
left: 10em;
left: 20%;
left: auto;
left: inherit;
left: initial;

CSS
Свойство  left  указывает расстояние, на которое левый край смещен вправо от
левого края содержащего блока. Для относительно позиционированных блоков
определяет смещение относительно левого края самого блока.
Положительные значения смещают элемент внутрь содержащего блока, а
отрицательные — за его пределы.

4. Обтекание: свойство float


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

При использовании свойства  float  для элементов рекомендуется задавать ширину.


Тем самым браузер создаст место для другого содержимого. Если для плавающего
элемента недостаточно места по горизонтали, он будет смещаться вниз до тех пор,
пока не уместится. При этом остальные элементы уровня блока будут его
игнорировать, а элементы уровня строки будут смещаться вправо или влево,
освобождая для него пространство и обтекая его.
Правила, регулирующие поведение плавающих боков, описываются
свойством  float .
Свойство не наследуется.

float

Значение:

none Отсутствие обтекания. Значение по умолчанию.

left Элемент перемещается влево, содержимое обтекает плавающий блок по правому


краю.

right Элемент перемещается вправо, содержимое обтекает плавающий блок по левому


краю.

inherit Наследует значение свойства от родительского элемента.

Синтаксис

float: left;
float: right;
float: none;
float: inherit;

CSS
Плавающий блок принимает размеры своего содержимого с учетом внутренних
отступов и рамок. Верхние и нижние отступы  margin  плавающих элементов не
схлопываются.
Плавающие элементы могут использовать отрицательные отступы  margin , чтобы
перемещаться за пределы области содержимого их родительского элемента.
Свойство автоматически изменяет вычисляемое (отображаемое в браузере)
значение свойства  display  на  display: block  для следующих
значений:  inline ,  inline-block ,  table-row ,  table-row-group ,  table-
column ,  table-column-group ,  table-cell ,  table-caption ,  table-header-
group ,  table-footer-group . Значение  inline-table  меняет на  table .
Свойство не оказывает влияние на элементы с  display: flex  и  display:
inline-flex . Не применяется к абсолютно позиционированным элементам.

РИС. 2. ОБТЕКАНИЕ ЭЛЕМЕНТОВ


5. Управление потоком рядом с плавающими элементами: свойство
clear
Свойство  clear  указывает, какие стороны блока/блоков элемента не должны
прилегать к плавающим блокам, находящемся выше в исходном документе. В CSS2 и
CSS 2.1 свойство применяется только к неплавающим элементам уровня блока.
Свойство не наследуется.

clear

Значение:
none Означает отсутствие ограничений на положение элемента относительно плавающих
блоков. Значение по умолчанию.

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

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

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

inherit Наследует значение свойства от родительского элемента.

Синтаксис

clear: none;
clear: left;
clear: right;
clear: both;
clear: inherit;

CSS
Для предотвращения отображение фона или границ под плавающими элементами
используется правило  {overflow: hidden;} .
6. Определение контекста наложения: свойство z-index
В CSS каждый блок имеет позицию в трех измерениях. В дополнение к
горизонтальному и вертикальному положению, блоки выкладываются вдоль оси Z
друг над другом. Положение вдоль оси Z особенно важно, когда блоки визуально
накладываются друг на друга.

РИС.
3. ПОЛОЖЕНИЕ ЭЛЕМЕНТОВ ВДОЛЬ ОСИ Z
Порядок, в котором дерево документа отрисовывается на экране, описывается с
помощью контекста наложения. Каждый блок принадлежит одному контексту
наложения. Каждый блок в данном контексте наложения имеет целочисленный
уровень, который является его положением на оси Z относительно других блоков в
том же контексте наложения.
Блоки с более высокими уровнями всегда отображаются перед блоками с более
низкими уровнями, а блоки с одинаковым уровнем располагаются снизу вверх в
соответствии с порядком следования элементов в исходном документе. Блок
элемента имеет ту же позицию, что и блок его родителя, если только ему не
присвоен другой уровень свойством  z-index .
Свойство  z-index  позволяет изменить порядок наложения позиционированных
элементов в случае, когда они накладываются друг на друга.
Свойство не наследуется.

z-index

Значение:

auto Вычисляется в  0 . Если для блока задано  position: fixed;  или это корневой
элемент, значение  auto  также устанавливает новый контекст наложения. Значение
по умолчанию.

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

inherit Наследует значение свойства от родительского элемента.

initial Устанавливает значение свойства в значение по умолчанию.

Синтаксис

z-index: auto;
z-index: 0;
z-index: 5;
z-index: 999;
z-index: -1;
z-index: inherit;
z-index: initial;

CSS
6.1. Контекст наложения

Если для элементов свойства  z-index  и  position  не заданы явно, контекст
наложения равен порядку их расположения в исходном коде и браузер отображает
элементы на странице в следующем порядке:
o Корневой элемент  <html> , который содержит все элементы веб-странице.
o Блочные элементы, неплавающие и непозиционированные.
o Плавающие  float  непозиционированные элементы в порядке их
расположения в исходном коде.
o Строковые непозиционированные элементы (текст, изображения).
o Позиционированные  position  элементы в порядке их следования в
исходном коде. Последний из них будет расположен на переднем плане.
Свойство  z-index  создает новый контекст наложения. Оно позволяет изменить
порядок наложения позиционированных элементов. Элементы будут отображаться
на странице в следующем порядке (если для них не заданы свойства, влияющие на
контекст наложения —  opacity ,  filter ,  transform ):
o Корневой элемент  <html> , который содержит все элементы веб-странице.
o Позиционированные элементы с отрицательным значением  z-index .
o Блочные элементы, неплавающие и непозиционированные.
o Плавающие  float  непозиционированные элементы в порядке их
расположения в исходном коде.
o Строковые непозиционированные элементы (текст, изображения).
o Позиционированные элементы со значениями  z-index: 0;  и  z-index:
auto; .

2.5. CSS-текст
Опубликовано: 21 марта 2014Обновлено: 7 января 20209 Comments

Модуль CSS-текст описывает функции CSS, которые управляют переводом исходного


текста в форматированный и переносом строк. Различные свойства CSS
обеспечивают контроль над преобразованием регистра, обработкой пробелов,
правилами переноса и переносом текста и строк, выравниванием, интервалами и
отступами.
Основной единицей текста является символ. Тем не менее, поскольку системы
письма не всегда так просты, как основной английский алфавит, то, чем на самом
деле является символ, зависит от контекста, в котором используется этот термин.
Например, в корейской системе письма каждое квадратное представление слога
(например, 한 = хань) можно считать символом. Однако квадратный символ
действительно состоит из нескольких букв, каждая из которых представляет фонему
(например, ㅎ = h, ㅏ = a, ㄴ = n), и каждая из них также может считаться символом.

CSS построен на Unicode.


 Содержание:
 1. Преобразование текста: свойство text-transform
 2. Обработка пробелов и переносы строк: свойство white-space
 3. Настройка табуляции: свойство tab-size
 4. Разрыв строки и границы слов
 4.1. Правила разрыва для букв: свойство word-break
 4.2. Разрыв строки: свойство line-break
 4.3. Расстановка переносов: свойство hyphens
 4.4. Переполнение блока-обертки: свойство overflow-wrap/word-wrap
 5. Выравнивание и выключка строк
 5.1. Выравнивание текста: свойство text-align
 5.2. Выравнивание текста по умолчанию: свойство text-align-all
 5.3. Выравнивание последней строки: свойство text-align-last
 6. Промежутки
 6.1. Промежутки между словами: свойство word-spacing
 6.2. Трекинг: свойство letter-spacing
 7. Отступ первой строки: свойство text-indent
1. Преобразование текста: свойство text-transform
Свойство  text-transform  стилизует текст. Оно не влияет на базовое содержимое
и не должно влиять на содержимое операции копирования и вставки простого
текста.
Свойство наследуется.

text-transform

Значения:

none Значение по умолчанию, означает отсутствие эффектов.

capitalize Изменяет написание первой буквы каждого слова в элементе, делая её прописной.

uppercase Выводит все слова в элементе прописными буквами.

lowercase Выводит все слова в элементе строчными буквами.

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

Синтаксис

text-transform: none;
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: inherit;
text-transform: initial;

CSS
2. Обработка пробелов и переносы строк: свойство white-space
Свойство  white-space  обрабатывает пробелы между словами и переносы строк
внутри элемента.
Свойство наследуется.

white-space

Значения:

normal Значение по умолчанию. Между словами вставляется только по одному пробелу,


дополнительные пробелы отбрасываются. Текст переносится только в случае
необходимости.

nowrap Запрещает переносы строк, за исключением применения  <br> .

pre Пробелы в тексте не игнорируются, браузер отображает дополнительные пробелы и


переносы строк.

pre-wrap Сохраняет пробелы в тексте, делая разрывы строк там, где это необходимо.

pre-line Удаляет лишние пробелы, за исключением случаев  <br> .

break-spaces Поведение идентично  pre-wrap , за исключением того, что: любая


последовательность неудаляемых пробелов всегда занимает место, в том числе в
конце строки; возможность переноса строки существует после каждого
неудаляемого пробела, в том числе между пробелами.

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

Синтаксис

white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: break-spaces;
white-space: inherit;
white-space: initial;

CSS
3. Настройка табуляции: свойство tab-size
Свойство  tab-size  используется для изменения величины отступа, получаемого с
помощью клавиши ТAB. Значения свойства игнорируются, когда установлено одно из
трёх значений  pre-line ,  normal  или  nowrap  свойства  white-space .
Работает только для элементов  <textarea>  и  <pre> , для остальных блочных
элементов значение всегда будет равно единице. Значения свойства, указанные в
единицах длины, поддерживается только в Chrome 42+.
Свойство наследуется.
tab-size

Значения:

целое число Любое целое положительное число. По умолчанию табуляция делает отступ, равный
восьми пробелам.

длина Значение отступа, указываемое в единицах длины, например,  рх .

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

Синтаксис

tab-size: 0;
tab-size: 10px;
tab-size: inherit;
tab-size: initial;

CSS
4. Разрыв строки и границы слов
Когда содержимое на строчном уровне разбивается на строки, оно разбивается на
линейные блоки. Такое разбиение называется разрыв строки.

Когда строка прерывается из-за явных элементов управления разрывом строки,


например, символа новой строки или тега  <br> , начала или конца блока — это
принудительный разрыв строки.
Если строка обрывается из-за переноса содержимого, когда браузер создает
необязательные разрывы строк, чтобы вписать содержимое — это мягкий перенос.

4.1. Правила разрыва для букв: свойство word-break

Свойство  word-break  определяет возможности мягкого переноса между буквами,


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

word-break

Значения:

normal Слова разрываются в соответствии с их обычными правилами. Значение по


умолчанию.

break-all Разрыв допускается в пределах слов. Перенос слов не применяется.


keep-all Запрещает разрывы между парами символов.

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

Синтаксис

word-break: normal;
word-break: break-all;
word-break: keep-all;
word-break: inherit;
word-break: initial;

CSS
4.2. Разрыв строки: line-break

Свойство  line-break  определяет правила переноса строк, применяемых внутри


элемента, в частности то, как перенос взаимодействует со знаками препинания и
символами.
Свойство наследуется.

line-break

Значения:

auto Браузер определяет набор используемых ограничений на разрыв строки, которые


могут варьироваться в зависимости от длины линии, например, использовать менее
строгий набор правил разрыва строки для коротких строк. Значение по умолчанию.

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

normal Разбивает текст, используя наиболее распространенный набор правил переноса


строк.

strict Разбивает текст, используя строгий набор правил переноса строк.

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

Синтаксис

line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;
line-break: inherit;
line-break: initial;

CSS
4.3. Расстановка переносов: свойство hyphens

Свойство  hyphens  определяет, разрешено ли использование переносов для


создания возможностей мягкого переноса внутри строки текста.
Расстановка переносов — это контролируемое разбиение слов, при котором им
обычно не разрешается разрываться, чтобы улучшить расположение абзацев. Как
правило, разбиение слов происходит по слоговым или морфемным границам и при
визуальном указании на разделение (обычно путем вставки дефиса,  ‐ ). В некоторых
случаях переносы могут также изменить написание слова. В любом случае, перенос
слов является только эффектом рендеринга: он не должен влиять ни на содержимое
документа, ни на выбор текста или поиск.
CSS Text Level 3 не определяет точные правила переноса слов, поэтому
рекомендуется выбирать подходящие для языка точки переноса.

Свойство наследуется.

hyphens

Значения:

none Слова не переносятся, даже если символы внутри слова явно определяют
возможности переноса.

manual Слова переносятся только в тех местах, где внутри слова есть символы, которые явно
указывают на возможность переноса слов (специальный символ ). Значение по
умолчанию.

auto Слова могут быть разбиты на возможности переноса, определяемые автоматически


соответствующим языку ресурсом переноса в дополнение к тем, которые явно
указаны условным дефисом. Необходимо задать язык своего контента (например,
используя HTML-атрибут  lang  или заголовок HTTP Content-Language), чтобы
получить правильный автоматический перенос слов.

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

Синтаксис

hyphens: none;
hyphens: manual;
hyphens: auto;
hyphens: inherit;
hyphens: initial;

CSS
4.4. Переполнение блока-обертки: свойство overflow-wrap/word-wrap

Свойство  overflow-wrap  (или его устаревшее имя  word-wrap ) указывает, может


ли неразрывная строка прерваться в неразрешенных точках, чтобы предотвратить
переполнение линейного блока. Работает в том случае, когда свойство  white-
space  разрешает перенос.
Свойство наследуется.

overflow-wrap, word-wrap

Значения:

normal Неразрывные строки могут разрываться только в разрешенных точках разрыва.


Значение по умолчанию.

break-word

anywhere Неразрывная последовательность символов может быть разбита в произвольной


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

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

Синтаксис

overflow-wrap: normal;
overflow-wrap: break-word;
overflow-wrap: anywhere;
overflow-wrap: inherit;
overflow-wrap: initial;

CSS
5. Выравнивание и выключка строк
Выравнивание и выключка строк контролируют, как встроенный контент
распределяется в линейном блоке.

5.1. Краткая запись для выравнивания текста: свойство text-align

Блок текста представляет собой набор линейных блоков. Свойство  text-


align  задает свойства  text-align-all  и  text-align-last  и описывает, как
блоки на уровне строки в каждом линейном блоке выравниваются относительно
начальной и конечной сторон линейного блока. Значения, отличные от  justify-
all  или  match-parent , присваиваются  text-align-all  и сбрасываются
в  text-align-last  на  auto .
Свойство наследуется.

text-align
Значения:

start Содержимое на уровне строки выравнивается по начальному краю линейного блока.


Значение по умолчанию.

end Содержимое на уровне строки выравнивается по конечному краю линейного блока.

left Содержимое на уровне строки выравнивается по левому краю строки линейного


блока. В вертикальных системах письменности это будет физический верх или низ, в
зависимости от ориентации текста.

right Содержимое на уровне строки выравнивается по правому краю строки линейного


блока. В вертикальных системах письменности это будет физический верх или низ, в
зависимости от ориентации текста.

center Содержимое на уровне строки центрируется внутри линейного блока.

justify Текст выравнивается по ширине линейного блока, чтобы точно заполнить поле
строки, прижимаюсь к левому и правому краям родительского элемента. Если иное
не указано в  text-align-last , последняя строка перед принудительным
разрывом или конец блока выравнивается по началу. Пробелы между словами и
буквами распределяются таким образом, чтобы длина всех строк была равна. Разные
браузеры могут увеличить как отступы между словами, так и интервалы между
буквами.

justify-all Устанавливает  text-align-all  и  text-align-last  в  justify , также


выравнивая последнюю строку.

match-parent Значение ведет себя так же, как  inherit  за исключением того, что унаследованное
значение  start  или  end  интерпретируется относительно
значения  direction  (или исходного содержащего блока, если нет родителя) и
приводит к вычисленному значению  left  или  right .

inherit Наследует значение свойства от родительского элемента.

Синтаксис

text-align: start;
text-align: end;
text-align: left;
text-align: right;
text-align: center;
text-align: justify;
text-align: justify-all;
text-align: match-parent;
text-align: inherit;

CSS
5.2. Выравнивание текста по умолчанию: свойство text-align-all

Свойство  text-align-all  — сокращенный вариант свойства  text-


align  определяет выравнивание всех строк содержимого в контейнере блока, за
исключением последних строк, переопределенных значением  text-align-last .
Принимает значения  start ,  end ,  left ,  right ,  center ,  justify  и  match-
parent .
Свойство наследуется.

Синтаксис

text-align-all: start;
text-align-all: end;
text-align-all: left;
text-align-all: right;
text-align-all: center;
text-align-all: justify;
text-align-all: match-parent;
text-align-all: inherit;

CSS
5.3. Выравнивание последней строки: свойство text-align-last

Свойство  text-align-last  описывает, как выравнивается последняя строка блока


или строки непосредственно перед принудительным разрывом строки.
Если задано значение  auto , содержимое в соответствующей строке выравнивается
по  text-align-all , если только для  text-align-all  не настроено  justify  — в
этом случае оно выравнивается по началу блока. Все остальные значения
интерпретируются как описано для  text-align .
Принимает
значения  auto ,  start ,  end ,  left ,  right ,  center ,  justify  и  match-
parent .
Свойство наследуется.

Синтаксис

text-align-last: auto;
text-align-last: start;
text-align-last: end;
text-align-last: left;
text-align-last: right;
text-align-last: center;
text-align-last: justify;
text-align-last: match-parent;

CSS
6. Промежутки
CSS позволяет контролировать промежутки между словами и типографскими
символами с помощью свойств  word-spacing  и  letter-spacing .
6.1. Промежутки между словами: свойство word-spacing
Свойство  word-spacing  определяет дополнительный интервал между словами.
Устанавливает интервалы между словами. Можно использовать положительные и
отрицательные значения. При отрицательном значении слова могут накладываться
друг на друга.
На значение  word-spacing  оказывает влияние значение свойства  text-align  в
случае выравнивания текста по ширине.
Свойство наследуется.

word-spacing

Значения:

normal Дополнительный интервал не применяется. Вычисляет в  0 . Значение по


умолчанию.

длина Задает дополнительный интервал в дополнение к внутреннему интервалу между


словами, определенному шрифтом. Значения могут быть отрицательными, но могут
быть ограничения, зависящие от реализации.

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

Синтаксис

word-spacing: normal;
word-spacing: 1px;
word-spacing: 0.2em;
word-spacing: 1rem;
word-spacing: inherit;
word-spacing: initial;

CSS
6.2. Трекинг: свойство letter-spacing

Свойство  letter-spacing  определяет дополнительный интервал, или трекинг,


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

letter-spacing

Значения:

normal Дополнительный интервал не применяется. Вычисляет в  0 . Значение по


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

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

Синтаксис

letter-spacing: normal;
letter-spacing: 0.1em;
letter-spacing: 2px;
letter-spacing: inherit;
letter-spacing: initial;

CSS
7. Отступ первой строки: свойство text-indent
Свойство  text-indent  задает отступ, применяемый к строкам встроенного
содержимого в блоке. Отступ обрабатывается как поле, примененное к начальному
краю линейного блока.
Если в первой строке блочного элемента присутствует изображение, то оно
сдвинется вместе с остальным текстом.
Свойство наследуется.

text-indent

Значение:

длина/ % Размер отступа в виде абсолютной длины. Процентное значение вычисляется от


собственной логической ширины блока-контейнера. Значение по умолчанию  0 .

each-line Отступы затрагивают первую строку каждого блока-контейнера и каждую строку


после принудительного разрыва строки (но не строки после с мягким переносом).

hanging Обратное преобразование. Все строки, кроме первой, будут с отступом.

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

Синтаксис

text-indent: 5mm;
text-indent: 20px;
text-indent: 5%;
text-indent: 2em each-line;
text-indent: 2em hanging;
text-indent: inherit;
text-indent: initial;
CSS
По материалам CSS Text Module Level 3

2.6. CSS-шрифты
Опубликовано: 21 мая 2014Обновлено: 17 марта 202121 Comments

Шрифт в CSS — это ресурс, содержащий визуальное представление символов. На


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

Ресурсы шрифтов могут быть установлены локально на устройстве, в котором


работает браузер. Для локальных ресурсов шрифта описательная информация
может быть получена непосредственно из ресурса шрифта (например, из
файла  arial.ttf ). Для загружаемых ресурсов шрифтов, также называемых веб-
шрифтами, описательная информация включена со ссылкой на ресурс шрифта
(например, для шрифта Poiret One).
Используя различные шрифты для заголовков, абзацев и других элементов, можно
задавать определенный стиль письменных сообщений, передавая желаемые эмоции
и настроение. Окунаясь в многообразие шрифтов, не забывайте, что текст основного
содержимого веб-страницы должен быть в первую очередь читабельным.

Не рекомендуется использовать более двух шрифтов на странице, а желаемого


контраста можно достигнуть за счет комбинирования шрифтов разной толщины,
размера, начертания или же при помощи цвета. Более подробно с правилами веб-
типографики вы сможете ознакомиться в предложенной статье.
Базовые свойства CSS-шрифтов
 Содержание:
 1. Семейство шрифтов: свойство font-family
 2. Насыщенность шрифта: свойство font-weight
 3. Ширина шрифта: свойство font-stretch
 4. Начертание шрифта: свойство font-style
 5. Размер шрифта: свойство font-size
 6. Относительный размер шрифта: свойство font-size-adjust
 7. Сокращенная запись свойств шрифта: свойство font
 8. Управление синтезом шрифтов: свойство font-synthesis
1. Семейство шрифтов: свойство font-family
Свойство  font-family  используется для выбора начертания шрифта. Поскольку
невозможно предсказать, установлен тот или иной шрифт на компьютере посетителя
вашего сайта, рекомендуется прописывать все возможные варианты однотипных
шрифтов. В таком случае браузер будет проверять их наличие, последовательно
перебирая предложенные варианты.
Если в названии шрифта имеются пробелы или символы (например, #, $, %), то оно
заключается в кавычки. Это делается для того, чтобы браузер мог понять, где
начинается и заканчивается название шрифта.

Свойство наследуется.

font-family

Значения:

family-name Название (имя) семейства шрифтов, например,  Times ,  Courier ,  Arial .


Рекомендуется указывать вместе с базовым семейством.

generic-family Базовое семейство. CSS определяет пять базовых семейств шрифтов:


Шрифты с засечками — Serif (Times New Roman, Times, Garamond, Georgia)
Рубленые шрифты — Sans-serif (Helvetica, Geneva, Arial, Verdana, Trebuchet, Univers)
Моноширинные шрифты — Monospace (Courier, Courier New, Andele Mono)
Рукописные шрифты — Cursive (Comic Sans, Gabriola, Monotype Corsiva, Author,
Zapf Chancery)
Аллегорические шрифты (Western, Woodblock, Klingon)

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

Синтаксис

font-family: "Times New Roman", Georgia, Serif;


font-family: serif;
font-family: sans-serif;
font-family: monospace;
font-family: cursive;
font-family: fantasy;
font-family: system-ui;
font-family: inherit;
font-family: initial;

CSS
2. Насыщенность шрифта: свойство font-weight
Свойство  font-weight  задаёт насыщенность шрифта.
Свойство наследуется.

font-weight

Значения:

normal Значение по умолчанию, устанавливает нормальную насыщенность шрифта.


Эквивалентно значению насыщенности, равной 400.

bold Делает шрифт текста полужирным. Эквивалентно значению насыщенности, равной


700.

bolder Насыщенность шрифта будет больше, чем у предка.

lighter Насыщенность шрифта будет меньше, чем у предка.

100, 200, Значение 100 соответствует самому легкому варианту начертания шрифта, а 900 —
самому плотному. При этом, эти числа не определяют конкретной плотности, т.е.
300, 400,
100, 200, 300 и 400 могут соответствовать одному и тому же варианту слабой
500, 600, насыщенности начертания шрифта; 500 и 600 — средней насыщенности, а 700, 800 и
700, 800, 900 могут выводить одинаковое очень насыщенное начертание. Распределение
плотности так же зависит от количества уровней насыщенности, определенных в
900 конкретном семействе шрифтов.

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

Синтаксис

font-weight: normal;
font-weight: bold;
font-weight: lighter;
font-weight: bolder;
font-weight: 100;
font-weight: 200;
font-weight: 300;
font-weight: 400;
font-weight: 500;
font-weight: 600;
font-weight: 700;
font-weight: 800;
font-weight: 900;
font-weight: inherit;
font-weight: initial;

CSS
РИС. 1. СВОЙСТВО FONT-WEIGHT
3. Ширина шрифта: свойство font-stretch
Свойство  font-stretch  позволяет выбрать нормальное, сжатое или расширенное
начертание символа из семейства шрифтов. Свойство не работает на любом
шрифте, а только на шрифтах, для которых разработаны различными начертания,
соответствующими определенным размерам.
Свойство наследуется.

Абсолютные значения ключевых слов имеют следующий порядок, от самого узкого


до самого широкого:

font-stretch

Значения:

ultra- Указывает на наиболее сжатый шрифт.


condensed

extra- Указывает на второй по сжатости шрифт.


condensed

condensed Указывает на сжатый шрифт.

semi- Указывает на немного сжатый шрифт.


condensed

normal Значение по умолчанию.

semi- Слегка расширенный шрифт.


expanded

expanded Расширенный шрифт.

extra- Второй по расширенности шрифт.


expanded

ultra- Максимально расширенный шрифт.


expanded

initial Устанавливает значение свойства в значение по умолчанию.


inherit Наследует значение свойства от родительского элемента.

Синтаксис

font-stretch: ultra-condensed;
font-stretch: extra-condensed;
font-stretch: condensed;
font-stretch: semi-condensed;
font-stretch: normal;
font-stretch: semi-expanded;
font-stretch: expanded;
font-stretch: extra-expanded;
font-stretch: ultra-expanded;
font-stretch: inherit;
font-stretch: initial;

CSS
Когда не существует глифа для заданной ширины,
значения  normal  или  condensed  отображаются для более узкого начертания
символа, в противном случае отображается более широкое начертание. И наоборот,
расширенные значения используют широкое начертание, в противном случае —
узкое начертание. На рисунке ниже показано, как девять параметров свойства
влияют на выбор шрифта для семейства шрифтов, содержащего различные ширины,
серый цвет указывает ширину, для которой не существует начертания, поэтому
подставляется другая ширина:

РИС. 2. СВОЙСТВО FONT-STRETCH


4. Начертание шрифта: свойство font-style
Свойство  font-style  позволяет выбрать стиль начертания для шрифта. При этом
разница между курсивом и наклонным начертанием заключается в том, что курсив
вносит небольшие изменения в структуру каждого символа, в то время как
наклонное начертание представляет собой наклонную версию прямого шрифта.
Свойство наследуется.

font-style

Значения:

normal Значение по умолчанию, устанавливает для текста обычное начертание шрифта.

italic Выделяет текст курсивом.

oblique Устанавливает наклонное начертание шрифта.


initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

Синтаксис

font-style: normal;
font-style: italic;
font-style: oblique;
font-style: inherit;
font-style: initial;

CSS

РИС.
3. СВОЙСТВО FONT-STYLE
5. Размер шрифта: свойство font-size
Свойство  font-size  указывает желаемую высоту глифов из шрифта.
Свойство наследуется.

font-size

Значения:

absolute-size xx-small ,  x-small ,  small ,  medium ,  large ,  x-large ,  xx-large . В


качестве стандартного размера принимается  medium . В CSS1 предложенный
коэффициент масштабирования между соседними индексами составлял 1.5, что для
пользователя оказалось слишком большим. В CSS2 предложенный коэффициент
масштабирования для экрана компьютера между смежными индексами составлял
1.2, что все еще создавало проблемы для небольших размеров. Новый коэффициент
масштабирования варьируется между каждым индексом, чтобы обеспечить лучшую
читаемость.

relative-size smaller ,  larger . Относительные размеры обусловливают изменение размера


шрифта элемента относительно родителя. При этом размер шрифта может выйти за
рамки размеров, предполагаемых для  xx-small  и  xx-large .

длина Размер шрифта устанавливается с помощью положительных значений единиц


длины, например,  px ,  em , как целых, так и дробных.

% Относительное значение, вычисляется на основании любого размера,


унаследованного от родительского элемента. Обеспечивает более точную настройку
вычисляемого размера шрифта. Задание размеров шрифта с
помощью  em  эквивалентно процентному значению.
initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

Синтаксис

font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;
font-size: smaller;
font-size: larger;
font-size: 14px;
font-size: 0.8em;
font-size: 80%;
font-size: inherit;
font-size: initial;

CSS

Значения absolute-size

xx-small x-small small medium large x-large xx-large

Коэффициент масштабирования

3/5 3/4 8/9 1 6/5 3/2 2/1 3/1

HTML заголовки

h6 h5 h4 h3 h2 h1

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

1 2 3 4 5 6 7
6. Относительный размер шрифта: свойство font-size-adjust
Для любого заданного размера шрифта явный размер и четкость текста варьируется
в зависимости от шрифта. Для таких шрифтов, как латиница или кириллица,
которые различают прописные и строчные буквы, относительная высота строчных
букв по сравнению с их прописными аналогами является определяющим фактором
удобочитаемости. Это обычно называют значением аспекта. Точно определенный,
он равен  x-height  шрифта, разделенной на размер шрифта.
В ситуациях, когда для шрифта указано несколько семейств шрифтов, резервные
шрифты могут не использовать то же значение аспекта, что и желаемое семейство
шрифтов, и, следовательно, будут казаться менее четкими.
Свойство  font-size-adjust  — способ сохранить читабельность текста при
использовании резервных шрифтов. Это достигается путем настройки размера
шрифта таким образом, чтобы  x-height  была одинаковой независимо от
используемого шрифта.
Свойство наследуется.

РИС. 4. ТЕРМИНЫ В ТИПОГРАФИКЕ


font-size-adjust

Значения:

none Не сохраняет  x-height  шрифта.

число Задает значение аспекта, используемое в приведенных ниже расчетах для расчета
скорректированного размера шрифта:
c = (a / a ') s
где:
s  = значение размера шрифта
a  = значение аспекта, указанное в свойстве  font-size-adjust
a '  = значение аспекта фактического шрифта
c  = скорректированный размер шрифта для использования
Отрицательные значения недействительны.

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

Синтаксис:

font-size-adjust: none;
font-size-adjust: 0.7;
font-size-adjust: inherit;
font-size-adjust: initial;

CSS
Как отображается текст в каждом из этих сравниваемых шрифтов, показано ниже,
столбцы показывают текст, отображаемый в Verdana, Futura и Times. Одно и то же
значение размера шрифта используется для ячеек в каждой строке, и для
отображения различий по  x-height  включены красные линии. В верхней половине
каждая строка отображается в том же значении размера шрифта. То же самое верно
и для нижней половины, но в этой половине также устанавливается свойство  font-
size-adjust , чтобы фактический размер шрифта регулировался таким образом,
чтобы сохранить  x-height  для каждой строки. Обратите внимание, что небольшой
текст остается относительно разборчивым в каждой строке в нижней половине.
РИС. 5.
ТЕКСТ С ИСПОЛЬЗОВАНИЕМ И БЕЗ ИСПОЛЬЗОВАНИЯ FONT-SIZE-ADJUST
7. Сокращенная запись свойств шрифта: свойство font
Свойство  font  за исключением описанного ниже, является сокращенным свойством
для установки  font-style ,  font-variant ,  font-weight ,  font-
stretch ,  font-size/line-height ,  font-family . Также могут быть включены
значения для свойства  font-variant , которые поддерживаются CSS 2.1
—  normal  или  small-caps .
Все подсвойства свойства  font  сначала сбрасываются на свои начальные значения,
включая перечисленные выше, плюс  font-size-adjust ,  font-kerning , все
подсвойства  font-variant  и настройки шрифтов, за исключением  font-
synthesis . Затем этим свойствам присваиваются те значения, которые указаны в
свойстве  font . Для свойства  font-size-adjust  невозможно установить
значение, отличное от его начального значения, поэтому следует использовать
вместо этого индивидуальное свойство. Если явное значение какого-либо свойства
не нужно, то оно опускается.
Свойство наследуется.

Синтаксис

font: 12pt/14pt sans-serif;


font: 80% sans-serif;
font: x-large/110% "new century schoolbook", serif;
font: bold italic large Palatino, serif;
font: normal small-caps 120%/120% fantasy;
font: condensed oblique 12pt "Helvetica Neue", serif;

CSS
Следующие значения относятся к системным шрифтам:
caption  — шрифт, используемый для элементов управления с субтитрами
(например, кнопок, раскрывающихся списков и т.д.).
icon  — шрифт, используемый для обозначения значков.
menu  — шрифт, используемый в меню (например, раскрывающиеся меню и списки
меню).
message-box  — шрифт, используемый в диалоговых окнах.
small-caption  — шрифт, используемый для маркировки подписи элементов
управления.
status-bar  — шрифт, используемый в строке состояния окна.
Системные шрифты могут быть установлены только целиком; то есть семейство
шрифтов, размер, вес, стиль и т.д. задаются одновременно. Эти значения затем
могут быть изменены индивидуально, если это необходимо. Ключевые слова,
используемые для системных шрифтов, перечисленных выше, обрабатываются как
ключевые слова только в том случае, если они находятся в начальной позиции, в
других позициях эта же строка обрабатывается как часть имени семейства шрифтов.
Системные шрифты могут быть указаны только с этим свойством, но не с
самим  font-family .

font: menu; /* используются настройки шрифта для системных меню */


font: large menu; /* используется семейство шрифтов под названием "menu" */

CSS
8. Управление синтезом шрифтов: свойство font-synthesis
Свойство  font-synthesis  определяет, разрешено ли пользовательским агентам
(браузерам) синтезировать полужирное или наклонное начертание шрифтов, когда
они отсутствуют в семействе шрифтов. Если  weight  не указан, пользовательские
агенты не должны синтезировать полужирное начертание, а если  style  не указан,
пользовательские агенты не должны синтезировать курсив.
Свойство наследуется.
font-synthesis

Значения:

none Запрещает синтез начертаний.

weight  и/или  style По умолчанию свойство принимает значение  font-synthesis: weight


style; . Если указано только  weight , это говорит браузеру, что жирный
шрифт может быть синтезирован при необходимости. Если только  style  —
синтезируется только курсив.

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

Синтаксис

font-synthesis: none;
font-synthesis: weight;
font-synthesis: style;
font-synthesis: weight style;
font-synthesis: initial;
font-synthesis: inherit;

CSS

2.7. CSS-ссылки
Опубликовано: 22 июля 2014Обновлено: 22 декабря 202042 Comments

CSS-ссылки содержат свойства, которые отвечают за внешний вид гипертекстовых


ссылок HTML-документа. Ссылки представляют собой основной способ навигации по
сайту, поэтому применение CSS-стилей для оформления улучшит их визуальное
восприятие.
Основной способ оформления ссылок заключается в стилизации подчеркивания
ссылки и изменении цвета текста ссылки. Также можно изменить внешний вид
курсора с помощью свойства  cursor .
Оформление гипертекстовых ссылок
 Содержание:
 1. Псевдоклассы состояний гипертекстовых ссылок
 2. Выборка отдельных ссылок
 3. Подчеркивание ссылок
 4. Изображения для ссылок
 5. Использование фонового изображения
 6. Ссылки-кнопки
 7. Примеры оформления ссылок
1. Псевдоклассы состояний гипертекстовых ссылок
Большинство браузеров выделяют четыре основных состояния гиперссылок,
каждому из которых соответствует свой псевдокласс селектора:

o Непосещенная —  a:link
o Посещенная — по которой уже выполнялся переход —  a:visited
o Не нажатая — над которой находится указатель мыши —  a:hover
o Нажатая — которая удерживается мышью —  a:active
Используя псевдоклассы для форматирования каждого состояния ссылок, можно
дать пользователям подсказки, по каким ссылкам он уже переходил, а по каким —
ещё нет, например:

a:link {
color: #497DDD;
border-bottom: 1px dashed;
}
a:visited {
color: #EF7D55;
}
a:hover {
color: #154088;
border-bottom: .07em solid;
}
a:active {
color: #497DDD;
border-bottom: 1px dashed;
}

CSS
Форматировать ссылки нужно в указанной последовательности, в противном случае
состояние стилей перестанет работать (в силу механизма каскадности).

2. Выборка отдельных ссылок


Для стилизации отдельных ссылок нужно задать им стилевой класс, после чего
можно будет менять внешний вид выбранных ссылок:
<a href="http://anysite.ru" class="global">какой-то текст</a>

HTML
3. Подчеркивание ссылок
Удаление подчеркивания:

a {
text-decoration: none;
}

CSS
Добавление подчеркивания только при наведении на ссылку:

a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}

CSS
Внешний вид нижней границы ссылки:

a {
text-decoration: none;
border-bottom: 2px dashed DarkOrchid;
padding-bottom: 3px;
}

CSS
4. Изображения для ссылок
Добавить изображение для ссылки можно с помощью CSS-свойства  background-
image . Так как элемент  <а>  является строчным  a {display: inline;} , то
предварительно его нужно преобразовать в блочный элемент  a {display:
block;} .
Чтобы вставить изображение или иконку перед ссылкой, необходимо добавить
отступ с помощью свойства  padding-left . Этот прием может пригодиться в
случае, когда на странице есть ссылки для загрузки каких-либо документов
различных форматов, и вы можете добавить значок-изображение типа файла для
большей наглядности.
Если нужно, чтобы значок автоматически добавился ко всем ссылкам, содержащим
документы одного формата, можно воспользоваться следующей конструкцией:
a[href$=".pdf"] {
background-image: url(images/pdf.png);
}

CSS
Символ  href$  в селекторе атрибута дает браузеру команду найти все
атрибуты  href , заканчивающиеся определенным образом (в данном случае  .pdf )
и добавить к ссылке соответствующий значок.
5. Использование фонового изображения
Можно преобразовать внешний вид ссылки, добавив в качестве нижней границы
фоновое изображение:

a {
text-decoration: none;
background: url(images/underline.png) repeat-x left bottom;
padding-bottom: 3px;
}

CSS
6. Ссылки-кнопки
Благодаря свойствам  background-color ,  border  и  padding , ссылкам можно
придать вид прямоугольных кнопок, а, меняя отображение тех или иных свойств
ссылок при наведении курсора мыши  a:hover , добавить интересные эффекты.
Перейти на страницу с примерами

/*общие стили для всех кнопок*/


a {
display: inline-block;
text-decoration: none;
text-transform: uppercase;
letter-spacing: 1px;
margin: 15px 25px;
padding: 15px 20px;
font-size: 20px;
font-weight: bold;
font-family: 'Montserrat', sans-serif;
transition: 0.4s ease-in-out;
}
/*кнопка 1*/
.one a {
border-radius: 10px;
color: #EC4D3C;
background-color: white;
background-image: -webkit-radial-gradient(#FCD2D1 2px, rgba(255, 0, 0, 0)
2px);
background-image: -o-radial-gradient(#FCD2D1 2px, rgba(255, 0, 0, 0) 2px);
background-image: radial-gradient(#FCD2D1 2px, transparent 2px);
background-size: 12px 12px;
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
}
.one a:hover {
background-size: 16px 16px;
}

/*кнопка 2*/
.two a {
border-radius: 10px;
color: #F17434;
background-color: white;
background-image: -webkit-repeating-linear-gradient(45deg, #FFDDBB, #FFDDBB
1px, rgba(255, 0, 0, 0) 2px, rgba(255, 0, 0, 0) 10px), -webkit-repeating-
linear-gradient(135deg, #FFDDBB, #FFDDBB 1px, rgba(255, 0, 0, 0) 2px, rgba(255,
0, 0, 0) 10px);
background-image: -o-repeating-linear-gradient(45deg, #FFDDBB, #FFDDBB 1px,
rgba(255, 0, 0, 0) 2px, rgba(255, 0, 0, 0) 10px), -o-repeating-linear-
gradient(135deg, #FFDDBB, #FFDDBB 1px, rgba(255, 0, 0, 0) 2px, rgba(255, 0, 0,
0) 10px);
background-image: repeating-linear-gradient(45deg, #FFDDBB, #FFDDBB 1px,
transparent 2px, transparent 10px), repeating-linear-gradient(135deg, #FFDDBB,
#FFDDBB 1px, transparent 2px, transparent 10px);
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
}
.two a:hover {
background-image: -webkit-repeating-linear-gradient(left, #FFDDBB, #FFDDBB
1px, rgba(255, 0, 0, 0) 2px, rgba(255, 0, 0, 0) 10px);
background-image: -o-repeating-linear-gradient(90deg, #FFDDBB, #FFDDBB 1px,
rgba(255, 0, 0, 0) 2px, rgba(255, 0, 0, 0) 10px);
background-image: repeating-linear-gradient(90deg, #FFDDBB, #FFDDBB 1px,
transparent 2px, transparent 10px);
}

/*кнопка 3*/
.three a {
border-radius: 10px;
color: #36454A;
background: -webkit-linear-gradient(top, #A4D3E0, #A4D3E0 50%, #CBE3EB 50%);
background: -o-linear-gradient(top, #A4D3E0, #A4D3E0 50%, #CBE3EB 50%);
background: linear-gradient(to top, #A4D3E0, #A4D3E0 50%, #CBE3EB 50%);
box-shadow: 2px 2px 3px black;
}
.three a:hover {
background: -webkit-linear-gradient(bottom, #A4D3E0, #A4D3E0 50%, #CBE3EB
50%);
background: -o-linear-gradient(bottom, #A4D3E0, #A4D3E0 50%, #CBE3EB 50%);
background: linear-gradient(to bottom, #A4D3E0, #A4D3E0 50%, #CBE3EB 50%);
}

/*кнопка 4*/
.four a {
border-radius: 10px;
color: #598428;
background: -webkit-linear-gradient(70deg, #C3D600, #C3D600 50%, #A5B400
50%);
background: -o-linear-gradient(20deg, #C3D600, #C3D600 50%, #A5B400 50%);
background: linear-gradient(20deg, #C3D600, #C3D600 50%, #A5B400 50%);
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
}
.four a:hover {
background: -webkit-linear-gradient(-110deg, #C3D600, #C3D600 50%, #A5B400
50%);
background: -o-linear-gradient(-160deg, #C3D600, #C3D600 50%, #A5B400 50%);
background: linear-gradient(-160deg, #C3D600, #C3D600 50%, #A5B400 50%);
}

/*кнопка 5*/
.five a {
border-radius: 10px;
color: #40382D;
box-shadow: inset 0 -5px 0 #40382D;
}
.five a:hover {
box-shadow: inset 0 -60px 0 #40382D, 2px 2px 3px rgba(0, 0, 0, 0.3);
color: #DECDA5;
}

/*кнопка 6*/
.six a {
border-radius: 10px;
color: #CEA640;
background: #FFF79A;
border-bottom: 5px solid #E1B442;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
}
.six a:hover {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}

/*кнопка 7*/
.seven a {
color: #45A0A4;
background: -webkit-linear-gradient(right, #E3612C 0, #E3612C 33.3%, #FCCE30
33.3%, #FCCE30 66.6%, #58554B 66.6%, #58554B) bottom no-repeat;
background: -o-linear-gradient(right, #E3612C 0, #E3612C 33.3%, #FCCE30
33.3%, #FCCE30 66.6%, #58554B 66.6%, #58554B) bottom no-repeat;
background: linear-gradient(to right, #E3612C 0, #E3612C 33.3%, #FCCE30
33.3%, #FCCE30 66.6%, #58554B 66.6%, #58554B) bottom no-repeat;
background-size: 70% 5px;
}
.seven a:hover {
background-size: 100% 5px;
}

/*кнопка 8*/
.eight a {
border-radius: 10px;
background: #E8CCB5;
color: #B05151;
padding: 15px 30px;
position: relative;
box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.3);
}
.eight a:before, .eight a:after {
content: "";
display: inline-block;
position: absolute;
top: calc(50% - 5px);
width: 10px;
height: 10px;
border-radius: 50%;
background: #F58262;
box-shadow: inset 0 -2px 0 #B05151;
opacity: 0;
transition: .5s ease-in-out;
}
.eight a:before {
left: 13px;
}
.eight a:after {
right: 13px;
}
.eight a:hover:before, .eight a:hover:after {
opacity: 1;
}

/*кнопка 9*/
.nine a {
color: #E7E5DD;
text-shadow: 1px 1px black;
background: url(https://html5book.ru/wp-content/uploads/2015/01/borger-
grey.png) repeat-x;
border-bottom: 1px solid #bfc1ad;
border-left: 1px solid #bfc1ad;
border-right: 1px solid #bfc1ad;
}
.nine a:hover {
background-position: 300px 0;
}
/*кнопка 10*/
.ten a {
color: #E7E5DD;
border-radius: 25px;
border: 3px solid #E7E5DD;
}
.ten a:hover {
color: #BDB9AB;
background: #E7E5DD;
}
.ten a span {
opacity: 0;
padding-left: 5px;
padding-right: 5px;
font-weight: bold;
transition: 0.4s ease-in-out;
}
.ten a:hover span {
opacity: 1;
padding-left: 10px;
padding-right: 10px;
color: #BDB9AB;
}

/*кнопка 11*/
.eleven a {
box-sizing: border-box;
border: 1px solid white;
color: white;
font-size: 12px;
font-style: italic;
font-weight: 400;
letter-spacing: 1.2px;
line-height: 1;
padding: 15px 40px;
position: relative;
}
.eleven a:after {
content: "";
display: block;
border: 1px solid white;
position: absolute;
top: -5px;
right: 3px;
bottom: -5px;
left: 3px;
}

CSS
7. Примеры оформления ссылок
Гипертекстовые ссылки можно оформить различными способами, но основной
прием оформления основывается на изменении внешнего вида ссылки при
наведении на нее курсором мыши — состояние ссылки  a:hover .
Перейти на страницу с примерами

/*общие стили для всех ссылок*/


a {
text-decoration: none;
display: inline-block;
padding: 5px 10px;
letter-spacing: 1px;
margin: 0 20px;
font-size: 24px;
font-family: 'Fredoka One', cursive;
transition: .3s ease-in-out;
}

/*первая ссылка*/
.s1 {
color: #FFD201;
letter-spacing: 1px;
border-bottom: 1px solid transparent;
border-top: 1px solid transparent;
}
.s1:hover {
border-bottom: 1px solid #FFD201;
border-top: 1px solid #FFD201;
}

/*вторая ссылка*/
.s2 {
color: #969696;
text-shadow: 1px 1px black;
letter-spacing: 1px;
border-bottom: 2px solid transparent;
}
.s2:hover {
color: #F54318;
border-bottom: 2px solid #F54318;
box-shadow: 0 1px 0 white, 0 2px 0 #969696;
}

/*третья ссылка*/
.s3 {
color: #BA7D67;
border: 2px solid transparent;
}
.s3:hover {
border: 2px solid #BA7D67;
}

/*четвертая ссылка*/
.s4 {
color: #2AABBA;
font-style: italic;
padding-left: 35px;
background: url(https://html5book.ru/wp-content/uploads/2019/04/pdf-
icon.png) no-repeat left;
text-decoration: underline;
}
.s4:hover {
color: #C9D414;
}

/*пятая ссылка*/
.s5 {
color: #CBB8AA;
position: relative;
}
.s5 {
text-shadow: 1px 1px white, 2px 2px #6A5F55;
}
.s5:hover {
text-shadow: 1px 1px 1px #6A5F55;
}

/*шестая ссылка*/
.s6 {
color: #E7805E;
border-bottom: 1px dashed;
}
.s6:hover {
border-bottom: 1px solid #9B8381;
}

/*седьмая ссылка*/
.s7 {
color: #D5A39C;
}
.s7:hover {
transform: scaleX(1.1);
}

/*восьмая ссылка*/
.s8 {
color: #92B8C5;
text-shadow: 1px 1px 1px #555555;
}
.s8:hover {
position: relative;
top: 2px;
left: 2px;
}

/*девятая ссылка*/
.s9 {
color: #B2BBC0;
text-shadow: 1px 0 #4D575D;
}
.s9:hover {
transform: rotate(-5deg);
}

/*десятая ссылка*/
.s10 {
color: #B79DCC;
position: relative;
}
.s10:after {
content: "";
display: block;
position: relative;
width: 100%;
margin: auto;
border-bottom: 3px dashed #C1CF00;
bottom: -5px;
transition: .5s ease-in-out;
}
.s10:hover:after {
width: 0;
}

/*одиннадцатая ссылка*/
.s11 {
background-image: linear-gradient(#FE5568 50%, #FE5568 50%), linear-
gradient(silver 50%, silver 50%);
background-position: center bottom;
background-repeat: no-repeat;
background-size: 0 2px, 100% 2px;
color: #1E3A52;
padding-bottom: 3px;
transition: .5s ease-in-out;
}
.s11:hover {
background-size: 100% 2px, 100% 2px;
color: #FE5568;
}

/*двенадцатая ссылка*/
.s12 {
background-image: linear-gradient(#EE5E4F 50%, #EE5E4F 50%), linear-
gradient(silver 50%, silver 50%);
background-position: center bottom;
background-repeat: no-repeat;
background-size: 0 .063em, 100% .063em;
color: #607584;
padding-bottom: .188em;
transition: background-size .5s;
}
.s12:hover {
background-size: 100% .063em, 100% .063em;
background-position: left bottom;
}

/*тринадцатая ссылка*/
.s13 {
color: #34495e;
line-height: 1.2;
position: relative;
padding: 0 14px;
text-transform: uppercase;
}
.s13:after {
content: "";
height: 100%;
min-width: 4px;
background: #34495e;
position: absolute;
left: 0;
bottom: 0;
transition: .5s;
}
.s13:hover:after {
min-width: 100%;
background: #95a5a6;
opacity: .35;
}

/*четырнадцатая ссылка*/
.s14 {
border-bottom: 2px solid #5be;
color: #555;
background-image: linear-gradient(180deg, transparent 65%, #5bf 65%);
background-position: 0% 100%;
background-repeat: no-repeat;
background-size: 100% 0%;
}
.s14:hover {
background-size: 100% 100%;
}

CSS
Публикации по этой теме:
Красивые кнопки для сайта. Часть 4

Красивые кнопки для сайта. Часть 3


Красивые кнопки для сайта. Часть 2

Красивые кнопки для сайта


1.5. HTML-ссылки

2.8. CSS-таблицы
Опубликовано: 18 июня 2014Обновлено: 22 декабря 202038 Comments

Спецификация CSS даёт неограниченные возможности для оформления таблиц. По


умолчанию таблица и ячейки таблицы не имеют видимых границ и фона, при этом
ячейки внутри таблицы не прилегают вплотную друг к другу.

Ширина ячеек таблицы определяется шириной их содержимого, поэтому ширина


столбцов таблицы может быть разной. Высота всех ячеек ряда одинаковая и
определяется высотой самой высокой ячейки.

Форматирование таблиц
 Содержание:
 1. Границы таблицы border
 2. Как задать ширину и высоту таблицы
 3. Как задать фон таблицы
 4. Столбцы таблицы
 5. Как добавить таблице заголовок
 6. Как убрать промежуток между рамками ячеек
 7. Как увеличить промежуток между рамками ячеек
 8. Как скрыть пустые ячейки таблицы
 9. Компоновка макета таблицы с помощью свойства  table-layout
 10. Лучшие макеты таблиц (Топ-10 таблиц)
1. Границы таблицы border
Таблица и ячейки внутри неё по-умолчанию отображаются в браузере без видимых
границ. Границы таблицы задаются свойством  border :

table {
border-collapse: collapse;
/*убираем пустые промежутки между ячейками*/
border: 1px solid grey;
/*устанавливаем для таблицы внешнюю границу серого цвета толщиной 1px*/
}

CSS
Границы ячеек заголовка каждого столбца задаются для элемента  th :

th {
border: 1px solid grey;
}

CSS
Границы ячеек тела таблицы задаются для элемента  td :

td {
border: 1px solid grey;
}

CSS
Толщина рамок соседних ячеек не удваивается, поэтому задать границы для всей
таблицы можно следующим способом:

th, td {
border: 1px solid grey;
}

CSS
Внешнюю границу таблицы можно выделить, задав ей увеличенную ширину:

table {
border: 3px solid grey;
}

CSS
Границы можно задавать частично:

/* устанавливаем для таблицы внешнюю границу серого цвета толщиной 3px */


table {
border-top: 3px solid grey;
}
/* задаём для ячейки тела таблицы границу серого цвета толщиной 1px */
td {
border-bottom: 1px solid grey;
}

CSS
Подробнее о свойстве  border  вы можете прочитать здесь.
2. Как задать ширину и высоту таблицы
По умолчанию ширина и высота таблицы определяется содержимым её ячеек. Если
ширина не задана, то она будет равна ширине самого широкого ряда (строки).
Ширина таблицы и столбцов задаётся с помощью свойства  width . Если для
таблицы задано  table {width: 100%;} , то ширина таблицы будет равна ширине
блока-контейнера, в котором она находится.
Ширину таблицы и столбцов обычно задают в  px  или  % , например:

table {
width: 600px;
}
th {
width: 20%;
}
td:first-child {
width: 30%;
}

CSS
Высота таблицы не задается. Высотой рядов таблицы можно управлять, добавив
верхний и нижний  padding  для элементов  <td>  и  <th> .
Фиксировать высоту с помощью свойства  height  не рекомендуется.

th, td {
padding: 10px 15px;
}

CSS
3. Как задать фон таблицы
По умолчанию фон таблицы и ячеек прозрачный. Если страница или блок,
содержащие таблицу, имеют фон, то он будет просвечиваться сквозь таблицу. Если
фон задан и для таблицы и для ячеек, то в местах наложения фона таблицы и ячеек
будет виден фон только ячеек. В качестве фона для таблицы в целом и её ячеек
могут выступать:
o заливка сплошным цветом,
o градиентная заливка,
o фоновое изображение.
4. Столбцы таблицы
Модель CSS таблиц ориентирована в основном на строки (ряды), формируемые с
помощью элемента  <tr> . На практике бывают случаи, когда необходимо
специальное форматирование столбцов, которое возможно следующими способами:
o с помощью элемента  <col>  можно задать фон для любого количества
столбцов;
o с помощью селектора  table td:first-child ,  table td:last-
child  можно задать стили для первого или последнего столбца таблицы (за
исключением первой ячейки заголовка таблицы);
o с помощью селектора  table td:nth-child(правило отбора
столбцов)  можно задать стили для любых столбцов таблицы.
Подробнее про элемент  <col>  вы можете прочитать здесь.
Подробнее про CSS-селекторы вы сможете прочитать здесь.
5. Как добавить таблице заголовок
Добавить заголовок в таблицу можно с помощью элемента  <caption> , а с помощью
свойства  caption-side  его можно поместить перед таблицей или под ней. Для
горизонтального выравнивания текста заголовка применяется свойство  text-
align .
Свойство наследуется.

caption-side

Значения:

top Заголовок таблицы располагается над таблицей. Значение по умолчанию.

bottom Располагает заголовок под таблицей.

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

<table>
<caption>Таблица № 1</caption>
<tr>
<th>Company</th>
<th>Q1</th>
<th>Q2</th>
<th>Q3</th>
<th>Q4</th>
</tr>
...
</table>

HTML

caption {
caption-side: bottom;
text-align: right;
padding: 10px 0;
font-size: 14px;
}
CSS

РИС. 1. ПРИМЕР
ОТОБРАЖЕНИЯ ЗАГОЛОВКА ПОД ТАБЛИЦЕЙ
6. Как убрать промежуток между рамками ячеек
Рамки ячеек таблицы по умолчанию разделены небольшим промежутком. Если
задать для таблицы  border-collapse: collapse , то промежуток уберётся.
Свойство наследуется.

border-collapse

Значения:

separate Рамки ячеек располагаются раздельно.

collapse Рамки ячеек сливаются в одну, а промежутки между рамками убираются.

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

Синтаксис

table {
border-collapse: collapse;
}

CSS
РИС. 2. ПРИМЕР ТАБЛИЦ СО СЛИВАЮЩИМИСЯ И РАЗДЕЛЬНЫМИ РАМКАМИ
ЯЧЕЕК
7. Как увеличить промежуток между рамками ячеек
С помощью свойства  border-spacing  можно менять расстояние между рамками
ячеек. Данное свойство применяется к таблице в целом.
Свойство наследуется.

border-spacing

Значения:

<длина> Добавляет промежутки между рамками как по вертикали, так и по


<длина> горизонтали. Если заданы две длины, то первая всегда определяет
горизонтальный промежуток, а вторая — вертикальный.

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

Синтаксис

table {
border-collapse: separate;
border-spacing: 10px 20px;
}
table {
border-collapse: separate;
border-spacing: 10px;
}

CSS
РИС. 3. ПРИМЕР ТАБЛИЦ С УВЕЛИЧЕННЫМИ ПРОМЕЖУТКАМИ МЕЖДУ РАМКАМИ
ЯЧЕЕК
8. Как скрыть пустые ячейки таблицы
Свойство  empty-cells  скрывает или показывает пустые ячейки. Действует только
на ячейки, которые не содержат какой-либо контент. Если для ячейки задан фон, а
для таблицы задано  table {border-collapse: collapse;} , то ячейка не будет
скрыта.
Свойство наследуется.

empty-cells

Значения:

show Рамка и фон пустой ячейки будут отрисовываться так же, как для ячейки
таблицы, имеющей содержимое.

hide Если все ячейки строки пусты, то вся строка отображается так, если бы было
задано значение  display: none .

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

<table>
<tr>
<th>Company</th>
<th>Q1</th>
<th>Q2</th>
<th>Q3</th>
</tr>
<tr>
<td>Microsoft</td>
<td>20.3</td>
<td>30.5</td>
<td></td>
</tr>
<tr>
<td>Google</td>
<td>50.2</td>
<td>40.63</td>
<td>45.23</td>
</tr>
</table>

HTML

table {
border: 1px solid #69c;
border-collapse: separate;
empty-cells: hide;
}
th, td {
border: 2px solid #69c;
}

CSS

РИС. 4. ПРИМЕР СКРЫТИЯ ПУСТОЙ ЯЧЕЙКИ


ТАБЛИЦЫ
9. Компоновка макета таблицы с помощью свойства table-layout
Компоновка макета таблицы определяется одним из двух подходов: фиксированный
макет или автоматический макет. Под компоновкой в данном случае
подразумевается как распределяется ширина таблицы между шириной ячеек.

Свойство не наследуется.

table-layout

Значения:

auto Значение по умолчанию. Ширина макета таблицы определяется шириной её


содержимого с учетом значений свойств  padding-left ,  padding-
right ,  border-left width  плюс одна ширина  border-right  последней
ячейки в ряду, или заданной шириной ячеек и толщиной рамки. Если ширина
ячеек не задана явно, они могут быть разной ширины.

fixed Свойство сработает только в том случае, если для таблицы задана ширина.
Ширина ячеек будет одинаковой, а содержимое ячеек, которое не
помещается в ячейку, будет наползать под содержимое соседней ячейки.

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

Синтаксис

table {
table-layout: fixed;
}

CSS
10. Лучшие макеты таблиц
По материалам статьи Top 10 CSS Table Designs из журнала Smashing Magazine

Перейти на страницу с примерами


1. Горизонтальный минимализм

Горизонтальные таблицы — это таблицы, текст в которых читается по горизонтали.


Каждая сущность представляет собой отдельную строку. Вы можете оформить
подобные таблицы в минималистском стиле, поместив двухпиксельную границу под
заголовком  th .
<table>
<tr><th>Employee</th><th>Salary</th><th>Bonus</th><th>Supervisor</th></tr>
<tr><td>Stephen C. Cox</td><td>$300</td><td>$50</td><td>Bob</td></tr>
<tr><td>Josephin Tan</td><td>$150</td><td>-</td><td>Annie</td></tr>
<tr><td>Joyce Ming</td><td>$200</td><td>$35</td><td>Andy</td></tr>
<tr><td>James A. Pentel</td><td>$175</td><td>$25</td><td>Annie</td></tr>
</table>

HTML

table {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 14px;
background: white;
max-width: 70%;
width: 70%;
border-collapse: collapse;
text-align: left;
}
th {
font-weight: normal;
color: #039;
border-bottom: 2px solid #6678b1;
padding: 10px 8px;
}
td {
color: #669;
padding: 9px 8px;
transition: .3s linear;
}
tr:hover td {
color: #6699ff;
}

CSS
При большом количестве строк такой дизайн таблиц затрудняет их чтение. Для
решения этой проблемы можно добавить однопиксельную границу под всеми
элементами  td .
td {
border-bottom: 1px solid #ccc;
color: #669;
padding: 9px 8px;
transition: .3s linear;
}
/*остальной код - как в примере выше*/

CSS
Добавление эффекта  :hover  для элемента  tr  облегчит чтение таблиц,
оформленных в минималистском стиле. При наведении курсора мыши на ячейку,
остальные ячейки той же строки выделяются одновременно, что упрощает процесс
отслеживания информации, если таблицы имеют несколько столбцов.

th {
font-weight: normal;
color: #039;
padding: 10px 15px;
}
td {
color: #669;
border-top: 1px solid #e8edff;
padding: 10px 15px;
}
tr:hover td {
background: #e8edff;
}
CSS
2. Вертикальный минимализм

Несмотря на то, что подобные таблицы используются редко, тем не менее,


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

th {
font-weight: normal;
border-bottom: 2px solid #6678b1;
border-right: 30px solid white;
border-left: 30px solid white;
color: #039;
padding: 8px 2px;
}
td {
border-right: 30px solid white;
border-left: 30px solid white;
color: #669;
padding: 12px 2px;
}

CSS
3. «Коробочный» стиль

Наиболее надежным стилем для оформления таблиц всех типов, является так
называемый «коробочный» стиль. Достаточно подобрать хорошую цветовую гамму, а
затем задать цвет фона для всех ячеек. Не забудьте подчеркнуть различие между
строками, установив границы в качестве разделителя.
th {
font-size: 13px;
font-weight: normal;
background: #b9c9fe;
border-top: 4px solid #aabcfe;
border-bottom: 1px solid white;
color: #039;
padding: 8px;
}
td {
background: #e8edff;
border-bottom: 1px solid white;
color: #669;
border-top: 1px solid transparent;
padding: 8px;
}
tr:hover td {
background: #ccddff;
}

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

table {
font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif;
font-size: 14px;
max-width: 70%;
width: 70%;
text-align: center;
border-collapse: collapse;
border-top: 7px solid #9baff1;
border-bottom: 7px solid #9baff1;
}
th {
font-size: 13px;
font-weight: normal;
background: #e8edff;
border-right: 1px solid #9baff1;
border-left: 1px solid #9baff1;
color: #039;
padding: 8px;
}
td {
background: #e8edff;
border-right: 1px solid #aabcfe;
border-left: 1px solid #aabcfe;
color: #669;
padding: 8px;
}

CSS
4. Горизонтальная зебра

Зебра-таблица выглядит довольно привлекательной и удобной. Дополнительный


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

th {
font-weight: normal;
color: #039;
padding: 10px 15px;
}
td {
color: #669;
border-top: 1px solid #e8edff;
padding: 10px 15px;
}
tr:nth-child(2n) {
background: #e8edff;
}

CSS
5. Газетный стиль

Для достижения так называемого газетного эффекта, можно применить границы для
элементов таблицы и поиграть с ячейками внутри. Легкий, минималистичный
газетный стиль может выглядеть так: обыграйте цветовую гамму, добавьте границы,
отступы, разные фоны, и эффект  :hover  при наведении на строку.

table {
border: 1px solid #69c;
}
th {
font-weight: normal;
color: #039;
border-bottom: 1px dashed #69c;
padding: 12px 17px;
}
td {
color: #669;
padding: 7px 17px;
}
tr:hover td {
background: #ccddff;
}

CSS
table {
border: 1px solid #69c;
}
th {
font-weight: normal;
color: #039;
padding: 10px;
}
td {
color: #669;
border-top: 1px dashed white;
padding: 10px;
background:#ccddff;
}
tr:hover td {
background: #99bcff;
}

CSS

table {
border: 1px solid #6cf;
}
th {
font-weight: normal;
font-size: 13px;
color: #039;
text-transform: uppercase;
border-right: 1px solid #0865c2;
border-top: 1px solid #0865c2;
border-left: 1px solid #0865c2;
border-bottom: 1px solid white;
padding: 20px;
}
td {
color: #669;
border-right: 1px dashed #6cf;
padding: 10px 20px;
}

CSS
6. Фон таблицы

Если вы ищете быстрый и уникальный способ оформления таблицы, выберите


привлекательное изображение или фото, относящиеся к теме таблицы и установите
ее фоном таблицы.

table {
background: url("https://html5book.ru/wp-
content/uploads/2019/04/suggestions.png") 98% 86% no-repeat;
}
th {
font-weight: normal;
font-size: 14px;
color: #339;
padding: 10px 12px;
background: white;
}
td {
color: #669;
border-top: 1px solid white;
padding: 10px 12px;
background: rgba(51, 51, 153, .2);
transition: .3s;
}
tr:hover td {
background: rgba(51, 51, 153, .1);
}

CSS
Публикации по этой теме:

Шпаргалка по работе с таблицами

Оформление таблицы с помощью псевдоклассов


CSS таблицы цен

Красивое оформление таблиц


Выравнивание текста в таблице с помощью CSS

1.7. HTML-таблицы

2.9. CSS-списки
Опубликовано: 25 июля 2014Обновлено: 22 декабря 202043 Comments

CSS-списки — набор свойств, отвечающих за оформление списков. Использование


HTML-списков очень распространено при создании панелей навигации по сайту.
Элементы списка представляют набор блочных элементов.
С помощью стандартных CSS-свойств можно изменить внешний вид маркера
списка, добавить изображение для маркера, а также изменить местоположение
маркера. Высоту блока маркера можно задать свойством  line-height .
Оформление списков с помощью CSS-стилей
 Содержание:
 1. Тип маркера списка list-style-type
 2. Изображения для элементов списка list-style-image
 3. Местоположение маркера списка list-style-position
 4. Краткая форма задания стилей списка list-style
 5. Примеры красивого оформления списков
1. Тип маркера списка list-style-type
Свойство изменяет типа маркера или удаляет маркер для маркированного и
нумерованного списков.
Свойство наследуется.

list-style-type

Значения:

disc Значение по умолчанию. В качестве маркера элементов списка выступает


закрашенный кружок.

armenian Традиционная армянская нумерация.

circle В качестве маркера выступает незакрашенный кружок.

cjk- Идеографическая нумерация.


ideographic

decimal 1, 2, 3, 4, 5, …

decimal- 01, 02, 03, 04, 05, …


leading-zero

georgian Традиционная грузинская нумерация.

hebrew Традиционная еврейская нумерация.

hiragana Японская нумерация: a, i, u, e, o, …

hiragana- Японская нумерация: i, ro, ha, ni, ho, …


iroha

katakana Японская нумерация: A, I, U, E, O, …

katakana- Японская нумерация: I, RO, HA, NI, HO, …


iroha

lower-alpha a, b, c, d, e, …

lower-greek Строчные символы греческого алфавита.

lower-latin a, b, c, d, e, …
lower-roman i, ii, iii, iv, v, …

none Маркер отсутствует.

square В качестве маркера выступает закрашенный или незакрашенный квадрат.

upper-alpha A, B, C, D, E, …

upper-latin A, B, C, D, E, …

upper-roman I, II, III, IV, V, …

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

Синтаксис

list-style-type: disc;
list-style-type: circle;
list-style-type: square;
list-style-type: decimal;
list-style-type: decimal-leading-zero;
list-style-type: lower-roman;
list-style-type: upper-roman;
list-style-type: lower-greek;
list-style-type: lower-latin;
list-style-type: upper-latin;
list-style-type: armenian;
list-style-type: georgian;
list-style-type: lower-alpha;
list-style-type: upper-alpha;
list-style-type: none;
list-style-type: inherit;
list-style-type: initial;

CSS

РИС. 1. ПРИМЕР
ОФОРМЛЕНИЯ МАРКИРОВАННОГО И НУМЕРОВАННОГО СПИСКОВ
2. Изображения для элементов списка list-style-image
В качестве маркера элементов списка можно использовать изображения и
градиентые заливки.

Свойство наследуется.
list-style-image

Значения:

url(url) Путь к изображению.

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


изображение для элемента из группы элементов с установленным
изображением-маркером.

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

Синтаксис

list-style-image: url("images/romb.png");
list-style-image: linear-gradient(#FF7A2F 0, #FF7A2F 50%, #FFB214 50%);
list-style-image: none;
list-style-image: inherit;
list-style-image: initial;

CSS

РИС. 2. ОФОРМЛЕНИЕ
МАРКИРОВАННОГО СПИСКА С ПОМОЩЬЮ ИЗОБРАЖЕНИЯ

РИС. 3. ОФОРМЛЕНИЕ
МАРКИРОВАННОГО СПИСКА С ПОМОЩЬЮ ГРАДИЕНТА
3. Местоположение маркера списка list-style-position
Данное свойство предоставляет возможность располагать маркер вне или внутри
содержимого элемента списка.

Свойство наследуется.

list-style-position

Значения:
outside Значение по умолчанию. Маркер располагается вне блока с текстом.

inside Маркер списка изображается в одном блоке с текстом. Последующие строки


текста будут располагаться под значком маркера, т.е. маркер будет
обтекаться текстом.

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

Синтаксис

list-style-position: inside;
list-style-position: outside;
list-style-image: inherit;
list-style-image: initial;

CSS

РИС. 4. ПРИМЕР
РАСПОЛОЖЕНИЯ МАРКЕРА ВНУТРИ И СНАРУЖИ БЛОКА СПИСКА
4. Краткая форма задания стилей списка
Можно объединить все три свойства форматирования списка в одно с
помощью  list-style . Значения свойств могут быть расположены в произвольном
порядке, а часть значений может быть опущена. Если присутствует одно значение,
то другие свойства примут значения браузера по умолчанию.
Синтаксис

ul {
list-style: url("images/romb.png") inside;
}

CSS
4. Примеры красивого оформления списков
Перейти на страницу с примерами
По материалам CSS 2
Публикации по этой теме:

Адаптивное выпадающее мега меню на CSS


Горизонтальное выпадающее многоуровневое меню

Оформление многоуровневых нумерованных списков


Вертикальное меню для сайта

Горизонтальное выпадающее меню

Горизонтальное меню для сайта


1.8. HTML-списки

2.10. CSS-фон
Опубликовано: 12 октября 2014Обновлено: 21 декабря 202078 Comments

Каждый блок html-элемента имеет фоновый слой, который может быть полностью
прозрачным (по умолчанию) или заполнен цветом и/или одним или несколькими
изображениями. CSS-свойства фона указывают, какой цвет  background-color  и
изображения  background-image  использовать, а также их размер, расположение,
способ укладки и т.д.
Свойства фона не наследуются, но фон родительского блока будет просвечивать по
умолчанию из-за начального значения в  background-color: transparent .
Фон не отображается у пустых элементов с нулевой высотой. Отрицательные
значения свойства  margin  не влияют на фон элемента.
Свойства фона html-элементов
 Содержание:
 1. Базовый цвет: свойство background-color
 2. Источник изображения: свойство background-image
 3. Укладка изображений: свойство background-repeat
 4. Фиксация изображения: свойство background-attachment
 5. Позиционирование изображений: свойство background-position
 6. Область рисования: свойство background-clip
 7. Область расположения фона: свойство background-origin
 8. Размер изображений: свойство background-size
 9. Краткая запись свойств фона: свойство background
 10. Множественные фоны
1. Базовый цвет: свойство background-color
Свойство  background-color  устанавливает цвет фона элемента. Цвет рисуется за
фоновыми изображениями. Для блочных элементов цвет фона распространяется на
всю ширину и высоту блока элемента, для строчных — только на область их
содержимого.
Цвет фона обрезается в соответствии со значением  background-clip  самого
нижнего слоя фонового изображения.
Свойство не наследуется.

background-color

Значения:

цвет Значение принимает все форматы цвета свойства color. Значение по


умолчанию  transparent .

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

Синтаксис

background-color: salmon;
background-color: #00ff00;
background-color: rgba(255, 128, 128, 0.5);
background-color: currentColor;
background-color: transparent;
background-color: inherit;
background-color: initial;

CSS

РИС. 1. СВОЙСТВО BACKGROUND-COLOR ДЛЯ РАЗНЫХ ЭЛЕМЕНТОВ


2. Источник изображения: свойство background-image
Свойство  background-image  устанавливает фоновое изображение (одно или
несколько) элемента. Значение  none  считается слоем изображения, но ничего не
рисует. Изображение, которое является пустым (нулевой ширины или нулевой
высоты), которое не загружается или не может быть отображено (например, потому
что оно не в поддерживаемом формате изображения) также считается слоем, но
ничего не рисует.
Семантически важные изображения должны предоставляться в разметке документа,
например, с тегом  <img> .
Свойство не наследуется.

background-image

Значения:

изображение Обозначает 2D-изображение. Это может быть ссылка на URL,


нотация  image()  или запись градиента. Значение по умолчанию  none .

inherit Наследует значение свойства от родительского элемента.

Синтаксис

background-image: none;
background-image: url(http://site.ru/rose.png);
background-image: url(tl.png), url(tr.png);
background-image: linear-gradient(white, gray);
background-image: repeating-radial-gradient(circle closest-side at 20px 30px,
red, yellow, green 100%, yellow 150%, red 200%);
background-image: image("sprites.svg#xywh=40,0,20,20");
background-image: inherit;

CSS
3. Укладка изображений: свойство background-repeat
Свойство  background-repeat  определяет, как фоновые изображения
укладываются в области фона после того, как для них установлены размеры и
позиционирование. Если значение свойства имеет два ключевых слова, первое
используется для горизонтального направления, второе — для вертикального.
Свойство не наследуется.

background-repeat

Значения:

repeat-x Изображение повторяется в горизонтальном направлении. Вычисляется в  repeat


no-repeat .

repeat-y Изображение повторяется в вертикальном направлении. Вычисляется в  no-repeat


repeat .

repeat Изображение повторяется в обоих направлениях так часто, чтобы покрыть область
отрисовки фона. Если изображение не помещается, оно обрезается. Вычисляется
в  repeat repeat . Значение по умолчанию.

space Изображение повторяется столько раз, сколько оно помещается в области фона, не
обрезаясь, изображения расположены на равном расстоянии друг от друга. Первое и
последнее изображения касаются краев области. Если область рисования фона
больше, чем область позиционирования фона, шаблон повторяется, чтобы заполнить
область рисования фона. Если недостаточно места для двух копий изображения, то
размещается только одно изображение, а свойство  background-
position  определяет его положение. Вычисляется в  space space .

round Изображение повторяется так часто, чтобы заполнить область фона, масштабируясь
и не обрезаясь. Вычисляется в  round round .

no-repeat Изображение размещается один раз и не повторяется. Вычисляется в  no-repeat


no-repeat .

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

Синтаксис

background-repeat: repeat-x;
background-repeat: repeat-y;
background-repeat: repeat;
background-repeat: space;
background-repeat: round;
background-repeat: no-repeat;
background-repeat: repeat space;
background-repeat: repeat repeat;
background-repeat: round space;
background-repeat: no-repeat round;
background-repeat: inherit;
background-repeat: initial;

CSS
РИС. 2. СВОЙСТВО BACKGROUND-REPEAT
4. Фиксация изображения: свойство background-attachment
Свойство  background-attachment  указывает, является ли фоновое изображение
фиксированными относительно области просмотра или прокручивается вместе с
элементом или его содержимым.
Свойство не наследуется.

background-attachment

Значения:

scroll Фоновое изображение прокручивается вместе с текстом и другим содержимым.


Значение по умолчанию.

fixed Предотвращает перемещение, фиксирует фоновое изображение на заднем плане.

local Фоновое изображение прокручивается вместе с содержимым элемента.

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

Синтаксис

background-attachment: scroll;
background-attachment: fixed;
background-attachment: local;
background-attachment: inherit;
background-attachment: initial;
CSS
5. Позиционирование изображений: свойство background-position
Если для элемента заданы фоновые изображения, свойство  background-
position  указывает их начальное положение (после любого изменения размера) в
соответствующей области расположения фона.
Свойство не наследуется.

background-position

Значения:

% Горизонтальное смещение вычисляется по формуле ширина области


расположения фона — ширина фонового изображения. Вертикальное смещение
по формуле  высота области расположения фона - высота фонового
изображения , где размер изображения — это размер, заданный
свойством  background-size . Значение по умолчанию  0% 0% .

длина Значение длины дает фиксированную длину в качестве смещения.

left Вычисляет до 0% для горизонтальной позиции, если задано одно или два значения, в
противном случае смещение происходит относительно левого края.

center Вычисляет в  left 50%  для горизонтального положения, если не указано иное
горизонтальное положение, или как  top 50%  для вертикального положения, если
оно задано.

right Вычисляет в  100%  для горизонтального положения, если задано одно или два
значения, в противном случае смещение происходит относительно правого края.

top Вычисляет в  0%  для вертикальной позиции, если задано одно или два значения, в
противном случае смещение происходит относительно верхнего края.

bottom Вычисляет в  100%  для вертикальной позиции, если задано одно или два значения, в
противном случае смещение происходит относительно нижнего края.

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

Синтаксис

background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;
background-position: 25% 75%;
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;
background-position: 0 0, center;
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10px;
background-position: inherit;
background-position: initial;

CSS
Если указано только одно значение, второе значение считается  center . Если
заданы два значения в единицах длины или  % , то первое значения представляет
горизонтальную позицию, второе — вертикальную. Значения в единицах длины
или  %  представляют смещение верхнего левого угла фонового изображения от
верхнего левого угла области расположения фона.
Пара ключевых слов может быть переупорядочена, в то время как комбинация
ключевого слова и длины или процента не может. Например,  center left  —
допустимое значение, а  50% left  — нет.
Если заданы три или четыре значения в единицах длины или  % , то перед каждым
значением должно стоять ключевое слово, которое указывает, от какого края дается
смещение. Если даны три значения, недостающее смещение считается равным
нулю.
Положительные значения смещают внутрь от края области расположения фона.
Отрицательные значения смещают наружу от края области расположения фона.

РИС. 3. СВОЙСТВО BACKGROUND-POSITION


Можно задать фоновую картинку так, чтобы она располагалась только по низу блока:
div {
background-color: #FCF8F7;
height: 120px;
background-image: url(https://html5book.ru/images/flower112.png);
background-position: left bottom;
background-repeat: repeat-x;
}

CSS

РИС. 4. ФОНОВОЕ ИЗОБРАЖЕНИЕ ПО НИЗУ БЛОКА


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

div {
width: 660px;
background-color:#E0E4EF;
height: 300px;
background-image: url(https://html5book.ru/images/flower112.png),
url(https://html5book.ru/images/leaf112.png),
url(https://html5book.ru/images/flower221.png);
background-repeat: repeat-x;
background-position: 0 250px, 0 150px, 0 98px;
}

CSS

РИС. 5. ЗАДАНИЕ ДЛЯ БЛОКА НЕСКОЛЬКИХ ФОНОВЫХ ИЗОБРАЖЕНИЙ


6. Область рисования: свойство background-clip
Свойство  background-clip  определяет область рисования фона. Фон всегда
рисуется под рамкой элемента, если таковая имеется.
Корневой элемент имеет другую область рисования фона, поэтому
свойство  background-clip  на него не влияет.
Свойство не наследуется.

background-clip

Значения:

border-box Фон закрашивает область в пределах рамки элемента. Значение по умолчанию.

padding-box Фон закрашивает область в пределах внутренних полей элемента.

content-box Фон закрашивает только область содержимого.

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

Синтаксис

background-clip: border-box;
background-clip: padding-box;
background-clip: content-box;
background-clip: text;
background-clip: inherit;
background-clip: initial;

CSS

РИС. 6. СВОЙСТВО BACKGROUND-CLIP


7. Область расположения фона: свойство background-origin
Свойство  background-origin  указывает область расположения фона для
элементов, которые выводятся на экране как единый блок (например, не абзацы
текста).
Свойство не наследуется.
background-origin

Значения:

padding-box Фон позиционируется относительно верхних границ области внутренних полей


элемента. Значение по умолчанию.

border-box Фон позиционируется относительно верхних границ рамки элемента.

content-box Фон позиционируется относительно верхних границ области содержимого элемента.

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

Синтаксис

background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;
background-origin: inherit;
background-origin: initial;

CSS
Если для элемента установлено  background-attachment: fixed , свойство не
будет иметь эффекта.
Если для элемента заданы  background-clip: padding-box ,  background-
origin: border-box ,  background-position: top left , и элемент имеет
ненулевую рамку, тогда верхняя и левая части фонового изображения будет
обрезаны.

РИС. 7. СВОЙСТВО BACKGROUND-ORIGIN


8. Размер изображений: свойство background-size
Свойство  background-size  устанавливает размер фоновых изображений.
Свойство не наследуется.
background-size

Значения:

auto Значение по умолчанию. Высота и ширина изображения равны его оригинальным


размерам.

длина Размер задается парой значений, первое значение устанавливает ширину


изображения, второе — высоту. Для того, чтобы фон масштабировался вместе с
текстом, размеры изображения нужно задавать в  em .

% Задает размер фонового изображения в процентах от ширины или высоты элемента,


которое заполняется фоном.

cover Масштабирует изображение с сохранением пропорций так, чтобы его ширина или
высота равнялась ширине или высоте блока.

contain Масштабирует изображение с сохранением пропорций таким образом, чтобы оно


целиком поместилось внутри блока.

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

Синтаксис

background-size: cover;
background-size: contain;
background-size: 50%;
background-size: 3.2em;
background-size: 12px;
background-size: auto;
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;
background-size: auto, auto;
background-size: 50%, 25%, 25%;
background-size: 6px, auto, contain;
background-size: inherit;
background-size: initial;

CSS
РИС. 8. СВОЙСТВО BACKGROUND-SIZE
9. Краткая запись свойств фона: свойство background
Свойство  background  позволяет описать в одном объявлении следующие свойства
фона:  background-color ,  background-image ,  background-position ,  backgr
ound-size ,  background-repeat ,  background-origin ,  background-clip  и  ba
ckground-attachment . Необязательно указывать все перечисленные свойства,
если какое-либо свойство будет пропущено, оно примет значение по-умолчанию.
Если вы указываете в краткой записи фона свойство  background-size , то его
значения нужно будет записать через слеш  / , чтобы отделить его от
свойства  background-position .
Синтаксис

background: gold;
background: url("rose.png") repeat-y;
background: border-box red;
background: no-repeat center/80% url("../img/icon.png");

CSS
10. Множественные фоны
Фон блока элемента может иметь несколько слоев в CSS3. Количество слоев
определяется количеством значений, разделенных запятыми, указанных в
свойстве  background-image . Значение  none  по-прежнему создает слой.
Пример

div {
width: 680px;
height: 630px;
background-image: url(https://html5book.ru/wp-
content/uploads/2015/02/flower_rose.png), url(https://html5book.ru/wp-
content/uploads/2015/02/love.png), url(https://html5book.ru/wp-
content/uploads/2015/02/border_white.png);
background-repeat: no-repeat;
background-position: bottom right, center center, top left;
}

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

РИС. 9. ПРИМЕР ИСПОЛЬЗОВАНИЯ НЕСКОЛЬКИХ ФОНОВЫХ ИЗОБРАЖЕНИЙ

2.11. CSS-рамка
Опубликовано: 14 октября 2014Обновлено: 31 декабря 201929 Comments

CSS-рамка элемента представляет собой одну или несколько линий, окружающих


содержимое элемента и его поля  padding . Рамка задаётся с помощью краткого
свойства  border . Стиль рамки задается с помощью трех
свойств: стиль, цвет и ширина.
Оформление рамок HTML-элементов с помощью CSS-свойств
 Содержание:
 1. Стиль рамки border-style
 2. Цвет рамки border-color
 3. Ширина рамки border-width
 4. Задание рамки одним свойством border
 5. Задание рамки для одной границы элемента border-top, border-bottom, border-
left, border-right
1. Стиль рамки border-style

По умолчанию рамки всегда отрисовываются


поверх фона элемента, фон распространяется до внешнего края элемента. Стиль
рамки определяет ее отображение, без этого свойства рамки не будут видны
вообще. Для элемента можно задавать рамку для всех сторон одновременно с
помощью свойства  border-style  или для каждой стороны отдельно с помощью
уточняющих свойств  border-top-style  и т.д. Не наследуется.

border-style
(border-top-style, border-right-style, border-bottom-style, border-left-style)

Значения:
none Значение по умолчанию, означает отсутствие рамки. Также убирает рамку
элемента из группы элементов с установленным значением данного
свойства.

hidden Эквивалентно  none .

dotted dotted

dashed dashed

solid solid

double double

groove groove

ridge ridge

inset
inset

outset
outset

{1,4} Одновременное перечисление четырех разных стилей для рамок элемента,


только для свойства  border-style :
{border-style: solid dotted none dotted;}

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

Синтаксис

p {border-style: solid;}
p {border-top-style: solid;}

CSS
2. Цвет рамки border-color
Свойство задаёт цвет рамок всех сторон одновременно. С помощью уточняющих
свойств можно установить свой цвет для рамки каждой стороны элемента. Если для
рамки цвет не задан, то он будет таким же, как и цвет текста элемента. Если в
элементе нет текста, то цвет рамки будет таким же, как и цвет текста родительского
элемента. Не наследуется.

border-color
(border-top-color, border-right-color, border-bottom-color, border-left-color)

Значения:

transparent Устанавливает прозрачный цвет для рамки. При этом ширина рамки остается.
Можно использовать для смены цвета рамки при наведении курсора мыши на
элемент, чтобы избежать смещение элемента.

цвет Цвет рамок задается при помощи значений свойства color.

{border-color: #cacd58;}

{1,4} Одновременное перечисление четырех разных цветов для рамок элемента,


только для свойства  border-color :
{border-color: #cacd58 #5faf8a #b9cea5 #aab238;}

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

Синтаксис

p {border-color: #cacd58;}

CSS

3. Ширина рамки border-width


Ширина рамки задается с помощью единиц измерения длины или ключевых слов.
Если для свойства  border-style  задано значение  none , и для рамки элемента
установлена какая-то ширина, то в данном случае ширина рамки приравнивается к
нулю. Не наследуется.
border-width
(border-top-width, border-right-width, border-bottom-width, border-left-width)

Значения:
thin / Ключевые слова, устанавливают ширину рамки относительно друг друга.
Первое значение уже, чем второе, второе — тоньше третьего. Значение по
medium /
умолчанию —  medium
thick

width (px,
{border-width: 5px;}
em)

{1,4}
Возможность одновременного задания четырех разных ширин для рамок
элемента, только для свойства  border-width :
{border-width: 5px 10px 15px 3px;}

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

Синтаксис

p {border-width: 2px;}

CSS

4. Задание рамки одним свойством


Свойство  border  позволяет объединить в себе следующие свойства:  border-
width ,  border-style ,  border-color , например:

div {
width: 100px;
height: 100px;
border: 2px solid grey;
}

CSS

При этом заданные свойства будут применяться ко всем границам элемента


одновременно. Если какое-то из значений не указано, его место займет значение по
умолчанию.

5. Задание рамки для одной границы элемента


В случае, когда необходимо задать разный стиль границ элемента, можно
воспользоваться краткой записью для соответствующей границы.
Перечисленные ниже свойства объединяют в одно объявление следующие
свойства:  border-width ,  border-style  и  border-color . Перечень свойств
указывается в заданном порядке, при этом одно или два значения могут быть
пропущены, в этом случае их значения примут значения по умолчанию.
Стиль верхней границы задается с помощью свойства  border-top , нижней
—  border-bottom , левой —  border-left , правой —  border-right .
Синтаксис

p {border-top: 2px solid grey;}

CSS

2.12. CSS content


Опубликовано: 6 января 2015Обновлено: 17 марта 202111 Comments

CSS content генерирует содержимое, которое визуально отображается на экране


монитора, не добавляясь к дереву документа DOM. Программы для чтения с экрана
не имеют доступ к содержимому, созданному с использованием псевдоэлементов и
не могут его прочитать, поэтому рекомендуется не использовать псевдоэлементы
для вставки важного контента на страницу.
Содержимое, вставляемое с помощью свойства  content , появляется внутри
элемента, до или после его содержимого. С помощью CSS можно генерировать
содержимое следующими способами:
— с помощью свойства  content  в сочетании с
псевдоэлементами  ::before  и  ::after ;
— с помощью свойств  counter-increment  и  counter-reset .
Добавление генерируемого содержимого на веб-
страницу
 Содержание:
 1. Свойство content
 1.1. Добавление специального символа
 1.2. Добавление текста
 1.3. Добавление изображения
 1.4. Добавление блочного содержимого
 1.5. Добавление значения атрибута
 1.6. Добавление кавычек
 2. Форматирование кавычек: свойство quotes
1. Свойство content
Поддержка браузерами

IE: 9.0, не поддерживает анимацию и переходы псевдоэлементов


Firefox: 4.0
Chrome: 4.0, анимация и переходы псевдоэлементов — с 26.0
Safari: 4.0, не поддерживает анимацию и переходы псевдоэлементов
Opera: 4.0, не поддерживает анимацию и переходы псевдоэлементов
iOS Safari: 7.1
Opera Mini: 8
Android Browser: 4.1
Chrome for Android: 44
В основе генерируемого содержимого лежат
псевдоэлементы  ::before  или  ::after . Псевдоэлементы создают абстракции о
дереве документа помимо тех, которые определены языком документа, в данном
случае — HTML. Например, HTML не предлагает механизмы доступа к первой букве
или первой строке содержимого элемента. Псевдоэлементы CSS позволяют
ссылаться на эту не имеющую доступа информацию. Псевдоэлементы также
предоставляют дизайнерам стилей способ присвоить стиль содержимому, которого
нет в исходном документе.

h1:before, h1:after {
content: "";
}

css
Генерируемое содержимое наследует значения свойств от элемента, к которому оно
прикрепляется. При этом наследуются только наследуемые свойства.

content

Значения:

normal Значение по умолчанию, означает отсутствие добавляемого содержимого.

none Не добавляет содержимое. Используется в случае, когда нужно удалить


генерируемое содержимое для одного элемента из группы элементов
(например, элементы списка), для которых уже задано это свойство.

counter() Даёт возможность создавать счётчики, задавая для них точку отсчёта и
приращение на некоторую величину с помощью свойства  counter-reset .
Для прямого увеличения счёта необходимо использовать
свойство  counter-increment .

attr() Добавляет до или после элемента значение атрибута, заключённого в


скобки. Чтобы вставить пробел между основным содержимым и
генерируемым, нужно добавить пробел перед скобкой или после нее,
например,  content: attr( href);

" " Текст, который добавляется на веб-страницу, должен быть заключен в


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

open-quote Добавляет к содержимому открывающую кавычку.

close-quote Добавляет к содержимому закрывающую кавычку.

no-open- Удаляет открывающую кавычку, при этом уровень их вложенности


продолжает учитываться.
quote

no-close- Удаляет закрывающую кавычку.


quote

url() Добавляет медиа-содержимое, например, изображение, звук, видео. В


качестве значения атрибута в скобках указывается адрес внешнего ресурса,
который вставляется в выбранное место документа.

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

1.1. Добавление специального символа

Можно оживить текст с помощью добавления специальных символов. В качестве


значения используется символ Юникода.

h1 {
font-family: 'Niconne', cursive;
font-size: 50px;
color: #e12527;
}
h1:before, h1:after {
content: "\2746";
display: inline-block;
font-size: 60px;
color: #38afaa;
-webkit-animation: my 4s infinite alternate;
animation: my 4s infinite alternate;
}
h1:before {
margin-right: 0.5em;
}
h1:after {
margin-left: 0.5em;
}
@-webkit-keyframes my {
0% {color: #2e2f92;}
25% {color: #38afaa;}
50% {color: #5b59a7;}
75% {color: #f7b21c;}
100% {color: #e12527;}
}
@keyframes my {
0% {color: #2e2f92;}
25% {color: #38afaa;}
50% {color: #5b59a7;}
75% {color: #f7b21c;}
100% {color: #e12527;}
}

css
1.2. Добавление текста

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


текст, и он появится в указанном месте, при этом текст в кавычках выводится как
есть.

h1:before, h1:after {
content: "Yay!";
font-family: 'Dancing Script', cursive;
color: #f7b21c;
text-shadow: 1px 1px 2px grey;
}
h1:before {
margin-right: 30px;
}
h1:after {
margin-left: 30px;
}

css
1.3. Добавление изображения
h1:before {
content: url(https://html5book.ru/images/left-twig.png);
display: inline-block;
margin-right: 10px;
}

css
1.4. Добавление блочного содержимого

*{box-sizing:border-box;}
div {
position: relative;
width: 680px;
height: 100px;
border: 1px solid #C2C9D5;
margin-top: 40px;
background: linear-gradient(to top,#D7DFED, #F5FCFD, #D7DFED)
}
/*Кружок*/
div:nth-child(1):before {
content: "";
display: inline-block;
position: absolute;
left: calc(50% - 11px);
left: -webkit-calc(50% - 11px);
top: -11px;
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid #AC170E;
background: orangered;
box-shadow: 0 2px 4px #292825;
}
/*Треугольник*/
div:nth-child(2):before {
content: "";
display: inline-block;
width: 0;
height: 0;
border-style: solid;
border-width: 0 20px 20px 20px;
border-color: transparent transparent hotpink transparent;
position: absolute;
left: calc(50% - 15px);
left: -webkit-calc(50% - 15px);
top: -21px;
}
/*Зебра*/
div:nth-child(3):before{
content: "";
display: inline-block;
position: absolute;
height: 10px;
width: 100%;
background: repeating-linear-gradient(45deg, turquoise, turquoise 10px,
#D7DFED 10px, #D7DFED 20px);
}
/*Треугольник с обводкой*/
div:nth-child(4) {
border: 3px solid #3E3A40;
}
div:nth-child(4):before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
border: 3px solid #3E3A40;
transform: rotate(135deg);
position: absolute;
left: calc(50% - 11px);
left: -webkit-calc(50% - 11px);
top: -15px;
background:linear-gradient(to top right,#CDD3CD, #EEF0EE, #CDD3CD);
z-index: -1;
}

CSS
1.5. Добавление значения атрибута

Функция  attr()  позволяет добавить любое значение атрибута, например, url-адрес


ссылки, который будет выводиться при печати текста.

a:after {
content: attr(href);
}

CSS
1.6. Добавление кавычек

С помощью значений  open-quote  и  close-quote  можно генерировать


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

<blockquote>Some text</blockquote>

HTML

blockquote {
quotes: "\2039" "\203A";
font-size: 40px;
font-family: 'Sigmar One', cursive;
}
blockquote:before {
content: open-quote;
color: mediumvioletred;
margin-right: 10px;
}
blockquote:after {
content: close-quote;
color: mediumvioletred;
margin-left: 10px;
}

CSS
2. Форматирование кавычек quotes
Свойство задаёт тип кавычек, используемых в документе для вложенных цитат. По
умолчанию кавычками оформляется текст, заключенный в тег  <q> . Также кавычки
можно сгенерировать помощью свойства  content , задав ему значения  open-
quote  и  close-quote . В качестве значения используется специальный символ
HTML или символ Юникода. Наследуется.
quotes

Значения:

[символ Определяет вид открывающей и закрывающей кавычек. Первая пара


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

none Текст отображается без кавычек.

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

Синтаксис

p {quotes:'«' '»';}
p {quotes: none;}

CSS

ТАБЛИЦА 1. КАВЫЧКИ В HTML

HTML-
Описание Внешний вид Юникод
код

Двойная кавычка " \0022 &quot;

Апостроф ' \0027 &apos;

Открывающая одинарная кавычка ‘ \2018 &lsquo;

Закрывающая одинарная кавычка ’ \2019 &rsquo;

Закрывающая двойная кавычка “ \201C &ldquo;

Правая двойная кавычка ” \201D &rdquo;

Двойная нижняя кавычка ⹂ \2E42 &#11842;

Открывающая левая кавычка «ёлочка» « \00AB &laquo;

Закрывающая правая кавычка «ёлочка» » \00BB &raquo;


Нижняя одинарная открывающая кавычка ‚ \201A &sbquo;

Верхняя одинарная обратная кавычка ‛ \201B &#8219;

Нижняя двойная открывающая кавычка „ \201E &bdquo;

Двойная верхняя обратная кавычка ‟ \201F &#8223;

Одинарная открывающая (левая) французская


угловая кавычка ‹ \2039 &lsaquo;

Одинарная закрывающая (правая) французская


угловая кавычка › \203A &rsaquo;

2.13. CSS-цвета
Опубликовано: 15 мая 2014Обновлено: 2 января 20207 Comments

Модуль CSS color подробно описывает значения, которые позволяют авторам


определять цвета и непрозрачность html-элементов, а также значения
свойства  color .
Свойство color
 Содержание:
 1. Приоритетные цвета: свойство color
 2. Значения цвета
 2.1. Основные ключевые слова
 2.2. Числовые значения цвета
 2.2.1. Цвета модели RGB
 2.2.2. Цвета модели RGBA
 2.2.3. Ключевое слово transparent
 2.2.4. HSL-цвета
 2.2.5. HSLA-значения цвета
 2.3. Расширенные ключевые слова цвета
 2.4. Ключевое слово currentColor
1. Приоритетные цвета: свойство color
Свойство задаёт цвет шрифта с помощью различных систем цветопередачи.
Свойство описывает цвет текстового содержимого элемента. Кроме того, оно
используется для предоставления потенциального косвенного значения
(currentColor) для любых других свойств, которые принимают значения цвета.

Свойство наследуется.

color

Значения:

цвет Задаётся с помощью значений цвета.

inherit Наследует значение свойства от родительского элемента.

2. Значения цвета
2.1. Основные ключевые слова

Список основных ключевых слов включает в себя следующие значения:

Название HEX RGB Цвет

black #000000 0,0,0

192,192,19
silver #C0C0C0
2
128,128,12
gray #808080
8
255,255,25
white #FFFFFF
5

maroon #800000 128,0,0

red #FF0000 255,0,0

purple #800080 128,0,128

fuchsia #FF00FF 255,0,255

green #008000 0,128,0

lime #00FF00 0,255,0

olive #808000 128,128,0

yellow #FFFF00 255,255,0

navy #000080 0,0,128

blue #0000FF 0,0,255

teal #008080 0,128,128


aqua #00FFFF 0,255,255
Названия цветов не чувствительны к регистру.

Синтаксис

color: teal;

CSS
2.2. Числовые значения цвета
2.2.1. Цвета модели RGB

Формат значения RGB в шестнадцатеричном формате — это знак  # , за которым


сразу следуют три или шесть шестнадцатеричных символов. Трехзначная запись
RGB  #rgb  преобразуется в шестизначную форму  #rrggbb  путем копирования
цифр, а не путем добавления нулей. Например,  #fb0  расширяется до  #ffbb00 .
Это гарантирует, что белый  #ffffff  может быть указан в короткой записи  #fff , и
удаляет любые зависимости от глубины цвета дисплея.
Формат значения RGB в функциональной нотации —  rgb( , за которым следует
разделенный запятыми список из трех числовых значений (либо трех целочисленных
значений, либо трех процентных значений), за которыми следует символ  ) .
Целочисленное значение  255  соответствует  100%  и  F  или  FF  в
шестнадцатеричной записи:
rgb (255,255,255) = rgb (100%, 100%, 100%) = #FFF
Символы пробела допускаются вокруг числовых значений.

Все цвета RGB указываются в цветовом пространстве sRGB. Пользовательские агенты


могут различаться в точности, с которой они представляют эти цвета, но
использование sRGB дает однозначное и объективно измеримое определение того,
каким должен быть цвет.
Значения за пределами диапазона устройства должны быть обрезаны или
отображены в известном диапазоне: значения красного, зеленого и синего
необходимо изменить, чтобы они попадали в диапазон, поддерживаемый
устройством. Некоторые устройства, например принтеры, имеют диапазоны,
отличные от sRGB, поэтому некоторые цвета за пределами диапазона 0..255 sRGB
будут представимы (внутри диапазона устройства) и будут отображаться.

Синтаксис

color: #fb0;
color: #ffbb00;
color: rgb(255,0,0);
color: rgb(100%, 0%, 0%);

CSS
2.2.2. Цвета модели RGBA
Цветовая модель RGB расширена в этой спецификации, чтобы включить  alpha ,
которая управляющая непрозрачностью цвета. В отличие от значений RGB, для
значения RGBA нет шестнадцатеричной записи.
Формат значения RGBA в функциональной нотации —  rgba(  за которым следует
разделенный запятыми список из трех числовых значений (либо трех целочисленных
значений, либо трех процентных значений), за которыми следует значение
непрозрачности, а затем  ) . Целочисленное
значение  255  соответствует  100% ,  rgba (255,255,255,0.8) = rgba
(100%,100%,100%,0.8) . Символы пробела допускаются вокруг числовых значений.
Параметр непрозрачности применяется ко всему объекту. Любые значения за
пределами диапазона от  0.0  (полностью прозрачный) до  1.0  (полностью
непрозрачный) будут ограничены этим диапазоном.
Синтаксис

color: rgba(0,0,255,0.5);
color: rgba(100%, 50%, 0%, 0.1);

CSS
2.2.3. Ключевое слово transparent

Это ключевое слово можно считать сокращением для прозрачного черного


цвета  rgba (0,0,0,0) , которое является его вычисленным значением.
Синтаксис

color: transparent;

CSS
2.2.4. HSL-цвета

Цвета RGB не интуитивно понятны. CSS3 добавляет числовые цвета hue-saturation-


lightness (HSL) в дополнение к числовым цветам RGB. HSL-цвета симметричны свету
и темноте, и преобразование HSL в RGB максимально просто.
Цвета HSL кодируются как тройка (оттенок, насыщенность, яркость). Оттенок
представлен как угол цветного круга (то есть радуга, представленная в круге). Этот
угол обычно измеряется в градусах, так что эта единица измерения неявна в CSS;
синтаксически дается только число. По определению красный = 0 = 360, а остальные
цвета распределены по кругу, поэтому зеленый = 120, синий = 240 и т.д.
Насыщенность и яркость представлены в процентах. 100% — это полное насыщение,
а 0% — это оттенок серого. Яркость 0% — черная, 100% — белая, а 50% — нормальная.

Синтаксис

color: hsl(0, 100%, 50%);


color: hsl(120, 100%, 50%);

CSS
2.2.5. HSLA-значения цвета
Так же, как функциональная нотация  rgb()  имеет альфа-аналог  rgba() ,
функциональная нотация  hsl()  имеет альфа-аналог  hsla() .
Формат значения цвета HSLA в функциональной нотации —  hsla( , за которым
следуют оттенок в градусах, насыщенность и яркость в процентах, и значение
непрозрачности, после которого следует символ  ) . Символы пробела допускаются
вокруг числовых значений.
Синтаксис

color: hsla(240, 100%, 50%, 0.5);


color: hsla(30, 100%, 50%, 0.1);

CSS
2.3. Расширенные ключевые слова цвета

В таблице ниже представлен список цветов, поддерживаемых популярными


браузерами.

Название HEX RGB Цвет


240,248,25
aliceblue #F0F8FF
5
250,235,21
antiquewhite #FAEBD7
5

aqua #00FFFF 0,255,255

127,255,21
aquamarine #7FFFD4
2
240,255,25
azure #F0FFFF
5
245,245,22
beige #F5F5DC
0
255,228,19
bisque #FFE4C4
6

black #000000 0,0,0

blanche - 255,235,20
#FFEBCD
dalmond 5

blue #0000FF 0,0,255

blueviolet #8A2BE2 138,43,226

brown #A52A2A 165,42,42

222,184,13
burlywood #DEB887
5

cadetblue #5F9EA0 95,158,160


chartreuse #7FFF00 127,255,0

chocolate #D2691E 210,105,30

coral #FF7F50 255,127,80

corn - 100,149,23
#6495ED
flowerblue 7

255,248,22
cornsilk #FFF8DC
0

crimson #DC143C 220,20,60

cyan #00FFFF 0,255,255

darkblue #00008B 0,0,139

darkcyan #008B8B 0,139,139

dark goldenrod #B8860B 184,134,11

169,169,16
darkgray #A9A9A9
9

darkgreen #006400 0,100,0

189,183,10
darkkhaki #BDB76B
7

darkmagenta #8B008B 139,0,139

darkolivegreen #556B2F 85,107,47

darkorange #FF8C00 255,140,0

darkorchid #9932CC 153,50,204

darkred #8B0000 139,0,0

233,150,12
darksalmon #E9967A
2
143,188,14
dark seagreen #8FBC8F
3

darkslate blue #483D8B 72,61,139

darkslate gray #2F4F4F 47,79,79

dark turquoise #00CED1 0,206,209

darkviolet #9400D3 148,0,211

deeppink #FF1493 255,20,147

deepsky blue #00BFFF 0,191,255


105,105,10
dimgray #696969
5

dodgerblue #1E90FF 30,144,255

firebrick #B22222 178,34,34

255,250,24
floral white #FFFAF0
0

forest green #228B22 34,139,34

fuchsia #FF00FF 255,0,255

220,220,22
gainsboro #DCDCDC
0
248,248,25
ghostwhite #F8F8FF
5

gold #FFD700 255,215,0

goldenrod #DAA520 218,165,32

128,128,12
gray #808080
8

green #008000 0,128,0

green yellow #ADFF2F 173,255,47

240,255,24
honeydew #F0FFF0
0
255,105,18
hotpink #FF69B4
0

indianred #CD5C5C 205,92,92

indigo #4B0082 75,0,130

255,255,24
ivory #FFFFF0
0
240,230,14
khaki #F0E68C
0
230,230,25
lavender #E6E6FA
0
255,240,24
lavender blush #FFF0F5
5

lawngreen #7CFC00 124,252,0

255,250,20
lemon chiffon #FFFACD
5
173,216,23
lightblue #ADD8E6
0
240,128,12
lightcoral #F08080
8
224,255,25
lightcyan #E0FFFF
5

lightgolden - 250,250,21
#FAFAD2
rodyellow 0

211,211,21
lightgray #D3D3D3
1
144,238,14
lightgreen #90EE90
4
255,182,19
lightpink #FFB6C1
3
255,160,12
lightsalmon #FFA07A
2

light seagreen #20B2AA 32,178,170

135,206,25
light skyblue #87CEFA
0

light - 119,136,15
#778899
slategray 3

lightsteel - 176,196,22
#B0C4DE
blue 2

255,255,22
light yellow #FFFFE0
4
<="" td="" style="transition: all 0.3s ease-in-out
0s; box-sizing: border-box; margin: 0px;
lime #00FF00 0,255,0 padding: 5px 15px; border: 1px solid rgb(230,
230, 230); font-size: 14.4px; line-height: 1.4;
background: lime;">
limegreen #32CD32 50,205,50

250,240,23
linen #FAF0E6
0

magenta #FF00FF 255,0,255

maroon #800000 128,0,0

mediumaqua - 102,205,17
#66CDAA
marine 0

mediumblue #0000CD 0,0,205

medium orchid #BA55D3 186,85,211


147,112,21
medium purple #9370DB
9

medium -
#3CB371 60,179,113
seagreen

medium - 123,104,23
#7B68EE
slateblue 8

medium -
#00FA9A 0,250,154
springgreen

medium -
#48D1CC 72,209,204
turquoise

medium -
#C71585 199,21,133
violetred

midnightblue #191970 25,25,112

245,255,25
mintcream #F5FFFA
0
255,228,22
mistyrose #FFE4E1
5
255,228,18
moccasin #FFE4B5
1
255,222,17
navajo white #FFDEAD
3

navy #000080 0,0,128

253,245,23
oldlace #FDF5E6
0

olive #808000 128,128,0

olivedrab #6B8E23 107,142,35

orange #FFA500 255,165,0

orangered #FF4500 255,69,0

218,112,21
orchid #DA70D6
4
238,232,17
pale goldenrod #EEE8AA
0
152,251,15
palegreen #98FB98
2
175,238,23
pale turquoise #AFEEEE
8
219,112,14
pale violetred #DB7093
7
255,239,21
papayawhip #FFEFD5
3
255,218,18
peachpuff #FFDAB9
5

peru #CD853F 205,133,63

255,192,20
pink #FFC0CB
3
221,160,22
plum #DDA0DD
1
176,224,23
powder blue #B0E0E6
0

purple #800080 128,0,128

red #FF0000 255,0,0

188,143,14
rosybrown #BC8F8F
3

royalblue #4169E1 65,105,225

saddle brown #8B4513 139,69,19

250,128,11
salmon #FA8072
4

sandybrown #F4A460 244,164,96

seagreen #2E8B57 46,139,87

255,245,23
seashell #FFF5EE
8

sienna #A0522D 160,82,45

192,192,19
silver #C0C0C0
2
135,206,23
skyblue #87CEEB
5

slateblue #6A5ACD 106,90,205

112,128,14
slategray #708090
4
255,250,25
snow #FFFAFA
0

spring green #00FF7F 0,255,127

steelblue #4682B4 70,130,180


210,180,14
tan #D2B48C
0

teal #008080 0,128,128

216,191,21
thistle #D8BFD8
6

tomato #FF6347 255,99,71

turquoise #40E0D0 64,224,208

238,130,23
violet #EE82EE
8
245,222,17
wheat #F5DEB3
9
255,255,25
white #FFFFFF
5
245,245,24
whitesmoke #F5F5F5
5

yellow #FFFF00 255,255,0

yellow green #9ACD32 154,205,50


Синтаксис

color: gold;

CSS
2.4. Ключевое слово currentColor

CSS1 и CSS2 определили начальное значение свойства  border-color  как значение


свойства  color , но не определили соответствующее ключевое слово. Это упущение
было распознано SVG, поэтому SVG 1.0 ввел значение  currentColor  для
свойств  fill ,  stroke ,  stop-color ,  flood-color  и  lighting-color . CSS3
расширяет значение цвета, добавляя ключевое слово  currentColor , чтобы
разрешить его использование со всеми свойствами, которые принимают
значение  color . Это упрощает определение этих свойств в CSS3.
Используемое значение ключевого слова  currentColor  — это вычисленное
значение свойства  color . Если ключевое слово установлено в самом
свойстве  color , оно рассматривается как  color: inherit .
Пример

body {color: grey;}


div {border: 1px solid currentColor;}

CSS

2.14. CSS-генераторы
Опубликовано: 21 марта 2014Обновлено: 5 января 202024 Comments

CSS-генераторы и онлайн-сервисы CSS упрощают процесс веб-разработки. С их


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

COLORION — огромная коллекция цветовых палет, в том числе для создания


материального и плоского дизайна.
Color Supply — генератор цветовых схем.

Автопрефиксер онлайн — добавляет нужные вендорные префиксы и удаляет


ненужные в вашем CSS.
Coolors — сервис для подбора цветовых схем для сайта, альтернативных теней,
определение цветов по картинке.

cssFilters — пользовательские фильтры и фильтры как в Инстаграмм для


изображений.
Type Scale — визуальный калькулятор для расчёта размера заголовков.

TRANSPARENT TEXTURES — коллекция прозрачных бесшовных текстур для вашего


сайта.
Image Slider Maker — онлайн-сервис для создания адаптивного слайдера с
картинками.

Tridiv — 3D-редактор для создания объёмных моделей на чистом CSS.


Web Code Tools — генератор кода для создания эффектов CSS, HTML-кода для
различных элементов, карточек для Твиттера и других полезных вещей.

HOW TO CENTER IN CSS — генератор стилей для центрирования (выравнивания)


блока или текста с помощью различных приёмов. Также имеется поддержка
различных версий Internet Explorer.
img2css — инструмент, который преобразует изображения в CSS-код, он выдаёт вам
один div с кодом, который вы можете использовать в своих проектах.

CSS Apple Device Generator — генератор разметки и стилей для устройств Apple. В
поле Device Type можно выбрать тип устройства, с помощью Device Width — задать
ширину, а также выбрать цвет экрана в поле Device Inner color.
Web Colour Data — онлайн-сервис, позволяющий получить цветовую палитру любой
веб-страницы.

The Simpsons in CSS — коллекция любимых персонажей на чистом CSS.


Mobile phone emulator протестирует, как выглядит сайт на экранах мобильных
устройств. Cell phone terminal — поле для выбора типа устройства, размера окна и
ориентации, Website to terminal — поле для ввода url-адреса.
CSS Load — отличная подборка индикаторов загрузки. Предусмотрено
редактирование — можно изменить цвет, размер, скорость вращения, а после
скачать получившийся код. Для переключения на русский язык нажмите значок
флага в верхнем левом углу окна.
Flexplorer — площадка для демонстрации возможностей модели Flexbox. Вы
сможете задать свои параметры для блоков и увидеть пример в действии.

Screenfly — данный сервис поможет протестировать, как будет выглядеть ваш сайт
на экранах устройств различного разрешения. Чтобы воспользоваться сервисом,
нужно ввести url-адрес в строку поиска, для выбора вида девайса воспользуйтесь
верхним меню.
Long shadows — сервис, позволяющий создавать так называемые «длинные тени»
для блоков и для текста.

CSS Lint — веб-приложение, проверяющее код CSS на ошибки. Результаты проверки


выводятся в виде таблицы с указанием строчек ошибок, и пояснением. При
проверке можно использовать разные параметры, определяя ее глубину.
Responsive Grid System — CSS-фреймворк для создания гибкого макета на основе
сетки (grid). Раздел Let’s Go to Work позволяет выбрать и скачать нужную разметку
страницы, используя от 2-х до 12-ти колонок, а калькулятор в разделе Or Make Your
Own поможет задать собственную разметку.

CSS TEXT TO PATH GENERATOR сгенерирует html-код для текста, расположенного по


кривой.
3D Ribbon Generator поможет создать красивые 3D ленточки. Вам нужно выбрать
вариант дизайна, а также задать цвет и размер элементов.

Paletton — онлайн-сервис для подбора цветовой схемы для вашего сайта. Вкладка
COLOR TABLES откроет палитру, а также различные комбинации цветов, а круглые
переключатели под названием сервиса позволят выбрать количество сочетаемых
цветов.
CSS3 generator — онлайн-сервис, который позволяет без труда сгенерировать код
CSS3 для определенных свойств, таких как:
border-radius, box-shadow, text-shadow, RGBA, @font-face, multiple
columns, box resize, box sizing, outline, transition, transform,
gradient . Вам всего лишь нужно выбрать свойство, которое вы хотите
использовать в стилях вашего браузера, задать для него требуемые параметры, а
затем скопировать полученный код в свой проект.

CSS 3.0 Maker — сервис, аналогичный CSS3 generator, присутствует еще одна
интересная возможность — Text Rotation.
CSS Menu Maker — незаменимый сервис для создания панелей навигации на основе
списков как на чистом CSS, так и с использованием jQuery. Помимо основной
разметки предлагает готовые варианты стилей для вертикальных и горизонтальных
панелей навигации.

CSS Portal содержит большую коллекцию CSS-свойств, на сайте вы сможете найти


всевозможные ресурсы и инструменты, которые позволят сделать ваш css-код
идеальным.
Border Image — онлайн-генератор CSS3 свойства border-image, позволяющий
оживить границы блока с помощью картинок.

CSStemplater — генератор HTML+CSS шаблонов. Благодаря этому ресурсу вы


сможете без особого труда создать разметку страницы на основе блочной верстки.
Большой плюс ресурса — вы сможете сделать макет как фиксированной, так и
«резиновой» ширины, при этом не ломая голову над тем, как прижать «футер» к
низу окна браузера. Всем начинающим верстальщикам рекомендуем!
CSS3 Please! — очень удобный сервис для создания кроссбраузерного кода для таких
CSS стилей, как  border-radius, box-shadow, linear-gradient, transition  и
многих других. Задавая значения стилей в редакторе, вы сможете сразу же увидеть
получившийся результат на примере блока, расположенного в окне справа.

Ui LIVETOOLS — уникальная коллекция бесплатных онлайн-приложений для вашего


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

CSS3 Patterns Gallery предлагает вашему вниманию пример виртуозного


использования возможностей CSS3. У вас появится возможность создать сложные
бесшовные фоны для своего сайта. 37 образцов выполнены в различных стилях, и
мы уверены, что вы найдёте образец себе по душе!
CSS3 TEST предназначен для всех поклонников возможностей CSS3. Тест возвращает
поддерживаемые атрибуты вашего браузера и, щелкнув каждое свойство, вы
можете увидеть, есть ли значения, которые им не поддерживаются.

2.15. CSS3 UI
Опубликовано: 19 апреля 2019Обновлено: 31 декабря 20192 Comments
Спецификация CSS3 UI описывает свойства и значения, связанные с
пользовательским интерфейсом.
Свойства для стилизации элементов взаимодействия
с пользователем
 Содержание:
 1. Свойства внешнего контура
 1.1. Краткая запись внешнего контура: свойство outline
 1.2. Толщина внешнего контура: свойство outline-width
 1.3. Узор внешнего контура: свойство outline-style
 1.4. Цвет внешнего контура: свойство outline-color
 1.5. Смещение внешнего контура: свойство outline-offset
 2. Изменение размера блоков: свойство resize
 3. Стилизация курсора: свойство cursor
 4. Цвет каретки вставки: свойство caret-color
1. Свойства внешнего контура
Контуры позволяют выделять активные элементы интерфейса, такие как, кнопки,
поля формы, карты изображений и т.п.

Браузеры часто отображают контуры элементов в состоянии  :focus , поэтому не


рекомендуется делать контур невидимым для таких элементов без альтернативного
механизма выделения.
Контур всегда находится сверху и не влияет на положение или размер блока или
любых других блоков. Поэтому отображение или скрытие контуров не вызывает
перекомпоновку.

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


повторяет закругленные углы элемента.

1.1. Краткая запись внешнего контура: свойство outline

Свойство представляет краткую запись свойств  outline-color   outline-


style   outline-width . Значение по умолчанию  outline: invert none medium .
Свойство не наследуется.
Синтаксис

outline: dotted;
outline: gold solid;
outline: inset thick;
outline: pink solid 2px;
outline: inherit;
outline: initial;

CSS
1.2. Толщина внешнего контура: свойство outline-width

Свойство  outline-width  задает толщину внешнего контура, принимает те же


значения, что и свойство  border-width .
Свойство не наследуется.

outline-width

Значения:

длина Значение задается в единицах длины.

thin/medium/thick Длина, соответствующая этим значениям, не определена, но значения


постоянны по всей веб-странице и  thin ≤ medium ≤ thick . Браузер
может сделать толщину зависимой от среднего размера шрифта. Значение по
умолчанию  medium .

inherit Наследует значение свойства от родительского элемента.

initial Устанавливает значение свойства в значение по умолчанию.

Синтаксис

outline-width: thin;
outline-width: medium;
outline-width: thick;
outline-width: 2px;
outline-width: 0.1em;
outline-width: inherit;

CSS
1.3. Узор внешнего контура: свойство outline-style

Свойство  outline-style  принимает те же значения, что и  border-style , за


исключением значения  hidden .
Свойство не наследуется.

outline-style

Значения:
auto Значение позволяет браузеру отображать стиль контура по умолчанию или более
богатым стилем, например контуром с закругленными краями с полупрозрачными
внешними пикселями, который кажется светящимся. Также, браузеры могут
рассматривать это значение как  solid .

none Отсутствие внешнего контура. Значение по умолчанию.

dotted

dashed

solid

double

groove

ridge

inset

outset

inherit Наследует значение свойства от родительского элемента.

initial Устанавливает значение свойства в значение по умолчанию.

Синтаксис

outline-style: auto;
outline-style: none;
outline-style: dotted;
outline-style: dashed;
outline-style: solid;
outline-style: double;
outline-style: groove;
outline-style: ridge;
outline-style: inset;
outline-style: outset;
outline-style: inherit;
outline-style: initial;

CSS
1.4. Цвет внешнего контура: свойство outline-color

Свойство  outline-color  позволяет установить цвет внешнего контура с помощью


значений цвета и ключевого свойства  invert .
Свойство не наследуется.
outline-color

Значения:

invert Значение выполнит инверсию цвета пикселей на экране. Это обеспечивает


видимость границы фокуса независимо от цвета фона. Цвет линии (обычно черный)
устанавливается автоматически, создавая контраст с основным содержимым. Если
браузер не поддерживает данное значение, тогда значением свойства будет ключевое
слово  currentColor . Значение по умолчанию.

цвет Значение принимает все форматы цвета свойства color.

inherit Наследует значение свойства от родительского элемента.

initial Устанавливает значение свойства в значение по умолчанию.

Синтаксис

outline-color: #f92525;
outline-color: rgb(30,222,121);
outline-color: blue;
outline-color: invert;
outline-color: inherit;
outline-color: initial;

CSS
1.5. Смещение внешнего контура: свойство outline-offset

По умолчанию контур рисуется начиная с края рамки элемента. Свойство  outline-


offset  позволяет сместить контур от края границы на указанную величину.
Свойство не наследуется.

outline-offset

Значения:

длина Задаёт расстояние с помощью единиц длины —  px / em . Отрицательное значение


отображает рамку внутри элемента, положительное — снаружи элемента. Значение
по умолчанию  0 .

inherit Наследует значение этого свойства от родительского элемента.

initial Устанавливает это свойство в значение по умолчанию.

Синтаксис

outline-offset: 3px;
outline-offset: 0.2em;
outline-offset: inherit;
outline-offset: initial;
CSS
2. Изменение размера блоков: свойство resize
Поддержка браузерами

IE: —
Edge: —
Firefox: 5
Chrome: 4
Safari: 4
Opera: 15
iOS Safari: —
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 5
Свойство  resize  позволяет указать, может ли пользователь изменять размер
элемента, и если да, то вдоль какой оси/осей. Свойство применяется к элементам,
чье вычисленное значение  overflow  отличается от  visible .
Если для элемента установлено изменение размеров, в правом нижнем углу
появляется треугольник, с помощью которого элемент можно растягивать в обеих
направлениях. Уменьшение первоначальных размеров элемента не предусмотрено.

Браузер должен позволять пользователю изменять размер элемента без каких-либо


других ограничений, кроме ограничений, накладываемых свойствами  min-
width ,  max-width ,  min-height  и  max-height .
Свойство не наследуется.

resize

Значения:

none Браузер не предоставляет механизм изменения размера элемента пользователем.


Значение по умолчанию.

both Браузер представляет механизм двунаправленного изменения размера, позволяющий


пользователю регулировать как высоту, так и ширину элемента.

horizontal Браузер представляет однонаправленный горизонтальный механизм изменения


размера, позволяющий пользователю регулировать только ширину элемента.

vertical Браузер представляет однонаправленный вертикальный механизм изменения


размера, позволяющий пользователю регулировать только высоту элемента.

inherit Наследует свойство от родительского элемента.

initial Устанавливает это свойство в значение по умолчанию.

Синтаксис
resize: none;
resize: both;
resize: horizontal;
resize: vertical;
resize: block;
resize: inline;
resize: inherit;
resize: initial;

CSS
Пример

ФИГУРА 1. СВОЙСТВО RESIZE


3. Стилизация курсора: свойство cursor
Поддержка браузерами

IE: 9
Edge: 14
Firefox: 4
Chrome: 5
Safari: 5
Opera: 15
iOS Safari: —
UC Browser for Android: —
Chrome for Android: 73
Samsung Internet: —
Свойство  cursor  указывает тип курсора, который будет отображаться для
устройства, когда точка доступа курсора находится в пределах границ элемента.
Браузеры могут игнорировать свойство над собственными элементами управления,
например, полосами прокрутки. Браузеры также могут игнорировать
свойство  cursor  и отображать его по своему выбору, чтобы указать различные
состояния пользовательского интерфейса, например, когда страница не отвечает
или когда пользователь выделяет текст.
Свойство наследуется.

Наведите над ячейками таблицы ниже, чтобы увидеть, как выглядит курсор для
каждого установленного значения.

cursor
Значения:

курсор-изображение

url x y, Браузер извлекает курсор из ресурса, обозначенного URI. Можно устанавливать


несколько значений  url , разделенных между собой запятой, которые должны
сопровождаться одним из ключевых слов, таких как  auto  или  pointer . Если
браузер не может обработать первый курсор в списке курсоров, он должен
попытаться обработать второй и т.д. Если браузер не может обработать любой
пользовательский курсор, он должен использовать ключевое слово курсора в конце
списка. Изображение может быть в формате PNG, SVG или любом другом формате
файла неанимированного изображения, которые поддерживаются в
свойстве  background-image . X и Y — координаты смещения курсора
относительно левого верхнего угла, каждая задается числом. Если значения не
указаны, то используется внутренняя точка доступа, определенная внутри самого
ресурса изображения, в противном случае принимается значение  0 0 .

курсоры общего назначения

auto Браузер определяет курсор для отображения на основе текущего контекста, в


частности:  auto  ведет себя как  text  поверх выбираемого текста или
редактируемых элементов, и  default  в противном случае. Значение по
умолчанию.

default Зависимый от платформы курсор по умолчанию. Часто отображается как стрелка.

none Курсор не отображается для элемента.

курсоры ссылок и статуса

context-menu Указывает, что контекстное меню доступно для объекта под курсором. Часто
отображается как стрелка с небольшим изображением в виде меню рядом с ним.

help Справка доступна для объекта под курсором. Часто отображается как
вопросительный знак или воздушный шар.

pointer Курсор-указатель, указывает на ссылку.

progress Индикатор прогресса. Программа выполняет некоторую обработку, но отличается


от  wait  тем, что пользователь все еще может взаимодействовать с программой.
Часто отображается как вращающийся пляжный мяч или стрелка с часами или
песочные часы.

wait Указывает, что программа занята, и пользователь должен ждать. Часто


отображается как часы или песочные часы.

курсоры выбора

cell Указывает, что ячейка или набор ячеек могут быть выбраны. Часто отображается
как толстый знак плюс с точкой в середине.
crosshair Простое перекрестие (например, короткие отрезки, напоминающие знак  + ). Часто
используется для обозначения режима выбора двумерного растрового
изображения.

text Указывает текст, который может быть выбран. Часто отрисовывается как
вертикальная двутавровая балка.

vertical- Указывает вертикальный текст, который может быть выбран. Часто отображается
горизонтальной двутавровой балкой.
text

Drag&Drop курсоры

alias Указывает, что ярлык для чего-то должен быть создан. Часто отображается как
стрелка с небольшой изогнутой стрелкой рядом с ней.

copy Указывает, что что-то должно быть скопировано. Часто отображается как стрелка с
небольшим знаком плюс рядом с ней.

move Указывает, что что-то должно быть перемещено.

no-drop Указывает, что перетаскиваемый элемент не может быть оставлен в текущей


позиции курсора. Часто отображается как рука или небольшой перечеркнутый
косой линией кружок.

not-allowed Указывает, что запрошенное действие не будет выполнено. Часто отображается как
перечеркнутый косой линией круг.

grab Указывает, что что-то может быть захвачено (перетащено для перемещения). Часто
отображается как обратная сторона ладони.

grabbing Указывает, что что-то захватывается (перетаскивается для перемещения). Часто


отображается как обратная сторона ладони с загнутыми пальцами.

курсоры изменения размеров и прокрутки

e-resize Указывает, что какой-то край блока должен быть перемещен. Например,
курсор  se-resize  используется, когда движение начинается с правой нижней
n-resize
части блока.
ne-resize

nw-resize

s-resize

se-resize

sw-resize

w-resize

ew-resize Отображает курсор двунаправленного изменения размера.

ns-resize
nesw-resize

nwse-resize

col-resize Указывает, что размер элемента/столбца можно изменить по горизонтали. Часто


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

row-resize Указывает, что размер элемента/столбца можно изменить по вертикали. Часто


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

all-scroll Указывает, что что-то можно прокручивать в любом направлении. Часто


отображается как стрелки, указывающие вверх, вниз, влево и вправо с точкой в
середине.

курсоры масштабирования

zoom-in Указывает, что что-то можно увеличивать или уменьшать, и часто визуализировать
как лупа с  +  или  -  в центре для  zoom-in  или  zoom-out  соответственно.
zoom-out

inherit Наследует свойство от родительского элемента.

initial Устанавливает это свойство в значение по умолчанию.

Синтаксис

cursor: pointer;
cursor: auto;
cursor: url(hand.png), url(cursor.png), pointer;
cursor: url(cursor2.png) 2 2, pointer;
cursor: inherit;
cursor: initial;

CSS
4. Цвет каретки вставки: свойство caret-color
Поддержка браузерами

IE: —
Edge: —
Firefox: 53
Chrome: 57
Safari: 11.2
Opera: 44
iOS Safari: 11.4
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 7.2
Символ каретки является видимым индикатором точки вставки в элементе, в
который пользователь вставляет текст (и, возможно, другой контент).
Свойство  caret-color  контролирует цвет этого видимого индикатора.
Свойство наследуется.

caret-color

Значения:

auto Браузеры используют  currentColor . Браузеры также могут автоматически


корректировать цвет каретки, чтобы обеспечить хорошую видимость и
контрастность с окружающим контентом, на основе  currentColor , фона, теней и
т.д. Значение по умолчанию.

цвет Каретка вставки окрашивается указанным цветом.

inherit Наследует свойство от родительского элемента.

initial Устанавливает это свойство в значение по умолчанию.

Синтаксис

caret-color: auto;
caret-color: transparent;
caret-color: currentColor;
caret-color: red;
caret-color: #5729e9;
caret-color: rgb(0, 200, 0);
caret-color: hsla(228, 4%, 24%, 0.8);

CSS
Пример
Этот текст

ФИГУРА 2. СВОЙСТВО CARET-COLOR

2.16. CSS-градиент
Опубликовано: 11 октября 2014Обновлено: 31 декабря 201960 Comments
CSS-градиент представляет собой переходы от одного цвета к другому.
Градиенты создаются с помощью функций  linear-gradient()  и  radial-
gradient() .
Градиентный фон можно устанавливать в свойствах  background ,  background-
image ,  border-image  и  list-style-image .

Как сделать градиент в CSS


 Содержание:
 1. Линейный градиент: linear-gradient()
 2. Радиальный градиент: radial-gradient()
 3. Повтор градиента: repeating-linear-gradient() и repeating-radial-
gradient()
 4. Кроссбраузерный градиент
 5. Комбинация градиента и фонового изображения
Поддержка браузерами

IE: 10.0
Firefox: 16, 3.6 -moz-
Chrome: 26.0, 10.0 -webkit-
Safari: 6.1, 5.1 -webkit-
Opera: 12.1, 11.1 -o-
iOS Safari: 7.1
Opera Mini: —
Android Browser: 4.4, 4.1 -webkit-
Chrome for Android: 44

1. Линейный градиент  linear-gradient()


РИС. 1. ЛИНИЯ ГРАДИЕНТА, НАЧАЛЬНАЯ И КОНЕЧНАЯ ТОЧКИ И УГОЛ
ГРАДИЕНТА
Линейный градиент создается с помощью двух и более цветов, для которых задано
направление, или линия градиента.
Если направление не указано, используется значение по умолчанию — сверху-вниз.
Цвета градиента по умолчанию распределяются равномерно в направлении,
перпендикулярном линии градиента.

background: linear-gradient(угол / сторона или угол наклона с помощью ключевого


слова (пары ключевых слов), первый цвет, второй цвет и т.д.);

CSS
Направление градиента может быть задано двумя способами:
с помощью угла наклона в градусах  deg , значение которого определяет угол
наклона линии внутри элемента.

div {
height: 200px;
background: linear-gradient(45deg, #EECFBA, #C5DDE8);
}

CSS
с помощью ключевых слов  to top ,  to right ,  to bottom ,  to left , которые
соответствуют углу градиента,
равному  0deg ,  90deg ,  180deg  и  270deg  соответственно.

div {
height: 200px;
background: linear-gradient(to right, #F6EFD2, #CEAD78);
}

CSS
Если направление задано парой ключевых слов, например,  to top left , то
начальная точка градиента будет расположена в противоположном направлении, в
данном случае справа внизу.

div {
height: 200px;
background: linear-gradient(to top left, powderblue, pink);
}

CSS
Для неравномерного распределения цветов указывается начальная позиция каждого
цвета через точки остановки градиента, так называемые color stops. Точки
остановки задаются в  % , где  0%  — начальная точка,  100%  — конечная точка,
например:

div {
height: 200px;
background: linear-gradient(to top, #E4AF9D 20%, #E4E4D8 50%, #A19887 80%);
}

CSS
Для чёткого распределения цветных полос каждый последующий цвет нужно
начинать с точки остановки предыдущего цвета:

div {
height: 200px;
background: linear-gradient(to right, #FFDDD6 20%, #FFF9ED 20%, #FFF9ED 80%,
#DBDBDB 80%);
}

CSS
2. Радиальный градиент  radial-gradient()
Радиальный градиент отличается от линейного тем, что цвета выходят из одной
точки (центра градиента) и равномерно распределяются наружу, рисуя форму круга
или эллипса.

background: radial-gradient(форма градиента / размер / позиция центра, первый


цвет, второй цвет и т.д.);

CSS
Форма градиента определяется ключевыми словами  circle  или  ellipse . Если
форма не задана, по умолчанию радиальный градиент принимает форму эллипса.

div {
height: 200px;
background: radial-gradient(white, #FFA9A1);
}

CSS
Позиция центра задаётся с помощью ключевых слов, используемых в
свойстве  background-position , с добавлением приставки  at . Если позиция
центра не задана, используется значение по умолчанию  at center .

div {
height: 200px;
background: radial-gradient(at top, #FEFFFF, #A7CECC);
}

CSS
С помощью пары значений, указанных в единицах длины  % ,  em  или  px , можно
управлять размером эллипсообразного градиента. Первое значение задает ширину
эллипса, второе — высоту.

div {
height: 200px;
background: radial-gradient(40% 50%, #FAECD5, #CAE4D8);
}

CSS
Размер градиента задаётся с помощью ключевых слов. Значение по
умолчанию  farthest-corner  (к дальнему углу).
Значение Описание
Размер градиента рассчитывается из расстояния до любой ближней
closest-side стороны блока для  circle  или до ближних сторон по  X  и
по  У  для  ellipse .

farthest-side Размер рассчитывается из расстояния до дальних сторон.

closest-corner Размер рассчитывается из расстояния до ближних углов.

farthest-corner Размер рассчитывается из расстояния до дальних углов.

div {
height: 200px;
background: radial-gradient(circle farthest-corner at 100px 50px, #FBF2EB,
#352A3B);
}

CSS
С помощью радиального градиента можно создавать реалистичные объёмные
фигуры, такие как мячи, кнопки.

Мяч

div {
width: 200px;
height: 200px;
border-radius: 50%;
margin: 0 auto;
background: radial-gradient(circle at 65% 15%, aqua, darkblue);
}

CSS
Кнопка

<div class="wrap"><div class="button"></div></div>

HTML

.wrap {
height: 200px;
padding: 50px 0;
background: #cccccc;
}
.button {
width: 100px;
height: 100px;
border-radius: 50%;
margin: 0 auto;
background: radial-gradient(farthest-side ellipse at top left, white, #aaaaaa);
box-shadow: 5px 10px 20px rgba(0,0,0,0.3), -5px -10px 20px
rgba(255,255,255,0.5);
}

CSS
Почтовая марка

Используя в градиентах прозрачный цвет, можно создавать вот такие эффекты.

<div class="container">
<div class="wrap">
<img src="https://html5book.ru/wp-content/uploads/2015/10/flowers-by-barbara-
florchik-2.jpg">
</div>
</div>

HTML

.container {
background: #B7D1D8;
padding: 25px;
}
.wrap {
background: radial-gradient(transparent, transparent 4px, white 4px,white);
padding: 10px;
width: 300px;
height: 220px;
background-size: 20px 20px;
background-position: -10px -10px; /*обрезаем узор по краю*/
margin: 0 auto;
}
img {
width: 100%;
}

CSS
3. Повтор градиента
В добавление к линейному и радиальному градиентам существует повтор градиента,
который задается с помощью функций  repeating-linear-
gradient()  и  repeating-radial-gradient()  соответственно. Фон из
повторяющихся градиентов выглядит неаккуратно, поэтому рекомендуется начинать
следующий цвет с точки остановки предыдущего, создавая таким образом полосатые
узоры.

div {
height: 200px;
background: repeating-linear-gradient(45deg, #606dbc, #606dbc 10px, #465298
10px, #465298 20px);
}

CSS

div {
height: 200px;
background: repeating-radial-gradient(circle, #B9ECFE, #B9ECFE 10px, #82DDFF
10px, #82DDFF 20px);
}

CSS
4. Кроссбраузерный градиент
Для корректного отображения градиентов во всех браузерах необходимо добавить
кроссбраузерную запись.

Линейный градиент

-ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0,


startColorstr=#1471da, endColorstr=#1C85FB)"; /* IE 8-9 */
background: -webkit-linear-gradient(left, red, #f06d06); /* Safari 5.1, iOS
5.0-6.1, Chrome 10-25, Android 4.0-4.3 */
background: -moz-linear-gradient(left, red, #f06d06); /* Firefox 3.6-15 */
background: -o-linear-gradient(left, red, #f06d06); /* Opera 11.1-12 */
background: linear-gradient(to right, red, #f06d06); /* Opera 15+, Chrome 25+,
IE 10+, Firefox 16+, Safari 6.1+, iOS 7+, Android 4.4+ */
CSS
Повтор линейного градиента

background: -webkit-repeating-linear-gradient(red, yellow 10%, green 20%); /*


Safari 5.1 - 6.0 */
background: -o-repeating-linear-gradient(red, yellow 10%, green 20%); /* Opera
11.1-12.0 */
background: -moz-repeating-linear-gradient(red, yellow 10%, green 20%); /*
Firefox 3.6-15 */
background: repeating-linear-gradient(red, yellow 10%, green 20%); /*
Стандартный синтаксис */

CSS
Радиальный градиент

background: -webkit-radial-gradient(red, yellow, green); /* Safari 5.1-6.0 */


background: -o-radial-gradient(red, yellow, green); /* Opera 11.6-12.0 */
background: -moz-radial-gradient(red, yellow, green); /* Firefox 3.6-15 */
background: radial-gradient(red, yellow, green); /* Стандартный синтаксис */
background: -webkit-radial-gradient(60% 55%, farthest-side, red, yellow,
black); /* Safari 5.1-6.0 */
background: -o-radial-gradient(60% 55%, farthest-side, red, yellow, black); /*
Opera 11.6-12.0 */
background: -moz-radial-gradient(60% 55%, farthest-side, red, yellow, black);
/* Firefox 3.6-15 */
background: radial-gradient(farthest-side at 60% 55%, red, yellow, black); /*
Стандартный синтаксис */

CSS
Повтор радиального градиента

background: -webkit-repeating-radial-gradient(red, yellow 10%, green 15%); /*


Safari 5.1-6.0 */
background: -o-repeating-radial-gradient(red, yellow 10%, green 15%); /* Opera
11.6-12.0 */
background: -moz-repeating-radial-gradient(red, yellow 10%, green 15%); /*
Firefox 3.6-15 */
background: repeating-radial-gradient(red, yellow 10%, green 15%); /*
Стандартный синтаксис */

CSS
5. Комбинация градиента и фонового изображения
За счёт комбинации градиента и изображения можно создавать интересные
эффекты. Для градиента нужно использовать полупрозрачные цвета, чтобы картинка
оставалась видимой.
div {
height: 453px;
background: linear-gradient(45deg, rgba(103, 0, 31, .8), rgba(34, 101, 163, .
5)), url(https://html5book.ru/wp-content/uploads/2016/12/photo-8.jpg);
background-size: cover;
}

CSS

2.17. CSS3-рамка
Опубликовано: 13 ноября 2014Обновлено: 19 января 202160 Comments
CSS3-рамка дополняет возможности форматирования границ элементов с помощью
свойств, позволяющих закруглить углы элемента, а также
использовать изображения для оформления границ элемента.
Закруглённые углы и рамки-изображения
 Содержание:
 1. Закругление углов с помощью border-radius
 2. Рамки-изображения border-image
 2.1. Ширина рамки-изображения border-image-width
 2.2. Ресурс рамки-изображения border-image-source
 2.3. Элементы рамки-изображения border-image-slice
 2.4. Повтор рамки-изображения border-image-repeat
 2.5. Смещение рамки-изображения border-image-outset
 3. Градиентная рамка
1. Закругление углов с помощью border-radius
Поддержка браузерами

IE: 9.0
Firefox: 4.0
Chrome: 4.0
Safari: 5.0, 3.1 -webkit-
Opera: 10.5
iOS Safari: 7.1
Opera Mini: —
Android Browser: 4.1
Chrome for Android: 44

Свойство позволяет закруглить углы строчных и блочных элементов. Кривая для


каждого угла определяется с помощью одного или двух радиусов, определяющих
его форму — круга или эллипса. Радиус распространяется на весь фон, даже если
элемент не имеет границ, точное положение секущей определяется с помощью
свойства  background-clip .
Свойство  border-radius  позволяет закруглить все углы одновременно, а с
помощью свойств  border-top-left-radius ,  border-top-right-
radius ,  border-bottom-right-radius ,  border-bottom-left-radius  можно
закруглить каждый угол отдельно.
Если задать два значения для свойства  border-radius , то первое значение
закруглит верхний левый и нижний правый угол, а второе — верхний
правый и нижний левый.
Значения, заданные через  / , определяют горизонтальные и вертикальные
радиусы. Свойство не наследуется.
border-radius
(border-top-left-radius, border-top-right-radius, border-bottom-right-radius, border-bottom-left-radius)

Значения:

длина Позволяет закруглить углы блока с помощью значений единиц длины —  px ,  em .

% Значения, закругляющие углы, задаются в процентах от длины и ширины сторон


элемента.

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

Варианты

div {width: 100px; height: 100px; border: 5px solid;}


.r1 {border-radius: 0 0 20px 20px;}
.r2 {border-radius: 0 10px 20px;}
.r3 {border-radius: 10px 20px;}
.r4 {border-radius: 10px/20px;}
.r5 {border-radius: 5px 10px 15px 30px/30px 15px 10px 5px;}
.r6 {border-radius: 10px 20px 30px 40px/30px;}
.r7 {border-radius: 50%;}
.r8 {border-top: none; border-bottom: none; border-radius: 30px/90px;}
.r9 {border-bottom-left-radius: 100px;}
.r10 {border-radius: 0 100%;}
.r11 {border-radius: 0 50% 50% 50%;}
.r12 {border-top-left-radius: 100% 20px; border-bottom-right-radius: 100%
20px;}

CSS

РИС. 1. ПРИМЕРЫ РАЗЛИЧНЫХ ВАРИАНТОВ ЗАКРУГЛЕНИЯ УГЛОВ БЛОКА


2. Рамки-изображения border-image
Поддержка браузерами

IE: 11.0
Firefox: 15.0, 3.5 -moz-
Chrome: 16.0, 7.0 -webkit-
Safari: 6.0, 3.0 -webkit-
Opera: 15.0, 11.0 -o-
iOS Safari: 7.1
Opera Mini: 8 -o-
Android Browser: 4.4, 4.1 -webkit-
Chrome for Android: 42
Свойство позволяет устанавливать изображение в качестве рамки элемента.
Основное требование, предъявляемое к изображению — оно должно быть
симметричным.

border-image

Значения:

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


краткой записью свойств  border-image-source ,  border-image-
slice ,  border-image-width ,  border-image-outset  и  border-image-
repeat . Значения свойств умолчанию:  none 100% 1 0 stretch .

initial Устанавливает это свойство в значение по умолчанию.

inherit Наследует значение этого свойства от родительского элемента.

Синтаксис

/* border-image-source и border-image-slice */
border: 10px solid transparent;
border-image: url(border_round.png) 30;

/* border-image-source и border-image-slice и border-image-repeat */


border: 10px solid transparent;
border-image: url(border_round.png) 30 space;

/* border-image-source и border-image-slice / border-image-width */


border-image: repeating-linear-gradient(45deg, #A7CECC, #A7CECC 10px,
transparent 10px, transparent 20px, #F8463F 20px, #F8463F 30px,transparent
30px, transparent 40px) 20 / 20px;

/* border-image-source и border-image-slice / border-image-width / border-


image-outset и border-image-repeat */
border-image: linear-gradient(to right, salmon 0%, purple 100%) 10 / 10px /
20px space;
CSS

При помощи такого простого изображения можно получить вот такие


рамки для элемента.

/* Пример 1 */
div {
width: 260px; height: 100px;
border-style: solid;
border-image-width: 15px;
border-image-source: url(border_round.png);
border-image-slice: 30;
border-image-repeat: stretch;
}
/* Пример 2 */
div {
width: 260px; height: 100px;
border-style: solid;
border-image-width: 15px;
border-image-source: url(border_round.png);
border-image-slice: 30;
border-image-repeat: round;
}

CSS

РИС. 2. ПРИМЕР ОФОРМЛЕНИЯ ГРАНИЦ БЛОКА С


ПОМОЩЬЮ ИЗОБРАЖЕНИЯ
Cрезы A — B — C — D образуют углы рамки, а часть рисунка, расположенная между
ними, заполняет оставшееся пространство рамки в соответствии с заданным
значением свойства  border-image-repeat . Размер угловой части (в данном
примере это число  30 ), задается с помощью значения свойства  border-image-
slice .
2.1. Ширина рамки-изображения border-image-width
Свойство задаёт ширину изображения для границы элемента. Если ширина не
задана, то по умолчанию она равна  1 .

border-image-width

Значения:

длина Устанавливает ширину рамки в единицах длины —  px / em . Можно задавать от


одной до четырех значений одновременно. Если задано одно значение, то ширина
всех сторон рамки одинакова, два значения задают ширину верхней-нижней и
правой-левой и т.д.

число Числовое значение, на которое умножается значение  border-width .

% Ширина рамки элемента вычисляется относительно размера изображения.


Горизонтальные относительно ширины, вертикальные — относительно высоты.

auto Соответствует значению  border-image-slice .

initial Устанавливает это свойство в значение по умолчанию.

inherit Наследует значение этого свойства от родительского элемента.

Синтаксис

div {border-image-width: 30px;}

CSS

РИС. 3. ПРИМЕР ЗАДАНИЯ ШИРИНЫ РАМКИ-ИЗОБРАЖЕНИЯ С ПОМОЩЬЮ РАЗЛИЧНЫХ


ТИПОВ ЗНАЧЕНИЙ
2.2. Ресурс рамки-изображения border-image-source

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


оформления границ блока.

border-image-source

Значения:

none Отсутствие изображения для рамки. Значение по умолчанию.

url(url) Относительный или абсолютный путь к изображению.

initial Устанавливает это свойство в значение по умолчанию.


inherit Наследует значение этого свойства от родительского элемента.

Синтаксис

div {border-image-source: url(border.png);}

CSS
2.3. Элементы рамки-изображения border-image-slice

Свойство определяет размер частей изображения, используемых для оформления


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

border-image-slice

Значения:

число Размер частей рамки можно задавать с помощь одного, двух, трех или четырех
значений.
Одно значение устанавливает границы одинакового размера для каждой стороны
элемента.
Два значения: первое определяет размер верхней и нижней границы, второе —
правой и левой.
Три значения: первое определяет размер верхней границы, второе — правой и левой,
а третье — нижней границы.
Четыре значения: определяет размеры верхней, правой, нижней и левой границы.
Числовое значение представляет количество  px .

% Размеры границ рассчитываются относительно размера изображения.


Горизонтальные относительно ширины, вертикальные — относительно высоты.

fill Значение указывается вместе с числом или процентным значением. Если оно задано,
изображение не обрезается внутренним краем рамки, а заполняет также область
внутри рамки.

initial Устанавливает это свойство в значение по умолчанию.

inherit Наследует значение этого свойства от родительского элемента.

Синтаксис

div {border-image-slice: 50 20;}

CSS
РИС. 4. ПРИМЕР ЗАДАНИЯ СРЕЗОВ РАМКИ-ИЗОБРАЖЕНИЯ
2.4. Повтор рамки-изображения border-image-repeat

Свойство управляет заполнением фоновым изображением пространства между


углами рамки. Можно задавать как с помощью одного значения, так и с помощью
пары значений.

border-image-repeat

Значения:

stretch Растягивает изображение на все пространство. Значение по умолчанию.

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

round Наиболее точно заполняет промежуток между углами рамки, дублируя


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

space Действует аналогично с  repeat .

initial Устанавливает это свойство в значение по умолчанию.

inherit Наследует значение этого свойства от родительского элемента.

Синтаксис

div {border-image-repeat: repeat;}

CSS
РИС. 5. ПРИМЕР ПОВТОРА ЦЕНТРАЛЬНОЙ ЧАСТИ РАМКИ-ИЗОБРАЖЕНИЯ С ПОМОЩЬЮ
РАЗЛИЧНЫХ ТИПОВ ЗНАЧЕНИЙ
2.5. Смещение рамки-изображения border-image-outset

Свойство позволяет переместить изображение-рамку за пределы границ элемента на


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

border-image-outset

Значения:

длина Отступ рамки-изображения задается с помощью любого положительного числа,


указанного в  px  или  em .

число Числовое значение, на которое умножается  border-width .

initial Устанавливает это свойство в значение по умолчанию.

inherit Наследует значение этого свойства от родительского элемента.

Синтаксис

div {border-image-outset: 10px;}

CSS

РИС. 6. ПРИМЕР СМЕЩЕНИЯ РАМКИ-ИЗОБРАЖЕНИЯ С ПОМОЩЬЮ РАЗЛИЧНЫХ ТИПОВ


ЗНАЧЕНИЙ
3. Градиентная рамка
Значением  border-image  может выступать не только изображение, но и
градиентная заливка.
Полупрозрачная рамка
В качестве одного из цветов выступает  transparent . Таким способом можно
задавать границы сразу для всех сторон элемента или по отдельности для каждой
стороны. Толщина рамки регулируется свойством  border-width .

<div class="wrap"><div class="gradient"></div></div>

HTML

* {box-sizing:border-box;}
.wrap {
height: 200px;
padding: 25px;
background: #00E4F6;
}
.gradient {
height: 150px;
width: 50%;
margin: 0 auto;
border: 10px solid transparent;
border-image: linear-gradient(to right, transparent 0%, #ADF2F7 100%);
border-image-slice: 1;
}

CSS
Почтовый конверт

<div class="wrap"><div class="gradient"></div></div>

HTML

* {box-sizing:border-box;}
.wrap {
height: 200px;
padding: 25px;
}
.gradient {
height: 150px;
width: 50%;
margin: 0 auto;
border: 10px solid transparent;
border-image: 10 repeating-linear-gradient(45deg, #A7CECC, #A7CECC 10px,
transparent 10px, transparent 20px, #F8463F 20px, #F8463F 30px,transparent
30px, transparent 40px);
}

CSS

2.18. CSS3-оформление текста


Опубликовано: 15 ноября 2014Обновлено: 31 декабря 201915 Comments

Модуль содержит возможности CSS, относящиеся к оформлению текста, такие как


подчеркивание, тени текста, а также акценты в тексте восточно-азиатских языков.

Свойства для оформления текста


 Содержание:
 1. Оформление линии: подчеркивание, обводка и зачеркивание
 1.1. Вид линии оформления: свойство text-decoration-line
 1.2. Стиль линии оформления: свойство text-decoration-style
 1.3. Цвет линии оформления: свойство text-decoration-color
 1.4. Краткая запись свойств линии оформления: свойство text-decoration
 1.5. Расположение линии оформления: свойство text-underline-position
 2. Тень текста: свойство text-shadow
 2.1. Примеры тени текста
 2.2. Эффекты тени при наведении
 2.3. Анимация тени
1. Оформление линии: подчеркивание, обводка и зачеркивание
Подчеркивание, обводка и перечеркивающие линии отображаются только для
незамещаемых блоков уровня строки ( display: inline ) и отображаются по всему
тексту, включая пробелы между символами и словами, за исключением отступов в
начале и конце строки.
Браузеры могут прерывать подчеркивание и обводку в том месте, где линия
пересекает глиф, отображаясь на некотором расстоянии по обе стороны от контура
глифа. Когда браузер прерывает подчеркивание или обводку на границах глифа,
форма линии на этой границе должна соответствовать форме глифа. Однако,
спецификация не предписывает конкретный метод для «следования форме» глифа,
оставляя это на усмотрение браузеру.

РИС.
1. ПРЕРЫВАНИЕ ЛИНИИ ПОДЧЕРКИВАНИЯ
1.1. Вид линии оформления: свойство text-decoration-line

Поддержка браузерами

IE: —
Edge: —
Firefox: 36, 35 -moz-
Chrome: 57
Safari: 12.1, 7.1 -webkit-
Opera: 44
iOS Safari: 8 -webkit-
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 7.2
Свойство  text-decoration-line  определяет, какой тип линии, если таковые
имеются, добавляется к элементу.
Свойство не наследуется.

text-decoration-line

Значения:

none Ни оформляет, ни запрещает оформление текста. Значение по умолчанию.

underline Подчёркивает каждую строку текста.

overline Каждая строка текста имеет линию над ней (то есть на противоположной стороне от
подчеркивания).
line-through Добавляет линию через середину каждой строки текста.

inherit Наследует значение свойства от родительского элемента.

initial Устанавливает значение свойства в значение по умолчанию.

Синтаксис

text-decoration-line: none;
text-decoration-line: underline;
text-decoration-line: overline;
text-decoration-line: line-through;
text-decoration-line: blink;
text-decoration-line: underline overline;
text-decoration-line: overline underline line-through;
text-decoration-line: inherit;
text-decoration-line: initial;

CSS
1.2. Стиль линии оформления: свойство text-decoration-style

Поддержка браузерами

IE: —
Edge: —
Firefox: 36, 35 -moz-
Chrome: 57
Safari: 12.1, 7.1 -webkit-
Opera: 44
iOS Safari: 8 -webkit-
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 7.2
Свойство  text-decoration-style  определяет стиль линий, нарисованных для
оформления текста, указанного в элементе. Значения имеют то же значение, что и
для свойства  border-style .
Свойство не наследуется.

text-decoration-style

Значения:

solid Добавляет отрезок простой линии. Значение по умолчанию.

double Две параллельные сплошные линии с небольшим промежутком между ними.

dotted Последовательность круглых точек.


dashed Последовательность прямоугольных штрихов.

wavy Указывает на волнистую линию.

inherit Наследует значение свойства от родительского элемента.

initial Устанавливает значение свойства в значение по умолчанию.

Синтаксис

text-decoration-style: solid;
text-decoration-style: double;
text-decoration-style: dotted;
text-decoration-style: dashed;
text-decoration-style: wavy;
text-decoration-style: inherit;
text-decoration-style: initial;

CSS
1.3. Цвет линии оформления: свойство text-decoration-color

Поддержка браузерами

IE: —
Edge: —
Firefox: 36, 35 -moz-
Chrome: 57
Safari: 12.1, 7.1 -webkit-
Opera: 44
iOS Safari: 8 -webkit-
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 7.2
Свойство  text-decoration-color  определяет цвет линии оформления текста,
установленный для элемента с  text-decoration-line .
Свойство не наследуется.

Значения:

цвет Значение принимает все форматы цвета свойства color. Значение по


умолчанию  currentColor .

inherit Наследует значение свойства от родительского элемента.

initial Устанавливает значение свойства в значение по умолчанию.

Синтаксис
text-decoration-color: currentColor;
text-decoration-color: salmon;
text-decoration-color: #00ff00;
text-decoration-color: rgba(255, 128, 128, 0.5);
text-decoration-color: transparent;
text-decoration-color: inherit;
text-decoration-color: initial;

CSS
1.4. Краткая запись свойств линии оформления: свойство text-decoration

Поддержка браузерами

IE: —
Edge: —
Firefox: 36, 35 -moz-
Chrome: 57
Safari: 12.1, 7.1 -webkit-
Opera: 44
iOS Safari: 8 -webkit-
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 7.2
Свойство  text-decoration  является краткой формой записи свойств  text-
decoration-line   text-decoration-style   text-decoration-color  в одном
объявлении. Пропущенные значения устанавливаются на их начальные значения.
Значение по умолчанию  text-decoration: none solid currentColor; .
Свойство не наследуется. Тем не менее, стиль всех линий оформления текста
должен быть одинаковый для одного элемента.
1.5. Расположение линии оформления: свойство text-underline-position

Поддержка браузерами

IE: —
Edge: 12
Firefox: —
Chrome: 71
Safari: —
Opera: —
iOS Safari: —
UC Browser for Android: ?
Chrome for Android: 71
Samsung Internet: —
Свойство  text-underline-position  устанавливает положение линии
подчеркивания, указанного в элементе.
Свойство наследуется.

Значения:

auto Браузер может использовать любой алгоритм для определения позиции


подчеркивания, тем не менее линия должна быть размещена на или под базовой
линией текста. Значение по умолчанию.

under Подчеркивание расположено под текстовым содержимым элемента. В этом случае


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

left В вертикальных типографских режимах подчеркивание выравнивается по левому


краю текста. Тем не менее, это значение интерпретируется как  under .

right В вертикальных типографских режимах подчеркивание выравнивается по правому


краю текста. Тем не менее, это значение интерпретируется как  under .

inherit Наследует значение свойства от родительского элемента.

initial Устанавливает значение свойства в значение по умолчанию.

Синтаксис

text-underline-position: auto;
text-underline-position: under;
text-underline-position: left;
text-underline-position: right;
text-underline-position: under left;
text-underline-position: under right;
text-underline-position: inherit;
text-underline-position: initial;

CSS

РИС. 2. ПОДЧЕРКИВАНИЕ ТЕКСТА С ОБЕИХ СТОРОН В ВЕРТИКАЛЬНЫХ


ТИПОГРАФСКИХ РЕЖИМАХ С ПОМОЩЬЮ ЗНАЧЕНИЙ LEFT И RIGHT
2. Тень текста: свойство text-shadow
Поддержка браузерами
IE: 10
Edge: 12
Firefox: 3.5
Chrome: 4
Safari: 4
Opera: 10
iOS Safari: 3.2
UC Browser for Android: 11.8
Chrome for Android: 73
Samsung Internet: 4
Свойство  text-shadow  используется для добавления тени к тексту. Тень текста —
интересный инструмент, который позволяет создавать удивительные эффекты. Тени
могут быть однослойными или многослойными, размытыми, цветными или
полупрозрачными. Задавая тень для элемента, можно указывать только одно
значение длины и цвет, таким образом создавая цветную копию отдельного символа
или слова. Также, с помощью тени можно сделать текст более читаемым, если
контраст между цветом текста и фоном невелик.
Каждая тень применяется как к самому тексту, так и к элементам его оформления
(свойство  text-decoration ). Одновременно можно задавать несколько теней,
указывая их через запятую. Тени накладываются друг на друга, но не перекрывают
сам текст. Первая тень всегда расположена сверху над остальными тенями.
Свойство наследуется.
Каждая тень определяется двумя или тремя значениями длины и необязательным
цветом. Допустимы длины, равные  0 .
Свойство не наследуется.

РИС. 3. СИНТАКСИС СВОЙСТВА TEXT-SHADOW


text-shadow

Значения:
x-offset Задает горизонтальное смещение тени. Положительное значение рисует тень,
смещенную вправо от текста, отрицательная длина — влево.

y-offset Задает вертикальное смещение тени. Положительное значение смещает тень вниз,
отрицательное — вверх.

blur Задает радиус размытия. Отрицательные значения не допускаются. Если значение


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

цвет Задает цвет тени. Если цвет отсутствует, используемый цвет берется из


свойства  color .

none Значение по умолчанию, означает отсутствие тени текста. Убирает тень элемента из
группы элементов с заданным свойством.

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

В отличие от  box-shadow , текстовые тени не обрезаются и могут отображаться,


если текст частично прозрачен. Как и  box-shadow , текстовые тени не влияют на
макет и не вызывают прокрутку или увеличение размера прокручиваемой области.
Синтаксис

text-shadow: 2px 2px 4px pink;


text-shadow: #fc0 1px 0 10px;
text-shadow: 5px 5px #4D4644;
text-shadow: blue 2px 5px;
text-shadow: 5px 10px;
text-shadow: inherit;
text-shadow: initial;

CSS
2.1. Примеры тени текста

Плакатная тень

Тень текста
.text-shadow-1 {
background: #77F7DE;
color: white;
text-shadow: -2px -2px 0 #4D4644, 2px -2px 0 #4D4644, -2px 2px 0 #4D4644, 2px
2px 0 #4D4644, 4px 4px 0 white, 5px 5px 0 white, 6px 6px 0 white;
letter-spacing: 0.1em;
}
CSS
3D тень

Тень текста
.text-shadow-2 {
background: linear-gradient(-45deg, #FEE864, #F5965E);
color: #f4f4f4;
text-shadow: -1px -1px white, 1px 1px gray, 2px 2px #7a7a7a, 3px 3px #757575,
4px 4px #707070, 5px 5px #6b6b6b, 6px 6px #666666, 7px 7px #616161, 8px 8px
#5c5c5c, 9px 9px #575757, 10px 10px #525252, 11px 11px #4d4d4d, 18px 18px 30px
rgba(0, 0, 0, .4), 18px 18px 10px rgba(0, 0, 0, .4);
}

CSS
Тень-текст

Тень текста
.text-shadow-3 {
background: #FFE6DB;
color: #FFE6DB;
letter-spacing: .1em;
text-shadow: 3px 0 rgba(250, 111, 142, .5), 6px 0 rgba(250, 111, 142, .4),
9px 0 rgba(250, 111, 142, .3), 12px 0 rgba(250, 111, 142, .2), 15px 0 rgba(250,
111, 142, .1);
}

CSS
Ретро-тень

Тень текста
.text-shadow-4 {
color: #FB631E;
letter-spacing: .1em;
text-shadow: 4px 4px white, 6px 6px #D7CC88;
}
CSS
Многослойная тень

Тень текста
.text-shadow-5 {
background: #f1f1f1;
color: #fcc105;
letter-spacing: .1em;
text-shadow: 4px 4px #ff981d, 7px 7px rgba(200, 120, 22, .2);
}

CSS
Прозрачная тень

Тень текста
.text-shadow-6 {
color: transparent;
text-shadow: 4px -4px rgba(157, 217, 227, .7), -2px -2px rgba(159, 141,
105, .7), 0 2px rgba(254, 216, 21, .7);
}

CSS
Тень-зебра

Тень текста
.text-shadow-7 {
background: #E02A91;
color: white;
text-shadow: 2px 2px black, 4px 4px white, 6px 6px black, 8px 8px white, 10px
10px black, 12px 12px white, 14px 14px black, 16px 16px white, 18px 18px black,
20px 20px white, 22px 22px black, 24px 24px white, 26px 26px black;
}

CSS
Неоновая тень
Тень текста
.text-shadow-8 {
background: black;
color: white;
text-shadow: 0 0 5px white, 0 0 10px white, 0 0 15px white, 0 0 20px crimson,
0 0 35px crimson, 0 0 40px crimson, 0 0 50px crimson, 0 0 75px crimson;
}

CSS
Тень-обводка

Тень текста
.text-shadow-9 {
color: white;
text-shadow: 1px 1px #732372, 1px -1px #732372, -1px 1px #732372, -1px -1px
#732372, 3px 3px 6px rgba(0,0,0,.5);
}

CSS
Стиль LETTERPRESS

Тень текста
.text-shadow-10 {
background: #F9C941;
color: #F9C941;
letter-spacing: 2px;
text-shadow: 1px 1px #F3E7CF, -1px -1px #56433D;
}

CSS
Стиль ТВИТТЕР

Тень текста
.text-shadow-11 {
color: #3CF;
text-shadow: -1px 0 1px white, 0 -1px 1px white, 0 1px 1px white, 1px 0 1px
white, 0 0 8px white, 0 0 8px white, 0 0 8px white, 2px 2px 3px black;
}

CSS
Тень с обводкой

Тень текста
.text-shadow-12 {
color:#E34C38;
text-shadow: 1px 1px white, 2px 2px white, -1px -1px white, -2px -2px white,
-1px 1px white, 1px -1px white, -2px 2px white, 2px -2px white, -3px -3px 4px
rgba(0,0,0,.3), -3px 3px 4px rgba(0,0,0,.3), 3px 3px 4px rgba(0,0,0,.3), 3px
-3px 4px rgba(0,0,0,.3);
}

CSS
2.2. Эффекты тени при наведении

2.3. Анимация тени


По материалам CSS Text Decoration Module Level 3

2.19. CSS3-тень блока


Опубликовано: 9 ноября 2016Обновлено: 31 декабря 201913 Comments

Свойство  box-shadow  добавляет элементу одну или более теней. Тень


представляет собой копию элемента, смещенную на указанное расстояние. Тени
бывают внешние или внутренние, размытые или плоские, они могут следовать
контурам блоков со скругленными углами. С помощью ключевого
слова  inset  создаются тени внутри элемента, делая элемент визуально объёмным
или вдавленным.
Как сделать тень блока с помощью свойства box-
shadow
 Содержание:
 1. Синтаксис свойства box-shadow
 2. Примеры тени для блока
 3. Эффекты для тени при наведении
 4. Анимация тени
Поддержка браузерами

IE: 9.0
Edge: 12.0
Firefox: 4.0, 3.5 -moz-
Chrome: 10.0, 4.0 -webkit-
Safari: 5.1, 3.1 -webkit-
Opera: 11.5
iOS Safari: 5.1, 3.1 -webkit-
Android Browser: 4.0, 2.1 -webkit-
1. Синтаксис свойства box-shadow
Свойство  box-shadow  прикрепляет одну или несколько теней к блоку. Свойство
принимает либо значение  none , которое указывает на отсутствие теней, либо
список теней через запятую, упорядоченный от начала к концу.
Каждая тень является отдельной тенью, представленной от 2 до 4-х значений
длины, необязательным цветом и необязательным ключевым словом  inset .
Допустимые длины  0 ; опущенные цвета по умолчанию равны значению
свойства  color .
Свойство не наследуется.
РИС. 1. СИНТАКСИС СВОЙСТВА BOX-SHADOW
box-shadow

Значения:

x-offset Задает горизонтальное смещение тени. Положительное значение рисует тень,


смещенную вправо от текста, отрицательная длина — влево.

y-offset Задает вертикальное смещение тени. Положительное значение смещает тень вниз,
отрицательное — вверх.

blur Задает радиус размытия. Отрицательные значения не допускаются. Если значение


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

растяжение Задает расстояние, на которое тень увеличивается. Положительные значения


заставляют тень расширяться во всех направлениях на указанный радиус.
Отрицательные значения заставляют тень сжиматься. Для внутренних теней
расширение тени означает сжатие формы периметра тени.

цвет Задает цвет тени. Если цвет отсутствует, используемый цвет берется из свойства


color. Для Safari цвет тени указывать обязательно.

inset Изменяет отбрасываемую тень блока с внешней тени на внутреннюю.

none Значение по умолчанию, означает отсутствие тени.

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

Эффекты тени применяются следующим образом: первая тень находится сверху, а


остальные — сзади. Тени не влияют на компоновку и могут перекрывать другие
элементы или их тени. С точки зрения контекстов укладки и порядка рисования
внешние тени элемента рисуются непосредственно под фоном этого элемента, а
внутренние тени элемента рисуются непосредственно над фоном этого элемента
(ниже  border  и  border-image , если таковые имеются).
Если элемент имеет несколько ящиков, все они получают тени, но тени рисуются
только там, где также будут нарисованы границы; см. box-decoration-break.

Тени не вызывают прокрутку или не увеличивают размер прокручиваемой области.

2. Примеры тени для блока


2.1. Внутренняя тень

<p class="example-shadow-1"><span></span></p>

HTML

.example-shadow-1 {
background: #e6e3df;
text-align: center;
}
.example-shadow-1 span {
margin: 50px;
height: 100px;
width: 200px;
display: inline-block;
box-shadow: inset 2px 2px 5px rgba(154, 147, 140, 0.5), 1px 1px 5px rgba(255,
255, 255, 1);
}

CSS
2.2. Плоская тень с одной стороны

flat
<p class="example-shadow-2"><a href="#btn">flat</a></p>

HTML

.example-shadow-2 {
background: beige;
text-align: center;
}
.example-shadow-2 a {
display: inline-block;
border-radius: 5px;
padding: 15px 35px;
font-size: 22px;
text-decoration: none;
margin: 20px;
color: white;
background: #55acee;
box-shadow: 0 5px 0 #3C93D5;
transition: .3s;
}
.example-shadow-2 a:hover {
background: #6FC6FF;
}

CSS
2.3. Тень в стиле «материальный дизайн»

<p class="example-shadow-3"><span></span></p>

HTML

.example-shadow-3 {
background: #e8e8e8;
text-align: center;
}
.example-shadow-3 span {
background: white;
display: inline-block;
width: 200px;
height: 100px;
margin: 50px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}

CSS
3. Эффекты для тени при наведении
4. Анимация тени
По материалам CSS Backgrounds and Borders Module Level 3

2.20. CSS3-переходы
Опубликовано: 4 января 2015Обновлено: 31 декабря 201975 Comments
CSS3-переходы позволяют анимировать исходное значение CSS-свойства на новое
значение с течением времени, управляя скоростью смены значений свойств.
Большинство свойств меняют свои значения за 16 миллисекунд, поэтому
рекомендуемое время стандартного перехода —  200ms .
Смена свойств происходит при наступлении определенного события, которое
описывается соответствующим псевдоклассом. Чаще всего используется
псевдокласс  :hover . Данный псевдокласс не работает на мобильных устройствах,
таких как iPhone или Android. Универсальным решением, работающим в настольных
и мобильных браузерах, будет обработка событий с помощью JavaScript (например,
переключение классов при клике).
Переходы применяются ко всем элементам, а также к
псевдоэлементам  :before  и  :after . Для задания всех свойств перехода обычно
используют краткую запись свойства  transition .
CSS3-переходы могут применяться не ко всем свойствам и их значениям. Подробный
перечень вы найдёте на этой странице.
Создание плавных изменений свойств элементов
 Содержание:
 1. Название свойства transition-property
 2. Продолжительность перехода  transition-duration
 3. Функция перехода transition-timing-function
 4. Задержка перехода transition-delay
 5. Краткая запись перехода  transition
 6. Плавный переход нескольких свойств
 7. Примеры переходов для различных свойств
Поддержка браузерами

IE: 10.0
Firefox: 16.0, 4.0 -moz-
Chrome: 26.0, 4.0 -webkit-
Safari: 6.1, 3.1 -webkit-
Opera: 12.1, 11.6 -o-
iOS Safari: 7.1
Opera Mini: —
Android Browser: 4.4, 4.1 -webkit-
Chrome for Android: 44
1. Название свойства transition-property
Содержит название CSS-свойств, к которым будет применен эффект перехода.
Значение свойства может содержать как одно свойство, так и список свойств через
запятую. При создании перехода можно использовать как начальное, так и конечное
состояние элемента. Свойство не наследуется.

Создаваемые эффекты должны быть ненавязчивыми. Не все свойства требуют


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

transition-property

Значения:

none Отсутствие свойства для перехода.

all Значение по умолчанию. Применяет эффект перехода ко всем свойствам элемента.

свойство Определяет список CSS-свойств, перечисленных через запятую, участвующих в


переходе.

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

Синтаксис

div {
width: 100px;
transition-property: width;
}
div:hover {
width: 300px;
}

CSS

2. Продолжительность перехода transition-duration


Задаёт промежуток времени, в течение которого должен осуществляться переход.
Если разные свойства имеют разные значения для перехода, они указываются через
запятую. Если продолжительность перехода не указана, то анимация при смене
значений свойств происходить не будет. Свойство не наследуется.

transition-duration

Значения:

время Время перехода указывается в секундах или миллисекундах,


например,  2s  или  5ms .

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

Синтаксис

div {
transition-duration: .2s;
}

CSS

3. Функция перехода transition-timing-function


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

transition-timing-function

Значения:

ease Функция по умолчанию, переход начинается медленно, разгоняется быстро и


замедляется в конце. Соответствует  cubic-bezier(0.25,0.1,0.25,1) .

linear Переход происходит равномерно на протяжении всего времени, без колебаний в


скорости. Соответствует  cubic-bezier(0,0,1,1) .

ease-in Переход начинается медленно, а затем плавно ускоряется в конце.


Соответствует  cubic-bezier(0.42,0,1,1) .

ease-out Переход начинается быстро и плавно замедляется в конце. Соответствует  cubic-


bezier(0,0,0.58,1) .

ease-in-out Переход медленно начинается и медленно заканчивается. Соответствует  cubic-


bezier(0.42,0,0.58,1) .

cubic- Позволяет вручную установить значения от 0 до 1 для кривой ускорения. На этом


bezier(x1, сайте вы сможете построить любую траекторию перехода.

y1, x2, y2)

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

Синтаксис

div {
transition-timing-function: linear;
}

CSS

Для создания более реалистичных анимаций используйте функцию cubic Bézier:


РИС. 1. ПОЛЬЗОВАТЕЛЬСКИЕ ФУНКЦИИ CUBIC BÉZIER С САЙТА EASINGS.NET

Пользовательское название Значение функции

easeInSine cubic-bezier(0.47, 0, 0.745, 0.715)

easeOutSine cubic-bezier(0.39, 0.575, 0.565, 1)

easeInOutSine cubic-bezier(0.445, 0.05, 0.55, 0.95)

easeInQuad cubic-bezier(0.55, 0.085, 0.68, 0.53)

easeOutQuad cubic-bezier(0.25, 0.46, 0.45, 0.94)

easeInOutQuad cubic-bezier(0.455, 0.03, 0.515, 0.955)

easeInCubic cubic-bezier(0.55, 0.055, 0.675, 0.19)

easeOutCubic cubic-bezier(0.215, 0.61, 0.355, 1)


easeInOutCubic cubic-bezier(0.645, 0.045, 0.355, 1)

easeInQuart cubic-bezier(0.895, 0.03, 0.685, 0.22)

easeOutQuart cubic-bezier(0.165, 0.84, 0.44, 1)

easeInOutQuart cubic-bezier(0.77, 0, 0.175, 1)

easeInQuint cubic-bezier(0.755, 0.05, 0.855, 0.06)

easeOutQuint cubic-bezier(0.23, 1, 0.32, 1)

easeInOutQuint cubic-bezier(0.86, 0, 0.07, 1)

easeInExpo cubic-bezier(0.95, 0.05, 0.795, 0.035)

easeOutExpo cubic-bezier(0.19, 1, 0.22, 1)

easeInOutExpo cubic-bezier(1, 0, 0, 1)

easeInCirc cubic-bezier(0.6, 0.04, 0.98, 0.335)

easeOutCirc cubic-bezier(0.075, 0.82, 0.165, 1)

easeInOutCirc cubic-bezier(0.785, 0.135, 0.15, 0.86)

easeInBack cubic-bezier(0.6, -0.28, 0.735, 0.045)

easeOutBack cubic-bezier(0.175, 0.885, 0.32, 1.275)

easeInOutBack cubic-bezier(0.68, -0.55, 0.265, 1.55)

4. Задержка перехода transition-delay


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

transition-delay

Значения:

время Время задержки перехода указывается в секундах или миллисекундах.


initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

Синтаксис

div {
transition-delay: .5s;
}

CSS

5. Краткая запись перехода


Все свойства, отвечающие за изменение внешнего вида элемента, можно
объединить в одно свойство  transition
transition: transition-property transition-duration transition-
timing-function transition-delay;
Если воспользоваться значениями по умолчанию, то запись

div {transition: 1s;}

CSS

будет эквивалентна

div {transition: all 1s ease 0s;}

CSS

6. Плавный переход нескольких свойств


Для элемента можно задать несколько последовательных переходов, перечислив их
через запятую. Каждый переход можно оформить своей временной функцией.

div {transition: background 0.3s ease, color 0.2s linear;}

CSS

или

div {
transition-property: height, width, background-color;
transition-duration: 3s;
transition-timing-function: ease-in, ease, linear;
}

CSS

7. Примеры переходов для различных свойств


Наведите курсором мыши на блоки, чтобы увидеть свойства в действии.

2.21. CSS3-трансформации
Опубликовано: 6 января 2015Обновлено: 31 декабря 201996 Comments

Модель визуального форматирования CSS описывает систему координат внутри


каждого позиционированного элемента. Система координат является точкой отсчета
для свойств смещения. Положение и размеры в этом координатном пространстве
можно рассматривать как заданные в пикселях, относительно точки отсчета, с
положительными значениями, идущими вправо и вниз. Это координатное
пространство можно изменить с помощью свойства  transform .
CSS3-трансформации позволяют сдвигать, поворачивать и масштабировать
элементы. Трансформации преобразовывают элемент, не затрагивая остальные
элементы веб-страницы, т.е. другие элементы не сдвигаются относительно него.
К элементам, которые могут быть трансформированы, относятся элементы
с  display: block;  и  display: inline-block; , а также элементы, значение
свойства  display  которых вычисляется как  table-row ,  table-row-
group ,  table-header-group ,  table-footer-group ,  table-cell  или  table-
caption . Трансформированным считается элемент с любым установленным
значением свойства  transform , отличным от  none .
Существуют два вида CSS3-трансформаций – 2D и 3D. 2D-
трансформации преобразовывают элементы в двумерном пространстве c помощью
2D-матрицы преобразований. Эта матрица применяется для вычисления новых
координат объекта, на основе значений свойств  transform  и  transform-origin .
Преобразования влияют только на визуальный рендеринг. В отношении макета
страницы они могут отразиться на переполнении содержимого блока. По умолчанию
точка трансформации находится в центре элемента.
2D-трансформации элементов
 Содержание:
 1. Функции 2D-трансформации transform
 2. Точка трансформации transform-origin
 3. Множественные трансформации
 4. Трансформации на практике: как сделать ленточки
Поддержка браузерами

IE: 10.0, 9.0 -ms-


Edge: 12.0
Firefox: 16.0, 3.5 -moz-
Chrome: 36.0, 4.0 -webkit-
Safari: 9.0, 3.1 -webkit-
Opera: 23.0, 15.0 -webkit-
iOS Safari: 9, 7.1 -webkit-
Android Browser: 53, 2.1 -webkit-
Chrome for Android: -webkit-
1. Функции 2D-трансформации transform
Свойство задаёт вид преобразования элемента. Свойство описывается с
помощью функций трансформации, которые смещают элемент относительно его
текущего положения на странице или изменяют его первоначальные размеры и
форму. Не наследуется.
Допустимые значения:

matrix()  — любое число


translate() ,  translateX() ,  translateY()  — единицы длины (положительные
и отрицательные),  %
scale() ,  scaleX() ,  scaleY()  — любое число
rotate()  — угол (deg, grad, rad или turn)
skew() ,  skewX() ,  skewY()  — угол (deg, grad, rad)

Функция Описание
Значение по умолчанию, означает отсутствие трансформации. Также
none отменяет трансформацию для элемента из группы
трансформируемых элементов.

matrix(a, c, b, d, x, y) Смещает элементы и задает способ их трансформации, позволяя


объединить несколько функций 2D-трансформаций в одной. В
качестве трансформации допустимы поворот, масштабирование,
наклон и изменение положения.
Значение  a  изменяет масштаб по горизонтали. Значение от 0 до 1
уменьшает элемент, больше 1 — увеличивает.
Значение  c  деформирует (сдвигает) стороны элемента по оси Y,
положительное значение — вверх, отрицательное — вниз.
Значение  b  деформирует (сдвигает) стороны элемента по оси X,
положительное значение — влево, отрицательное — вправо.
Значение  d  изменяет масштаб по вертикали. Значение меньше 1
уменьшает элемент, больше 1 — увеличивает.
Значение  x  смещает элемент по оси X, положительное — вправо,
отрицательное — влево.
Значение  y  смещает элемент по оси Y, положительное значение —
вниз, отрицательное — вверх.
Сдвигает элемент на новое место, перемещая относительно обычного
translate(x,y) положения вправо и вниз, используя координаты X и Y, не затрагивая
при этом соседние элементы. Если нужно сдвинуть элемент влево
или вверх, то нужно использовать отрицательные значения.

translateX(n) Сдвигает элемент относительно его обычного положения по оси X.

translateY(n) Сдвигает элемент относительно его обычного положения по оси Y.

Масштабирует элементы, делая их больше или меньше. Значения от 0


scale(x,y) до 1 уменьшают элемент. Первое значение масштабирует элемент по
ширине, второе — по высоте. Отрицательные значения отображают
элемент зеркально.
Функция масштабирует элемент по ширине, делая его шире или уже.
Если значение больше единицы, элемент становится шире, если
scaleX(n) значение находится между единицей и нулем, элемент становится
уже. Отрицательные значения отображают элемент зеркально по
горизонтали.
Функция масштабирует элемент по высоте, делая его выше или ниже.
Если значение больше единицы, элемент становится выше, если
scaleY(n) значение находится между единицей и нулем — ниже.
Отрицательные значения отображают элемент зеркально по
вертикали.
Поворачивает элементы на заданное количество градусов,
отрицательные значения от  -1deg  до  -360deg  поворачивают
rotate(угол) элемент против часовой стрелки, положительные — по часовой
стрелке. Значение  rotate(720deg)  поворачивает элемент на два
полных оборота.
Используется для деформирования (искажения) сторон элемента
skew(x-угол,y-угол) относительно координатных осей. Если указано одно значение,
второе будет определено браузером автоматически.

skewX(угол) Деформирует стороны элемента относительно оси X.

skewY(угол) Деформирует стороны элемента относительно оси Y.

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.


Синтаксис
div {
-webkit-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}

CSS
Наведите курсор мыши на блоки, чтобы посмотреть функции трансформации в
действии.

2. Точка трансформации transform-origin


Свойство позволяет сместить центр трансформации, относительно которого
происходит изменение положения/размера/формы элемента. Значение по
умолчанию —  center , или  50% 50% . Задаётся только для трансформированных
элементов. Не наследуется.
transform-origin

Значения:

ось Пара значений, заданная с помощью ключевых слов, единиц длины или
Х( left ,  center ,  right , процентов определяет, относительно какой части элемента будет
происходить трансформация. Значения больше 100% увеличивают
длина,  % )
область трансформации элемента.
ось
Y( top ,  center ,  bottom ,
длина,  % )

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

Синтаксис

div {
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 20% 40%;
-ms-transform-origin: 20% 40%;
transform-origin: 20% 40%;
}

CSS
3. Множественные трансформации
Можно объединить несколько трансформаций одного элемента, перечислив их
через пробел в порядке проявления.

div {transform: scale(1.5) rotate(-10deg);}


4. Трансформации на практике: как сделать ленточки
<section>
<h1><span>CSS3 ленточки</span></h1>
<div class="ribbons-wrapper">
<div class="ribbon">
<span class="ribbon1"><span>Скидка 10%</span></span>
</div>
<div class="ribbon">
<span class="ribbon2">А<br>К<br>Ц<br>И<br>Я</span>
</div>
<div class="ribbon">
<span class="ribbon3">Скидка 10%</span>
</div>
<div class="ribbon">
<span class="ribbon4">Скидка 10%</span>
</div>
<div class="ribbon">
<span class="ribbon5">Скидка 10%</span>
</div>
<div class="ribbon">
<div class="wrap">
<span class="ribbon6">Скидка 10%</span>
</div>
</div>
</div>
</section>

body {
margin: 0;
font-family: 'Ubuntu', sans-serif;
}
section {
margin: 0 auto;
max-width: 660px;
padding: 0 20px;
}
h1 {
font-weight: normal;
position: relative;
background: #F4F9FA;
width: 50%;
color: #F8463F;
text-align: center;
padding: 10px 20px;
margin: 20px auto 40px;
text-transform: uppercase;
border-radius: 2px;
}
h1:before,
h1:after {
content: "";
position: absolute;
top: -6px;
border: 18px solid #DCF4F4;
}
h1:before {
left: -36px;
border-right-width: 18px;
border-left-color: transparent;
}
h1:after {
right: -36px;
border-left-width: 18px;
border-right-color: transparent;
}
h1 span:before,
h1 span:after {
content: "";
position: absolute;
border-style: solid;
border-color: #A7CECC transparent transparent transparent;
top: -6px;
transform: rotate(180deg);
}
h1 span:before {
left: 0;
border-width: 6px 0 0 6px;
}
h1 span:after {
right: 0;
border-width: 6px 6px 0 0;
}
.ribbon {
height: 188px;
position: relative;
margin-bottom: 30px;
background: url(https://html5book.ru/wp-content/uploads/2015/10/snow-road.jpg);
background-size: cover;
text-transform: uppercase;
color: white;
}
.ribbon1 {
position: absolute;
top: -6.1px;
right: 10px;
}
.ribbon1:after {
position: absolute;
content: "";
width: 0;
height: 0;
border-left: 53px solid transparent;
border-right: 53px solid transparent;
border-top: 10px solid #F8463F;
}
.ribbon1 span {
position: relative;
display: block;
text-align: center;
background: #F8463F;
font-size: 14px;
line-height: 1;
padding: 12px 8px 10px;
border-top-right-radius: 8px;
width: 90px;
}
.ribbon1 span:before, .ribbon1 span:after {
position: absolute;
content: "";
}
.ribbon1 span:before {
height: 6px;
width: 6px;
left: -6px;
top: 0;
background: #F8463F;
}
.ribbon1 span:after {
height: 6px;
width: 8px;
left: -8px;
top: 0;
border-radius: 8px 8px 0 0;
background: #C02031;
}
.ribbon2 {
width: 60px;
padding: 10px 0;
position: absolute;
top: -6px;
left: 25px;
text-align: center;
border-top-left-radius: 3px;
background: #F47530;
}
.ribbon2:before {
height: 0;
width: 0;
right: -5.5px;
top: 0.1px;
border-bottom: 6px solid #8D5A20;
border-right: 6px solid transparent;
}
.ribbon2:before, .ribbon2:after {
content: "";
position: absolute;
}
.ribbon2:after {
height: 0;
width: 0;
bottom: -29.5px;
left: 0;
border-left: 30px solid #F47530;
border-right: 30px solid #F47530;
border-bottom: 30px solid transparent;
}
.ribbon3 {
width: 150px;
height: 50px;
line-height: 50px;
padding-left: 15px;
position: absolute;
left: -8px;
top: 20px;
background: #59324C;
}
.ribbon3:before, .ribbon3:after {
content: "";
position: absolute;
}
.ribbon3:before {
height: 0;
width: 0;
top: -8.5px;
left: 0.1px;
border-bottom: 9px solid black;
border-left: 9px solid transparent;
}
.ribbon3:after {
height: 0;
width: 0;
right: -14.5px;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 15px solid #59324C;
}
.ribbon4 {
position: absolute;
top: 15px;
padding: 8px 10px;
background: #00B3ED;
box-shadow: -1px 2px 3px rgba(0,0,0,.3);
}
.ribbon4:before, .ribbon4:after {
content: "";
position: absolute;
}
.ribbon4:before {
width: 7px;
height: 100%;
top: 0;
left: -6.5px;
padding: 0 0 7px;
background: inherit;
border-radius: 5px 0 0 5px;
}
.ribbon4:after {
width: 5px;
height: 5px;
bottom: -5px;
left: -4.5px;
background: lightblue;
border-radius: 5px 0 0 5px;
}
.ribbon5 {
display: block;
width: calc(100% + 20px);
height: 50px;
line-height: 50px;
text-align: center;
margin-left: -10px;
margin-right: -10px;
background: #EDBA19;
position: relative;
top: 20px;
}
.ribbon5:before, .ribbon5:after {
content: "";
position: absolute;
}
.ribbon5:before {
height: 0;
width: 0;
bottom: -10px;
left: 0;
border-top: 10px solid #cd8d11;
border-left: 10px solid transparent;
}
.ribbon5:after {
height: 0;
width: 0;
right: 0;
bottom: -10px;
border-top: 10px solid #cd8d11;
border-right: 10px solid transparent;
}
.wrap {
width: 100%;
height: 188px;
position: absolute;
top: -8px;
left: 8px;
overflow: hidden;
}
.wrap:before, .wrap:after {
content: "";
position: absolute;
}
.wrap:before {
width: 40px;
height: 8px;
right: 100px;
background: #4D6530;
border-radius: 8px 8px 0px 0px;
}
.wrap:after {
width: 8px;
height: 40px;
right: 0px;
top: 100px;
background: #4D6530;
border-radius: 0px 8px 8px 0px;
}
.ribbon6 {
width: 200px;
height: 40px;
line-height: 40px;
position: absolute;
top: 30px;
right: -50px;
z-index: 2;
overflow: hidden;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
border: 1px dashed;
box-shadow:0 0 0 3px #57DD43, 0px 21px 5px -18px rgba(0,0,0,0.6);
background: #57DD43;
text-align: center;
}
@media (min-width: 500px) {
.ribbons-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.ribbon {
width: 48%;
}
}