Фонд CSS Reference
по умолчанию Foundation
Фонд использовать размер браузера по умолчанию шрифта ( font-size:100% ). Для большинства настольного браузера устройства, размер шрифта по умолчанию 16px. Для браузера для мобильных устройств, размер шрифта по умолчанию 12px. По умолчанию используется шрифт "Helvetica Neue" , высота строки по умолчанию 1.5 .
Эти настройки применяются к <body> элемента внутри элемента.
Кроме того, <p> наружный элемент и в нижней части расстояния (краю дна) является 1.25rem, высота линии 1,6.
текст
Следующие HTML элементы, Фонд создал отдельный стиль рендеринга он не будет использовать стиль браузера по умолчанию. Нажмите кнопку "попробовать", чтобы смотреть онлайн экземпляр.
| элемент | описание | Онлайн примеры |
|---|---|---|
| <H1> - <h6> | h1 - h6 заголовки | пробовать |
| <a> | Светло-голубые ссылки, переместите курсор мыши на ссылку будет подчеркнут | пробовать |
| <Малый> | Светло-серый текстовых субтитров | пробовать |
| <Blockquote> | модуль Цитирование | пробовать |
| <STRONG> | Жирный | пробовать |
| <Em> | курсив | пробовать |
| <Сокр> | Укажите слово аббревиатуры, используйте элемент появляется точечное подчеркивание текста переместите мышь вверх подскажет | пробовать |
| <Kbd> | Прием команд ввода с клавиатуры: CTRL + P | пробовать |
| <Hr> | уровень | пробовать |
| <Код> | фрагмент | пробовать |
| <Ul> | Ненумерованный список | пробовать |
| <Ol> | Упорядоченный список | пробовать |
| <Dl> | Описательная Список | пробовать |
Выравнивание текста
Используйте класс CSS, чтобы изменить выравнивание текста:
| категория | описание | примеров |
|---|---|---|
| .text налево | Выравнивание по левому краю текста | пробовать |
| .text-право | Выравнивание по правому краю текста | пробовать |
| .text-центр | центр | пробовать |
| .text-оправдает | Оправдано | пробовать |
Совместите различные размеры экрана
Используйте класс CSS, чтобы изменить выравнивание текста различных размеров экрана:
| категория | описание | примеров |
|---|---|---|
| левый | ||
| .small-текст-влево | Весь размер экрана слева | пробовать |
| .small-только-текст-влево | Маленький экран слева (ширина меньше 40em) | пробовать |
| .medium-текст-влево | Ширина больше, чем размер экрана 40.0625em Left | пробовать |
| .medium-только-текст-влево | 40.0625em ширина выравнивается слева от размера экрана 64em | пробовать |
| .large-текст-влево | Ширина больше, чем размер экрана 64.0625em Left | пробовать |
| .large-только-текст-влево | 64.0625em ширина выравнивается слева от размера экрана 90em | пробовать |
| .xlarge-текст-влево | Ширина больше, чем размер экрана 90.0625em Left | пробовать |
| .xlarge-только-текст-влево | 90.0625em ширина выравнивается слева от размера экрана 120em | пробовать |
| .xxlarge-текст-влево | Ширина больше, чем размер экрана 120em Left | пробовать |
| Выровнять по правому краю | ||
| .small-текст-право | Все размеры экрана выравниваются по правому краю | пробовать |
| .small-только-текст-вправо | Небольшой экран, выравнивание по правому краю (шириной менее 40em) | пробовать |
| .medium-текст-право | Ширина больше, чем размер экрана выровненного вправо 40.0625em | пробовать |
| .medium-только-текст-вправо | 40.0625em ширина выравнивается по размеру 64em правой части экрана | пробовать |
| .large-текст-право | Ширина больше, чем размер экрана выровненного вправо 64.0625em | пробовать |
| .large-только-текст-вправо | 64.0625em ширина выравнивается по размеру 90em правой части экрана | пробовать |
| .xlarge-текст-право | Ширина больше, чем размер экрана выровненного вправо 90.0625em | пробовать |
| .xlarge-только-текст-вправо | 90.0625em ширина выравнивается по размеру 120em правой части экрана | пробовать |
| .xxlarge-текст-право | Ширина больше, чем размер экрана выровненного вправо 120em | пробовать |
| выравнивать | ||
| .small-текст-центр | Совместите все размеры экрана | пробовать |
| .small-только-текст-центр | Небольшой размер экрана по центру (ширина меньше 40em) | пробовать |
| .medium-текст-центр | Ширина больше, чем размер экрана по центру 40.0625em | пробовать |
| .medium-только-текст-центр | Ширина 40.0625em с размерами экрана 64em по центру | пробовать |
| .large-текст-центр | Ширина больше, чем размер экрана по центру 64.0625em | пробовать |
| .large-только-текст-центр | Ширина 64.0625em с размерами экрана 90em по центру | пробовать |
| .xlarge-текст-центр | Ширина больше, чем размер экрана по центру 90.0625em | пробовать |
| .xlarge-только-текст-центр | Ширина 90.0625em для 120em размеров экрана по центру | пробовать |
| .xxlarge-текст-центр | Ширина больше, чем размер экрана по центру 120em | пробовать |
| Оправдано | ||
| .small-текста оправдать | Все размеры экрана Оправдано | пробовать |
| .Small-только-текст-оправдывать | Обоснуйте небольшой размер экрана (ширина меньше 40em) | пробовать |
| .medium-текста оправдать | Ширина больше, чем размер экрана 40.0625em Justify | пробовать |
| .medium-только-текст-оправдывать | Совместите оба конца по ширине экрана до 64em размера 40.0625em | пробовать |
| .large-текста оправдать | Ширина больше, чем размер экрана 64.0625em Justify | пробовать |
| .large-только-текст-оправдывать | Совместите оба конца по ширине экрана до 90em размера 64.0625em | пробовать |
| .xlarge-текста оправдать | Ширина больше, чем размер экрана 90.0625em Justify | пробовать |
| .xlarge-только-текст-оправдывать | Совместите оба конца по ширине размер экрана 90.0625em к 120em | пробовать |
| .xxlarge-текста оправдать | Ширина больше, чем размер экрана 120em Justify | пробовать |
другое
| категория | описание | примеров |
|---|---|---|
| .left | Слева плавающий элемент | пробовать |
| .right | Правый плавающие элементы | пробовать |
| .clearfix | Очистить поплавок - должны быть добавлены к родительскому элементу плавающего элемента | |
| .hide | Скрытый элемент (CSS display: none ) | пробовать |
| .list-рядный | Все элементы, расположенные в той же строке | пробовать |
| .Lead | Пусть <р> элемент является более заметным | пробовать |
| .subheader | Установка светлоокрашенные <h1> - элементы <H6> | пробовать |