Foundation - Базовая типографика
Описание
Типографика в Foundation определяет заголовки, абзацы, списки и другие встроенные элементы, которые создают привлекательные и простые стили по умолчанию для элементов.
В следующей таблице перечислены различные типы типографики, используемые в Foundation.
| Sr. No. | Типография и описание |
|---|---|
| 1 | Абзацы Абзац - это группа предложений, определенных с разным размером шрифта, выделенными словами, высотой строки и т. Д. |
| 2 | Заголовок Он определяет заголовки HTML от h1 до h6. |
| 3 | Ссылки Он создает гиперссылку, которая открывает другой документ, когда вы нажимаете на текст или изображение. |
| 4 | Разделители Он используется для перерыва между разделами с помощью тега <hr>. |
| 5 | Упорядоченные и неупорядоченные списки Foundation поддерживает упорядоченные списки, неупорядоченные списки для перечисления вещей. |
| 6 | Списки определений Списки определений используются для отображения пар имя-значение. |
| 7 | Цитаты Он представляет собой блок текста, размер которого намного больше обычного. |
| 8 | Сокращения и код Аббревиатура определяет сокращенное слово или фразу, а код представляет собой фрагмент кода. |
| 9 | Нажатия клавиш Он используется для выполнения определенной функции. |
| 10 | Доступность Foundation предоставляет некоторые рекомендации по доступу к содержимому страницы. |
Справочник по Sass
Вы можете изменить стили компонентов, используя следующие переменные SASS, перечисленные в таблице.
| Sr. No. | Имя и описание | Тип | Значение по умолчанию |
|---|---|---|---|
| 1 | $header-font-family Задает семейство шрифтов для элементов заголовка. |
Строка или список | $ body-font-family |
| 2 | $header-font-weight Задает толщину шрифта заголовков. |
Строка | $ global-weight-normal |
| 3 | $header-font-style Предоставляет стиль шрифта заголовков. |
Строка | обычный |
| 4 | $font-family-monospace Стек шрифтов, используемый для элементов с моноширинным шрифтом, таких как образцы кода. |
Строка или список | Consolas, 'Liberation Mono', Courier, моноширинный |
| 5 | $header-sizes Определяет размеры экрана заголовков, и каждый ключ является точкой останова, а каждое значение представляет собой карту размеров заголовков. |
карта | |
| 6 | $header-color Предоставляет цвет заголовков. |
цвет | наследовать |
| 7 | $header-lineheight Определяет высоту строки заголовков. |
номер | 1.4 |
| 8 | $header-margin-bottom Обеспечивает нижнее поле заголовков. |
номер | 0,5 бэр |
| 9 | $header-text-rendering Определяет метод отрисовки текста. |
Строка | optimizeLegibility |
| 10 | $small-font-size Задает размер шрифта для элементов <small>. |
номер | 80% |
| 11 | $paragraph-margin-bottom Определяет нижнее поле абзацев. |
номер | 1рем |
| 12 | $paragraph-text-rendering Способы отрисовки текста абзаца. |
Строка | optimizeLegibility |
| 13 | $code-color Предоставляет цвет текста для образцов кода. |
цвет | $ черный |
| 14 | $code-font-family Предоставляет семейство шрифтов для примеров кода. |
Строка или список | $ font-family-monospace |
| 15 | $code-border Задает границу вокруг кода. |
Список | 1px сплошной $ средне-серый |
| 16 | $code-padding Задает отступ вокруг текста. |
Номер или список | rem-calc (2 5 1) |
| 17 | $anchor-color Цвет по умолчанию для ссылок. |
цвет | $ первичный цвет |
| 18 | $anchor-color-hover Задает цвет по умолчанию для ссылок при наведении. |
цвет | scale-color ($ anchor-color, $ lightness: -14%) |
| 19 | $anchor-text-decoration Оформление текста по умолчанию для ссылок. |
Строка | никто |
| 20 | $anchor-text-decoration-hover Оформление текста по умолчанию для ссылок при наведении. |
Строка | никто |
| 21 год | $hr-width Определяет максимальную ширину разделителя. |
номер | $ global-width |
| 22 | $hr-border Задает границу по умолчанию для разделителя. |
Список | 1px сплошной $ средне-серый |
| 23 | $hr-margin Поле по умолчанию для разделителя. |
Номер или список | rem-calc (20) авто |
| 24 | $list-lineheight Он определяет высоту строки для элементов в списке. |
номер | $ paragraph-lineheight |
| 25 | $list-style-type Предоставляет маркер для неупорядоченных списков. |
Строка | диск |
| 26 | $list-style-position Он определяет расположение маркеров в неупорядоченных списках. |
Строка | за пределами |
| 27 | $list-side-margin Определяет левое (или правое) поле. |
номер | 1,25 бэр |
| 28 | $defnlist-term-weight Предоставляет толщину шрифта для элементов <dt>. |
Строка | $ global-weight-bold |
| 29 | $defnlist-term-margin-bottom Обеспечивает интервал между элементами <dt> и <dd>. |
номер | 0,3 бэр |
| 30 | $blockquote-color Применяет цвет текста элементов <blockquote>. |
цвет | $ темно-серый |
| 31 год | $blockquote-padding Обеспечивает отступ внутри элементов <blockquote>. |
Номер или список | rem-calc (9 20 0 19) |
| 32 | $blockquote-border Он дает боковую границу для элементов <blockquote>. |
Список | 1px сплошной $ средне-серый |
| 33 | $cite-font-size Определяет размер шрифта для элементов <cite>. |
номер | rem-calc (13) |
| 34 | $cite-color Предоставляет цвет текста для |
цвет | $ темно-серый |
| 35 год | $keystroke-font Определяет семейство шрифтов для элементов <kbd>. |
Строка или список | $ font-family-monospace |
| 36 | $keystroke-color Определяет цвет текста для элементов <kbd>. |
цвет | $ черный |
| 37 | $keystroke-background Предоставляет цвет фона для элементов <kbd>. |
цвет | $ светло-серый |
| 38 | $keystroke-padding Задает отступ для элементов <kbd>. |
Номер или список | rem-calc (2 4 0) |
| 39 | $keystroke-radius Отображает радиус границы для элементов <kbd>. |
Номер или список | $ global-radius |
| 40 | $abbr-underline Предоставляет стиль нижней границы для элементов <abbr>. |
Список | 1px пунктирная $ черная |