ShortCSS/HELP.md

Справка

Содержание

[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

Синонимы

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

Синонимы

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

Синонимы

CSS	Stylus
width: 1px;	-w 1px
max-width: 1px;	-wmax 1px
min-width: 1px;	-wmin 1px

height

Устанавливает высоту блочных или заменяемых элементов (к ним, например, относится тег <img>). Высота не включает толщину границ вокруг элемента, значение отступов и полей.

Подробнее на сайте htmlbook.ru

Синонимы

CSS	Stylus
height: 1px;	-h 1px
max-height: 1px;	-hmax 1px
min-height: 1px;	-hmin 1px

border

Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента.

Подробнее на сайте htmlbook.ru

Синонимы

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

Синонимы

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

Синоним

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

text

Универсальное свойство, которое позволяет одновременно задать несколько характеристик шрифта и текста.

-f [text-style||text-variant||text-weight] text-size [/line-height] text-family | inherit

Подробнее на сайте htmlbook.ru

Синонимы

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