Text-transform в css
Содержание:
- Трехмерный сдвиг элементов
- Вопросы и задачи по теме
- The matrix() Method
- CSS Transform Properties
- CSS 2D Transform Methods
- 2D-трансформации элементов
- Выравнивание текста с помощью CSS
- Двумерная трансформация
- Управление регистром букв: text-transform
- Examples of uppercase in a Sentence
- CSS Reference
- CSS Properties
Трехмерный сдвиг элементов
Следующая функция — translate3d() позволяет нам задать трехмерное преобразование путем сдвига элемента, используя координаты трёх осей (X,Y и Z). Перейдем к примеру:
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Трехмерный сдвиг элементов</title>
<style>
.static {
display: inline-block; /* блочно-строчные элементы (выстраиваем элементы в линейку) */
margin: 10px; /* внешние отступы со всех сторон */
background: gray; /* цвет заднего фона */
}
div {
width: 180px; /* ширина элемента */
height: 100px; /* высота элемента */
line-height: 100px; /* высота строки (выраывниваем по вертикали) */
text-align: center; /* горизонтальное выравнивание текста по центру */
transition: 0.2s; /* переходный эффект составляет 200 миллисекунд (0,2 секунды) */
}
.test2, .test4, .test6 {background: orange;} /* цвет заднего фона */
.test, .test3, .test5 {background: plum;} /* цвет заднего фона */
.test:hover {
transform: perspective(500px) rotateX(45deg) translate3d(20px,20px,20px); /* используем несколько функций преобразования для элемента при наведении (перспектива, поворот по оси X, трехмерный сдвиг элемента) */
}
.test2:hover {
transform: perspective(500px) rotateX(45deg) translate3d(-20px,-20px,-20px); /* используем несколько функций преобразования для элемента при наведении (перспектива, поворот по оси X, трехмерный сдвиг элемента) */
}
.test3:hover {
transform: perspective(500px) rotateX(45deg) translate3d(-20px,-20px,-80px); /* используем несколько функций преобразования для элемента при наведении (перспектива, поворот по оси X, трехмерный сдвиг элемента) */
}
.test4:hover {
transform: perspective(500px) rotateX(45deg) translate3d(0,0,-80px); /* используем несколько функций преобразования для элемента при наведении (перспектива, поворот по оси X, трехмерный сдвиг элемента) */
}
.test5:hover {
transform: perspective(500px) rotateX(45deg) translate3d(20px,0, 40px); /* используем несколько функций преобразования для элемента при наведении (перспектива, поворот по оси X, трехмерный сдвиг элемента) */
}
.test6:hover {
transform: perspective(500px) rotateX(45deg) translate3d(0,20px, 40px); /* используем несколько функций преобразования для элемента при наведении (перспектива, поворот по оси X, трехмерный сдвиг элемента) */
}
</style>
</head>
<body>
<div class = "static"><div class = "test">translate3d(20px,20px,20px)*</div></div>
<div class = "static"><div class = "test2">translate3d(-20px,-20px,-20px)*</div></div>
<div class = "static"><div class = "test3">translate3d(-20px,-20px,-80px)*</div></div><br>
<div class = "static"><div class = "test4">translate3d(0,0,-80px)*</div></div>
<div class = "static"><div class = "test5">translate3d(20px,0, 40px)*</div></div>
<div class = "static"><div class = "test6">translate3d(0,20px, 40px)*</div></div>
</body>
</html>
По аналогии с ранее рассмотренными функциями сдвига элементов, функция translate3d() задаёт сдвиг одновременно по осям X,Y и Z. Первое значение функции определяет горизонтальный сдвиг элемента (положительное значение сдвигает элемент вправо по оси X, а отрицательное влево по оси X). Второе значение функции определяет вертикальный сдвиг элемента (положительное значение сдвигает элемент вниз по оси Y, а отрицательное вверх по оси Y). Третее значение функции определяет сдвиг по оси Z (отрицательное значение отдаляет элемент). Если указать значение 0 для любой оси, то элемент не будет по ней сдвигаться, по аналогии с другими функциями.
Результат нашего примера:
Рис. 183 Пример трехмерного сдвига элементов (функция преобразования элемента translate3d).
Вопросы и задачи по теме
Перед тем как перейти к изучению следующей темы пройдите практическое задание:
Для выполнения задания вам понадобится скачать архив и скопировать содержимое архива (HTML файл) в любую папку на вашем жестком диске:
Используя полученные знания составьте следующую HTML страницу:
Практическое задание № 16.
Если у Вас возникают трудности при выполнении практического задания, Вы всегда можете открыть пример в отдельном окне и проинспектировать страницу, чтобы понять какой код CSS был использован.
Единицы измерения CSS,
размер шрифта
Текстовая тень в CSS
×
Кажется, вы используете блокировщик рекламы 🙁
Этот ресурс не является коммерческим проектом и развивается на энтузиазме автора сайта, который посвящает все свое свободное время этому проекту.
Добавьте, пожалуйста, basicweb.ru в исключения блокировщика рекламы, этим вы поможете развитию проекта.
Как отключить?
Поддержать
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 |
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 |
❮ Previous
Next ❯
2D-трансформации элементов
Поддержка браузерами
1. Функции 2D-трансформации transform
Свойство задаёт вид преобразования элемента. Свойство описывается с помощью функций трансформации, которые смещают элемент относительно его текущего положения на странице или изменяют его первоначальные размеры и форму. Не наследуется.
Допустимые значения:
matrix() — любое числоtranslate(), translateX(), translateY() — единицы длины (положительные и отрицательные), %scale(), scaleX(), scaleY() — любое числоrotate() — угол (deg, grad, rad или turn)skew(), skewX(), skewY() — угол (deg, grad, rad)
| Функция | Описание |
|---|---|
| none | Значение по умолчанию, означает отсутствие трансформации. Также отменяет трансформацию для элемента из группы трансформируемых элементов. |
| matrix(a, c, b, d, x, y) | Смещает элементы и задает способ их трансформации, позволяя объединить несколько функций 2D-трансформаций в одной. В качестве трансформации допустимы поворот, масштабирование, наклон и изменение положения. Значение a изменяет масштаб по горизонтали. Значение от 0 до 1 уменьшает элемент, больше 1 — увеличивает. Значение c деформирует (сдвигает) стороны элемента по оси Y, положительное значение — вверх, отрицательное — вниз. Значение b деформирует (сдвигает) стороны элемента по оси X, положительное значение — влево, отрицательное — вправо. Значение d изменяет масштаб по вертикали. Значение меньше 1 уменьшает элемент, больше 1 — увеличивает. Значение x смещает элемент по оси X, положительное — вправо, отрицательное — влево. Значение y смещает элемент по оси Y, положительное значение — вниз, отрицательное — вверх. |
| translate(x,y) | Сдвигает элемент на новое место, перемещая относительно обычного положения вправо и вниз, используя координаты X и Y, не затрагивая при этом соседние элементы. Если нужно сдвинуть элемент влево или вверх, то нужно использовать отрицательные значения. |
| translateX(n) | Сдвигает элемент относительно его обычного положения по оси X. |
| translateY(n) | Сдвигает элемент относительно его обычного положения по оси Y. |
| scale(x,y) | Масштабирует элементы, делая их больше или меньше. Значения от 0 до 1 уменьшают элемент. Первое значение масштабирует элемент по ширине, второе — по высоте. Отрицательные значения отображают элемент зеркально. |
| scaleX(n) | Функция масштабирует элемент по ширине, делая его шире или уже. Если значение больше единицы, элемент становится шире, если значение находится между единицей и нулем, элемент становится уже. Отрицательные значения отображают элемент зеркально по горизонтали. |
| scaleY(n) | Функция масштабирует элемент по высоте, делая его выше или ниже. Если значение больше единицы, элемент становится выше, если значение находится между единицей и нулем — ниже. Отрицательные значения отображают элемент зеркально по вертикали. |
| rotate(угол) | Поворачивает элементы на заданное количество градусов, отрицательные значения от -1deg до -360deg поворачивают элемент против часовой стрелки, положительные — по часовой стрелке. Значение rotate(720deg) поворачивает элемент на два полных оборота. |
| skew(x-угол,y-угол) | Используется для деформирования (искажения) сторон элемента относительно координатных осей. Если указано одно значение, второе будет определено браузером автоматически. |
| skewX(угол) | Деформирует стороны элемента относительно оси X. |
| skewY(угол) | Деформирует стороны элемента относительно оси Y. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
Наведите курсор мыши на блоки, чтобы посмотреть функции трансформации в действии.
2. Точка трансформации transform-origin
Свойство позволяет сместить центр трансформации, относительно которого происходит изменение положения/размера/формы элемента. Значение по умолчанию — center, или 50% 50%. Задаётся только для трансформированных элементов. Не наследуется.
| transform-origin | |
|---|---|
| Значения: | |
| ось Х(left, center, right, длина, %) ось Y(top, center, bottom, длина, %) |
Пара значений, заданная с помощью ключевых слов, единиц длины или процентов определяет, относительно какой части элемента будет происходить трансформация. Значения больше 100% увеличивают область трансформации элемента. |
| initial | Устанавливает значение свойства в значение по умолчанию. |
| inherit | Наследует значение свойства от родительского элемента. |
Синтаксис
3. Множественные трансформации
Можно объединить несколько трансформаций одного элемента, перечислив их через пробел в порядке проявления.
div {transform: scale(1.5) rotate(-10deg);}
CSS3-переходы
CSS3-анимация
Выравнивание текста с помощью CSS
Начнем с атрибутов стиля, управляющих выводом текста в блочных элементах. Начнем со свойства text-align, которое является фактически заменой атрибута align (используется для выравнивания содержимого html-элементов, например абзацев p).
Свойство стиля text-align задает горизонтальное выравнивание текста и имеет всего четыре возможных значения:
Доступные значения этого правила определяют выравнивание, соответственно: left — по левому краю, right — по правому краю, center — по центру и justify — по ширине страницы (одновременно по левому и правому краю за счет увеличения расстояния между словами). Для примера, текст этой статьи выравнен по ширине страницы (если вы заметили у него ровные границы и слева и справа) с помощью правила text-align:justify.
По умолчанию, горизонтальное выравнивание выполняется по левому краю, поэтому специально указывать text-align:left не обязательно, если в родительских элементах не было указано другого выравнивания.
Примеры использования свойства:
Следующее свойство CSS text-ident задает отступ для красной строки, например для текста в теге абзаца p. Это правило также, как и text-align, применимо только для блочных элементов. Синтаксис:
Здесь допускаются абсолютные и относительные величины отступа. Абсолютные значения (px — пикселы, em, ex и др.) можно указывать как со знаком плюс, так и со знаком минус. Относительная величина обычно задается в процентах (%). Относительное значение рассчитывается от ширины области, которая отведена под текст. Так, css правило text-indent:50% задаст красную строку равную половине длины этой самой строки. По умолчанию отступ «красной строки» равен нулю. Пример:
Далее рассмотрим вертикальное выравнивание — свойство vertical-align. Это свойство применимо уже для всех html элементов и практически для всех означает выравнивание между собой строчных элементов с текстом относительно их базовой линии. Кроме тегов таблицы td и th, в которых по вертикали будет выравниваться весь контент. Синтаксис:
Рассмотрим каждое значение подробнее:
- baseline — выравнивание фрагмента текста по базовой линии родительского элемента. Это значение по умолчанию;
- sub — фрагмент текста изображается в виде нижнего индекса или подстрочным для родительского элемента;
- super — фрагмент текста изображается в виде верхнего индекса или надстрочным для родительского элемента;
- top — выравнивание фрагмента текста по верхнему краю родительского элемента;
- text-top — выравнивание фрагмента по верхнему краю текста родительского элемента;
- middle — выравнивание центра фрагмента текста по центру родительского элемента;
- bottom — выравнивание фрагмента текста по нижнему краю родительского элемента;
- text-bottom — выравнивание фрагмента по нижнему краю текста родительского элемента;
На рисунке ниже можно посмотреть поведение фрагментов теста при различных значениях свойства vertical-align в браузере Internet Explorer 11:
Кроме вышеперечисленных значений, можно указывать числовые значения. Так, правило CSS vertical-align:0 будет означать тоже самое, что и запись vertical-align:baseline. А правило vertical-align:10px будет смещать текст вверх на 10 пикселей относительно базовой линии. Для смещения текста вниз значение необходимо указывать с минусом.
Сдвиг также можно задавать в относительных единицах измерения, например в em и в ex или в процентах.
Для вертикального выравнивания содержимого ячеек таблицы в vertical-align следует использовать значения:
- top — для выравнивания содержимого по верхней границе ячейки;
- bottom — для выравнивания содержимого по нижней границе ячейки;
- middle — для выравнивания по центру ячейки (используется по умолчанию).
Для достижения нужного результата, обычно приходится экспериментировать с различными значениями свойства стиля vertical-align. Многочисленные возможные значения дают слишком разный результат в различных случаях.
Двумерная трансформация
Элементы могут быть искажены или преобразованы как в двух, так и в трёх плоскостях. Двумерные преобразования работают по осям х и у, известных как горизонтальная и вертикальная оси. Трёхмерные преобразования работают по осям х и у, а также оси z. Эти трёхмерные преобразования помогают определить не только длину и ширину элемента, но и глубину. Мы начнем с обсуждения, как трансформировать элементы в двумерной плоскости, а затем перейдём к работе с трёхмерными преобразованиями.
2d rotate
Свойство transform принимает несколько разных значений. Значение rotate обеспечивает возможность поворота элемента от 0 до 360 градусов. Положительное значение поворачивает элемент по часовой стрелке, а использование отрицательного значения поворачивает элемент против часовой стрелки. По умолчанию точкой поворота является центр элемента, 50% 50%, по горизонтали и вертикали. Позже мы обсудим как вы можете изменить эту точку поворота.
HTML
CSS
Демонстрация rotate
Серый квадрат за повёрнутым элементом символизирует исходное положение элемента. Кроме того, при наведении курсора мыши на блок он будет вращаться на 360 градусов по горизонтали. По ходу урока следите за серым квадратом в каждой демонстрации в качестве указателя на исходное положение элемента и горизонтальное вращение, которые помогают продемонстрировать изменения элемента и глубину.
2d scale
Использование значения scale в свойстве transform позволяет изменить визуальный размер элемента. Значение масштаба по умолчанию равно 1, поэтому любое значение от .99 до .01 визуально уменьшает элемент, в то время как любое значение больше или равное 1.01 визуально увеличивает элемент.
HTML
CSS
Демонстрация scale
Можно масштабировать только высоту или ширину элемента, используя значения scaleX и ScaleY. Значение scaleX будет масштабировать ширину элемента, в то время как значение ScaleY будет масштабировать его высоту. Для масштабирования высоты и ширины элемента, но с разными размерами, могут быть одновременно установлены значения по оси х и у. Для этого используя декларацию scale, задав сперва значение по оси x, затем через запятую значение по оси y.
HTML
CSS
2d translate
Значение translate работает несколько похоже на относительное позиционирование, толкает и тянет элемент в разных направлениях, не прерывая обычного потока документа. Использование значения translateX изменит положение элемента по горизонтальной оси, значение translateY изменит положение элемента по вертикальной оси.
Как и со значением scale, чтобы одновременно установить значения по осям x и y, воспользуйтесь значением translate и сперва укажите значение по оси х, затем через запятую значение по оси y.
Значения расстояния, используемые внутри translate, могут быть любыми основными единицами длины, наиболее часто применяются пиксели или проценты. Положительные значения толкают элемент вниз и вправо от позиции по умолчанию, а отрицательные значения тянут элемент вверх и влево.
HTML
CSS
2d skew
Последнее значение skew в группе transform используется для искажения элементов по горизонтальной оси, вертикальной оси или двум осям сразу. Синтаксис очень похож на значения scale и translate. Применение значения skewX деформирует элемент по горизонтальной оси, в то время как значение skewY деформирует элемент по вертикальной оси. Чтобы исказить элемент по двум осям, используется значение skew, сперва задаётся значение по оси х, затем через запятую значение по оси у.
Значение skew измеряется в градусах. Единицы длины, такие как пиксели или проценты, здесь не применимы.
HTML
CSS
Управление регистром букв: text-transform
Иногда возникает необходимость вывести слова или первые символы слов с заглавной буквы. В CSS для управления регистром буквы есть свойство .
Дефолтное значение равно , то есть по умолчанию регистр букв не изменяется.
Значение
Если вы хотите сделать заглавной первую букву каждого слова, оставив все остальные в первоначальном виде, то этого можно достичь задав значение .
Разметка:
Стили:
Отметьте, что не следует традиционным правилам — оно делает заглавными первые буквы всех слов, включая предлоги. И если вы хотите следовать нормам английского языка, вам придется делать это вручную.
Значение
Если ваша цель — сделать все буквы заглавными, то подходящим значением будет :
Разметка:
Стили:
Значение
Это значение наоборот делает все символы строчными. Естественно, оно не оказывает никакого воздействия на уже имеющиеся строчные буквы.
Разметка:
Стили:
Значение
Это значение появилось в спецификации недавно. Это значение ограничивает символ внутри квадрата, аналогично иероглифам. И применение этого свойство облегчает выравнивание латинских символов с идеографическими.
Не у всех символов есть соответствующая форма, и, значит, не на все символы будет влиять это значение:
Разметка:
Стили:
Это свойство на данный момент поддерживается только в Firefox.
Дополнительная информация
Браузеры отлично поддерживают свойство , у всех основных браузеров с ним нет проблем.
Единственное исключение это значение , которое работает пока только в Firefox. И такая непопулярность вполне может повлечь исключение этого значения из спецификаций.
Также есть небольшое отличие в обработке у Firefox и остальных браузеров.
Вот, например, Firefox:
Заметьте, что первая буква после дефиса не капитализируется. А вот тот же самый пример в Chrome:
В Chrome не делается исключений для первых букв после дефисов — они переводятся в заглавный регистр также как остальные. И это является дефолтным поведением для всех браузеров, кроме упомянутого выше Firefox.
И, наконец, не забывайте о каскадировании. Задание свойства для элемента-контейнера будет унаследовано всеми его потомками. Чтобы избежать неожиданных результатов, задавайте дочерним элементам в значение .
Examples of uppercase in a Sentence
Recent Examples on the Web: Adjective The Globe explained that the word has evolved from a description of a person’s skin color to signify a race and culture, and deserves the uppercase treatment, much like Latinos get.
—
David Bauder, The Christian Science Monitor, «What’s in a word? US newsrooms move to capitalize ‘Black.’,» 16 June 2020 It’s also supposed to be lowercase, not uppercase, according to the Associated Press.
—
Doyle Rice, USA TODAY, «Daylight saving time begins Sunday. Are you ready to spring forward?,» 4 Mar. 2020 The company’s new corporate logo is its name in all uppercase letters.
—
Washington Post, «Move fast and capitalize things: Facebook unveils new logo,» 5 Nov. 2019 It’s also supposed to be lowercase, not uppercase, according to the Associated Press stylebook.
3.
—
Doyle Rice, USA TODAY, «10 things you didn’t know about daylight saving time,» 6 Mar. 2018 It’s also supposed to be lowercase, not uppercase, according to the Associated Press stylebook.
3.
—
Doyle Rice, USA TODAY, «10 things you didn’t know about daylight saving time,» 6 Mar. 2018 Recent Examples on the Web: Noun Choose from four metals — 14k yellow gold or rose plated silver, sterling silver and 14k yellow gold — and customize either both or your right earring with up to ten uppercase letters for each hoop.
—
Nicole Saunders, NBC News, «Best personalized gift ideas 2020: Unique gift guide,» 17 Nov. 2020 The word black is already our preferred term; the change to uppercase recognizes Black people as a distinct cultural group and puts Black on equal footing with Latino and Native American.
—
Mike Wilson, Dallas News, «Capitalizing ‘Black’ a sign of respect, changing times,» 24 June 2020 Though Facebook says its new design is aimed at clarity, de Bartolo says all uppercase letters are often less legible than the standard uppercase-lowercase mix.
—
Washington Post, «Move fast and capitalize things: Facebook unveils new logo,» 5 Nov. 2019 In the last week of December 2018, just eight of the 200 songs on Spotify’s top 200 streaming songs were either all uppercase or all lowercase.
—
Dan Kopf, Quartzy, «The rise of all-lowercase and all-uppercase song titles,» 21 Aug. 2019 When punctuation counts Google does not recognize uppercase or lowercase letters and punctuation.
—
Edward C. Baig, USA TODAY, «11 expert tips to search Google better, faster, more strategically,» 2 Nov. 2019 Then there’s the Nutella soufflé, which is neither an uppercase Nutella creation nor a soufflé.
—
Mike Sutter, ExpressNews.com, «Review: 188 South gives New Braunfels restaurant fans a strong place for pizza, cocktails and small plates,» 28 Nov. 2019 On the Internet, using uppercase letters is shorthand for shouting.
—
Washington Post, «Move fast and capitalize things: Facebook unveils new logo,» 5 Nov. 2019 In literacy, kindergarten students should know how stories and poems are the same or different; how to identify uppercase and lowercase letters; and how to recognize punctuation marks and many common words.
—
James Vaznis, BostonGlobe.com, «In Brookline, there’s a worry that kindergarten has lost its joy,» 9 July 2019 Recent Examples on the Web: Noun This post is typed as a shouting tantrum (all upper case) and claims to be written by a man who called corporate headquarters in Charlotte where he was informed of this.
—
Bill Hand, USA TODAY, «Fact check: NASCAR will not do away with opening prayer, national anthem,» 10 June 2020
CSS Reference
CSS ReferenceCSS Browser SupportCSS SelectorsCSS FunctionsCSS Reference AuralCSS Web Safe FontsCSS Font FallbacksCSS 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
