Этот компонент обеспечивает стили по умолчанию для всех элементов HTML.
Файл Normalize.css
Компонент Base использует стили известного всем Normalize.css для одинакового отображения элементов во всех браузерах и применяет стили по умолчанию, такие как цвета, отступы, шрифты и другое.
Внимание компонент Форма, компонент Кнопки и компонент Таблицы не стилизованы по умолчанию. Они стилизуются в собственном компоненте. UIkit 3 старается применять как можно меньше стилей к простым HTML-элементам, чтобы сохранить стабильность и неконфликтность при использовании сторонних CSS.
Ссылки
Превращайте текст в гиперссылки, используя элемент <a>. Можно добавить класс .uk-link к инлайновым элементам,
например, <span> и они будут выглядеть как ссылки. Все вариации стилей описаны в компоненте Ссылки.
Семантика кода
В следующем списке представлен краткий обзор наиболее часто используемых семантик текстового уровня и способов их использования. Несмотря на статус Legacy многих элементов, они нередко используются в SEO и визуальных редакторах.
| Элемент | Описание |
|---|---|
<abbr> |
Определите аббревиатуру, используя тег с заголовком. |
<b> |
Создать жирный текст с тегом b. |
<cite> |
Элемент сноска элемент сноска. |
<code> |
Определите фрагменты кода, используя тег code. |
<del> |
Отметить текст как удаленный текст, используя |
<dfn> |
Создать термин определения, используя тег dfn с заголовком. |
<em> |
Подчеркните текст, используя тег em. |
<i> |
Выделите часть текста, используя тег i. |
<ins> |
Отметить изменения документа как вставленный текст, используя тег ins. |
<kbd> |
Используйте тег ввода клавиатуры для отображения текста в моноширинном шрифте браузера по умолчанию. |
<mark> |
Промаркируйте текст, используя тег mark. |
<q> |
Выделяйте цитаты, используя тег q. |
<s> |
Зачеркивайте текст, используя |
<samp> |
Используйте тег samp для отображения скриптов. |
<small> |
Сделайте шрифт меньше, используя тег small. |
<span> |
Определяйте срочные элементы тегом span. |
<strong> |
Обозначайте особую важность текста тегом strong. |
<sub> |
Добавьте текст с нижним индексом с помощью тега sub. |
<sup> |
Добавьте текст с верхним индексом с помощью тега sup |
<u> |
Определите подчеркнутый текст, используя тег u. |
<var> |
Выводите переменные компьютерных программ в теге var. |
Встроенные элементы
Изображения и другие элементы, такие как <audio>, <canvas>, <img>, <svg> и <video> по умолчанию адаптивны в UIkit 3.
При изменении размера экрана они корректируют свои размеры и сохраняют пропорции.
Для отмены подобного поведения используйте класс .uk-preserve-width из компонента Утилиты.
Измените размер окна браузера, чтобы увидеть адаптивное поведение изображения.
Параграфы
Создавайте параграфы с помощью тега <p>.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Заголовки
Для создания заголовков используйте теги заголовков от <h1> до <h6>.
Добавьте классы .uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5 или .uk-h6 для изменения размеров заголовков,
например, вы можете задать элементу h3 размер заголовка, соответствующий h1.
Все классы заголовков подробно описаны в компоненте Заголовки.
h1 Заголовок 1
h2 Заголовок 2
h3 Заголовок 3
h4 Заголовок 4
h5 Заголовок 5
h6 Заголовок 6
<h1>h1 Заголовок 1</h1> <h2>h2 Заголовок 2</h2> <h3>h3 Заголовок 3</h3> <h4>h4 Заголовок 4</h4> <h5>h5 Заголовок 5</h5> <h6>h6 Заголовок 6</h6>
Списки
Создавайте неупорядоченные списки, используя тег <ul> или тег <ol> для упорядоченных списков.
Элемент списка определяется тегом <li>. Узнать о всех опциях стилизации, взгляните на компонент Списки.
- Элемент 1
- Элемент 2
- Элемент 1
- Элемент 2
- Элемент 1
- Элемент 2
- Элемент 3
- Элемент 4
<ul> <li>Элемент 1</li> <li>Элемент 2 <ul> <li>Элемент 1</li> <li>Элемент 2 <ul> <li>Элемент 1</li> <li>Элемент 2</li> </ul> </li> </ul> </li> <li>Элемент 3</li> <li>Элемент 4</li> </ul>
Список определений
Создавайте списки определений, используя тег <dl>. В теге <dt> определяйте термин, в теге <dd> расшифровывайте его.
Все варианты стилизации списков определений вы найдете в компоненте Список определений.
- Список определений
- Список определений перечисляет термины и соответствующие им описания.
- Термин 1
- Описание термина.
- Термин 2
- Описание термина.
<dl> <dt>Список определений</dt> <dd>Список определений перечисляет термины и соответствующие им описания.</dd> <dt>Термин 1</dt> <dd>Описание термина.</dd> <dt>Термин 2</dt> <dd>Описание термина.</dd> </dl>
Горизонтальное отображение
Добавьте горизонтальное отображение с писользованием тега <hr>.
Узнать больше о разделителях вы можете в документации к компоненту Разделители.
-
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> <hr> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Цитаты
Чтобы процитировать несколько строк текста из другого источника на вашем сайте, используйте тег <blockquote>.
Тег blockquote предназначен для выделения длинных цитат внутри документа. Обычно содержимое этого тега выровнивается отступами со всех сторон и используется наклонный текст.
<blockquote cite="#"> <p class="uk-margin-small-bottom">Тег blockquote предназначен для выделения длинных цитат внутри документа. Обычно содержимое этого тега выровнивается отступами со всех сторон и используется наклонный текст. </p> <footer>Лев Николаевич Толстой, <cite><a href="#">писатель</a></cite></footer> </blockquote>
Пользовательское форматирование текста
Для офомрления нескольких строк кода используйте тег <pre>.
Данный тег создает новый текстовый блок, сохраняющий пробелы, табуляции и разрывы строк.
Создайте внутри тега <pre> дочерний тег —<code> чтобы разместить в нем сам текст кода.
Внимание Избегайте любых угловых скобок, чтобы вставленный код не интерпретировался как разметка.
// Пример кода <div id="myid" class="myclass" hidden> Lorem ipsum <strong>dolor</strong> sit amet, consectetur adipiscing elit. </div><pre><code>// Пример кода <div id="myid" class="myclass" hidden> Lorem ipsum <strong>dolor</strong> sit amet, consectetur adipiscing elit. </div></code></pre>