Поддерживаемые CSS стили

Сводная таблица приведена в конце статьи.

Размеры

width — описывает ширину компонента. Значение может быть следующих видов:

1. Ypx

2. Y %

3. Выражение типа calc([expression]), [expression] может иметь следующие виды:

   1. Ypx + (или -) Xpx

   2. Y% + (или -) Xpx

   3. Y% + (или -) X%

   4. Y% / Number

   5. Ypx / Number

height — описывает высоту компонента. Значение описывается так же как и у width.

top — описывает сдвиг компонента от верхнего края. Значение описывается так же как и у width.

left — описывает сдвиг компонента от левого края. Значение описывается так же как и у width.

Фон

background-color — описывает цвет фона компонента. Значение может иметь следующие виды:

1. HEX ( #______(__)) — строка начинающаяся с # за которым идет 6 или 8 16-ричных числа (от 0 до F) описывающие цвет.

2. RGB(rgb(_,_,_)) — строка начинающаяся с rgb за которой следует выражение вида (red, green, blue), где каждая переменная это число от 0 до 255.

3. RGBA(rgba(_,_,_,_)) — строка начинающаяся с rgba за которой следует выражение вида (red, green, blue, alpha), где каждая переменная это число от 0 до 255, не считая alpha которая может иметь значение от 0 до 1.

Фоновое изображение

background-image — описывает фоновое изображение компонента. Значение должно иметь следующий вид:

1. url(_путь_к_изображению_)— где путь к изображению должен быть относительным к исполняемому файлу.

background-position-x — описывает сдвиг относительно левого края фонового изображения компонента. Значение должно иметь следующий вид:

1. Ypx — количество пикселей.

background-position-y — описывает сдвиг относительно верхнего края фонового изображения компонента. Значение должно иметь следующий вид:

1. Ypx — количество пикселей.

background-size — описывает ширину фонового изображения компонента. При этом высота изображения будет скорректирована в соответствии с пропорциями. Значение должно иметь следующий вид:

1. Ypx — количество пикселей.

Текст

color — описывает цвет текста в компоненте. Может иметь вид, такой же как и цвет фона.

font-family — описывает шрифт текста в компоненте. Значение должно иметь следующий вид:

1. string — название шрифта без кавычек и пробелов между словами.

font-style — описывает стиль шрифта текста в компоненте. Значение может иметь следующие виды:

1. normal — стандартный текст;

2. italic — наклоненный текст.

font-weight — описывает толщину шрифта текста в компоненте. Значение должно иметь следующий вид:

1. Число от 100 до 900 с шагом 100 (т.е. 100, 400 или 800)

line-height — описывает междустрочный интервал текста в компоненте. Значение должно иметь следующий вид:

1. Число от 0, в формате float (например, 1.5).

text-align — описывает горизонтальное выравнивание текста в компоненте. Значение может иметь следующие виды:

1. left — текст будет выравнен по левое стороне (по-умолчанию);

2. center — текст будет выравнен по центру;

3. right — текст будет выравнен по правой стороне.

vertical-align — описывает вертикальное выравнивание текста в компоненте. Значение может иметь следующие виды:

1. top — текст будет прижат к верхней стороне (по-умолчанию);

2. center — текст будет выравнен по центру;

3. bottom — текст будет прижат к нижней стороне.

Отступы

padding-[top/bottom/left/right] — описывают отступы текста в компоненте. Значение должно иметь следующий вид:

1. Ypx — количество пикселей.

Граница (Border)

border — описывает ширину, вид и цвет границы компонента. Значение должно иметь следующий вид:

1. Ypx solid HEX(#______(__)) — первым параметром идет ширина границы, вторым его тип (пока что только solid) и третьим — цвет обводки в HEX(подробнее можно посмотреть здесь: цвет фона).

border-radius — описывает закругление границы компонента. Значение может иметь следующие виды:

1. Ypx — при этом всем вершинам будет установлено данное значение;

2. YpxZpx— при этом верхней левой и верхней правой вершинам будет установлено первое значение, а левой нижней и правой нижней — второе;

3. YpxZpxQpxWpx— при этом каждой вершине будут установлены данные значения, начиная с верхней левой;

Attribute	Value type	Description
Size
width	The width of the component	[number + px/number + %/calc((expr -> X% +(-) Ypx))]
height	The height of the component	same
top	Shift the component from the top edge (Y)	same
left	Shift the component from the left edge (X)	same
Background
background-color	The background color of the component.	[hex/rgb/rgba]
background-image	The background image of the component.	[url(path_to_image_without_quotes)]
background-position-x	Shift the background image by X	[number + px]
background-position-y	Shift the background image by Y	[number + px]
background-size	Background image width (height proportional)	[number + px]
Text
color	Color of the text in the component.	[hex/rgb/rgba]
font-size	Font size in the component	[number + px]
font-family	Font family in the component	[string]
font-style	Font style in the component	[normal/italic]
font-weight	Weight of the font in the component	[100-900]
line-height	Line height of the font in the component	[double]
text-align	Alignment of the text horizontally in the component	[left/center/right]
vertical-align	Alignment of the text vertically in the component.	[top/center/bottom]
padding-[top/bottom/left/right]	Shift the text in the directions in the component.	[number + px]
Border
border-color	Color of the border of the component.	[hex/rgb/rgba]
border-radius	The radius of the curve of the stroke in the component	[number + px]
border-[top/bottom/left/right]	Border	[number + px hex solid]
border-[top/bottom/left/right]-size	Width of the border in the component	[number + px]
border-[top/bottom/left/right]-color	Color of the border in the component	[hex]
border-[top/bottom/left/right]-type	Type of the border in the component	[solid]
outline	Single pixel border.	[hex/rgb/rgba]
Display
display	Display of child elements. block - alignment of elements in a column. inline-block - alignment of elements in a row.	[block/inline-block/unset]
Scroll
overflow	Determines whether the scroll is added if the child components are outside the parent.	[hidden/unset]