492 строки
20 KiB
Markdown
492 строки
20 KiB
Markdown
|
# Справка
|
||
|
|
|
||
|
|
## Содержание
|
||
|
|
|
||
|
|
[TOC]
|
||
|
|
|
||
|
|
## Свойства с хаками
|
||
|
|
|
||
|
|
### b-radius
|
||
|
|
|
||
|
|
Устанавливает радиус скругления уголков рамки. Если рамка не задана, то
|
||
|
|
скругление также происходит и с фоном
|
||
|
|
|
||
|
|
#### Синтаксис
|
||
|
|
|
||
|
|
b-radius <радиус>{1,4}
|
||
|
|
|
||
|
|
вывод в css
|
||
|
|
|
||
|
|
border-radius: <радиус>{1,4}
|
||
|
|
|
||
|
|
1. Радиус указывается для **всех** четырех уголков.
|
||
|
|
2. Первое значение задает радиус **верхнего левого** и **нижнего правого** уголка,
|
||
|
|
второе значение — верхнего правого и нижнего левого уголка.
|
||
|
|
3. Первое значение задает радиус для **верхнего левого уголка**, второе —
|
||
|
|
одновременно для **верхнего правого и нижнего левого**, а третье — для
|
||
|
|
**нижнего правого уголка**.
|
||
|
|
4. По очереди устанавливает радиус для **верхнего левого, верхнего правого,
|
||
|
|
нижнего правого и нижнего левого** уголка.
|
||
|
|
|
||
|
|
#### Хак
|
||
|
|
|
||
|
|
Автоматически подставляються хаки:
|
||
|
|
|
||
|
|
* -webkit-border-radius
|
||
|
|
* -moz-border-radius
|
||
|
|
* -o-border-radius
|
||
|
|
* -ms-border-radius
|
||
|
|
* -khtml-border-radius
|
||
|
|
|
||
|
|
### bx-shadow
|
||
|
|
|
||
|
|
Добавляет тень к элементу. Допускается использовать несколько теней, указывая их
|
||
|
|
параметры через запятую, при наложении теней первая тень в списке будет выше,
|
||
|
|
последняя ниже. Если для элемента задается радиус скругления через свойство
|
||
|
|
`border-radius`, то тень также получится с закругленными уголками. Добавление
|
||
|
|
тени увеличивает ширину элемента, поэтому возможно появление горизонтальной
|
||
|
|
полосы прокрутки в браузере.
|
||
|
|
|
||
|
|
#### Синтаксис
|
||
|
|
|
||
|
|
bx-shadow none | <тень> [,<тень>]*
|
||
|
|
где <тень>:
|
||
|
|
inset <сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение> <цвет>
|
||
|
|
|
||
|
|
вывод в css
|
||
|
|
|
||
|
|
box-shadow: none | <тень> [,<тень>]*
|
||
|
|
где <тень>:
|
||
|
|
inset <сдвиг по x> <сдвиг по y> <радиус размытия> <растяжение> <цвет>
|
||
|
|
|
||
|
|
#### Значения
|
||
|
|
|
||
|
|
Значение |Описание
|
||
|
|
:-------------|:------------
|
||
|
|
none |Отменяет добавление тени.
|
||
|
|
inset |Тень выводится внутри элемента. Необязательный параметр.
|
||
|
|
сдвиг по x |Смещение тени по горизонтали относительно элемента. Положительное значение этого параметра задает сдвиг тени вправо, отрицательное — влево. Обязательный параметр.
|
||
|
|
сдвиг по y |Смещение тени по вертикали относительно элемента. Положительное значение задает сдвиг тени вниз, отрицательное — вверх. Обязательный параметр.
|
||
|
|
размытие |Задает радиус размытия тени. Чем больше это значение, тем сильнее тень сглаживается, становится шире и светлее. Если этот параметр не задан, по умолчанию устанавливается равным 0, тень при этом будет четкой, а не размытой.
|
||
|
|
растяжение |Положительное значение растягивает тень, отрицательное, наоборот, ее сжимает. Если этот параметр не задан, по умолчанию устанавливается 0, при этом тень будет того же размера, что и элемент.
|
||
|
|
цвет |Цвет тени в любом доступном CSS формате, по умолчанию тень черная. Необязательный параметр.
|
||
|
|
|
||
|
|
#### Хак
|
||
|
|
|
||
|
|
Автоматически подставляються хаки:
|
||
|
|
|
||
|
|
* -moz-box-shadow
|
||
|
|
* -webkit-box-shadow
|
||
|
|
|
||
|
|
### l-gradient
|
||
|
|
|
||
|
|
Создаёт линейный градиент.
|
||
|
|
|
||
|
|
#### Синтаксис
|
||
|
|
|
||
|
|
l-gradient [<угол> | <позиция> ,] <цвет> [, <цвет>]*
|
||
|
|
|
||
|
|
вывод в css
|
||
|
|
|
||
|
|
background-image: linear-gradient([<угол> | <позиция> ,] <цвет> [, <цвет>]*);
|
||
|
|
|
||
|
|
#### Значения
|
||
|
|
|
||
|
|
<угол>
|
||
|
|
: См. угол.
|
||
|
|
|
||
|
|
<цвет>
|
||
|
|
: Представляет собой значение цвета (см. цвет), за которым идёт
|
||
|
|
необязательная позиция цвета относительно оси градиента, она задаётся в
|
||
|
|
процентах от 0% до 100% или в любых других подходящих для CSS единицах.
|
||
|
|
|
||
|
|
<позиция>
|
||
|
|
: Для записи позиции применяются ключевые слова top, bottom и left, right, а
|
||
|
|
также их сочетания. Порядок слов не важен, можно написать left top или top
|
||
|
|
left. В табл. 1 приведены разные позиции и тип получаемого градиента для
|
||
|
|
цветов #000 и #fff (от чёрного к белому).
|
||
|
|
|
||
|
|
Табл. 1. Типы градиента
|
||
|
|
|
||
|
|
Позиция |Угол |Описание Вид
|
||
|
|
:-------------|:-------|:--------------
|
||
|
|
top |270deg |Сверху вниз.
|
||
|
|
left |0deg |Слева направо.
|
||
|
|
bottom |90deg |Снизу вверх.
|
||
|
|
right |180deg |Справа налево.
|
||
|
|
top left |-45deg |От левого верхнего угла к правому нижнему.
|
||
|
|
top right |225deg |От правого верхнего угла к левому нижнему.
|
||
|
|
bottom left |45deg |От левого нижнего угла к правому верхнему.
|
||
|
|
bottom right |-225deg |От правого нижнего угла к левому верхнему.
|
||
|
|
|
||
|
|
#### Хак
|
||
|
|
|
||
|
|
Автоматически подставляються хаки:
|
||
|
|
|
||
|
|
* -moz-linear-gradient
|
||
|
|
* -webkit-linear-gradient
|
||
|
|
* -o-linear-gradient
|
||
|
|
* -ms-linear-gradient
|
||
|
|
|
||
|
|
### r-l-gradient
|
||
|
|
|
||
|
|
Создаёт повторяющийся линейный градиент.
|
||
|
|
|
||
|
|
#### Синтаксис
|
||
|
|
|
||
|
|
r-l-gradient [<угол> | <позиция> ,] <цвет> [, <цвет>]*
|
||
|
|
|
||
|
|
вывод в css
|
||
|
|
|
||
|
|
background-image: repeating-linear-gradient([<угол> | <позиция> ,] <цвет> [, <цвет>]*);
|
||
|
|
|
||
|
|
#### Значения
|
||
|
|
|
||
|
|
<угол>
|
||
|
|
: См. угол.
|
||
|
|
|
||
|
|
<цвет>
|
||
|
|
: Представляет собой значение цвета (см. цвет), за которым идёт
|
||
|
|
необязательная позиция цвета относительно оси градиента, она задаётся в
|
||
|
|
процентах от 0% до 100% или в любых других подходящих для CSS единицах.
|
||
|
|
|
||
|
|
<позиция>
|
||
|
|
: Для записи позиции применяются ключевые слова top, bottom и left, right, а
|
||
|
|
также их сочетания. Порядок слов не важен, можно написать left top или top
|
||
|
|
left. В табл. 1 приведены разные позиции и тип получаемого градиента для
|
||
|
|
цветов #000 и #fff (от чёрного к белому).
|
||
|
|
|
||
|
|
Табл. 1. Типы градиента
|
||
|
|
|
||
|
|
Позиция |Угол |Описание Вид
|
||
|
|
:-------------|:-------|:--------------
|
||
|
|
top |270deg |Сверху вниз.
|
||
|
|
left |0deg |Слева направо.
|
||
|
|
bottom |90deg |Снизу вверх.
|
||
|
|
right |180deg |Справа налево.
|
||
|
|
top left |-45deg |От левого верхнего угла к правому нижнему.
|
||
|
|
top right |225deg |От правого верхнего угла к левому нижнему.
|
||
|
|
bottom left |45deg |От левого нижнего угла к правому верхнему.
|
||
|
|
bottom right |-225deg |От правого нижнего угла к левому верхнему.
|
||
|
|
|
||
|
|
#### Хак
|
||
|
|
|
||
|
|
Автоматически подставляються хаки:
|
||
|
|
|
||
|
|
* -moz-repeating-linear-gradient
|
||
|
|
* -webkit-repeating-linear-gradient
|
||
|
|
* -o-repeating-linear-gradient
|
||
|
|
* -ms-repeating-linear-gradient
|
||
|
|
|
||
|
|
### bg-clip
|
||
|
|
|
||
|
|
Определяет, как цвет фона или фоновая картинка должна выводиться под границами.
|
||
|
|
Эффект заметен при прозрачных или пунктирных границах.
|
||
|
|
|
||
|
|
#### Синтаксис
|
||
|
|
|
||
|
|
bg-clip: [padding-box | border-box | content-box] [, [padding-box | border-box | content-box]]
|
||
|
|
|
||
|
|
вывод в css
|
||
|
|
|
||
|
|
background-clip: [padding-box | border-box | content-box] [, [padding-box | border-box | content-box]]
|
||
|
|
|
||
|
|
#### Значения
|
||
|
|
|
||
|
|
padding-box
|
||
|
|
: Фон отображается внутри границ.
|
||
|
|
|
||
|
|
border-box
|
||
|
|
: Фон выводится под границами.
|
||
|
|
|
||
|
|
content-box
|
||
|
|
: Фон отображается только внутри контента.
|
||
|
|
|
||
|
|
Значений может быть несколько (для каждого из множественных фоновых рисунков),
|
||
|
|
при этом значения разделяются между собой запятой.
|
||
|
|
|
||
|
|
#### Хак
|
||
|
|
|
||
|
|
Автоматически подставляються хаки:
|
||
|
|
|
||
|
|
* -webkit-background-clip
|
||
|
|
* -moz-background-clip
|
||
|
|
|
||
|
|
### bg-size
|
||
|
|
|
||
|
|
Определяет, как цвет фона или фоновая картинка должна выводиться под границами.
|
||
|
|
Эффект заметен при прозрачных или пунктирных границах.
|
||
|
|
|
||
|
|
#### Синтаксис
|
||
|
|
|
||
|
|
bg-size: [ <значение> | <проценты> | auto ]{1,2} | cover | contain
|
||
|
|
|
||
|
|
вывод в css
|
||
|
|
|
||
|
|
background-size: [ <значение> | <проценты> | auto ]{1,2} | cover | contain
|
||
|
|
|
||
|
|
#### Значения
|
||
|
|
|
||
|
|
<значение>
|
||
|
|
: Задает размер в любых доступных для CSS единицах — пикселы (px), сантиметры
|
||
|
|
(cm), em и др.
|
||
|
|
|
||
|
|
<проценты>
|
||
|
|
: Задает размер фоновой картинки в процентах от ширины или высоты элемента.
|
||
|
|
|
||
|
|
auto
|
||
|
|
: Если задано одновременно для ширины и высоты (auto auto), размеры фона
|
||
|
|
остаются исходными; если только для одной стороны картинки (100px auto), то
|
||
|
|
размер вычисляется автоматически исходя из пропорций картинки.
|
||
|
|
|
||
|
|
cover
|
||
|
|
: Масштабирует изображение с сохранением пропорций так, чтобы его ширина или
|
||
|
|
высота равнялась ширине или высоте блока.
|
||
|
|
|
||
|
|
contain
|
||
|
|
: Масштабирует изображение с сохранением пропорций таким образом, чтобы
|
||
|
|
картинка целиком поместилась внутрь блока.
|
||
|
|
|
||
|
|
Если установлено одно значение, оно задает ширину фона, второе значение
|
||
|
|
принимается за auto. Пропорции картинки при этом сохраняются. Использование двух
|
||
|
|
значений через пробел задает ширину и высоту фоновой картинки.
|
||
|
|
|
||
|
|
#### Хак
|
||
|
|
|
||
|
|
Автоматически подставляються хаки:
|
||
|
|
|
||
|
|
* -moz-background-size
|
||
|
|
* -webkit-background-size
|
||
|
|
* -o-background-size
|
||
|
|
|
||
|
|
### transit
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
## Синонимы свойств
|
||
|
|
|
||
|
|
Короткие синонимы свойств css.
|
||
|
|
|
||
|
|
### margin
|
||
|
|
|
||
|
|
Устанавливает величину отступа от каждого края элемента. Отступом является
|
||
|
|
пространство от границы текущего элемента до внутренней границы его
|
||
|
|
родительского элемента.
|
||
|
|
|
||
|
|
[Подробнее на сайте htmlbook.ru](http://htmlbook.ru/css/margin)
|
||
|
|
|
||
|
|
#### Синонимы
|
||
|
|
|
||
|
|
CSS | Stylus
|
||
|
|
:-------------------|----------
|
||
|
|
margin: 1px; | -m 1px
|
||
|
|
margin-top: 1px; | -mt 1px
|
||
|
|
margin-bottom: 1px; | -mb 1px
|
||
|
|
margin-left: 1px; | -ml 1px
|
||
|
|
margin-right: 1px; | -mr 1px
|
||
|
|
|
||
|
|
|
||
|
|
### padding
|
||
|
|
|
||
|
|
Устанавливает значение полей вокруг содержимого элемента. Полем называется
|
||
|
|
расстояние от внутреннего края рамки элемента до воображаемого прямоугольника,
|
||
|
|
ограничивающего его содержимое
|
||
|
|
|
||
|
|
[Подробнее на сайте htmlbook.ru](http://htmlbook.ru/css/padding)
|
||
|
|
|
||
|
|
#### Синонимы
|
||
|
|
|
||
|
|
CSS | Stylus
|
||
|
|
:--------------------|----------
|
||
|
|
padding: 1px; | -p 1px
|
||
|
|
padding-top: 1px; | -pt 1px
|
||
|
|
padding-bottom: 1px; | -pb 1px
|
||
|
|
padding-left: 1px; | -pl 1px
|
||
|
|
padding-right: 1px; | -pr 1px
|
||
|
|
|
||
|
|
|
||
|
|
### width
|
||
|
|
|
||
|
|
Устанавливает ширину блочных или заменяемых элементов (к ним, например,
|
||
|
|
относится тег `<img>`). Ширина не включает толщину границ вокруг элемента,
|
||
|
|
значение отступов и полей.
|
||
|
|
|
||
|
|
[Подробнее на сайте htmlbook.ru](http://htmlbook.ru/css/width)
|
||
|
|
|
||
|
|
#### Синонимы
|
||
|
|
|
||
|
|
CSS | Stylus
|
||
|
|
:---------------|----------
|
||
|
|
width: 1px; | -w 1px
|
||
|
|
max-width: 1px; | -wmax 1px
|
||
|
|
min-width: 1px; | -wmin 1px
|
||
|
|
|
||
|
|
|
||
|
|
### height
|
||
|
|
|
||
|
|
Устанавливает высоту блочных или заменяемых элементов (к ним, например,
|
||
|
|
относится тег `<img>`). Высота не включает толщину границ вокруг элемента,
|
||
|
|
значение отступов и полей.
|
||
|
|
|
||
|
|
[Подробнее на сайте htmlbook.ru](http://htmlbook.ru/css/height)
|
||
|
|
|
||
|
|
#### Синонимы
|
||
|
|
|
||
|
|
CSS | Stylus
|
||
|
|
:----------------|----------
|
||
|
|
height: 1px; | -h 1px
|
||
|
|
max-height: 1px; | -hmax 1px
|
||
|
|
min-height: 1px; | -hmin 1px
|
||
|
|
|
||
|
|
|
||
|
|
### border
|
||
|
|
|
||
|
|
Универсальное свойство border позволяет одновременно установить толщину, стиль и
|
||
|
|
цвет границы вокруг элемента.
|
||
|
|
|
||
|
|
[Подробнее на сайте htmlbook.ru](http://htmlbook.ru/css/border)
|
||
|
|
|
||
|
|
#### Синонимы
|
||
|
|
|
||
|
|
CSS | Stylus
|
||
|
|
:------------------------------------|---------------
|
||
|
|
border: 1px solid; | -br 1px solid
|
||
|
|
border-top: 1px solid; | -brt 1px solid
|
||
|
|
border-top-color: #000 | -brtc #000
|
||
|
|
border-top-style: solid | -brts solid
|
||
|
|
border-top-width: 1px | -brtw 1px
|
||
|
|
border-bottom: 1px solid; | -brb 1px solid
|
||
|
|
border-bottom-color: #000 | -brbc #000
|
||
|
|
border-bottom-style: solid | -brbs solid
|
||
|
|
border-bottom-width: 1px | -brbw 1px
|
||
|
|
border-left: 1px solid; | -brl 1px solid
|
||
|
|
border-left-color: #000 | -brlc #000
|
||
|
|
border-left-style: solid | -brls solid
|
||
|
|
border-left-width: 1px | -brlw 1px
|
||
|
|
border-right: 1px solid; | -brr 1px solid
|
||
|
|
border-right-color: #000 | -brrc #000
|
||
|
|
border-right-style: solid | -brrs solid
|
||
|
|
border-right-width: 1px | -brrw 1px
|
||
|
|
border-collapse: collapse | -brcol collapse
|
||
|
|
|
||
|
|
### background
|
||
|
|
|
||
|
|
Универсальное свойство background позволяет установить одновременно до пяти
|
||
|
|
характеристик (`attachment`, `color`, `image`, `position`, `repeat`) фона.
|
||
|
|
Значения могут идти в любом порядке, браузер сам определит, какое из них
|
||
|
|
соответствует нужному свойству.
|
||
|
|
|
||
|
|
[Подробнее на сайте htmlbook.ru](http://htmlbook.ru/css/background)
|
||
|
|
|
||
|
|
#### Синонимы
|
||
|
|
|
||
|
|
CSS | Stylus
|
||
|
|
:-------------------------------|--------------
|
||
|
|
background: while; |-bg while
|
||
|
|
background-attachment: fixed; |-bga fixed
|
||
|
|
background-color: while; |-bgc while
|
||
|
|
background-image: none; |-bgi none
|
||
|
|
background-origin: content-box; |-bgo content-box
|
||
|
|
background-position: left; |-bgp left
|
||
|
|
background-repeat: repeat-x; |-bgr repeat-x
|
||
|
|
|
||
|
|
### color
|
||
|
|
|
||
|
|
Определяет цвет текста элемента.
|
||
|
|
|
||
|
|
#### Синоним
|
||
|
|
|
||
|
|
CSS:
|
||
|
|
|
||
|
|
color: while;
|
||
|
|
|
||
|
|
Stylus:
|
||
|
|
|
||
|
|
-c while
|
||
|
|
|
||
|
|
|
||
|
|
### display
|
||
|
|
|
||
|
|
Многоцелевое свойство, которое определяет, как элемент должен быть показан в
|
||
|
|
документе.
|
||
|
|
|
||
|
|
[Подробнее на сайте htmlbook.ru](http://htmlbook.ru/css/display)
|
||
|
|
|
||
|
|
#### Синоним
|
||
|
|
|
||
|
|
CSS:
|
||
|
|
|
||
|
|
display: none;
|
||
|
|
|
||
|
|
Stylus:
|
||
|
|
|
||
|
|
-d none
|
||
|
|
|
||
|
|
|
||
|
|
### float
|
||
|
|
|
||
|
|
Определяет, по какой стороне будет выравниваться элемент, при этом остальные
|
||
|
|
элементы будут обтекать его с других сторон. Когда значение свойства `float`
|
||
|
|
равно `none`, элемент выводится на странице как обычно, при этом допускается,
|
||
|
|
что одна строка обтекающего текста может быть на той же линии, что и сам элемент.
|
||
|
|
|
||
|
|
#### Синоним
|
||
|
|
|
||
|
|
CSS:
|
||
|
|
|
||
|
|
float: left;
|
||
|
|
|
||
|
|
Stylus:
|
||
|
|
|
||
|
|
-fl left
|
||
|
|
|
||
|
|
|
||
|
|
### font
|
||
|
|
|
||
|
|
Универсальное свойство, которое позволяет одновременно задать несколько
|
||
|
|
характеристик шрифта и текста.
|
||
|
|
|
||
|
|
-f [font-style||font-variant||font-weight] font-size [/line-height] font-family | inherit
|
||
|
|
|
||
|
|
[Подробнее на сайте htmlbook.ru](http://htmlbook.ru/css/font)
|
||
|
|
|
||
|
|
### text
|
||
|
|
|
||
|
|
Универсальное свойство, которое позволяет одновременно задать несколько
|
||
|
|
характеристик шрифта и текста.
|
||
|
|
|
||
|
|
-f [text-style||text-variant||text-weight] text-size [/line-height] text-family | inherit
|
||
|
|
|
||
|
|
[Подробнее на сайте htmlbook.ru](http://htmlbook.ru/css/text)
|
||
|
|
|
||
|
|
#### Синонимы
|
||
|
|
|
||
|
|
CSS | Stylus
|
||
|
|
:-------------------------|------------------
|
||
|
|
font: 12pt sans-serif; |-f 12pt sans-serif
|
||
|
|
font-family: sans-serif; |-ff sans-serif
|
||
|
|
font-size: 12pt; |-fs 12pt
|
||
|
|
font-style: italic; |-fst italic
|
||
|
|
font-variant: small-caps; |-fv small-caps
|
||
|
|
font-weight: 700; |-fw 700
|
||
|
|
|
||
|
|
### z-index
|
||
|
|
|
||
|
|
Любые позиционированные элементы на веб-странице могут накладываться друг на
|
||
|
|
друга в определенном порядке, имитируя тем самым третье измерение,
|
||
|
|
перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше
|
||
|
|
других объектов веб-страницы, их размещением по z-оси и управляет z-index. Это
|
||
|
|
свойство работает только для элементов, у которых значение position задано как
|
||
|
|
absolute, fixed или relative.
|
||
|
|
|
||
|
|
#### Синоним
|
||
|
|
|
||
|
|
CSS:
|
||
|
|
|
||
|
|
z-index: 1000;
|
||
|
|
|
||
|
|
Stylus:
|
||
|
|
|
||
|
|
-z 1000
|
||
|
|
|