Для того, чтобы узнать о желаемом свойстве больше и посмотреть пример с его использованием щелкните на его названии.
| Свойство | Описание | Введено в |
| @font-face | Позволяет подключить к веб-страницам произвольные шрифты. | CSS3 |
| font | Позволяет установить все свойства шрифта (font-family, font-size, font-style, font-variant, font-weight) за одно определение. | CSS1 |
| font-family | Позволяет установить шрифт текста. | CSS1 |
| font-size | Позволяет установить размер текста. | CSS1 |
| color | Позволяет установить цвет текста. | CSS1 |
| text-shadow | Позволяет привязать тень (или несколько теней) к тексту элемента. | CSS3 |
| text-decoration | Позволяет оформить текст элемента. | CSS1 |
| text-align | Позволяет определить горизонтальное выравнивание текста. | CSS1 |
| letter-spacing | Позволяет определить расстояние между символами текста. | CSS1 |
| word-spacing | Позволяет определить расстояние между словами текста. | CSS1 |
| line-height | Позволяет установить высоту строк. | CSS1 |
| font-style | Позволяет установить стиль шрифта элемента. | CSS1 |
| font-variant | Позволяет отобразить текст элемента капителью. | CSS1 |
| font-weight | Позволяет установить толщину шрифта. | CSS1 |
| text-overflow | Позволяет указать как должен отображаться текст вышедший за пределы границ элемента. | CSS3 |
| vertical-align | Позволяет установить вертикальное выравнивание текста. | CSS1 |
| text-transform | Позволяет управлять регистром символов в тексте. | CSS1 |
| text-indent | Позволяет установить величину отступа первого символа текста. | CSS1 |
| text-justify | Позволяет установить алгоритм выравнивания для свойства "text-align:justify". | CSS3 |
| word-wrap | Позволяет указать должны ли длинные слова, выходящие за пределы родительского элемента, разбиваться и переносится на новую строку или нет. | CSS3 |
| white-space | Позволяет установить как должны оформляться пробелы в тексте элемента. | CSS1 |
| quotes | Позволяет установить как должны оформляться кавычки вставленные тэгом q. | CSS1 |
| direction | Позволяет установить направление письма текста. | CSS1 |
Для того, чтобы узнать о желаемом свойстве больше и посмотреть пример с его использованием щелкните на его названии.
| Свойство | Описание | Введено в |
| height | Позволяет установить высоту элемента. | CSS1 |
| width | Позволяет установить ширину элемента. | CSS1 |
| margin | Позволяет установить величину всех внешних отступов за одно определение. | CSS1 |
| margin-top | Позволяет установить величину внешнего отступа от верхней части элемента. | CSS1 |
| margin-right | Позволяет установить величину внешнего отступа от правой части элемента. | CSS1 |
| margin-bottom | Позволяет установить величину внешнего отступа от нижней части элемента. | CSS1 |
| margin-left | Позволяет установить величину внешнего отступа от левой части элемента. | CSS1 |
| padding | Позволяет установить величину всех внутреннего отступов за одно определение. | CSS1 |
| padding-top | Позволяет установить величину внутреннего отступа от верхней части элемента. | CSS1 |
| padding-right | Позволяет установить величину внутреннего отступа от правой части элемента. | CSS1 |
| padding-bottom | Позволяет установить величину внутреннего отступа от нижней части элемента. | CSS1 |
| padding-left | Позволяет установить величину внутреннего отступа от левой части элемента. | CSS1 |
| float | Прижимает элемент к указанной стороне родительского элемента и заставляет последующие за ним элементы страницы "обтекать" его. | CSS1 |
| position | Позволяет установить метод размещения элемента. | CSS2 |
| top | Позволяет установить величину отступа от верхней стороны элемента. | CSS2 |
| right | Позволяет установить величину отступа от правой стороны элемента. | CSS2 |
| bottom | Позволяет установить величину отступа от нижней стороны элемента. | CSS2 |
| left | Позволяет установить величину отступа от левой стороны элемента. | CSS2 |
| clear | Позволяет "очистить" элемент от действия float. | CSS2 |
| max-height | Позволяет определить максимальную высоту элемента. | CSS2 |
| max-width | Позволяет определить максимальную ширину элемента. | CSS2 |
| min-height | Позволяет определить минимальную высоту элемента. | CSS2 |
| min-width | Позволяет определить минимальную ширину элемента. | CSS2 |
| z-index | Позволяет установить порядок отображения элементов в случае их наложения друг на друга. | CSS2 |
| clip | Позволяет обрезать элемент размещенный абсолютно. | CSS2 |
| column-count | Позволяет разбить на указанное количество столбцов текст элемента. | CSS3 |
| column-gap | Позволяет установить величину отступа между столбцами текста. | CSS3 |
| column-width | Позволяет установить ширину столбцов. | CSS3 |
| column-rule | Позволяет установить все свойства оформления разделителя для столбцов текста за одно определение. | CSS3 |
| column-rule-color | Позволяет установить цвет разделителя. | CSS3 |
| column-rule-style | Позволяет установить стиль разделителя. | CSS3 |
| column-rule-width | Позволяет установить ширину разделителя. | CSS3 |
| column-span | Позволяет установить на сколько столбцов должен растягиваться элемент. | CSS3 |
| box-align | Позволяет установить способ выравнивания элементов потомков. | CSS3 |
| box-direction | Позволяет установить направление отображения элементов потомков. | CSS3 |
| box-flex | Позволяет установить должны ли элементы потомки быть гибкими в размерах или нет. | CSS3 |
| box-ordinal-group | Позволяет установить порядок отображения элементов потомков. | CSS3 |
| box-orient | Позволяет установить как должен быть ориентирован элемент. | CSS3 |
| box-pack | Позволяет установить позицию элементов потомков в по горизонтали в горизонтально ориентированных элементах и позицию по вертикали в вертикально ориентированных элементах. | CSS3 |
Для того, чтобы узнать о желаемом свойстве больше и посмотреть пример с его использованием щелкните на его названии.
| Свойство | Описание | Введено в |
| background | Позволяет установить все свойства фона за одно определение. | CSS1 |
| background-size | Позволяет установить размер фонового изображения. | CSS3 |
| background-attachment | Позволяет определить должна ли фоновая картинка быть закреплена или должна прокручиваться с остальным содержимым страницы. | CSS1 |
| background-color | Позволяет установить цвет фона элемента. | CSS1 |
| background-image | Позволяет установить фоновую картинку для элемента. | CSS1 |
| background-position | Позволяет установить координаты местоположения фоновой картинки. | CSS1 |
| background-repeat | Позволяет установить как должна повторятся фоновая картинка для того, чтобы заполнить фон элемента. | CSS1 |
| background-clip | Позволяет указывать как должен обрезаться фон элемента. | CSS3 |
| background-origin | Позволяет задать позицию, от которой будет отсчитываться местоположение фонового изображения. | CSS3 |
Для того, чтобы узнать о желаемом свойстве больше и посмотреть пример с его использованием щелкните на его названии.
| Свойство | Описание | Введено в |
| border | Позволяет установить все свойства границ за одно определение. | CSS1 |
| border-color | Позволяет определить цвет для всех границ элемента за одно определение. | CSS1 |
| border-style | Позволяет определить стиль для всех границ элемента за одно определение. | CSS1 |
| border-width | Позволяет установить ширину всех границ элемента за одно определение. | CSS1 |
| border-radius | Позволяет определить форму всех углов элемента за одно определение. | CSS3 |
| border-bottom-left-radius | Позволяет определить форму нижнего левого угла элемента. | CSS3 |
| border-bottom-right-radius | Позволяет определить форму нижнего правого угла элемента. | CSS3 |
| border-top-left-radius | Позволяет определить форму верхнего левого угла элемента. | CSS3 |
| border-top-right-radius | Позволяет определить форму верхнего правого угла элемента. | CSS3 |
| border-image | Позволяет использовать изображение в качестве границы элемента. | CSS3 |
| border-top | Позволяет установить все свойства для верхней границы элемента за одно определение. | CSS1 |
| border-top-color | Позволяет определить цвет верхней границы элемента. | CSS1 |
| border-top-style | Позволяет определить стиль верхней границы элемента. | CSS1 |
| border-top-width | Позволяет определить ширину верхней границы элемента. | CSS1 |
| border-left | Позволяет установить все свойства для левой границы элемента за одно определение. | CSS1 |
| border-left-color | Позволяет определить цвет левой границы элемента. | CSS1 |
| border-left-style | Позволяет определить стиль левой границы элемента. | CSS1 |
| border-left-width | Позволяет определить ширину левой границы элемента. | CSS1 |
| border-bottom | Позволяет установить все свойства нижней границы за одно определение. | CSS1 |
| border-bottom-color | Позволяет определить цвет нижней границы элемента. | CSS1 |
| border-bottom-style | Позволяет определить стиль нижней границы элемента. |
|
| border-bottom-width | Позволяет определить ширину нижней границы элемента. | CSS1 |
| border-right | Позволяет установить все свойства для правой границы элемента за одно определение. | CSS1 |
| border-right-color | Позволяет определить цвет правой границы элемента. | CSS1 |
| border-right-style | Позволяет определить стиль правой границы элемента. | CSS1 |
| border-rigth-width | Позволяет определить ширину правой границы элемента. | CSS1 |
| outline | Позволяет установить все свойства внешней границы за одно определение. | CSS2 |
| outline-color | Позволяет определить цвет внешней границы элемента. | CSS2 |
| outline-style | Позволяет определить стиль внешней границы элемента. | CSS2 |
| outline-width | Позволяет определить ширину внешней границы элемента. | CSS2 |
| outline-offset | Позволяет установить величину смещения внешней границы от границы элемента. | CSS3 |
Для того, чтобы узнать о желаемом свойстве больше и посмотреть пример с его использованием щелкните на его названии.
| Свойство | Описание | Введено в |
| @keyframes | Блок для определения анимации. | CSS3 |
| animation | Позволяет установить все свойства анимации (кроме animation-play-state) за одно определение. | CSS3 |
| animation-name | Позволяет установить имя анимации. | CSS3 |
| animation-duration | Позволяет указать время выполнения анимации в секундах. | CSS3 |
| animation-timing-function | Позволяет указать функцию смягчения отвечающую за плавность выполнения анимации. | CSS3 |
| animation-delay | Позволяет установить величину задержки перед началом выполнения анимации. | CSS3 |
| animation-iteration-count | Позволяет установить количество повторов анимации. | CSS3 |
| animation-direction | Позволяет указать должна ли анимация выполняться в обратном порядке или нет. | CSS3 |
| animation-play-state | Позволяет указать должна ли анимация выполняться или быть остановлена. | CSS3 |
| transition | Позволяет задать все свойства переходов за одно определение. | CSS3 |
| transition-property | Позволяет указать CSS свойства, которые будут задействованы для создания перехода. | CSS3 |
| transition-duration | Позволяет указать время, в течении которого будет совершен переход. | CSS3 |
| transition-timing-function | Позволяет указать функцию смягчения отвечающую за плавность выполнения перехода. | CSS3 |
| transition-delay | Позволяет установить величину задержки перед началом выполнения перехода. | CSS3 |
Для того, чтобы узнать о желаемом свойстве больше и посмотреть пример с его использованием щелкните на его названии.
| Свойство | Описание | Введено в |
| list-style | Позволяет определить все свойства списков за одно определение. | CSS1 |
| list-style-image | Позволяет установить произвольную картинку вместо маркера списка. | CSS1 |
| list-style-position | Позволяет определить где должен отображаться маркер списка. | CSS1 |
| list-style-type | Позволяет определить вид маркера списка. | CSS1 |
| border-collapse | Позволяет установить должны ли границы таблицы и ячеек соединится. | CSS2 |
| border-spacing | Позволяет установить расстояние между границами смежных ячеек. | CSS2 |
| caption-side | Позволяет установить место расположения табличного заголовка. | CSS2 |
| empty-cells | Позволяет установить как должны отображаться пустые табличные ячейки. | CSS2 |
Для того, чтобы узнать о желаемом свойстве больше и посмотреть пример с его использованием щелкните на его названии.
| Свойство | Описание | Введено в |
| display | Позволяет установить способ отображения элемента. | CSS1 |
| opacity | Позволяет установить уровень прозрачности элемента. | CSS3 |
| appearance | Позволяет превратить тэг в указанный элемент пользовательского интерфейса. | CSS3 |
| resize | Позволяет сделать элемент растягиваемым. | CSS3 |
| overflow | Позволяет указать, что должно случится если содержимое элемента выйдет за его границы. | CSS2 |
| visibility | Позволяет установить должен ли элемент быть видимым. | CSS2 |
| cursor | Позволяет установить вид курсора мыши. | CSS2 |
| transform | Позволяет трансформировать элемент. | CSS3 |
| transform-origin | Позволяет изменить местоположение трансформированного элемента. | CSS3 |
| content | Позволяет вставлять произвольное содержимое. | CSS2 |
В поле статус указано присутствовал ли данный селектор в предыдущих версиях CSS (-) или был добавлен в CSS3 (новый).
| Селектор | Пример | Описание | Статус |
| #идентификатор | #el1 | Выберет все элементы на странице, которые имеют идентификатор el1 (которые имеют атрибут id='el1'). | - |
| .класс | .group1 | Выберет группу элементов на странице, которые имеют класс group1 (которые имеют атрибут class='group1'). | - |
| элемент | p | Выберет все абзацы на странице. | - |
| * | * | Выберет все элементы на странице. | - |
| :not(x) | :not(div) | Выберет все элементы на странице кроме элементов div. | новый |
| :link | a:link | Выберет все не посещенные ссылки на странице. | - |
| :visited | a:visited | Выберет все посещенные ссылки на странице. | - |
| :hover | a:hover | Выберет все ссылки, на которые наведен курсор мыши. | - |
| :active | a:active | Выберет все активные в данный момент ссылки (на которые щелкнули мышкой). | - |
| [атрибут] | p[id] | Выберет все абзацы на странице, которые имеют атрибут id. | - |
| ::selection | ::selection | Оформляет выделенный пользователем текст. | новый |
| [атрибут=значение] | p[id="el1"] | Выберет все абзацы на странице, которые имеют атрибут id со значением el1. | - |
| [атрибут~=значение] | a[href~="wisdomweb]" | Выберет все ссылки с атрибутом href содержащим в значении подстроку "wisdomweb" отделенную пробелами от остального содержимого. | - |
| [атрибут^=значение] | [src^="http://"] | Выберет все элементы имеющие атрибут src со значением начинающимся на "http://". | новый |
| [атрибут$=значение] | [src$=".gif"] | Выберет все элементы имеющие атрибут src со значением заканчивающимся на ".gif". | новый |
| [атрибут=*значение] | [src*="picture"] | Позволяет выбрать все элементы имеющие атрибут src со значением содержащим подстроку "picture". | новый |
| :first-child | p:first-child | Выберет все абзацы, которые являются первыми в родительском элементе. | - |
| :last-child | div:last-child | Позволяет выбрать все элементы div являющиеся последними элементами потомками в родительском. | новый |
| :first-line | p:first-line | Оформит первую сточку всех абзацев на странице. | - |
| :first-letter | p:first-letter | Оформит первую букву всех абзацев на странице. | - |
| эл1 эл2 | div p | Выберет все абзацы являющиеся потомками элемента div. | - |
| эл1 эл2 | div p | Выберет все абзацы являющиеся потомками элемента div. | - |
| эл1 + эл2 | div + p | Выберет все абзацы следующие после элемента div. | - |
| элемент1~элемент2 | div~p | Выберет все элементы div находящиеся перед элементом p. | новый |
| :before | p:before | Вставит произвольное содержимое перед элементом p. | - |
| :after | p:after | Вставит произвольное содержимое после элемента p. | - |
| :focus | input:focus | Выберет все активные элементы ввода на странице. | - |
| :enabled | :enabled | Позволяет выбрать все работоспособные элементы ввода. | новый |
| :disabled | :disabled | Позволяет выбрать все неработоспособные элементы ввода. | новый |
| :first-of-type | div:first-of-type | Позволяет выбрать все элементы div являющиеся первыми в родительском. | новый |
| :last-of-type | div:last-of-type | Позволяет выбрать все элементы div являющиеся последними в родительском. | новый |
| :only-of-type | div:only-of-type | Позволяет выбрать все элементы div, которые являются уникальными родительском. | новый |
| :nth-child(x) | div:nth-child(3) | Позволяет выбрать все элементы div являющиеся третьими по счету в родительском. | новый |
| :nth-last-child(x) | div:nth-last-child(2) | Позволяет выбрать все элементы div являющиеся вторыми элементами потомками в родительском с конца. | новый |
| :root | :root | Позволяет выбрать корневой элемент документа. | новый |
| :empty | p:empty | Позволяет выбрать пустые абзацы. | новый |
47 648
492 
