Initial commit
new file: HELP.md new file: README.md new file: ShortCSS.styl
Этот коммит содержится в:
Коммит
76082617ba
491
HELP.md
Обычный файл
491
HELP.md
Обычный файл
@ -0,0 +1,491 @@
|
|||||||
|
# Справка
|
||||||
|
|
||||||
|
## Содержание
|
||||||
|
|
||||||
|
[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
|
||||||
|
|
||||||
43
README.md
Обычный файл
43
README.md
Обычный файл
@ -0,0 +1,43 @@
|
|||||||
|
ShortCSS
|
||||||
|
========
|
||||||
|
|
||||||
|
Библиотека [Stylus](http://learnboost.github.io/stylus/) для короткой записи CSS-свойств
|
||||||
|
|
||||||
|
Stylus:
|
||||||
|
|
||||||
|
body
|
||||||
|
-bgc #000
|
||||||
|
-c #fff
|
||||||
|
|
||||||
|
#content
|
||||||
|
-ff sans-serif
|
||||||
|
|
||||||
|
#element
|
||||||
|
-d block
|
||||||
|
-w 150
|
||||||
|
-h 100
|
||||||
|
b-radius 7px
|
||||||
|
-br 1px solid #eee
|
||||||
|
|
||||||
|
CSS:
|
||||||
|
|
||||||
|
body {
|
||||||
|
background-color: #000;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
#content {
|
||||||
|
font-family: sans-serif;
|
||||||
|
}
|
||||||
|
#element {
|
||||||
|
display: block;
|
||||||
|
width: 150;
|
||||||
|
height: 100;
|
||||||
|
-webkit-border-radius: 7px;
|
||||||
|
-moz-border-radius: 7px;
|
||||||
|
-o-border-radius: 7px;
|
||||||
|
-ms-border-radius: 7px;
|
||||||
|
-khtml-border-radius: 7px;
|
||||||
|
border-radius: 7px;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
240
ShortCSS.styl
Обычный файл
240
ShortCSS.styl
Обычный файл
@ -0,0 +1,240 @@
|
|||||||
|
// Synonym
|
||||||
|
|
||||||
|
// margin
|
||||||
|
-m()
|
||||||
|
margin arguments
|
||||||
|
-mt()
|
||||||
|
margin-top arguments
|
||||||
|
-mb()
|
||||||
|
margin-bottom arguments
|
||||||
|
-ml()
|
||||||
|
margin-left arguments
|
||||||
|
-mr()
|
||||||
|
margin-right arguments
|
||||||
|
|
||||||
|
// padding
|
||||||
|
-p()
|
||||||
|
padding arguments
|
||||||
|
-pt()
|
||||||
|
padding-top arguments
|
||||||
|
-pb()
|
||||||
|
padding-bottom arguments
|
||||||
|
-pl()
|
||||||
|
padding-left arguments
|
||||||
|
-pr()
|
||||||
|
padding-right arguments
|
||||||
|
|
||||||
|
// width
|
||||||
|
-w()
|
||||||
|
width arguments
|
||||||
|
-wmin()
|
||||||
|
min-width arguments
|
||||||
|
-wmax()
|
||||||
|
max-width arguments
|
||||||
|
|
||||||
|
// height
|
||||||
|
-h()
|
||||||
|
height arguments
|
||||||
|
-hmin()
|
||||||
|
min-height arguments
|
||||||
|
-hmax()
|
||||||
|
max-height arguments
|
||||||
|
|
||||||
|
// position
|
||||||
|
-pos()
|
||||||
|
position arguments
|
||||||
|
-t()
|
||||||
|
top arguments
|
||||||
|
-l()
|
||||||
|
left arguments
|
||||||
|
-b()
|
||||||
|
bottom arguments
|
||||||
|
-r()
|
||||||
|
right arguments
|
||||||
|
|
||||||
|
// background
|
||||||
|
-bg()
|
||||||
|
background arguments
|
||||||
|
-bga()
|
||||||
|
background-attachment arguments
|
||||||
|
-bgc()
|
||||||
|
background-color arguments
|
||||||
|
-bgi()
|
||||||
|
background-image arguments
|
||||||
|
-bgo()
|
||||||
|
background-origin arguments
|
||||||
|
-bgp()
|
||||||
|
background-position arguments
|
||||||
|
-bgr()
|
||||||
|
background-repeat arguments
|
||||||
|
|
||||||
|
// border
|
||||||
|
-br()
|
||||||
|
border arguments
|
||||||
|
-brc()
|
||||||
|
border-color arguments
|
||||||
|
-brs()
|
||||||
|
border-style arguments
|
||||||
|
-brw()
|
||||||
|
border-width arguments
|
||||||
|
|
||||||
|
-brt()
|
||||||
|
border-top arguments
|
||||||
|
-brtc()
|
||||||
|
border-top-color arguments
|
||||||
|
-brts()
|
||||||
|
border-top-style arguments
|
||||||
|
-brtw()
|
||||||
|
border-top-width arguments
|
||||||
|
|
||||||
|
-brb()
|
||||||
|
border-bottom arguments
|
||||||
|
-brbc()
|
||||||
|
border-bottom-color arguments
|
||||||
|
-brbs()
|
||||||
|
border-bottom-style arguments
|
||||||
|
-brbw()
|
||||||
|
border-bottom-width arguments
|
||||||
|
|
||||||
|
-brl()
|
||||||
|
border-left arguments
|
||||||
|
-brlc()
|
||||||
|
border-left-color arguments
|
||||||
|
-brls()
|
||||||
|
border-left-style arguments
|
||||||
|
-brlw()
|
||||||
|
border-left-width arguments
|
||||||
|
|
||||||
|
-brr()
|
||||||
|
border-right arguments
|
||||||
|
|
||||||
|
-brcol()
|
||||||
|
border-collapse arguments
|
||||||
|
|
||||||
|
|
||||||
|
//color
|
||||||
|
-c()
|
||||||
|
color arguments
|
||||||
|
|
||||||
|
//display
|
||||||
|
-d()
|
||||||
|
display arguments
|
||||||
|
|
||||||
|
//float
|
||||||
|
-fl()
|
||||||
|
float arguments
|
||||||
|
|
||||||
|
//font
|
||||||
|
-f()
|
||||||
|
font arguments
|
||||||
|
-ff()
|
||||||
|
font-family arguments
|
||||||
|
-fs()
|
||||||
|
font-size arguments
|
||||||
|
-fst()
|
||||||
|
font-style arguments
|
||||||
|
-fv()
|
||||||
|
font-variant arguments
|
||||||
|
-fw()
|
||||||
|
font-weight arguments
|
||||||
|
|
||||||
|
//text
|
||||||
|
-td()
|
||||||
|
text-decoration arguments
|
||||||
|
-ts()
|
||||||
|
text-shadow arguments
|
||||||
|
-ta()
|
||||||
|
text-align arguments
|
||||||
|
-to()
|
||||||
|
text-overflow arguments
|
||||||
|
|
||||||
|
//list
|
||||||
|
-lis()
|
||||||
|
list-style arguments
|
||||||
|
-lip()
|
||||||
|
list-style-position arguments
|
||||||
|
|
||||||
|
|
||||||
|
-lh()
|
||||||
|
line-height arguments
|
||||||
|
|
||||||
|
//vertical-align
|
||||||
|
-va()
|
||||||
|
vertical-align arguments
|
||||||
|
|
||||||
|
//z-index
|
||||||
|
-z()
|
||||||
|
z-index arguments
|
||||||
|
|
||||||
|
|
||||||
|
// Hacks
|
||||||
|
|
||||||
|
b-radius()
|
||||||
|
-webkit-border-radius: arguments
|
||||||
|
-moz-border-radius: arguments
|
||||||
|
-o-border-radius: arguments
|
||||||
|
-ms-border-radius: arguments
|
||||||
|
-khtml-border-radius: arguments
|
||||||
|
border-radius: arguments
|
||||||
|
|
||||||
|
l-gradient()
|
||||||
|
-bgi -moz-linear-gradient(arguments)
|
||||||
|
-bgi -webkit-linear-gradient(arguments)
|
||||||
|
-bgi -o-linear-gradient(arguments)
|
||||||
|
-bgi -ms-linear-gradient(arguments)
|
||||||
|
-bgi linear-gradient(arguments)
|
||||||
|
|
||||||
|
r-l-gradient()
|
||||||
|
-bgi -moz-repeating-linear-gradient(arguments)
|
||||||
|
-bgi -webkit-repeating-linear-gradient(arguments)
|
||||||
|
-bgi -o-repeating-linear-gradient(arguments)
|
||||||
|
-bgi -ms-repeating-linear-gradient(arguments)
|
||||||
|
-bgi repeating-linear-gradient(arguments)
|
||||||
|
|
||||||
|
r-gradient()
|
||||||
|
-bgi -moz-radial-gradient(arguments)
|
||||||
|
-bgi -webkit-radial-gradient(arguments)
|
||||||
|
-bgi -o-radial-gradient(arguments)
|
||||||
|
-bgi -ms-radial-gradient(arguments)
|
||||||
|
-bgi radial-gradient(arguments)
|
||||||
|
|
||||||
|
bx-shadow()
|
||||||
|
-moz-box-shadow arguments
|
||||||
|
-webkit-box-shadow arguments
|
||||||
|
box-shadow arguments
|
||||||
|
|
||||||
|
bg-clip()
|
||||||
|
-webkit-background-clip arguments
|
||||||
|
-moz-background-clip arguments
|
||||||
|
background-clip arguments
|
||||||
|
|
||||||
|
bg-size()
|
||||||
|
-moz-background-size arguments
|
||||||
|
-webkit-background-size arguments
|
||||||
|
-o-background-size arguments
|
||||||
|
background-size arguments
|
||||||
|
|
||||||
|
transit()
|
||||||
|
-webkit-transition arguments
|
||||||
|
-moz-transition arguments
|
||||||
|
-o-transition arguments
|
||||||
|
transition arguments
|
||||||
|
|
||||||
|
opacit()
|
||||||
|
-ms-filter unquote('"progid:DXImageTransform.Microsoft.Alpha(Opacity='+arguments*100+')"')
|
||||||
|
filter unquote('alpha(opacity='+arguments*100+')')
|
||||||
|
-moz-opacity arguments
|
||||||
|
-khtml-opacity arguments
|
||||||
|
opacity arguments
|
||||||
|
|
||||||
|
_h16 = 'h1,h2,h3,h4,h5,h6'
|
||||||
|
_h15 = 'h1,h2,h3,h4,h5'
|
||||||
|
_h14 = 'h1,h2,h3,h4'
|
||||||
|
_h13 = 'h1,h2,h3'
|
||||||
|
|
||||||
|
_h26 = 'h2,h3,h4,h5,h6'
|
||||||
|
_h25 = 'h2,h3,h4,h5'
|
||||||
|
_h24 = 'h2,h3,h4'
|
||||||
|
|
||||||
|
_h36 = 'h3,h4,h5,h6'
|
||||||
|
_h35 = 'h3,h4,h5'
|
||||||
Загрузка…
Ссылка в новой задаче
Block a user