Ier i420

transform:scale(x,y) — масштабирование объекта

Команда для масштабирования объекта scale(x,y), где аргументы в скобках — масштабирование по осям Х и У соответственно.

Пример #5. Масштабирование объектов в html

На странице преобразуется в следующее

При наведении квадрат становится больше по горизонтали на 50% (коэффициент 1.5), а по вертикали на 30% (коэффициент 1.3). Значение 1 означает отсутствие масштабирования. Все что меньше 1, будет означать уменьшение объекта.

Примечание

Если нужно применить преобразование только по одной из осей, то можно воспользоваться более частным случаем: scaleX(x) — масштабирование по Х, scaleY(y) — масштабирование по У.

scale

Функция scale() позволяет изменять размер элемента. Она может увеличить или уменьшить элемент. Функция принимает либо:

  • один параметр: изменение размеров элемента одинаково по высоте и ширине;
  • два параметра: первое значение изменяет размер элемента по горизонтали, второе по вертикали.

Диапазон возможных значений:

  • 1: элемент сохраняет свой первоначальный размер;
  • 2: элемент удваивается в размере;
  • 0.5: элемент уменьшается наполовину;
  • 0: элемент в основном исчезает (так как его высота и ширина равны нулю);
  • -1: элемент отражается.

Как и для translate(), у функция scale() есть версии для х и у: scaleX() и scaleY(), для изменения размера по горизонтали и вертикали, соответственно.

CSS 2D Transform Methods

Function Description
matrix(n,n,n,n,n,n) Defines a 2D transformation, using a matrix of six values
translate(x,y) Defines a 2D translation, moving the element along the X- and the Y-axis
translateX(n) Defines a 2D translation, moving the element along the X-axis
translateY(n) Defines a 2D translation, moving the element along the Y-axis
scale(x,y) Defines a 2D scale transformation, changing the elements width and height
scaleX(n) Defines a 2D scale transformation, changing the element’s width
scaleY(n) Defines a 2D scale transformation, changing the element’s height
rotate(angle) Defines a 2D rotation, the angle is specified in the parameter
skew(x-angle,y-angle) Defines a 2D skew transformation along the X- and the Y-axis
skewX(angle) Defines a 2D skew transformation along the X-axis
skewY(angle) Defines a 2D skew transformation along the Y-axis

Enforcing first letter uppercase

In response to a question from Rechie in the Philippines, there is no CSS solution for forcing only the first letter in an INPUT to be uppercase.

For block elements (P, DIV) we can do it using:

Which outputs the folowing:

first letter UPPERCASE

But the same approach doesn’t work for INPUT fields so we’re back to using JavaScript.

Here’s a simple example where we piggy-back off our previous forceKeyPressUppercase method and apply it conditionally according to the position of the cursor in the INPUT field:

In practice, if you are working with names, you may want to
capitalize each word (e.g. «Mary Jane»), and in certain cases
letters within a word (e.g. «McDonald»).

In that case you need a more advanced function that uses the position
and context of a letter to determine whether to make it upper- or
lower-case as the user types.

The matrix() Method

The method combines all the 2D transform methods into one.

The matrix() method take six parameters, containing mathematic functions,
which allows you to rotate, scale, move (translate), and skew elements.

The parameters are as follow: matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

Example

div
{
 
transform: matrix(1, -0.3, 0, 1, 0, 0);}

CSS Transform Properties

The following table lists all the 2D transform properties:

Property Description
transform Applies a 2D or 3D transformation to an element
transform-origin Allows you to change the position on transformed elements
Function Description
matrix(n,n,n,n,n,n) Defines a 2D transformation, using a matrix of six values
translate(x,y) Defines a 2D translation, moving the element along the X- and the Y-axis
translateX(n) Defines a 2D translation, moving the element along the X-axis
translateY(n) Defines a 2D translation, moving the element along the Y-axis
scale(x,y) Defines a 2D scale transformation, changing the elements width and height
scaleX(n) Defines a 2D scale transformation, changing the element’s width
scaleY(n) Defines a 2D scale transformation, changing the element’s height
rotate(angle) Defines a 2D rotation, the angle is specified in the parameter
skew(x-angle,y-angle) Defines a 2D skew transformation along the X- and the Y-axis
skewX(angle) Defines a 2D skew transformation along the X-axis
skewY(angle) Defines a 2D skew transformation along the Y-axis

CSS to the rescue

In reality it’s not important if the form input is in upper or lower
case. What matters is that:

  1. the user sees the text as is is going to be used; and
  2. our form handler converts the text to upper case before it is used.

With this in mind we can throw out all the preceding
JavaScript and instead use a simple CSS and PHP (or
equivalent back-end) solution:

Source code:

Back end code:

Do you see how much simpler things can be if you use the appropriate
technology?!? A single CSS style (which can be moved to an external style
sheet), plus a single line of PHP, which was probably there already. No
JavaScript or jQuery required.

Описание

CSS свойство transform применяет 2D или 3D преобразование к элементу. Оно позволяет смещать, вращать, масштабировать и/или наклонять любой элемент на странице.

С помощью функций преобразования можно манипулировать внешним видом элемента. В качестве значения свойства transform выступает одна или несколько функций (разделяемых пробелами), которые будут применяться в том порядке, в котором они определены.

Значение по умолчанию: none
Применяется: к трансформируемым элементам
Анимируется: да
Наследуется: нет
Версия: CSS3
Синтаксис JavaScript: object.style.transform=»rotate(7deg)»

Современный мир

Сборщики

В современном мире frontend-a обойтись без сборщиков, таких как Grunt или Gulp практически невозможно, ведь они без труда запустят вам сервер, сделают автообновление страницы и соберут ваш проект в единое целое.

Препроцессоры

SCSS, Less, Stylus, переменные, & (как мы вообще жили без него?!), миксины, циклы, функции и другие радости, без них уже тоже никуда. Препроцессоры работают со своими файлами (*.less, *.scss, *.styl) и на выходе отдают CSS файл понятный для браузеров.

С этими препроцессорами я уже и забыл, как писать код на чистом CSS. Шутка, конечно, но мне не хватает возможностей, которые сейчас может дать CSS.

Постпроцессор

В отличие от препроцессоров, постпроцессор PostCSS работает непосредственно с CSS файлами. Если учитывать все плагины, которые существуют на данный момент, то можно сказать, что PostCSS может работать не только с CSS файлами, но и с файлами препроцессоров. Из этого следует, что PostCSS можно использовать как вместе с препроцессорами, так и отдельно.

Ниже представлен список плагинов, которые я подобрал с учетом того, что PostCSS используется как отдельный инструмент. И если вы дочитаете этот список до конца, то поймете, что препроцессоры не потребуются.

How do You Make Each Word in a String or Text Start With a Capital Letter or Title Case the Text?

Title case is where each word in a sentence or string starts with a capital letter. The capitalize value causes a string to render in title case, or at least each word starts with a capital letter.

If a letter in the formatted text is uppercase it will not lower case the letter to make proper title case.

Notice how the first paragraph, with a random mix of capital and lower case characters does not lower case all the characters? That’s because capitalize is not title-case.

Right now there is no titlecase value available. Instead you should take care to lower case the source before rendering.

Using a Pseudo Selector to Apply a text-transform to the First Letter

A relatively modern feature available to CSS selectors is the concept of a pseudo selector. You can use the ::first-letter selector to apply a different style to the first character of a string.

This allows you to apply some ‘fancy’ styling if you would like. Think about it as way to create that calligraphy affect where the first letter of a chapter is large and decorative.

In this example the lowercase text-transform is applied to the sentence. Then the ::first-letter selector is used to apply custom styling to the paragraph’s first letter. Specifically the first letter is upper case, larger and has a different font family applied.

Top uppercase Askers

All Time

2k

Benjamin Didur

20.1k33 gold badges1111 silver badges44 bronze badges

1.2k

assassin

14.2k1010 gold badges2525 silver badges4040 bronze badges

1.1k

Heat Miser

18k77 gold badges3131 silver badges3737 bronze badges

729

gadss

16.3k3232 gold badges8989 silver badges130130 bronze badges

414

WillfulWizard

4,78122 gold badges1616 silver badges1515 bronze badges

140

n.evermind

11.5k1717 gold badges7373 silver badges118118 bronze badges

138

Natacha

1,41722 gold badges1212 silver badges66 bronze badges

130

Piyush

3,55777 gold badges2828 silver badges6060 bronze badges

90

RyanKeeter

5,32966 gold badges2929 silver badges3939 bronze badges

81

raga

88311 gold badge99 silver badges1313 bronze badges

80

Parappa

6,94422 gold badges3131 silver badges3737 bronze badges

73

user702432

9,0401111 gold badges4747 silver badges6666 bronze badges

72

shep

73911 gold badge77 silver badges66 bronze badges

70

Sam

11.9k2020 gold badges8181 silver badges143143 bronze badges

69

MetaGuru

37k6464 gold badges172172 silver badges281281 bronze badges

69

Evan Carroll

55.1k3434 gold badges174174 silver badges296296 bronze badges

63

marshallm

84577 silver badges88 bronze badges

51

Malax

8,10399 gold badges4444 silver badges6161 bronze badges

49

kaleazy

4,07622 gold badges3434 silver badges4444 bronze badges

46

pown

96611 gold badge1212 silver badges2424 bronze badges

Only non community-wiki questions and answers are included in these totals (updated daily)

The CSS text-transform Property

The CSS text-transform property is the key to managing text uppercase and lowercase rendering. There are 5 different values you can use:

  • lowercase: makes all of the letters in the selected text lowercase.
  • uppercase: makes all of the letters in the selected text uppercase or ALL CAPS.
  • capitalize: capitalizes the first letter of each word in the selected text.
  • none: leaves the text’s case and capitalization exactly as it was entered.
  • inherit: gives the text the case and capitalization of its parent.
  • full-width: Is a keyword forcing the writing of a character (mainly ideograms and latin scripts) inside a square, allowing them to be aligned in the usual East Asian scripts.

У text-transform есть 5 значений:

  • li>
    text-tranform: capitalize (Первая Буква Каждого Слова Будет Большой)
  • text-tranform: lowercase (все буквы будут маленькими)
  • text-transform: uppercase (ВСЕ БУКВЫ БУДУТ БОЛЬШИМИ)
  • text-transform: none (отменяет предыдущие форматирование)
  • text-tranform: inherit (наследует форматирование родителя)

Рассмотрим как это работает на практике. Представим, что у нас есть следующая HTML-страница:

My Page

A paragraph with some TEXT

1
2
3
4
5
6
7
8
9
10
11

!DOCTYPE html>
html>
head>

meta charset=»utf-8″>

title>My Pagetitle>

link rel=»stylesheet»href=»style.css»>

head>
body>

p>Aparagraph with some TEXTp>

body>
html>

Как видите, стили у нас подключены отдельным файлом style.css

Итак, пока никаких CSS-стилей мы не задали, текст в теге

будет выглядеть так:

ПРИМЕР 1

Чтоб сделать весь текст в теге

заглавными буквам

и, напишите в файле style.css следующее:

p {
text-transform: uppercase;
}

1
2
3

p{

text-transformuppercase;

}

Получим:

ПРИМЕР 2

Чтоб сделать все буквы прописными, напишите следующее:

p {
text-transform: lowercase;
}

1
2
3

p{

text-transformlowercase;

}

Получим:

ПРИМЕР 3

Чтобы сделать все первые буквы заглавными, напишите:

p {
text-transform: capitalize;
}

1
2
3

p{

text-transformcapitalize;

}

Получим:

Обратите внимание: слово, написанное полностью заглавными буквами, не изменилось. ПРИМЕР 4

ПРИМЕР 4

Теперь протестируем text-transorm: none.

Но в таком виде его тестировать не интересно. Давайте представим, что у нас еще есть h1:

My Page

Heading

A paragraph with some TEXT

1
2
3
4
5
6
7
8
9
10
11
12

!DOCTYPE html>
html>
head>

meta charset=»utf-8″>

title>My Pagetitle>

link rel=»stylesheet»href=»style.css»>

head>
body>

h1>Headingh1>

p>Aparagraph with some TEXTp>

body>
html>

Поменяем и файл со стилями. Давайте зададим text-transform: uppercase для всего body:

body {
text-transform: uppercase;
}

1
2
3

body{

text-transformuppercase;

}

В итоге получим:

Но что если мы не хотим, чтобы текст параграфа 

не менялся? Пишем:

body {
text-transform: uppercase;
}

p {
text-transform: none;
}

1
2
3
4
5
6
7

body{

text-transformuppercase;

}
 

p{

text-transformnone;

}

Получаем:

ПРИМЕР 5

А теперь представим, что у нас есть несколько параграфов:

My Page

A paragraph with some TEXT

A paragraph with some TEXT

A paragraph with some TEXT

1
2
3
4
5
6
7
8
9
10
11
12
13

!DOCTYPE html>
html>
head>

meta charset=»utf-8″>

title>My Pagetitle>

link rel=»stylesheet»type=»text/css»href=»style.css»>

head>
body>

p>Aparagraph with some TEXTp>

p>Aparagraph with some TEXTp>

p>Aparagraph with some TEXTp>

body>
html>

Допустим, для родительского тега body у нас задан один стиль, а для самих параграфов — другой:

body {
text-transform: uppercase;
}

p {
text-transform: none;
}

1
2
3
4
5
6
7

body{

text-transformuppercase;

}
 

p{

text-transformnone;

}

В итоге сейчас это выглядит так:

Но что если мы хотим, чтобы один из параграфов имел стиль родителя? Например, мы хотим его выделить таким образом?

Давайте сделаем следующее — допишем ему text-transform: inherit:

My Page

A paragraph with some TEXT

A paragraph with some TEXT

A paragraph with some TEXT

1
2
3
4
5
6
7
8
9
10
11
12
13

!DOCTYPE html>
html>
head>

meta charset=»utf-8″>

title>My Pagetitle>

link rel=»stylesheet»type=»text/css»href=»style.css»>

head>
body>

p>Aparagraph with some TEXTp>

pstyle=»text-transform: inherit;»>Aparagraph with some TEXTp>

p>Aparagraph with some TEXTp>

body>
html>

Получим:

ИТОГО: 

Хотите, чтобы текст отображался ЗАГЛАВНЫМИ БУКВАМИ — используйте:

text-transform: uppercase;

1 text-transformuppercase;

Хотите, чтобы текст отображался прописными буквами — используйте:

text-transform: lowercase;

1 text-transformlowercase;

Хотите, чтобы Каждое Слово Было С Большой Буквы (чаще применяется в английском) — используйте:

text-transform: capitalize;

1 text-transformcapitalize;

Хотите отменить предыдущий стиль text-transform (заданный вами или кем-то другим) — используйте:

text-transform: none;

1 text-transformnone;

Хотите взять такой же text-transform как и у родительского элемента — используйте:

text-transform: inherit;

1 text-transforminherit;

Надеемся, данная статья была Вам полезна! Читайте дальше наши статьи или приходите учиться к нам на курсы по Front-End. Детальнее о наших курсах у нас на сайте здесь.

Характеристики

  • Прочный автоматический нож
  • Посадочные талоны и багажные бирки «все-в-одном»
  • Соответствие Cupps и поддержка «родного» ПО AEA
  • Высокая скорость до 200 мм/с
  • Интерфейс: USB, RS232 и Ethernet
  • Автоматическое определение длины билета
  • Дополнительный мультиконтейнер для обработки 3 посадочных талонов
  • SD-карта для апгрейда встроенного ПО
  • Опция РЧИ
  • Новый плоский держатель рулона бумаги
  • Автоматическая загрузка полного рулона без отходов бумаги

СКОНЦЕНТРИРУЙСЯ:
 

  • Печать штрих-кодов 1D и 2D IATA: UPC-A, UPC-E, EAN13, EAN8, CODE39, ITF, CODABAR, CODE93, CODE128, CODE32, PDF417, DATAMATRIX, AZTEC, QR CODE
  • Серийный интерфейс/USB/Ethernet
  • Датчики: оптические верхние и нижние полностью регулируемые для любой ширины билета. Датчик присутствия билета
  • Внешний источник питания — съемный для увеличения гибкости монтажа
  • Самоинсталлирующийся драйвер принтера — Win7, 8, 8.1, 10 (поддержка 32-64-битных версий). Сертифицирован WHQL (только по запросу). Самоинсталлирующийся драйвер USB Virtual RS232 — Win7, 8, 8.1, 10 (поддержка 32-64-битных версий). Сертифицирован WHQL (только по запросу); Linux (поддержка 32-64-битных версий); Android, iOS, Windows Phone
 

УВЧ
— Стандарт ETSI, полностью соответствует Европейскому регламенту ETSI EN 302 280 (869.525 МГц)
— Стандарт FCC, полностью соответствует Регламенту Федеральной комиссии по связи США FCC часть 15 (902-928 МГц)
— ISO 18000-6B
— Philips UCODE EPC 1.19
— EPC Class1 Gen2 / ISO 18000-6C

 

Сертификация ENERGY STAR                                                                                                        

                      

 

VeriPrint позволяет интегрировать устройство сканирования документов (сканер) с термопечатающей головкой в одном элементе. VeriPrint позволяет печатает и сохраняет в памяти в реальном времени отсканированное изображение чека/билета, выявлять потенциальные проблемы печати / бумаги и использовать отсканированный документ в виде бумажной или электронной копии выданного документа.

3D-функции

Мы видели, как функции трансформации работают на плоскости, вдоль осей х и у.

Например:

  • У translate() до двух параметров:
    • translate(x)
    • translate(x, y)
  • translateX() только для оси х
  • translateY() только для оси у

Но для всех этих функций также есть 3D-версии.

Например, для translate() есть версия translate3d(), которая выполняет преобразование в трёх измерениях, а это значит, что она также включает в себя ось z (кроме того существует отдельная функция translateZ).

Параметр z в основном заставляет элемент двигаться ближе и дальше, в зависимости от уменьшения или увеличения значения. Это как увеличение и уменьшение масштаба.

Зелёный блок поднимается на 200px «вверх» по оси z, как будто становясь ближе к нам.

К родительскому элементу требуется применить perspective: 500px, чтобы трёхмерное пространство стало заметным. В качестве альтернативы также может быть использовано transform: perspective(500px).

Значения свойства

Значение Описание
none Преобразование не применяется.
matrix(n,n,n,n,n,n) Применяет 2D преобразование с помощью матрицы из шести значений.
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) Применяет 3D преобразование с помощью матрицы из шестнадцати(4х4) значений.
translate(x,y) Функция translate позволяет перемещать элементы влево, вправо, вверх или вниз. Эта функция аналогична поведению position: relative; При использовании этой функции, можно сдвигать элементы не влияя на поток документа.
translate3d(x,y,z) Применяет 3D смещение.
translateX(x) Определяет смещение, только по оси Х.
translateY(y) Определяет смещение, только по оси У.
translateZ(z) Определяет 3D смещение, только по оси Z.
scale(x,y) Функция scale(x,y) масштабирует элемент горизонтально и вертикально. Если указано только одно значение, оно будет использовано сразу и для горизонтального масштабирования и для вертикального. Например, scale(1) оставит элемент такого же размера, scale(2) удвоит его пропорции, scale(0.5) уменьшит элемент в 2 раза и так далее. Предоставление различных значений будет искажать элемент.
Масштабируемый элемент будет увеличиваться от своего центра или уменьшаться к нему, другими словами центр элемента будет всегда находится в одной и той же точке, не зависимо от его размера. Таково поведение элемента по умолчанию, чтобы изменить это можно воспользоваться свойством transform-origin.
scale3d(x,y,z) Применяет 3D преобразование масштаба.
scaleX(x) Определяет преобразование масштаба по оси Х.
scaleY(y) Определяет преобразование масштаба по оси У.
scaleZ(z) Определяет 3D преобразование масштаба по оси Z.
rotate(angle) Функция rotate() поворачивает элемент вокруг точки происхождения по заданному значению угла. Как и в случае с функцией scale(), по умолчанию точка происхождения — это центр элемента.
rotate3d(x,y,z,angle) Определяет 3D поворот.
rotateX(angle) Определяет 3D поворот вдоль оси Х.
rotateY(angle) Определяет 3D поворот вдоль оси У.
rotateZ(angle) Определяет 3D поворот вдоль оси Z.
skew(x, y) Функция skew(x, y) определяет наклон по осям X и Y. Как и следовало ожидать, x определяет наклон оси X,а y определяет наклон оси Y. Если второй параметр опущен, то перекос элемента произойдёт только по оси X.
skewX(angle) Определяет 2D преобразование наклона вдоль оси Х.
skewY(angle) Определяет 2D преобразование наклона вдоль оси У.
perspective(n) Определяет перспективу для преобразования 3D элемента.
inherit Указывает, что значение наследуется от родительского элемента.

Пример

CSS Свойство:

transform:

Результат:

Демонстрация работы свойтсва transform.

CSS Код:

#myDIV { background-color: lightblue; transform: rotate(10deg); }

Кликните на любое значение свойства, чтобы увидеть результат

CSS Reference

CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS AnimatableCSS UnitsCSS PX-EM ConverterCSS ColorsCSS Color ValuesCSS Default ValuesCSS Entities

CSS Properties

align-content
align-items
align-self
all
animation
animation-delay
animation-direction
animation-duration
animation-fill-mode
animation-iteration-count
animation-name
animation-play-state
animation-timing-function

backface-visibility
background
background-attachment
background-blend-mode
background-clip
background-color
background-image
background-origin
background-position
background-repeat
background-size
border
border-bottom
border-bottom-color
border-bottom-left-radius
border-bottom-right-radius
border-bottom-style
border-bottom-width
border-collapse
border-color
border-image
border-image-outset
border-image-repeat
border-image-slice
border-image-source
border-image-width
border-left
border-left-color
border-left-style
border-left-width
border-radius
border-right
border-right-color
border-right-style
border-right-width
border-spacing
border-style
border-top
border-top-color
border-top-left-radius
border-top-right-radius
border-top-style
border-top-width
border-width
bottom
box-decoration-break
box-shadow
box-sizing
break-after
break-before
break-inside

caption-side
caret-color
@charset
clear
clip
clip-path
color
column-count
column-fill
column-gap
column-rule
column-rule-color
column-rule-style
column-rule-width
column-span
column-width
columns
content
counter-increment
counter-reset
cursor

direction
display
empty-cells
filter
flex
flex-basis
flex-direction
flex-flow
flex-grow
flex-shrink
flex-wrap
float
font
@font-face
font-family
font-feature-settings
font-kerning
font-size
font-size-adjust
font-stretch
font-style
font-variant
font-variant-caps
font-weight

grid
grid-area
grid-auto-columns
grid-auto-flow
grid-auto-rows
grid-column
grid-column-end
grid-column-gap
grid-column-start
grid-gap
grid-row
grid-row-end
grid-row-gap
grid-row-start
grid-template
grid-template-areas
grid-template-columns
grid-template-rows

hanging-punctuation
height
hyphens
@import
isolation
justify-content
@keyframes
left
letter-spacing

line-height
list-style
list-style-image
list-style-position
list-style-type

margin
margin-bottom
margin-left
margin-right
margin-top
max-height
max-width
@media
min-height
min-width
mix-blend-mode

object-fit
object-position
opacity
order
outline
outline-color
outline-offset
outline-style
outline-width
overflow
overflow-x
overflow-y

padding
padding-bottom
padding-left
padding-right
padding-top
page-break-after
page-break-before
page-break-inside
perspective
perspective-origin
pointer-events
position
quotes

resize
right

scroll-behavior

tab-size
table-layout
text-align
text-align-last
text-decoration
text-decoration-color
text-decoration-line
text-decoration-style
text-indent
text-justify
text-overflow
text-shadow
text-transform
top

transform
transform-origin
transform-style
transition
transition-delay
transition-duration
transition-property
transition-timing-function

unicode-bidi
user-select

vertical-align
visibility

white-space
width
word-break
word-spacing
word-wrap
writing-mode

z-index

CSS Properties

align-contentalign-itemsalign-selfallanimationanimation-delayanimation-directionanimation-durationanimation-fill-modeanimation-iteration-countanimation-nameanimation-play-stateanimation-timing-functionbackface-visibilitybackgroundbackground-attachmentbackground-blend-modebackground-clipbackground-colorbackground-imagebackground-originbackground-positionbackground-repeatbackground-sizeborderborder-bottomborder-bottom-colorborder-bottom-left-radiusborder-bottom-right-radiusborder-bottom-styleborder-bottom-widthborder-collapseborder-colorborder-imageborder-image-outsetborder-image-repeatborder-image-sliceborder-image-sourceborder-image-widthborder-leftborder-left-colorborder-left-styleborder-left-widthborder-radiusborder-rightborder-right-colorborder-right-styleborder-right-widthborder-spacingborder-styleborder-topborder-top-colorborder-top-left-radiusborder-top-right-radiusborder-top-styleborder-top-widthborder-widthbottombox-decoration-breakbox-shadowbox-sizingbreak-afterbreak-beforebreak-insidecaption-sidecaret-color@charsetclearclipclip-pathcolorcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnscontentcounter-incrementcounter-resetcursordirectiondisplayempty-cellsfilterflexflex-basisflex-directionflex-flowflex-growflex-shrinkflex-wrapfloatfont@font-facefont-familyfont-feature-settingsfont-kerningfont-sizefont-size-adjustfont-stretchfont-stylefont-variantfont-variant-capsfont-weightgridgrid-areagrid-auto-columnsgrid-auto-flowgrid-auto-rowsgrid-columngrid-column-endgrid-column-gapgrid-column-startgrid-gapgrid-rowgrid-row-endgrid-row-gapgrid-row-startgrid-templategrid-template-areasgrid-template-columnsgrid-template-rowshanging-punctuationheighthyphens@importisolationjustify-content@keyframesleftletter-spacingline-heightlist-stylelist-style-imagelist-style-positionlist-style-typemarginmargin-bottommargin-leftmargin-rightmargin-topmax-heightmax-width@mediamin-heightmin-widthmix-blend-modeobject-fitobject-positionopacityorderoutlineoutline-coloroutline-offsetoutline-styleoutline-widthoverflowoverflow-xoverflow-ypaddingpadding-bottompadding-leftpadding-rightpadding-toppage-break-afterpage-break-beforepage-break-insideperspectiveperspective-originpointer-eventspositionquotesresizerightscroll-behaviortab-sizetable-layouttext-aligntext-align-lasttext-decorationtext-decoration-colortext-decoration-linetext-decoration-styletext-indenttext-justifytext-overflowtext-shadowtext-transformtoptransformtransform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functionunicode-bidiuser-selectvertical-alignvisibilitywhite-spacewidthword-breakword-spacingword-wrapwriting-modez-index

Ссылка на основную публикацию