Css3 справочник: Справочник CSS | htmlbook.ru
Содержание
display | CSS | WebReference
Многоцелевое свойство, которое определяет, как элемент должен быть показан в документе.
Краткая информация
| Значение по умолчанию | inline |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам |
| Анимируется | Нет |
Синтаксис
display: block | inline | inline-block | inline-table |
inline-flex | flex | list-item | none |
run-in | table | table-caption | table-cell | table-column-group | table-column |
table-footer-group | table-header-group | table-row | table-row-groupОбозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Значения
- block
- Элемент показывается как блочный. Применение этого значения для строчных элементов, например <span>, заставляет его вести подобно блокам — происходит перенос строк в начале и в конце содержимого.
- inline
- Элемент отображается как строчный. Использование блочных элементов, таких, как <div> и <p>, автоматически создаёт перенос и показывает их содержимое с новой строки. Значение inline отменяет эту особенность, поэтому содержимое блочных элементов начинается с того места, где окончился предыдущий элемент.
- inline-block
- Это значение генерирует блочный элемент, который обтекается другими элементами веб-страницы подобно строчному элементу. Фактически такой элемент по своему действию похож на встраиваемые элементы (вроде <img>). При этом его внутренняя часть форматируется как блочный элемент, а сам элемент — как строчный.
- inline-table
- Определяет, что элемент является таблицей, как при использовании <table>, но при этом таблица является строчным элементом и происходит её обтекание другими элементами, например, текстом.
- inline-flex
- Элемент ведёт себя как строчный и выкладывает содержимое согласно флекс-модели.
- flex
- Элемент ведёт себя как блочный и выкладывает содержимое согласно флекс-модели.
- list-item
- Элемент выводится как блочный и добавляется маркер списка.
- none
- Временно удаляет элемент из документа. Занимаемое им место не резервируется, и веб-страница формируется так, словно элемента и не было. Изменить значение и сделать вновь видимым элемент можно с помощью скриптов, обращаясь к свойствам через объектную модель. В этом случае происходит переформатирование данных на странице с учётом вновь добавленного элемента.
- run-in
- Устанавливает элемент как блочный или строчный, в зависимости от контекста.
- table
- Определяет, что элемент является блочной таблицей, подобно использованию <table>.
- table-caption
- Задаёт заголовок таблицы, подобно применению <caption>.
- table-cell
- Указывает, что элемент представляет собой ячейку таблицы (<td> или <th>).
- table-column
- Назначает элемент колонкой таблицы, словно был добавлен <col>.
- table-column-group
- Определяет, что элемент является группой одной или более колонок таблицы, как при использовании <colgroup>.
- table-footer-group
- Используется для хранения одной или нескольких строк ячеек, которые отображаются в самом низу таблицы. По своему действию сходно с работой <tfoot>.
- table-header-group
- Элемент предназначен для хранения одной или нескольких строк ячеек, которые представлены вверху таблицы. По своему действию сходно с работой <thead>.
- table-row
- Элемент отображается как строка таблицы (<tr>).
- table-row-group
- Создаёт структурный блок, состоящий из нескольких строк таблицы, аналогично действию <tbody>.
Пример
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>display</title>
<style>
.example {
border: dashed 1px #634f36; /* Параметры рамки */
background: #fffff5; /* Цвет фона */
font-family: «Courier New», Courier, monospace; /* Шрифт текста */
padding: 7px; /* Поля вокруг текста */
margin: 0 0 1em; /* Отступы */
}
.exampleTitle {
border: 1px solid black; /* Параметры рамки */
border-bottom: none; /* Убираем линию снизу */
padding: 3px; /* Поля вокруг текста */
display: inline; /* Устанавливаем как строчный элемент */
background: #efecdf; /* Цвет фона */
font-weight: bold; /* Жирное начертание */
font-size: 90%; /* Размер текста */
margin: 0; /* Убираем отступы */
white-space: nowrap; /* Отменяем переносы текста */
}
</style>
</head>
<body>
<p>Пример</p>
<p>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><br>
<html><br>
<body><br>
<b>Формула серной кислоты:</b>
<i>H<sub><small>2</small></sub>
SO<sub><small>4</small>
</sub></i><br>
</body><br>
</html></p>
</body>
</html>
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства display
Объектная модель
Объект.style.display
Примечание
Internet Explorer до версии 7 включительно:
- поддержка значений table-footer-group и table-header-group происходит только для элементов <thead> и <tfoot>;
- для элементов <li> понимает значение block как list-item;
- значение inline-block применяется только для строчных элементов, с блочными элементами работает некорректно.
Opera 9.2, а также Firefox 2.0:
- значение table-column применяется только для <col>;
- значение table-column-group поддерживается только для <colgroup>.
Chrome до версии 4, а также Safari до версии 5:
- значение run-in поддерживают только для элементов, которые располагаются перед строчными элементами или такими, у которых значение display установлено как inline.
Safari 3.1
- Значение table-cell не работает, если нет элементов со значениями свойства display: table и table-row.
Chrome 32
- Значение run-in больше не поддерживается.
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
| none, inline, block | 4 | 12 | 1 | 7 | 1 | 1 |
| inline-block | 5.5 | 12 | 1 | 7 | 1 | 3 |
| inline-flex, flex | 11 | 12 | 29 | 17 | 9 | 28 |
| list-item | 6 | 12 | 1 | 7 | 1 | 1 |
| run-in | 8 | 12 | 1 | 7 | 1 | |
| inline-table | 8 | 12 | 1 | 7 | 1 | 3 |
| table, table-cell, table-column, table-column-group,table-header-group, table-row-group, table-footer-group, table-row, table-caption | 8 | 12 | 1 | 7 | 1 | 1 |
| none, inline, block | 1 | 1 | 8 | 1 |
| inline-block | 1 | 1 | 8 | 1 |
| inline-flex, flex | 4.4 | 28 | 12.1 | 9.2 |
| list-item | 1 | 1 | 8 | 1 |
| run-in | 1 | 8 | 1 | |
| inline-table | 1 | 1 | 8 | 1 |
| table, table-cell, table-column, table-column-group,table-header-group, table-row-group, table-footer-group, table-row, table-caption | 1 | 1 | 8 | 1 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 27.08.2017
Редакторы: Влад Мержевич
position | CSS | WebReference
Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.
Краткая информация
| Значение по умолчанию | static |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам |
| Анимируется | Нет |
Синтаксис
position: absolute | fixed | relative | static | stickyОбозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Значения
- absolute
- Абсолютное позиционирование. Указывает, что элемент абсолютно позиционирован, при этом другие элементы отображаются на веб-странице словно абсолютно позиционированного элемента и нет. Положение элемента задаётся свойствами left, top, right и bottom, также на положение влияет значение свойства position родительского элемента. Так, если у родителя значение position установлено как static или родителя нет, то отсчёт координат ведётся от края окна браузера. Если у родителя значение position задано как relative, то отсчёт координат ведётся от края родительского элемента.
- fixed
- Фиксированное позиционирование. По своему действию это значение близко к absolute, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы.
- relative
- Относительное позиционирование. Положение элемента устанавливается относительно его исходного места. Добавление свойств left, top,
right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения. - static
- Статичное позиционирование. Элементы отображаются как обычно. Использование свойств left, top, right и bottom не приводит к каким-либо результатам.
- sticky
- Это сочетание относительного и фиксированного позиционирования. Элемент рассматривается как позиционированный относительно, пока он не пересекает определённый порог, после чего рассматривается как фиксированный. Обычно применяется для фиксации заголовка на одном месте, пока содержимое, к которому относится заголовок, прокручивается на странице.
Пример
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>position</title>
<style>
.layer1 {
position: relative; /* Относительное позиционирование */
background: #f0f0f0; /* Цвет фона */
height: 200px; /* Высота блока */
}
.layer2 {
position: absolute; /* Абсолютное позиционирование */
bottom: 15px; /* Положение от нижнего края */
right: 15px; /* Положение от правого края */
line-height: 1px;
}
</style>
</head>
<body>
<div>
<div>
<img src=»image/girl.jpg» alt=»Девочка»>
</div>
</div>
</body>
</html>
Результат данного примера показан на рис. 1.
Рис. 1. Применение свойства position
Объектная модель
Объект.style.position
Примечание
Браузер Safari поддерживает значение -webkit-sticky.
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
| static, relative, absolute | 4 | 12 | 1 | 4 | 1 | 1 |
| fixed | 7 | 12 | 1 | 4 | 1 | 1 |
| sticky | 16 | 56 | 42 | 6.1 | 32 |
| static, relative, absolute | 1 | 1 | 6 | 1 |
| fixed | 1 | 1 | 6 | 1 |
| sticky | 32 | 6.1 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 29.08.2017
Редакторы: Влад Мержевич
transform | CSS | WebReference
- <функция>
- Функция трансформации.
- none
- Отменяет действие трансформации.
Функции трансформации
matrix
Задаёт двумерную матрицу преобразований.
matrix3d
Задаёт трёхмерную матрицу преобразований.
rotate()
Поворачивает элемент в двумерном пространстве на заданный угол относительно точки трансформации, задаваемой свойством transform-origin.
rotateX()
Поворачивает элемент на заданный угол относительно оси X.
rotateY()
Поворачивает элемент на заданный угол относительно оси Y.
rotateZ()
Поворачивает элемент на заданный угол относительно оси Z.
rotate3d
Поворачивает элемент в трёхмерном пространстве.
scale()
Масштабирует элемент по горизонтали и вертикали.
scaleX()
Масштабирует элемент по горизонтали.
scaleY()
Масштабирует элемент по вертикали.
scaleZ()
Масштабирует элемент по оси Z.
scale3d
Масштабирует элемент в трёхмерном пространстве.
skew()
Наклоняет элемент на заданный угол по горизонтали и вертикали.
skewX()
Наклоняет элемент на заданный угол по горизонтали.
skewY()
Наклоняет элемент на заданный угол по вертикали.
translate()
Сдвигает элемент на заданное значение по горизонтали и вертикали.
translateX()
Сдвигает элемент по горизонтали на указанное значение. Положительное значение сдвигает вправо, отрицательное влево.
translateY()
Сдвигает элемент по вертикали на указанное значение. Положительное значение сдвигает вниз, отрицательное вверх.
translateZ()
Сдвигает элемент по оси Z на указанное значение. Положительное значение сдвигает вперёд, отрицательное назад.
translate3d
Сдвигает элемент на заданное значение в трёхмерном пространстве.
perspective()
Задаёт перспективу.
background | CSS | WebReference
Универсальное свойство background позволяет установить одновременно несколько характеристик фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному свойству. Для подробного ознакомления смотрите информацию о каждом свойстве отдельно. Допустимо, также, указывать параметры сразу нескольких фонов, перечисляя их через запятую.
Краткая информация
| Значение по умолчанию | transparent || none || repeat || scroll || 0% 0% |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам |
| Анимируется | Да |
Синтаксис
background: [<фон>, ]* <последний_фон>Здесь:
<фон> = background-image || background-position [ / background-size ]? || background-repeat || background-attachment || background-origin || background-clip
<последний_фон> = background-image || background-position [ / background-size ]? || background-repeat || background-attachment || background-origin || background-clip || background-color
Если наряду с фоновыми изображениями требуется задать цвет фона элемента, он указывается в последнюю очередь после перечисления.
Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Значения
Любые комбинации значений, разделяемых между собой пробелом, определяющих стиль фона, в произвольном порядке. Ни одно значение не является обязательным, поэтому неиспользуемые можно опустить.
Пример
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>background</title>
<style>
div {
height: 200px; /* Высота блока */
width: 200px; /* Ширина блока */
overflow: auto; /* Добавляем полосы прокрутки */
padding-left: 15px; /* Отступ от текста слева */
background: url(/example/image/hand.png) repeat-y #fc0; /* Цвет фона,
путь к фоновому изображению и
повторение фона по вертикали */
}
</style>
</head>
<body>
<div>Великобритания, куда входят Пик-Дистрикт, Сноудония и
другие многочисленные национальные резерваты природы и парки,
неумеренно применяет культурный рельеф. Суша морей начинает
туристический подземный сток. Дождливая погода дегустирует кандым.
Винный фестиваль проходит в приусадебном музее Георгикон, там же
беспошлинный ввоз вещей и предметов в пределах личной потребности
связывает белый саксаул. Санитарный и ветеринарный контроль
оформляет городской Гвианский щит.</div>
</body>
</html>
Результат данного примера показан ниже (рис. 1).
Рис. 1. Вид фона и фонового рисунка в блоке фиксированного размера
<!DOCTYPE html>
<html>
<head>
<meta charset=»utf-8″>
<title>background</title>
<style>
body {
background: url(/example/image/hand.png) repeat-y,
url(/example/image/bg-right.png) repeat-y 100% 0, #fc0;
}
</style>
</head>
<body>
</body>
</html>
Объектная модель
Объект.style.background
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
| один фон | 4 | 12 | 1 | 3.5 | 1 | 1 |
| несколько фонов | 9 | 12 | 1 | 10.5 | 1.3 | 3.6 |
| один фон | 2.1 | 1 | 10 | 3.2 |
| несколько фонов | 2.1 | 1 | 10 | 3.2 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 18.03.2018
Редакторы: Влад Мержевич
| align-content | Задает выравнивание между линиями внутри гибкого контейнера, если элементы не используют все доступное пространство |
| align-items | Задает выравнивание для элементов внутри гибкого контейнера |
| align-self | Задает выравнивание для выбранных элементов внутри гибкого контейнера |
| all | Сбрасывает все свойства (за исключением Unicode-двунаправленного письма и направления) |
| animation | Сокращенное свойство для всех свойств анимации |
| animation-delay | Указывает задержку начала анимации |
| animation-direction | Указывает, следует ли воспроизвести анимацию вперед, назад или в альтернативных циклах |
| animation-duration | Указывает, как долго должна проходить анимация для завершения одного цикла |
| animation-fill-mode | Задает стиль элемента, если анимация не воспроизводится (до начала, после завершения или и то, и другое) |
| animation-iteration-count | Указывает, сколько раз должна воспроизводиться анимация |
| animation-name | Задает имя для анимации @keyframes |
| animation-play-state | Указывает, запущена ли анимация или приостановлена |
| animation-timing-function | Задает кривую скорости анимации |
| backface-visibility | Определяет, должна ли быть видна задняя грань элемента при обращении к пользователю |
| background | Сокращенное свойство для задания всех свойств фона в одном объявлении |
| background-attachment | Определяет, прокручивается ли фоновое изображение с остальной частью страницы, или зафиксировано |
| background-blend-mode | Задает режим наложения для каждого слоя фона (цвет/изображение) |
| background-clip | Определяет, насколько фон (цвет или изображение) должен расширяться в элементе |
| background-color | Задает цвет фона элемента |
| background-image | Задание одного или нескольких фоновых изображений для элемента |
| background-origin | Задает исходную позицию фонового изображения |
| background-position | Определяет положение фонового изображения |
| background-repeat | Устанавливает, если/как фоновое изображение будет повторяться |
| background-size | Определяет размер фоновых изображений |
| border | Сокращенное свойство для ширины границы, стиля границы и цвета границы |
| border-bottom | Сокращенное свойство для задания всех свойств нижней границы в одном объявлении |
| border-bottom-color | Задает цвет нижней границы |
| border-bottom-left-radius | Определяет радиус границы нижнего левого угла |
| border-bottom-right-radius | Определяет радиус границы нижнего правого угла |
| border-bottom-style | Задает стиль нижней границы |
| border-bottom-width | Задает ширину нижней границы |
| border-collapse | Устанавливает, должны ли границы таблицы сворачиваться в одну границу или быть разделены |
| border-color | Задает цвет четырех границ |
| border-image | Сокращенное свойство для установки всех свойств Border-Image-* |
| border-image-outset | Определяет величину, на которую область изображения границы выходит за границы рамки |
| border-image-repeat | Указывает, должно ли изображение границы повторяться, округляться или растягиваться |
| border-image-slice | Определяет способ среза изображения границы |
| border-image-source | Указывает путь к изображению, которое будет использоваться в качестве границы |
| border-image-width | Задает ширину изображения границы |
| border-left | Сокращенное свойство для задания всех свойств левой границы в одном объявлении |
| border-left-color | Задает цвет левой границы |
| border-left-style | Задает стиль левой границы |
| border-left-width | Задает ширину левой границы |
| border-radius | Сокращенное свойство для установки всех четырех границ-*-свойства RADIUS |
| border-right | Сокращенное свойство для задания всех свойств правой границы в одном объявлении |
| border-right-color | Задает цвет правой границы |
| border-right-style | Задает стиль правой границы |
| border-right-width | Задает ширину правой границы |
| border-spacing | Устанавливает расстояние между границами соседних ячеек |
| border-style | Задает стиль четырех границ |
| border-top | Сокращенное свойство для задания всех свойств верхнего края в одном объявлении |
| border-top-color | Задает цвет верхней границы |
| border-top-left-radius | Определяет радиус границы верхнего левого угла |
| border-top-right-radius | Определяет радиус границы верхнего правого угла |
| border-top-style | Задает стиль верхней границы |
| border-top-width | Задает ширину верхней границы |
| border-width | Задает ширину четырех границ |
| bottom | Устанавливает положение элементов в нижней части родительского элемента |
| box-decoration-break | Задает поведение фона и границы элемента при разрыве страницы или, для линейных элементов, при разрыве строки. |
| box-shadow | Прикрепление одной или нескольких теней к элементу |
| box-sizing | Определяет, как вычисляется ширина и высота элемента: должны ли они включать отступы и границы, или нет |
| break-after | Задает поведение разрыва страницы, столбца или региона после созданного поля |
| break-before | Задает поведение разрыва страницы, столбца или региона перед созданным полем |
| break-inside | Определяет поведение разрыва страницы, столбца или региона в созданном поле |
| caption-side | Задает размещение заголовка таблицы |
| caret-color | Определяет цвет курсора (стрелка) в входах, текстового ввода или любого элемента, редактируемого |
| @charset | Задает кодировку символов, используемую в таблице стилей |
| clear | Указывает, на каких сторонах элемента плавающие элементы не могут плавать |
| clip | Зажимы абсолютно позиционированного элемента |
| color | Задает цвет текста |
| column-count | Указывает количество столбцов, элемент должен быть разделен на |
| column-fill | Указывает, как заполнять столбцы, сбалансированные или нет |
| column-gap | Указывает зазор между столбцами |
| column-rule | Сокращенное свойство для установки всех свойств столбца-Rule-* |
| column-rule-color | Задает цвет правила между столбцами |
| column-rule-style | Задает стиль правила между столбцами |
| column-rule-width | Задает ширину правила между столбцами |
| column-span | Указывает, сколько столбцов элемент должен охватывать поперек |
| column-width | Задает ширину столбца |
| columns | Сокращенное свойство для задания ширины столбца и счетчика столбцов |
| content | Используется с: before и: After псевдо-элементы, чтобы вставить сгенерированное содержимое |
| counter-increment | Увеличивает или уменьшает значение одного или нескольких счетчиков CSS |
| counter-reset | Создает или сбрасывает один или несколько счетчиков CSS |
| cursor | Указывает курсор мыши, отображаемый при наведении на элемент |
| direction | Задает направление текста/направление письма |
| display | Указывает, как должен отображаться определенный элемент HTML |
| empty-cells | Указывает, отображать ли границы и фон на пустых ячейках таблицы |
| filter | Определяет эффекты (например, размытие или сдвиг цвета) на элементе перед отображением элемента |
| flex | Сокращенное свойство для Flex-расти, Flex-сжатия и Flex-основы свойства |
| flex-basis | Задает начальную длину гибкого элемента |
| flex-direction | Указывает направление гибких элементов |
| flex-flow | Сокращенное свойство для свойств Flex-Direction и Flex-Wrap |
| flex-grow | Указывает, сколько будет расти номенклатура относительно остальных |
| flex-shrink | Указывает, как элемент будет сжиматься относительно остальных |
| flex-wrap | Указывает, следует ли обернуть гибкие элементы |
| float | Указывает, должно ли поле плавать |
| font | Задает все свойства шрифта в одном объявлении |
| @font-face | Правило, позволяющее веб-сайтам загружать и использовать шрифты, не являющиеся «web-safe» шрифтами |
| font-family | Задает семейство шрифтов для текста |
| font-feature-settings | Позволяет контролировать расширенные типографские функции шрифтов OpenType |
| @font-feature-values | Позволяет авторам использовать общее имя в шрифт-вариант-альтернативный для функции, активированной по-разному в OpenType |
| font-kerning | Управляет использованием информации о кернинге (как буквы расположены в пространстве) |
| font-language-override | Управляет использованием глифов, специфичных для языка, в шрифте |
| font-size | Задает размер шрифта текста |
| font-size-adjust | Сохраняет читаемость текста, когда происходит откат шрифта |
| font-stretch | Выбор нормальной, сжатой или расширенной грани из семейства шрифтов |
| font-style | Задает стиль шрифта для текста |
| font-synthesis | Элементы управления, отсутствующие шрифты (полужирный или курсив) могут быть синтезированы обозревателем |
| font-variant | Указывает, должен ли текст отображаться в шрифте с малыми прописными буквами |
| font-variant-alternates | Управляет использованием альтернативных глифов, связанных с альтернативными именами, определенными в @font-функция-значения |
| font-variant-caps | Управление использованием альтернативных глифов для заглавных букв |
| font-variant-east-asian | Управляет использованием альтернативных глифов для восточно-азиатских скриптов (например, японского и китайского) |
| font-variant-ligatures | Определяет, какие лигатуры и контекстные формы используются в текстовом содержимом элементов, к которым он относится |
| font-variant-numeric | Управляет использованием альтернативных глифов для чисел, дробей и порядковых маркеров |
| font-variant-position | Управляет использованием альтернативных глифов меньшего размера, которые расположены в виде наложения или подстрочных символов относительно базовой линии шрифта |
| font-weight | Определяет вес шрифта |
| grid | Сокращенное свойство |
| grid-area | Либо задает имя элемента сетки, либо это свойство является сокращенным свойством для свойств сетка- начало строки, Сетка-столбец-начало, Сетка-конец строкии Сетка-конец столбца |
| grid-auto-columns | Задает размер столбца по умолчанию |
| grid-auto-flow | Указывает, как автоматически размещаемые элементы вставляются в сетку |
| grid-auto-rows | Задает размер строки по умолчанию |
| grid-column | Сокращенное свойство для свойств Сетка-столбец-начало и Сетка-конец столбца |
| grid-column-end | Указывает, где закончить элемент сетки |
| grid-column-gap | Определяет размер зазора между столбцами |
| grid-column-start | Указывает, где начать элемент сетки |
| grid-gap | Сокращенное свойство для свойств Сетка-строка-зазор и Сетка-столбец-зазор |
| grid-row | Сокращенное свойство для свойств Сетка-строка-начало и Сетка-конец строки |
| grid-row-end | Указывает, где закончить элемент сетки |
| grid-row-gap | Определяет размер зазора между строками |
| grid-row-start | Указывает, где начать элемент сетки |
| grid-template | Сокращенное свойство для свойств Сетка-шаблон-строки, сетка -шаблон-столбцы и области сетки |
| grid-template-areas | Указывает, как отображать столбцы и строки с использованием именованных элементов сетки |
| grid-template-columns | Определяет размер столбцов и количество столбцов в макете сетки |
| grid-template-rows | Определяет размер строк в макете сетки |
| hanging-punctuation | Указывает, может ли знак пунктуации размещаться вне поля строки |
| height | Задает высоту элемента |
| hyphens | Задание разбиения слов для улучшения макета абзацев |
| image-rendering | Дает подсказку браузеру о том, какие аспекты изображения наиболее важны для сохранения при масштабировании изображения |
| @import | Позволяет импортировать таблицу стилей в другую таблицу стилей |
| isolation | Определяет, должен ли элемент создавать новое содержимое стека |
| justify-content | Задает выравнивание между элементами внутри гибкого контейнера, если элементы не используют все доступное пространство |
| @keyframes | Указывает код анимации |
| left | Задает левое положение позиционного элемента |
| letter-spacing | Увеличивает или уменьшает расстояние между символами в тексте |
| line-break | Указывает, как/если разбить линии |
| line-height | Установка высоты линии |
| list-style | Задает все свойства для списка в одном объявлении |
| list-style-image | Задает изображение в качестве маркера элемента списка |
| list-style-position | Определяет положение маркеров элементов списка (маркеров) |
| list-style-type | Указывает тип маркера элемента списка |
| margin | Устанавливает все свойства полей в одном объявлении |
| margin-bottom | Устанавливает нижнее поле элемента |
| margin-left | Задает левое поле элемента |
| margin-right | Задает правое поле элемента |
| margin-top | Задание верхнего поля элемента |
| max-height | Задает максимальную высоту элемента |
| max-width | Задает максимальную ширину элемента |
| @media | Устанавливает правила стиля для различных типов носителей/устройств/размеров |
| min-height | Задает минимальную высоту элемента |
| min-width | Задает минимальную ширину элемента |
| object-fit | Указывает, как содержимое заменяемого элемента должно быть установлено в поле, установленное его используемой высотой и шириной |
| object-position | Задает выравнивание заменяемого элемента внутри его поля |
| opacity | Задает уровень непрозрачности для элемента |
| order | Задает порядок гибкого элемента по отношению к остальным |
| orphans | Задает минимальное число строк, которые должны быть оставлены в нижней части страницы при возникновении разрыва страницы внутри элемента |
| outline | Задает все свойства структуры в одном объявлении |
| outline-color | Задает цвет контура |
| outline-offset | Смещение контура и его выводит за пределы края границы |
| outline-style | Задает стиль контура |
| outline-width | Задает ширину контура |
| overflow | Указывает, что происходит, если содержимое переполнено полем элемента |
| overflow-wrap | Указывает, может ли обозреватель разрывать строки в словах, чтобы предотвратить переполнение (если строка слишком длинная, чтобы вместить ее содержащее поле) |
| overflow-x | Указывает, следует ли обрезать левый/правый край содержимого, если оно переполнено областью содержимого элемента |
| overflow-y | Указывает, следует ли обрезать верхний/нижний край содержимого, если оно переполнено областью содержимого элемента |
| padding | Задает все свойства заполнения в одном объявлении |
| padding-bottom | Устанавливает нижнее заполнение элемента |
| padding-left | Задает левое заполнение элемента |
| padding-right | Задает правое заполнение элемента |
| padding-top | Задает верхнее заполнение элемента |
| page-break-after | Задает поведение разбиения страницы после элемента |
| page-break-before | Задает поведение разбиения страницы перед элементом |
| page-break-inside | Задает поведение разбиения страниц внутри элемента |
| perspective | Придает элементу с трехмерной позицией некоторую перспективу |
| perspective-origin | Определяет, в какой позиции пользователь смотрит на 3D-позиционный элемент |
| pointer-events | Определяет, реагирует ли элемент на события указателя |
| position | Указывает тип метода позиционирования, используемого для элемента (статический, относительный, абсолютный или фиксированный) |
| quotes | Задает тип кавычек для внедренных предложений |
| resize | Определяет, является ли (и как) элемент изменяемым по размерам пользователем |
| right | Задает правильное положение позиционного элемента |
| tab-size | Задает ширину символа табуляции |
| table-layout | Определяет алгоритм, используемый для компоновки ячеек таблицы, строк и столбцов |
| text-align | Задает выравнивание текста по горизонтали |
| text-align-last | Описывает, как последняя строка блока или строки перед принудительным разрывом строки выравнивается при выравнивании текста «justify» |
| text-combine-upright | Задает комбинацию нескольких символов в пространстве одного символа |
| text-decoration | Указывает украшение, добавляемое в текст |
| text-decoration-color | Определяет цвет текста-украшение |
| text-decoration-line | Указывает тип линии в тексте-украшение |
| text-decoration-style | Задает стиль линии в оформлении текста |
| text-indent | Задает отступ первой строки в текстовом блоке |
| text-justify | Задает метод выравнивания, используемый при выравнивании текста «justify» |
| text-orientation | Определяет ориентацию текста в строке |
| text-overflow | Указывает, что должно происходить при переполнении содержащегося в тексте элемента |
| text-shadow | Добавление тени к тексту |
| text-transform | Управляет капитализацией текста |
| text-underline-position | Определяет положение подчеркивания, которое задается с помощью свойства Text-декорирование |
| top | Определяет верхнюю позицию позиционного элемента |
| transform | Применяет 2D или 3D преобразование к элементу |
| transform-origin | Позволяет изменить положение на преобразованных элементах |
| transform-style | Определяет способ визуализации вложенных элементов в трехмерном пространстве |
| transition | Сокращенное свойство для задания четырех свойств перехода |
| transition-delay | Указывает, когда начнется эффект перехода |
| transition-duration | Указывает, сколько секунд или миллисекунд требуется для выполнения эффекта перехода |
| transition-property | Задает имя свойства CSS, для которого используется эффект перехода |
| transition-timing-function | Определяет кривую скорости эффекта перехода |
| unicode-bidi | Используется вместе со свойством direction для установки или возврата текста, который должен быть переопределен для поддержки нескольких языков в одном документе |
| user-select | Указывает, можно ли выбрать текст элемента |
| vertical-align | Задание вертикального выравнивания элемента |
| visibility | Указывает, является ли элемент видимым |
| white-space | Указывает, как обрабатываются пробелы внутри элемента |
| widows | Задает минимальное число строк, которые должны быть оставлены в верхней части страницы при возникновении разрыва страницы внутри элемента |
| width | Задает ширину элемента |
| word-break | Указывает, как слова должны прерываться при достижении конца строки |
| word-spacing | Увеличивает или уменьшает расстояние между словами в тексте |
| word-wrap | Позволяет длинные, неразрывные слова, которые будут сломаны и обернуть к следующей строке |
| writing-mode |
| align-content | Задает выравнивание между линиями внутри гибкого контейнера, если элементы не используют все доступное пространство |
| align-items | Задает выравнивание для элементов внутри гибкого контейнера |
| align-self | Задает выравнивание для выбранных элементов внутри гибкого контейнера |
| all | Сбрасывает все свойства (кроме unicode-bidi и direction) |
| animation | Сокращенное свойство для всех свойств animation-* |
| animation-delay | Задает задержку запуска анимации |
| animation-direction | Указывает, должна ли анимация воспроизводиться вперед, назад или в других циклах |
| animation-duration | Определяет, сколько времени анимация должна занять для завершения одного цикла |
| animation-fill-mode | Задает стиль элемента, если анимация не воспроизводится (до он начнется, после его окончания, или как) |
| animation-iteration-count | Указывает, сколько раз анимация должна воспроизводиться |
| animation-name | Задает имя анимации @keyframes |
| animation-play-state | Указывает, запущена или приостановлена анимация |
| animation-timing-function | Задает кривую скорости анимации |
| backface-visibility | Определяет, должна ли задняя грань элемента быть видимой при обращении к пользователю |
| background | Сокращенное свойство для всех свойств background-* |
| background-attachment | Задает, будет ли фоновое изображение прокручиваться вместе с остальной частью страницы или будет фиксироваться |
| background-blend-mode | Задает режим наложения каждого фонового слоя (цвет/изображение) |
| background-clip | Определяет, как далеко фон (цвет или картинка) должна распространяться в элемент |
| background-color | Задает цвет фона элемента |
| background-image | Задает одно или несколько фоновых изображений для элемента |
| background-origin | Указывает исходное положение фонового изображения |
| background-position | Определяет положение фонового изображения |
| background-repeat | Устанавливается, если/как, фоновое изображение будет повторяться |
| background-size | Определяет размер фоновых изображений |
| border | Сокращенное свойство для свойств border-width, border-style и border-color |
| border-bottom | Сокращенное свойство для свойств border-bottom-width, border-bottom-style и border-bottom-color |
| border-bottom-color | Задает цвет нижней границы |
| border-bottom-left-radius | Определяет радиус границы нижнего левого угла |
| border-bottom-right-radius | Определяет радиус границы нижнего правого угла |
| border-bottom-style | Задает стиль нижней границы |
| border-bottom-width | Задает ширину нижней границы |
| border-collapse | Задает, должны ли границы таблицы сворачиваться в одну границу или разделяться |
| border-color | Задает цвет четырех границ |
| border-image | Сокращенное свойство для всех свойств border-image-* |
| border-image-outset | Задает величину, на которую область изображения границы выходит за пределы границы бокса |
| border-image-repeat | Указывает, следует ли повторять, округлять или растягивать изображение границы |
| border-image-slice | Определяет, как разрезать изображение границы |
| border-image-source | Указывает путь к изображению, которое будет использоваться в качестве границы |
| border-image-width | Определяет ширину изображения границы |
| border-left | Сокращенное свойство для всех свойств border-left-* |
| border-left-color | Задает цвет левой границы |
| border-left-style | Задает стиль левой границы |
| border-left-width | Задает ширину левой границы |
| border-radius | Сокращенное свойство для всех свойств border-*-radius |
| border-right | Сокращенное свойство для всех свойств border-right-* |
| border-right-color | Задает цвет правой границы |
| border-right-style | Задает стиль правой границы |
| border-right-width | Задает ширину правой границы |
| border-spacing | Задает расстояние между границами соседних ячеек |
| border-style | Задает стиль четырех границ |
| border-top | Сокращенное свойство для свойств border-top-width, border-top-style and border-top-color |
| border-top-color | Задает цвет верхней границы |
| border-top-left-radius | Определяет радиус границы верхнего левого угла |
| border-top-right-radius | Определяет радиус границы верхнего правого угла |
| border-top-style | Задает стиль верхней границы |
| border-top-width | Устанавливает ширину верхней границы |
| border-width | Задает ширину четырех границ |
| bottom | Задает положение элементов в нижней части родительского элемента |
| box-decoration-break | Задает поведение фон и границы к элементу page-break, или для элеметов in-line, в line-break. |
| box-shadow | Присоединяет одну или несколько теней к элементу |
| box-sizing | Определяет, как вычисляются ширина и высота элемента: они включают в себя отступы и границы, или нет |
| break-after | Задает поведение разрыва страницы, столбца или области после созданного бокса |
| break-before | Указывает поведение разрыва страницы, столбца или области перед созданным бокса |
| break-inside | Указывает поведение разрыва страницы, столбца или области внутри созданного бокса |
| caption-side | Задает размещение заголовка таблицы |
| caret-color | Задает цвет курсора (символ) во входных данных, текстовых областях или редактируемом элементе |
| @charset | Указывает кодировку символов, используемую в таблице стилей |
| clear | Определяет, на каких сторонах элемента плавающие элементы не могут плавать |
| clip | Клипы абсолютно расположенный элемент |
| color | Задает цвет текста |
| column-count | Указывает количество столбцов, на которые должен быть разделен элемент |
| column-fill | Указывает, как заполнять столбцы, сбалансированные или нет |
| column-gap | Определяет зазор между столбцами |
| column-rule | Сокращенное свойство для всех свойств column-rule-* |
| column-rule-color | Задает цвет правила между столбцами |
| column-rule-style | Задает стиль правила между столбцами |
| column-rule-width | Задает ширину правила между столбцами |
| column-span | Указывает, сколько столбцов должен занимать элемент |
| column-width | Задает ширину столбца |
| columns | Сокращенное свойство для свойств column-width и column-count |
| content | Используется с псевдо-элементами: before и: after для вставки генерированного содержимого |
| counter-increment | Увеличивает или уменьшает значение одного или нескольких счетчиков CSS |
| counter-reset | Создает или сбрасывает один или несколько счетчиков CSS |
| cursor | Указывает курсор мыши будет отображаться при наведении на элемент |
| direction | Задает направление текста направление/записи |
| display | Указывает, как должен отображаться определенный элемент HTML |
| empty-cells | Указывает, следует ли отображать границы и фон пустых ячеек в таблице |
| filter | Определяет эффекты (например, размытие или смещение цвета) для элемента перед его отображением |
| flex | Сокращенное свойство для свойств flex-grow, flex-shrink, и flex-basis |
| flex-basis | Задает начальную длину гибкого элемента |
| flex-direction | Указывает направление гибких элементов |
| flex-flow | Сокращенное свойство для свойств flex-direction и flex-wrap |
| flex-grow | Указывает, насколько элемент будет расти относительно остальных |
| flex-shrink | Указывает, как элемент будет сжиматься относительно остальных |
| flex-wrap | Указывает, следует ли оборачивать гибкие элементы |
| float | Указывает, должен ли бокс быть плавающим |
| font | Сокращенное свойство для свойств font-style, font-variant, font-weight, font-size/line-height, и font-family |
| @font-face | Правило, которое позволяет веб-сайтам загружать и использовать шрифты, отличные от шрифтов «web-safe» |
| font-family | Задает шрифт для текста |
| font-feature-settings | Позволяет управлять расширенными типографскими возможностями шрифтов OpenType |
| @font-feature-values | Позволяет авторам использовать общее имя в font-variant-alternate для функции, активированной по-разному в OpenType |
| font-kerning | Управляет использованием информации Кернинга (как расставляются буквы) |
| font-language-override | Контролирует использование языковых символов в шрифте |
| font-size | Задает размер шрифта текста |
| font-size-adjust | Сохраняет читаемость текста при резервном копировании шрифта |
| font-stretch | Выбор нормальной, сжатой или развернутой грани из семейства шрифтов |
| font-style | Задает стиль шрифта для текста |
| font-synthesis | Элементы управления, отсутствующие шрифты (полужирный или курсив) могут быть синтезированы браузером |
| font-variant | Указывает, должен ли текст отображаться шрифтом с маленькими прописными буквами |
| font-variant-alternates | Управляет использованием альтернативных глифов, связанных с альтернативными именами, определенными в @font-feature-values |
| font-variant-caps | Управляет использованием альтернативных символов для заглавных букв |
| font-variant-east-asian | Управляет использованием альтернативных глифов для восточноазиатских скриптов (e.g японский и китайский языки) |
| font-variant-ligatures | Управляет тем, какие лигатуры и контекстные формы используются в текстовом содержимом элементов, к которым они применяются |
| font-variant-numeric | Управляет использованием альтернативных глифов для чисел, дробей и порядковых маркеров |
| font-variant-position | Управляет использованием альтернативных глифов меньшего размера, расположенных в виде верхнего или нижнего индекса относительно базовой линии шрифта |
| font-weight | Задает вес шрифта |
| grid | Сокращенное свойство для свойств grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, и grid-auto-flow |
| grid-area | Либо задает имя элемента сетки, и это свойство является свойством, характеристикой свойств grid-row-start, grid-column-start, grid-row-end, и grid-column-end |
| grid-auto-columns | Задает индекс размера столбца |
| grid-auto-flow | Указывает, как автоматически размещаемые элементы вставляются в сетку |
| grid-auto-rows | Задает индекс размера строки |
| grid-column | Сокращенное свойство для свойств grid-column-start и grid-column-end |
| grid-column-end | Указывает, где заканчивается элемент сетки |
| grid-column-gap | Определяет размер зазора между столбцами |
| grid-column-start | Указывает, с чего начать элемент сетки |
| grid-gap | Сокращенное свойство для свойств grid-row-gap и grid-column-gap |
| grid-row | Сокращенное свойство для свойств grid-row-start и grid-row-end |
| grid-row-end | Указывает, где заканчивается элемент сетки |
| grid-row-gap | Определяет размер зазора между строками |
| grid-row-start | Указывает, с чего начать элемент сетки |
| grid-template | Сокращенное свойство для свойств grid-template-rows, grid-template-columns и grid-areas properties |
| grid-template-areas | Указывает, как отображать столбцы и строки, используя именованные элементы сетки |
| grid-template-columns | Задает размер столбцов и количество столбцов в макете сетки |
| grid-template-rows | Задает размер строк в макете сетки |
| hanging-punctuation | Указывает, может ли знак пунктуации располагаться за пределами строки |
| height | Задает высоту элемента |
| hyphens | Задает способ разделения слов для улучшения расположения абзацев |
| image-rendering | Подсказывает браузеру, какие аспекты изображения наиболее важны для сохранения при масштабировании |
| @import | Позволяет импортировать таблицу стилей в другую таблицу стилей |
| isolation | Определяет, должен ли элемент создавать новое содержимое стека |
| justify-content | Задает выравнивание между элементами внутри гибкого контейнера, если не использовать все доступное пространство |
| left | Определяет левое положение расположенного элемента |
| letter-spacing | Увеличивает или уменьшает расстояние между символами в тексте |
| line-break | Определяет как/если ломать линии |
| line-height | Устанавливает высоту линии |
| list-style | Задает все свойства списка в одном объявлении |
| list-style-image | Задает изображение в качестве маркера элемента списка |
| list-style-position | Указывает положение маркеров элементов списка (жирные точки) |
| list-style-type | Указывает тип маркера элемента списка |
| margin | Устанавливает все свойства полей в одном объявлении |
| margin-bottom | Устанавливает нижнее поле элемента |
| margin-left | Задает левое поле элемента |
| margin-right | Задает правое поле элемента |
| margin-top | Задает верхнее поле элемента |
| max-height | Задает максимальную высоту элемента |
| max-width | Задает максимальную ширину элемента |
| @media | Устанавливает правила стиля для различных типов/устройств/размеров носителей |
| min-height | Задает минимальную высоту элемента |
| min-width | Задает минимальную ширину элемента |
| mix-blend-mode | Указывает, как содержимое элемента должно сочетаться с его прямым родительским фоном |
| object-fit | Определяет как содержание замененного элемента должно быть приспособлено к боксу установленной своими используемыми высотой и шириной |
| object-position | Задает выравнивание заменяемого элемента внутри его бокса |
| opacity | Задает уровень непрозрачности для элемента |
| order | Устанавливает порядок гибкого элемента относительно остальных |
| orphans | Задает минимальное количество строк, которое должно оставаться в нижней части страницы при разрыве страницы внутри элемента |
| outline | Сокращенное свойство для свойств outline-width, outline-style, и outline-color |
| outline-color | Задает цвет контура |
| outline-offset | Смещает контур и рисует его за границей |
| outline-style | Задает стиль контура |
| outline-width | Задает ширину контура |
| overflow | Указывает, что происходит, если содержимое переполняет бокс элемента |
| overflow-wrap | Указывает, может ли браузер прерывать строки в словах, чтобы предотвратить переполнение (если строка слишком длинная, чтобы соответствовать содержащему ее блоку) |
| overflow-x | Указывает, следует ли обрезать левый/правый края содержимого, если оно переполняет область содержимого элемента |
| overflow-y | Указывает, следует ли обрезать верхний/нижний края содержимого, если оно переполняет область содержимого элемента |
| padding | Сокращенное свойство для свойств padding-* |
| padding-bottom | Устанавливает нижней отступ элемента |
| padding-left | Задает отступ слева для элемента |
| padding-right | Задает правый отступ элемента |
| padding-top | Задает отступ сверху элемента |
| page-break-after | Задает поведение разрыва страницы после элемента |
| page-break-before | Задает поведение разрыва страницы перед элементом |
| page-break-inside | Задает поведение разрыва страницы внутри элемента |
| perspective | Дает 3D-позиционированному элементу некоторую перспективу |
| perspective-origin | Определяет, в какой позиции пользователь смотрит на 3D-позиционированный элемент |
| pointer-events | Определяет, реагирует ли элемент на события указателя |
| position | Указывает тип метода позиционирования, используемого для элемента (статический, относительный, абсолютный или фиксированный) |
| quotes | Задает тип кавычек для внедренных предложений |
| resize | Определяет, если (и как) элемент изменяется пользователем |
| right | Определяет правое положение расположенного элемента |
| tab-size | Задает ширину символа табуляции |
| table-layout | Определяет алгоритм, используемый для компоновки ячеек, строк и столбцов таблицы |
| text-align | Задает выравнивание текста по горизонтали |
| text-align-last | Описывает выравнивание последней строки блока или строки непосредственно перед принудительным разрывом строки при выравнивании текста «justify» |
| text-combine-upright | Указывает сочетание нескольких символов в один символ |
| text-decoration | Задает украшение, добавляемое к тексту |
| text-decoration-color | Задает цвет оформления текста |
| text-decoration-line | Определяет тип линии в тексте украшений |
| text-decoration-style | Задает стиль линии в оформлении текста |
| text-indent | Задает отступ первой строки в текстовом блоке |
| text-justify | Указывает метод выравнивания, используемый при выравнивании текста «justify» |
| text-orientation | Определяет ориентацию текста в строке |
| text-overflow | Указывает, что должно произойти, когда текст переполняет содержащий элемент |
| text-shadow | Добавляет тень к тексту |
| text-transform | Управляет капитализацией текста |
| text-underline-position | Задает положение подчеркивания, заданного с помощью свойства text-decoration |
| top | Определяет верхнее положение расположенного элемента |
| transform | Применяется 2D-или 3D-преобразования к элементу |
| transform-origin | Позволяет изменять положение преобразованных элементов |
| transform-style | Задает способ отображения вложенных элементов в 3D-пространстве |
| transition | Сокращенное свойство для всех свойств transition-* |
| transition-delay | Указывает, когда начнется эффект перехода |
| transition-duration | Указывает, сколько секунд или миллисекунд требуется для завершения эффекта перехода |
| transition-property | Задает имя свойства CSS эффект перехода для |
| transition-timing-function | Определяет кривую скорости эффекта перехода |
| unicode-bidi | Используется вместе с свойством direction для установки или возврата переопределения текста для поддержки нескольких языков в одном документе |
| user-select | Указывает, можно ли выбрать текст элемента |
| vertical-align | Задает вертикальное выравнивание элемента |
| visibility | Указывает, является ли элемент видимым |
| white-space | Задает способ обработки пробелов внутри элемента |
| widows | Задает минимальное количество строк, которое должно оставаться в верхней части страницы при разрыве страницы внутри элемента |
| width | Задает ширину элемента |
| word-break | Указывает, как слова должны ломаться при достижении конца строки |
| word-spacing | Увеличивает или уменьшает расстояние между словами в тексте |
| word-wrap | Позволяет длинные, нерушимые слова, которые будут разбиты и перенесены на следующую строку |
| writing-mode | Указывает, должны ли строки текста уложены горизонтально или вертикально |
| z-index | Задает порядок расположения элементов в стеке |
| Свойство | Описание | Chrome | Firefox | Opera | Safari | IExplorer | Edge |
|---|---|---|---|---|---|---|---|
| background | Позволяет установить все свойства фона в одном объявлении (универсальное свойство). | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
| background-attachment | Устанавливает, поведение фонового изображения во время прокрутки (фиксированное или прокручивается с остальной частью страницы). | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
| background-blend-mode | Определяет режим смешивания слоя каждого фонового цвета ( и / или изображения). | 35.0 | 30.0 | 22.0 | 7.1* | Нет | Нет |
| background-color | Определяет цвет фона элемента. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
| background-image | Задает одно или несколько фоновых изображений для элемента. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
| background-position | Задает положение (позицию) фонового изображения. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
| background-repeat | Устанавливает, как будет повторяться фоновое изображение. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
| background-clip | Определяет область элемента для которой будет задан задний фон. | 4.0 | 4.0 | 10.5 | 3.0 | 9.0 | 12.0 |
| background-origin | Определяет как позиционируется фоновое изображение/-я относительно элемента. | 4.0 | 4.0 | 10.5 | 3.0 | 9.0 | 12.0 |
| background-size | Определяет размер фонового изображения/-ий. | 4.0 1.0 -webkit- | 4.0 3.6 -moz- | 10.5 10.0 -o- | 4.1 3.0 -webkit- | 9.0 | 12.0 |
| border | Позволяет установить все свойства границ в одном объявлении. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
| border-bottom | Устанавливает все свойства нижней границы в одном объявлении. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
| border-bottom-color | Устанавливает цвет нижней границы. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
| border-bottom-left-radius | Определяет форму границы нижнего левого угла. | 5.0 4.0 -webkit- | 4.0 3.0 -moz- | 10.5 | 5.0 3.1 -webkit- | 9.0 | 12.0 |
| border-bottom-right-radius | Определяет форму границы нижнего правого угла. | 5.0 4.0 -webkit- | 4.0 3.0 -moz- | 10.5 | 5.0 3.1 -webkit- | 9.0 | 12.0 |
| border-bottom-style | Устанавливает стиль нижней границы. | 1.0 | 1.0 | 9.2 | 1.0 | 5.5 | 12.0 |
| border-bottom-width | Устанавливает ширину нижней границы. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
| border-color | Устанавливает цвет для всех границ в одном объявлении. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
| border-image | Позволяет указать изображение, которое будет использовано вместо границы вокруг элемента. Свойство является универсальным и позоляет установить значения для всех border-image-* свойств в одном объявлении. | 16.0 4.0 -webkit- | 15.0 3.5 -moz- | 15 11.0 -o- | 6.0 3.1 -webkit- | 11.0 | 12.0 |
| border-image-outset | Определяет величину, на которую область границы изображения выходит за пределы блока границы. | 15.0 | 15.0 | 15.0 | 6.0 | 11.0 | 12.0 |
| border-image-repeat | Определяет, должна ли граница изображения быть повторена, масштабируема или растянута. | 15.0 | 15.0 | 15.0 | 6.0 | 11.0 | 12.0 |
| border-image-slice | Определяет, как разделить изображение, используемое в роли изображения-границы и указанное в свойстве border-image-source. | 15.0 | 15.0 | 15.0 | 6.0 | 11.0 | 12.0 |
| border-image-source | Указывает путь к изображению, которое будет использовано в качестве границы. Допускается использование градиентов вместо изображения. | 15.0 | 15.0 | 15.0 | 6.0 | 11.0 | 12.0 |
| border-image-width | Задает ширину границы-изображения путем определения смещения (внутрь элемента от края границы). | 15.0 | 13.0 | 15.0 | 6.0 | 11.0 | 12.0 |
| border-left | Устанавливает все свойства левой границы в одном объявлении. | 1.0 | 1.0 | 1.0 | 3.5 | 4.0 | 12.0 |
| border-left-color | Устанавливает цвет левой границы. | 1.0 | 1.0 | 1.0 | 3.5 | 4.0 | 12.0 |
| border-left-style | Устанавливает стиль левой границы. | 1.0 | 1.0 | 9.2 | 1.0 | 5.5 | 12.0 |
| border-left-width | Устанавливает ширину левой границы. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
| border-radius | Позволяет определить форму границ элемента. Это свойство является короткой записью для свойств border-bottom-left-radius, border-bottom-right-radius, border-top-left-radius и border-top-right-radius . | 5.0 4.0 -webkit- | 4.0 3.0 -moz- | 10.5 | 5.0 3.1 -webkit- | 9.0 | 12.0 |
| border-right | Устанавливает все свойства правой границы в одном объявлении. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
| border-right-color | Устанавливает цвет правой границы. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
| border-right-style | Устанавливает стиль правой границы. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
| border-right-width | Устанавливает ширину правой границы. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
| border-style | Устанавливает стиль для всех границ в одном объявлении. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
| border-top | Устанавливает все свойства верхней границы в одном объявлении. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
| border-top-color | Устанавливает цвет верхней границы. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
| border-top-left-radius | Определяет форму границы в верхнем левом углу. | 5.0 4.0 -webkit- | 4.0 3.0 -moz- | 10.5 | 5.0 3.1 -webkit- | 9.0 | 12.0 |
| border-top-right-radius | Определяет форму границы в верхнем правом углу. | 5.0 4.0 -webkit- | 4.0 3.0 -moz- | 10.5 | 5.0 3.1 -webkit- | 9.0 | 12.0 |
| border-top-style | Устанавливает стиль верхней границы. | 1.0 | 1.0 | 9.2 | 1.0 | 5.5 | 12.0 |
| border-top-width | Устанавливает ширину верхней границы. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
| border-width | Устанавливает ширину для всех границ в одном объявлении. | 1.0 | 1.0 | 3.5 | 1.0 | 4.0 | 12.0 |
| box-decoration-break | Устанавливает поведение фона и границы элемента на разрыве страницы, или для inline элементов при разрыве строки. | 45.0 -webkit- | 42 | 34.0 -webkit- | 9.0 -webkit- | Нет | Нет |
| box-shadow | Добавляет одну или несколько теней к элементу. | 10.0 4.0 -webkit- | 4.0 3.5 -moz- | 10.5 | 5.1 3.1 -webkit- | 9.0 | 12.0 |
: active — CSS: каскадные таблицы стилей
Псевдокласс : active CSS представляет элемент (например, кнопку), который активируется пользователем. При использовании мыши «активация» обычно начинается, когда пользователь нажимает основную кнопку мыши.
Псевдокласс : active обычно используется в элементах и . Другие общие цели этого псевдокласса включают элементы, которые содержат активированный элемент, и элементы формы, которые активируются через связанный с ними .
Стили, определенные псевдоклассом : active , будут переопределены любым последующим псевдоклассом, связанным со ссылками (: ссылка , : hover или : посещено ), имеющим как минимум такую же специфичность. Чтобы правильно оформить ссылки, поместите правило : active после всех других правил, связанных со ссылками, как определено в LVHA-order : : link — : visit — : hover — : active .
Примечание: В системах с многокнопочной мышью CSS3 указывает, что псевдокласс : active должен применяться только к основной кнопке; у правшей это обычно самая левая кнопка.
Активные ссылки
HTML
В этом абзаце есть ссылка:
Эта ссылка становится красной, когда вы нажимаете на нее.
Абзац приобретает серый фон, когда вы нажимаете на него или ссылку.
CSS
a: ссылка {цвет: синий; }
а: посетил {цвет: фиолетовый; }
a: hover {фон: желтый; }
а: активный {цвет: красный; }
p: active {background: #eee; } Результат
Активные элементы формы
HTML
<форма>
CSS
форма: активная {
красный цвет;
}
кнопка формы {
фон: белый;
} Результат
таблицы BCD загружаются только в браузере
font-option-caps — CSS: Cascading Style Sheets
Свойство CSS font-variant-caps управляет использованием альтернативных глифов для заглавных букв.
Если данный шрифт включает глифы заглавных букв нескольких разных размеров, это свойство выбирает наиболее подходящие. Если маленькие заглавные глифы недоступны, они отображаются с использованием маленьких заглавных глифов. Если их нет, браузер синтезирует их из глифов верхнего регистра.
Шрифты
иногда включают специальные глифы для различных букв без регистра (например, знаков препинания), чтобы лучше соответствовать заглавным буквам вокруг них. Однако глифы с маленькой заглавной буквы никогда не синтезируются для букв без регистра.
Правила для конкретного языка
Это свойство учитывает правила сопоставления регистра для конкретного языка. Например:
- В тюркских языках, таких как турецкий (tr), азербайджанский (az), крымскотатарский (crh), волжско-татарский (tt) и башкирский (ba), есть два вида
и(один с точкой, один без) и две пары корпусов:i/İиı/I. - На немецком языке (de)
ßможет превратиться вẞ(U + 1E9E) в верхнем регистре. - В греческом языке (эль) гласные теряют свой акцент, когда все слово написано в верхнем регистре (
ά/Α), за исключением дизъюнктивного эта (ή/Ή). Кроме того, дифтонги с ударением на первой гласной теряют ударение и приобретают диакритический знак на второй гласной (άι/ΑΪ).
шрифт-вариант-заглавные буквы: нормальный;
вариант-шрифта-заглавные буквы: маленькие-заглавные буквы;
вариант-шрифта-заглавные буквы: все-маленькие-заглавные буквы;
шрифт-вариант-заглавные буквы: маленькие-заглавные буквы;
шрифт-вариант-заглавные буквы: все маленькие-заглавные буквы;
шрифт-вариант-заглавные буквы: unicase;
варианты шрифтов: заглавные буквы;
шрифт-вариант-заглавные буквы: наследовать;
шрифт-вариант-заглавные буквы: начальный;
шрифт-вариант-заглавные буквы: вернуться;
шрифт-вариант-заглавные буквы: не задано;
Свойство font-variant-caps задается с использованием единственного значения ключевого слова из списка ниже.В каждом случае, если шрифт не поддерживает значение OpenType, он синтезирует глифы.
Значения
-
нормальный - Отключает использование альтернативных глифов.
-
капсюли - Включает отображение строчных заглавных букв (функция OpenType:
smcp). Глифы с маленькими прописными буквами обычно используют форму прописных букв, но уменьшаются до размера строчных букв. -
все мелкие - Позволяет отображать строчные заглавные буквы как для прописных, так и для строчных букв (функции OpenType:
c2sc,smcp). -
мини-кепки - Включает отображение малых заглавных букв (функция OpenType:
pcap). -
кепки all-petite - Позволяет отображать маленькие заглавные буквы как для прописных, так и для строчных букв (функции OpenType:
c2pc,pcap). -
unicase - Включает отображение смеси прописных букв для прописных букв с обычными строчными буквами (функция OpenType:
unic). -
заглушки - Включает отображение заглавных букв (функция OpenType:
title). Глифы прописных букв часто предназначены для использования со строчными буквами. При использовании во всех последовательностях заголовков в верхнем регистре они могут казаться слишком сильными. Заглавные буквы созданы специально для этой ситуации.
Большие участки текста с вариантами шрифта значение all-small-caps или all-small-caps могут быть трудными для чтения людьми с когнитивными проблемами, такими как дислексия.
нормальный | малые шапки | все-маленькие заглавные буквы | маленькие кепки | все-кепки | unicase | titling-caps
Установка варианта шрифта small-caps
HTML
Firefox великолепен, маленькие шапки!
Firefox великолепен, нормальные шапки!
CSS
.small-caps {
вариант-шрифта-заглавные буквы: маленькие-заглавные буквы;
стиль шрифта: курсив;
}
.нормальный {
шрифт-вариант-заглавные буквы: нормальный;
стиль шрифта: курсив;
}
Результат
Таблицы BCD загружаются только в браузере
-webkit-line-clamp — CSS: Cascading Style Sheets
Свойство CSS -webkit-line-clamp позволяет ограничить содержимое контейнера блока указанным количеством строк.
Он работает только в сочетании со свойством display , для которого установлено значение -webkit-box или -webkit-inline-box и свойство -webkit-box-orient , для которого установлено значение по вертикали .
В большинстве случаев вы также захотите установить overflow на hidden , иначе содержимое не будет обрезано, но многоточие все равно будет отображаться после указанного количества строк.
При применении к элементам привязки усечение может происходить в середине текста, не обязательно в конце.
Примечание: Это свойство изначально было реализовано в WebKit и имеет некоторые проблемы. Он стандартизирован для поддержки устаревших версий. Спецификация CSS Overflow Module Level 3 также определяет свойство line-clamp , которое предназначено для замены этого свойства и предотвращения его проблем.
-webkit-line-clamp: нет;
-webkit-line-зажим: 3;
-webkit-line-clamp: 10;
-webkit-line-clamp: наследовать;
-webkit-line-clamp: начальная;
-webkit-line-clamp: не установлено;
-
нет - Это значение указывает, что содержимое не будет ограничено.
-
<целое число> - Это значение указывает количество строк, после которых содержимое будет ограничено. Он должен быть больше 0.
Усечение абзаца
HTML
В этом примере для свойства -webkit-line-clamp установлено значение 3 , что означает, что текст фиксируется после трех строк.
В месте зажима текста будет отображаться многоточие.
CSS
п {
ширина: 300 пикселей;
дисплей: -webkit-box;
-webkit-box-orient: вертикальный;
-webkit-line-зажим: 3;
переполнение: скрыто;
} Результат
Таблицы BCD загружаются только в браузере
CSS Aural Reference
Таблицы стилей для наушников
Таблицы стилей Aural используют комбинацию синтеза речи и звуковых эффектов, чтобы заставить пользователя слушать информацию, а не читать информацию.
Можно использовать аудиопрезентацию:
- слепыми
- , чтобы помочь пользователям научиться читать
- в помощь пользователям, имеющим проблемы с чтением
- для домашних развлечений
- в машине
- сообществами с ограниченными возможностями восприятия печатной информации
Звуковая презентация преобразует документ в обычный текст и передает его в
программа чтения с экрана (программа, которая читает все символы на экране).
Пример таблицы стилей Aural:
h2, h3, h4, h5
{
голос-семейство: мужской;
насыщенность: 80;
cue-before: url («сигнал.au «)
}
В приведенном выше примере синтезатор речи воспроизводит звук, а затем произносит заголовки очень богатым мужским голосом.
Звуковая ссылка CSS
Столбец «CSS» указывает, в какой версии CSS определено свойство (CSS1 или CSS2).
| Имущество | Описание | Значения | CSS |
|---|---|---|---|
| азимут | Устанавливает источник звука | угол левый крайний левый левый центральный левый центральный центральный правый правый крайний правый правый сзади влево вправо | 2 |
| кий | Устанавливает свойства сигнала в одном объявлении | метка до метка после | 2 |
| кий после | Определяет звук, который будет воспроизводиться после произнесения элемента содержание | нет url | 2 |
| кий перед | Определяет звук, который будет воспроизводиться перед произнесением элемента содержание | нет url | 2 |
| отметка | Устанавливает источник звука | угол ниже уровень выше выше ниже | 2 |
| пауза | Устанавливает свойства паузы в одном объявлении | пауза-до пауза-после | 2 |
| пауза после | Задает паузу после произнесения содержимого элемента | время % | 2 |
| пауза перед | Задает паузу перед озвучиванием содержимого элемента | время % | 2 |
| шаг | Определяет говорящий голос | частота x-низкая низкая средняя высокая x-высокая | 2 |
| диапазон шага | Задает вариацию голоса.(Монотонный голос или анимированный голос?) | номер | 2 |
| люфт | Определяет звук, который будет воспроизводиться при произнесении элемента содержание | авто нет url mix repeat | 2 |
| богатство | Задает насыщенность голоса. (Богатый голос или тонкий голос?) | номер | 2 |
| говорить | Указывает, будет ли содержимое отображаться на слух. | нормальный нет разбор | 2 |
| говорить-заголовок | Указывает, как обрабатывать заголовки таблицы.Если заголовки произносится перед каждой ячейкой или только перед ячейкой с другим заголовком чем предыдущая ячейка | всегда один раз | 2 |
| с цифрами | Указывает, как произносить числа | цифры непрерывный | 2 |
| говорить-пунктуация | Указывает, как произносить знаки препинания | нет код | 2 |
| скорость речи | Задает скорость речи | номер x-медленно медленно средний быстро x-быстро быстрее медленнее | 2 |
| напряжение | Определяет «ударение» в голосовой речи | номер | 2 |
| голосовая семья | Задает голосовую группу говорящего | специальный голос общий голос | 2 |
| объем | Определяет громкость речи | номер % тихий х-мягкий мягкий средний громкий х-громкий | 2 |
Свойство отображения CSS
Пример
Использование различных отображаемых значений:
п.ex1 {display: none;}
p.ex2 {display: inline;}
p.ex3 {display:
block;}
p.ex4 {display: inline-block;}
Попробуй сам »
Дополнительные примеры «Попробуйте сами» ниже.
Определение и использование
Свойство display определяет поведение отображения
(тип окна рендеринга) элемента.
В HTML значение свойства отображения по умолчанию берется из спецификаций HTML или из таблицы стилей по умолчанию браузера / пользователя. В
значение по умолчанию в XML является встроенным, включая элементы SVG.
| Значение по умолчанию: | ? |
|---|---|
| Унаследовано: | нет |
| Анимация: | нет. Прочитать про animatable |
| Версия: | CSS1 |
| Синтаксис JavaScript: | объект .style.display = «none» Попробуй |
Поддержка браузера
Числа в таблице указывают первую версию браузера, полностью поддерживающую свойство.
| Имущество | |||||
|---|---|---|---|---|---|
| дисплей | 4,0 | 8,0 | 3,0 | 3,1 | 7,0 |
Примечание: Значения «flex» и «inline-flex» требуют префикса -webkit- для работы в Safari.
Примечание: «display: contents» не работает в Edge.
предыдущая версия 79.
Синтаксис CSS
Значения свойств
| Значение | Описание | Играй | ||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| рядный | Отображает элемент как встроенный элемент (например, ).Никакие свойства высоты и ширины не будут иметь никакого эффекта | Играй » | ||||||||||||||||||||||||||||||||||
| блок | Отображает элемент как блочный элемент (например, ). Это начинается на | Играй » | ||||||||||||||||||||||||||||||||||
| содержание | Заставляет контейнер исчезнуть, делая дочерние элементы дочерними элементами элемент на следующий уровень в DOM | Играй » | ||||||||||||||||||||||||||||||||||
| гибкий | Отображает элемент как гибкий контейнер на уровне блока | Играй » | ||||||||||||||||||||||||||||||||||
| сетка | Отображает элемент как контейнер сетки уровня блока | Играй » | ||||||||||||||||||||||||||||||||||
| рядный блок | Отображает элемент как контейнер блока встроенного уровня.Сам элемент отформатирован как встроенный элемент, но вы можете применить значения высоты и ширины | Играй » | ||||||||||||||||||||||||||||||||||
| линейный гибкий | Отображает элемент как гибкий контейнер встроенного уровня | Играй » | ||||||||||||||||||||||||||||||||||
| встроенная сетка | Отображает элемент как контейнер сетки встроенного уровня | Играй » | ||||||||||||||||||||||||||||||||||
| встроенный стол | Элемент отображается как таблица встроенного уровня | Играй » | ||||||||||||||||||||||||||||||||||
| элемент списка | Пусть элемент ведет себя как элемент | Играй » | ||||||||||||||||||||||||||||||||||
| обкатка | Отображает элемент как блочный или встроенный, в зависимости от контекста | Играй » | ||||||||||||||||||||||||||||||||||
| стол | Пусть элемент ведет себя как элемент
Другие примерыПример Демонстрация того, как использовать значение свойства contents. В следующих .дисплей { .b { Попробуй сам » ПримерДемонстрация того, как использовать значение наследуемого свойства: корпус { p { Попробуй сам » ПримерУстановить направление некоторых гибких элементов внутри элемента в обратном направлении. заказ: div { Попробуй сам » связанные страницыУчебник CSS: Отображение CSS и Ссылка на HTML DOM: свойство отображения Справочное руководство — Smashing MagazineЭтот обзор представляет собой тщательно подобранную и организованную подборку наиболее полезных статей журнала Smashing Magazine, связанных с CSS3 и опубликованных здесь за все годы. Краткий обзорКакое-то время здесь, в Smashing Magazine, мы обратили внимание на то, как многие дизайнеры неохотно принимают новые технологии, такие как CSS3 или HTML5 , из-за отсутствия полной кроссбраузерной поддержки этих технологий. Многие дизайнеры жалуются на то, что отсутствие кроссбраузерной совместимости эффективно сдерживает нас и связывает нам руки, не давая нам полностью проявить себя и продемонстрировать весь спектр наших способностей в нашей работе.Многие придерживаются мнения, что как только этот толчок будет сделан, мы проснемся к совершенно новой сети, полной захватывающих возможностей, которые ждут на другой стороне. Так что они ждут этого дня. На самом деле они действительно ждут Годо. Так же, как неуловимый персонаж из классической пьесы Беккета, этот день полной кроссбраузерной поддержки никогда по-настоящему не достигнет своего рассвета и принесет нам эту замечательную новую сеть, в которой наша работа выглядит одинаково в любом окне и каждые Веб-браузер.Это означает, что многим из нас, работающих в Интернете, от клиентов до дизайнеров и разработчиков и т. Д., Нужно будет скорректировать свое мышление, чтобы мы могли реалистично подходить к Интернету, как он есть сейчас, и, более чем вероятно, каким он будет в будущем. будущее. Подробнее… Некоторые проблемы продолжают возникать у веб-разработчиков, одна из которых связана с тем, как разложить данный дизайн. Разработчики предпринимали многочисленные попытки сделать это с помощью существующих решений. Было написано несколько статей о поиске святого Грааля макетов CSS 1 , но на сегодняшний день ни одно решение не работает без серьезных оговорок.На W3Conf я рассказал о том, как рабочая группа CSS пытается решить проблемы веб-разработчиков с помощью множества предложений. Есть шесть предложений по компоновке, которые имеют отношение к нам, все из которых я описал в своем выступлении: Вот еще немного об этих предложениях и о том, как они помогут вам в разработке веб-сайтов в будущем. Подробнее… Несмотря на то, что современные браузеры поддерживают множество свойств CSS3, большинство дизайнеров и разработчиков, похоже, сосредотачиваются на довольно безобидных свойствах, таких как border-radius, box-shadow или transform.Они хорошо документированы, протестированы и часто используются, поэтому в наши дни практически невозможно не наткнуться на них, если вы создаете веб-сайты. Но глубоко в сундуках браузеров спрятаны продвинутые, сильно недооцененные свойства, которым не уделяют столько внимания. Возможно, некоторые из них справедливы, но другие заслуживают большего признания. Наибольшее богатство скрывается под капотом браузеров WebKit, и в век приложений для iPhone, iPad и Android знакомство с ними может оказаться весьма полезным. Подробнее… За последние несколько лет проявляет все больший и искренний интерес к типографике в Интернете. Большинство веб-сайтов используют текст для передачи своих сообщений, поэтому неудивительно, что к тексту относятся с особой осторожностью. В этой статье мы рассмотрим некоторые полезные приемы и умные эффекты, которые используют возможности таблиц стилей, а также некоторые функции предстоящей спецификации CSS Text Level 3, которая должна дать веб-дизайнерам более точный контроль над текстом. Имейте в виду, что эти новых свойств и методов либо являются новыми , либо все еще находятся в разработке, а некоторые из самых популярных браузеров еще не поддерживают их. Но мы считаем важным, чтобы вы, как информированный и любознательный веб-дизайнер, знали, что ждет нас впереди, и могли экспериментировать в своих проектах. Подробнее… Эта статья — отрывок из недавней книги Эрика Мейера Smashing CSS, опубликованной Wiley в сотрудничестве с Smashing Magazine. В этой статье основное внимание уделяется тому, что нас ждет: техникам укладки, которые вы будете использовать в ближайшем и ближайшем будущем. От стилизации элементов HTML 5 до изменения макета на основе параметров отображения и безумных шаблонов выбора до преобразования макета элемента — все это методы, которые вы можете использовать завтра, в следующем месяце или в следующем году. Благодаря частичной поддержке браузера, все они находятся на переднем крае веб-дизайна. Соответственно, будьте осторожны, чтобы не порезаться! Ряд полезных сайтов могут помочь вам выяснить точный синтаксис и шаблоны, необходимые для использования этих методов.Кроме того, ряд библиотек JavaScript могут расширить поддержку расширенного CSS в старых браузерах, в некоторых случаях даже в IE / Win 5.5. Подробнее… Я верю в мощь, скорость и «возможность обновления» CSS3. Отсутствие необходимости загружать фоновые изображения в качестве структурных улучшений (например, PNG для закругленных углов и градиентов) может сэкономить время на производстве (т. Е. Оплачиваемые часы) и загрузке (т. Е. Скорость страницы). В нашей компании мы с радостью используем CSS3 на клиентских веб-сайтах уже более года, и я считаю, что реализация многих из этих свойств прямо сейчас является наиболее разумным способом создания веб-сайтов. До сегодняшнего дня все это основывалось на предположении: что я могу создать идеальную по пикселям веб-страницу с помощью CSS3 быстрее, чем с помощью старых методов CSS на основе изображений, и что страница CSS3 будет загружаться быстрее, с меньшим общим размер файла и меньшее количество HTTP-запросов. В качестве эксперимента с одним вариантом использования я решил спроектировать и закодировать веб-страницу и дважды добавить визуальные улучшения: один раз с помощью CSS3, а второй раз с использованием фоновых изображений, вырезанных непосредственно из PSD. Подробнее… Как веб-сообщество, мы добились значительного прогресса в отношении CSS3.Мы применили такие свойства, как Передовой опыт использования CSS3 необходимо обсуждать в блогах, в свободное время и вне клиентских проектов.Чтобы найти творческие и разумные способы получить максимальную отдачу от CSS3, потребуется эксперимент, при котором разработчики с радостью обменивают десять неудач на один успех. Прямо сейчас существует множество комбинаций свойств и вариантов использования, которые ждут своего открытия. Все, что нам нужно сделать, это соединить точки. Пришло время запачкать руки и ввести новшества! Подробнее… CSS3 продолжает волновать и расстраивать веб-дизайнеров и разработчиков. Мы воодушевлены возможностями, которые предоставляет CSS3, и проблемами, которые он решит, но также разочарованы отсутствием поддержки в Internet Explorer 8.В этой статье будет продемонстрирован метод, использующий часть CSS3, которая также не поддерживается Internet Explorer 8. Однако не имеет значения , поскольку одно из самых полезных мест для этого модуля — это то, что действительно имеет большую поддержку — маленькое устройства, такие как iPhone и устройства Android. В этой статье я объясню, как с помощью нескольких правил CSS вы можете создать версию своего сайта для iPhone с помощью CSS3, которая теперь будет работать. Мы рассмотрим очень простой пример, и я также расскажу о процессе добавления таблицы стилей для устройств с маленьким экраном на мой собственный сайт, чтобы показать, насколько легко мы можем добавлять таблицы стилей для мобильных устройств на существующие веб-сайты. Подробнее… CSS3 — замечательная вещь, но ее легко обмануть преобразованиями и анимацией (многие из которых зависят от производителя) и забыть о простых селекторах, которые также были добавлены в спецификацию. Ряд новых мощных псевдоселекторов (16 перечислены в последней спецификации W3C) позволяют нам выбирать элементы на основе ряда новых критериев. Прежде чем мы рассмотрим эти новые псевдоклассы CSS3, давайте кратко погрузимся в пыльное прошлое Интернета и проследим путь этих часто неправильно понимаемых селекторов. Подробнее… Модуль гибкой компоновки боксов — или «flexbox», если использовать его популярное прозвище, — это интересная часть рабочего проекта W3C. Спецификация flexbox все еще находится в стадии разработки и может быть изменена, поэтому следите за W3C, но она является частью нового арсенала свойств, которые революционизируют то, как мы размещаем страницы. По крайней мере, когда появится поддержка кроссбраузерности. А пока мы можем поэкспериментировать с flexbox и даже использовать его на рабочих веб-сайтах, где резервные копии по-прежнему будут правильно отображать страницу.Возможно, пройдет немного времени, пока мы не станем считать его таким же популярным, как, скажем, Подробнее… С появлением IE9 Microsoft заявила о своем намерении больше работать с технологиями, основанными на стандартах. Поскольку IE по-прежнему остается самым популярным браузером и во многих отношениях является браузером для непосвященных, мы надеемся, что это долгожданный старт для нас, веб-мастеров, принимающих идею использования CSS3 так же свободно, как мы делаем CSS 2.1. Однако, поскольку IE9 не поддерживается в версиях Windows до Vista, а многие компании все еще используют XP и не хотят (или не могут) обновиться, может пройти некоторое время, прежде чем подавляющее большинство наших пользователей увидят новые технологии, добавленные в упражняться. Хотя многие люди используют CSS3, многие не очень заинтересованы или не знают, с чего начать. В этой статье сначала будут рассмотрены идеи, лежащие в основе CSS3, а затем рассмотрены некоторые хорошие методы работы для старых браузеров и некоторые новые распространенные проблемы. Подробнее… CSS3, вероятно, является самой горячей тенденцией в веб-дизайне прямо сейчас, позволяя разработчикам внедрять ряд решений в свои проекты с помощью очень простого CSS, избегая при этом необходимости прибегать к несемантической разметке, дополнительным изображениям и сложному JavaScript. К сожалению, неудивительно, что Internet Explorer, даже в его самой последней версии, по-прежнему не поддерживает большинство свойств и функций, представленных в CSS3. Опытные разработчики понимают, что CSS3 можно добавлять в новые проекты с учетом постепенного улучшения. Это гарантирует, что контент доступен, в то время как браузеры, не поддерживающие его, возвращаются к менее расширенным возможностям для пользователя. Но разработчики могут столкнуться с ситуацией, когда клиент настаивает на том, чтобы улучшения работали в кросс-браузере , требуя поддержки даже для IE6. В этом случае я собрал вместе несколько вариантов, которые разработчики могут рассмотреть для тех обстоятельств, когда поддержка функции CSS3 требуется для всех версий Internet Explorer (IE6, IE7 и IE8 — все из которых в настоящее время все еще используются использовать). Подробнее… К настоящему времени вы, наверное, слышали хоть что-нибудь об анимации в CSS3 с использованием синтаксиса на основе ключевых кадров. Модуль анимации CSS3 в спецификации существует уже пару лет и может стать важной частью веб-дизайна. Используя анимацию ключевых кадров CSS3, разработчики могут создавать плавные, удобные в обслуживании анимации, которые работают относительно хорошо и не требуют большого количества скриптов. Это просто еще один способ, которым CSS3 помогает элегантно решить реальную проблему. Если вы еще не начали изучать синтаксис анимации CSS3, у вас есть шанс подготовиться к тому моменту, когда эта часть спецификации CSS3 выйдет за пределы рабочего проекта. В этой статье мы рассмотрим все важные части синтаксиса и расскажем о поддержке браузера, чтобы вы знали, когда начать его использовать. Подробнее… Еще в 2009 году группа разработчиков WebKit предложила новое расширение для CSS, которое позволяло отображать и преобразовывать элементы веб-страницы в трехмерной плоскости.Это предложение называлось 3D Transforms и вскоре было реализовано в Safari для Mac и iOS. Примерно через год последовала поддержка Chrome, а в начале 2011 года — Android. Однако, помимо WebKit, никто из других производителей браузеров, похоже, не проявил к нему особого энтузиазма, поэтому эта функция оставалась довольно нишевой и малоиспользуемой. Это должно измениться, поскольку команды Firefox и Internet Explorer решили присоединиться к партии, реализовав 3D-преобразования в предварительных версиях своих браузеров.Итак, если все пойдет по плану, мы увидим их в IE 10 и ближайшей версии Firefox (возможно, 10 или 11, но это еще не подтверждено), которые планируется выпустить где-то в этом году. В таком случае, это идеальное время, чтобы опередить тенденцию и начать изучать возможности и потенциал добавления дополнительного измерения к вашим веб-страницам. Эта статья призвана помочь вам в этом, проведя вас по синтаксису 3D-преобразований. Подробнее… Недавно я имел удовольствие организовать веб-сайт Beercamp в этом году.Если вы не знакомы, Beercamp — это вечеринка для дизайнеров и разработчиков. Это также площадка для экспериментов с интерфейсом. Каждый год мы отказываемся от поддержки браузеров и бросаем «фурор» против семантики, чтобы мы могли поиграть с некоторыми новыми функциями современных браузеров. Эксперимент этого года: всплывающая трехмерная книга в стиле доктора Сьюза. Если вы этого не видели, прыгайте и посмотрите. Веб-сайт был тестом, чтобы увидеть, насколько далеко можно продвинуть преобразования SVG и CSS 3D. В процессе я многому научился и хотел поделиться некоторыми приемами, которые я нашел полезными при работе в трехмерном пространстве. Прежде чем мы начнем, обратите внимание, что объяснить все о веб-сайте, не утомляя вас до смерти, было бы чертовски невозможно. Ради вас и себя я приведу лишь краткие выводы. Просматривая фрагменты кода, имейте в виду, что используется jQuery и что для простоты было удалено много кода (включая префиксы браузера). Подробнее… Компас CSS3 | Документация по компасуИсточник на Github Модуль CSS3 предоставляет кроссбраузерные миксины для свойств CSS. Какие механизмы рендеринга вы поддерживаете для экспериментальных свойств CSS, регулируются Этот файл можно импортировать с помощью: Импорт
|