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>
&lt;!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.01 Transitional//EN&quot;&gt;<br>
&lt;html&gt;<br>
&lt;body&gt;<br>
&lt;b&gt;Формула серной кислоты:&lt;/b&gt;
&lt;i&gt;H&lt;sub&gt;&lt;small&gt;2&lt;/small&gt;&lt;/sub&gt;
SO&lt;sub&gt;&lt;small&gt;4&lt;/small&gt;
&lt;/sub&gt;&lt;/i&gt;<br>
&lt;/body&gt;<br>
&lt;/html&gt;</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

Редакторы: Влад Мержевич

CSS Справочник и примеры элементы

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

CSS Cвойства | Справочник CSS

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 Задает порядок расположения элементов в стеке

Свойства по группам | справочник CSS













































Свойство Описание 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 обычно используется в элементах и

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
Играй »
гибкий Отображает элемент как гибкий контейнер на уровне блока Играй »
сетка Отображает элемент как контейнер сетки уровня блока Играй »
рядный блок Отображает элемент как контейнер блока встроенного уровня.Сам элемент отформатирован как встроенный
элемент, но вы можете применить значения высоты и ширины
Играй »
линейный гибкий Отображает элемент как гибкий контейнер встроенного уровня Играй »
встроенная сетка Отображает элемент как контейнер сетки встроенного уровня Играй »
встроенный стол Элемент отображается как таблица встроенного уровня Играй »
элемент списка Пусть элемент ведет себя как элемент

  • Играй »
    обкатка Отображает элемент как блочный или встроенный, в зависимости от контекста Играй »
    стол Пусть элемент ведет себя как элемент

    Играй »
    table-caption Пусть элемент ведет себя как элемент

    Играй »
    таблица-столбец-группа Пусть элемент ведет себя как элемент

    Играй »
    группа заголовков таблицы Пусть элемент ведет себя как элемент

    Играй »
    группа нижнего колонтитула Пусть элемент ведет себя как элемент

    Играй »
    таблица-строка-группа Пусть элемент ведет себя как элемент

    Играй »
    таблица-ячейка Пусть элемент ведет себя как элемент

    Играй »
    таблица-столбец Пусть элемент ведет себя как элемент

    Играй »
    стол-ряд Пусть элемент ведет себя как элемент

    Играй »
    нет Элемент полностью удален Играй »
    начальный Устанавливает для этого свойства значение по умолчанию.Читать про начальный Играй »
    наследовать Наследует это свойство от своего родительского элемента. Читать про наследство

    Другие примеры

    Пример

    Демонстрация того, как использовать значение свойства contents. В следующих
    Например, контейнер .a исчезнет, ​​а дочерние элементы (.b)
    дочерние элементы элемента на следующий уровень в DOM:

    .дисплей {
    : содержание;
    граница:
    2px сплошной красный;
    цвет фона: #ccc;
    отступ: 10 пикселей;
    ширина: 200 пикселей;
    }

    .b {
    граница: сплошной синий 2 пикселя;
    цвет фона: голубой;
    отступ: 10 пикселей;
    }

    Попробуй сам »

    Пример

    Демонстрация того, как использовать значение наследуемого свойства:

    корпус {
    дисплей: встроенный;
    }

    p {
    display: наследовать;
    }

    Попробуй сам »

    Пример

    Установить направление некоторых гибких элементов внутри элемента

    в обратном направлении.
    заказ:

    div {
    дисплей: гибкий;
    flex-direction: ряд-реверс;
    }

    Попробуй сам »


    связанные страницы

    Учебник

    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.Мы применили такие свойства, как text-shadow и border-radius , при переходе в background-clip и визуальные эффекты, такие как переходы и анимация. Мы также потратили много времени на обсуждение того, как и когда реализовать эти свойства. Тот факт, что свойство не поддерживается широко браузерами или полностью не задокументировано на данный момент, не означает, что мы не должны с ним работать. На самом деле я бы сказал обратное.

    Передовой опыт использования 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 и даже использовать его на рабочих веб-сайтах, где резервные копии по-прежнему будут правильно отображать страницу.Возможно, пройдет немного времени, пока мы не станем считать его таким же популярным, как, скажем, border-radius , но наша задача — исследовать новые технологии и использовать их там, где это возможно. Тем не менее, когда дело доходит до чего-то столь же важного, как макет страницы, нам нужно действовать осторожно.

    Подробнее…

    С появлением 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.
    введен в CSS3, например
    граница-радиус
    и text-shadow .

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

    Этот файл можно импортировать с помощью:
    @import "compass / css3"

    Импорт

    1. Анимация
      — Укажите свойство анимации CSS3 и все его вспомогательные свойства.
    2. Появление
      — Укажите свойство внешнего вида CSS3.
    3. Фоновый клип
      — Укажите фоновый клип для всех браузеров.
    4. Фон Происхождение
      — Укажите источник фона для всех браузеров.
    5. Размер фона
      — Укажите размер фона для всех браузеров.
    6. Граничный радиус
      — Укажите радиус границы для всех браузеров.
    7. Коробка Тень
      — Укажите тень окна для всех браузеров.
    8. Размеры коробки
      — Укажите размер окна для всех браузеров.
    9. Столбцы
      — Укажите столбчатый макет для всех браузеров.
    10. Фильтр
      — Задайте фильтр (изображение) для всех браузеров.
    11. Flexbox
      — Этот модуль предоставляет миксины, относящиеся к CSS3 Flexbox.
    12. Шрифт Face
      — Укажите загружаемый шрифт для всех браузеров.
    13. Перенос
      — Миксин для разбиения места и вставки ажиотажа в переполненный текст
    14. Картинки
      — Укажите линейные и радиальные градиенты для многих браузеров.
    15. Встроенный блок
      — Объявить встроенный блок элемента для всех браузеров.

      Добавить комментарий

      Ваш адрес email не будет опубликован. Обязательные поля помечены *