Объедините этот компонент с компонентом «Заголовок» для оформления содержимого.
UIkit предлагает различные текстовые утилиты для оформления текста.
Класс
Описание
.uk-text-lead
Добавьте этот класс для выделения текста, например, в подзаголовках статей.
.uk-текст-мета
Добавьте этот класс к абзацу, содержащему метаданные о статье или подобном.
Следующие классы изменят размер шрифта вашего текста.
Класс
Описание
.uk-text-small
Добавьте этот класс, чтобы уменьшить размер шрифта.
.uk-текст-по умолчанию
Добавьте этот класс, чтобы установить размер шрифта по умолчанию.
.uk-text-large
Добавьте этот класс, чтобы увеличить размер шрифта.
Добавьте один из следующих классов, чтобы изменить толщину шрифта текста.
Класс
Описание
.uk-text-light
Добавьте этот класс, чтобы применить толщину шрифта 300 .
.uk-текст-обычный
Добавьте этот класс, чтобы применить толщину шрифта 400 .
.uk-текст-жирный
Добавьте этот класс, чтобы применить толщину шрифта 700 .
.uk-текст-зажигалка
Добавьте этот класс, чтобы применить более легкий шрифт.
.uk-текст-жирнее
Добавьте этот класс, чтобы применить более жирный шрифт.
Добавьте . uk-text-italic для создания курсивного текста.
Следующие классы преобразуют текст в прописные, заглавные или строчные символы.
Класс
Описание
.uk-text-capitalize
Добавьте этот класс, чтобы преобразовать текст в заглавные буквы.
.uk-text-uppercase
Добавьте этот класс, чтобы перевести текст в верхний регистр.
.uk-текст-нижний регистр
Добавьте этот класс, чтобы перевести текст в нижний регистр.
Добавьте класс .uk-text-decoration-none , чтобы удалить любое украшение текста из ссылки.
Используйте один из этих классов, чтобы применить другой цвет к текстовым элементам.
Класс
Описание
.uk-текст-приглушенный
Добавьте этот класс для отключения звука.
.uk-текст-выделение
Добавьте этот класс, чтобы выделить текст.
.uk-текст-первичный
Добавьте этот класс, чтобы выделить текст основным цветом.
.uk-текст-вторичный
Добавьте этот класс, чтобы выделить текст дополнительным цветом.
.uk-текст-успех
Добавьте этот класс, чтобы указать на успех.
.uk-текстовое предупреждение
Добавьте этот класс, чтобы указать предупреждение.
.uk-текст-опасность
Добавьте этот класс для обозначения опасности.
Чтобы применить к тексту градиент или фоновое изображение, добавьте класс .uk-text-background к элементу внутри текстового элемента. Стили, которые не определяют background-image , будут применять основной цвет.
Добавьте один из этих полезных классов для выравнивания текста.
Класс
Описание
.uk-текст-левый
Выравнивает текст по левому краю.
.uk-текст-справа
Выравнивает текст по правому краю.
.uk-текстовый центр
Центрирует текст по горизонтали.
.uk-текст-выравнивание
Выравнивает текст.
Предварительный просмотр
Разметка
Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .uk-текст-левый
Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .uk-текст-право
Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .uk-текст-центр
<дел>
<дел>
<дел>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .uk-text-left
<дел>
<дел>
<дел>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .uk-text-right
<дел>
<дел>
<дел>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr. .uk-текстовый центр
Отзывчивый
UIkit предоставляет ряд классов адаптивного выравнивания. По сути, они работают так же, как обычные классы выравнивания, за исключением того, что у них есть суффиксы, представляющие точку останова, с которой они начинают действовать.
Шпаргалка по стилю текста CSS. Информативный список простого текста CSS… | Пейтон Дойл | Стартап
Без CSS веб-сайты были бы унылыми и скучными. CSS позволяет настраивать и оформлять практически каждую деталь веб-сайта. Когда вы впервые изучаете CSS, может быть сложно вспомнить каждое свойство каждого элемента, который может быть стилизован, особенно text .
Это послужит шпаргалкой по некоторым наиболее распространенным способам оформления текста с помощью CSS. Добавьте его в закладки для дальнейшего использования! …или, по крайней мере, до тех пор, пока вы не запомните их!
Размер
Прямой и простой. Есть три единицы измерения, которые вы можете использовать для размера текста: пиксель (px), em и rem, но в этом примере мы будем использовать пикселей . В вашем файле CSS определите класс текста, размер которого вы хотите изменить, и просто добавьте font-size: #px; по вашему вкусу.
Family
font-family применяет определенный шрифт к тексту. Существует множество веб-безопасных шрифтов , включая Arial, Courier New, Georgia, Times New Roman, Trebuchet MS и Verdana. Как правило, они могут отображаться на всех компьютерах. Добавить семейство шрифтов: имя_шрифта; в свой файл CSS, чтобы изменить шрифт тела , p , или любого другого класса текста, который вы хотите.
В стороне: шрифты — это гораздо больше, чем просто семейство шрифтов , в основном Google Fonts . Я не буду вдаваться в подробности, но это довольно просто реализовать на вашем сайте.
Цвет
Изменить цвет текста на вашем сайте довольно просто. Просто включите color: colorName в вашем файле CSS. Значение colorName должно быть любой цветовой единицей CSS, которая включает ключевые слова цвета ( green ), шестнадцатеричные значения ( #B5E244 ) и значения RGB ( rgb(181, 226, 68) ).
Выравнивание
Добавление text-align: center , text-align: left , text-align: right — это простые способы выравнивания текста.
Высота строки
Если вы хотите увеличить или уменьшить интерлиньяж (пробел между строками текста), line-height: можно использовать heightValue . heightValue должен быть одним из следующих вариантов: normal , который использует высоту по умолчанию, число , которое зависит от текущего размера шрифта для установки высоты, length (в px, pt или cm), который устанавливает фиксированную высоту строки или % от текущего размера шрифта.
Курсив
Это расплывчатое значение, но если вы хотите сделать свой шрифт курсивным (если используемый вами шрифт поддерживает курсивную версию) или oblique (симулированный курсивный шрифт, наклоняющий обычный шрифт), используйте стиль шрифта : italic или стиль шрифта : oblique . Напротив, font-style: normal задает для текста обычный шрифт без курсива.
Weight
font-weight устанавливает жирность текста. вес шрифта: жирный использует полужирную версию выбранного вами шрифта. вес шрифта: светлее/жирнее делает текст немного менее или более жирным, в зависимости от того, что вы используете. Чтобы получить более точный контроль жирности, используйте font-weight: 100-900 , где 100 — менее жирный шрифт, а 900 — более жирный.
Transform
Преобразование текста легко с помощью text-transform: value . Значение может быть: нет , что предотвращает преобразование, в верхнем регистре , в нижнем регистре или в верхнем регистре , которое делает заглавной первую букву каждого слова.
Украшение
Добавление линии под текстом, над ним или через него также возможно с помощью простых стилей CSS.
uk-text-italic 
По сути, они работают так же, как обычные классы выравнивания, за исключением того, что у них есть суффиксы, представляющие точку останова, с которой они начинают действовать.
uk-text-truncate 
В вашем файле CSS определите класс текста, размер которого вы хотите изменить, и просто добавьте 
Значение 
Напротив, 