Справочник DESIGN/HTML/CSS

Мой Справочник | CSS | Текст

Оформление текста
Тип Описание Примеры Код CSS
font-size Размер шрифта

Как задавать font-size

Пиксели (Фиксированное значение)
font-size: 10px;

Просто и понятно. Фиксированное абсолютное значение

em (Отн. значение от родителя)
body { font-size: 20px; }
h1 { font-size: 2em; } // 40px
h1 span { font-size: 1em; } // 40px

em — в типографике относительная единица длины, равная размеру текущего (унаследованного шрифта) (размер буквы M, напечатанной шрифтом Cicero). Базовая 1em = 16px;, но она переопределяется для дочерних элементов.
Если вы прописали для заголовка (h1) font-size: 2em, и если у него родительский элемент body c font-size: 1em, то вычисляем для h2 font-size=16*2=32px, но если у h1 есть вложенный элемент span, то уже для этого span font-size: 1em уже будет равен 32px, а 2em = 64px

rem (root em, отн. значение от корня)
:root { font-size: 16px; }
h2 { font-size: 2rem; } // 32px
h2 span { font-size: 1rem; } // 16px

rem - по сути тоже самое, что em, только значение размера шрифта зависит не от размера родительского элемента, а от размера корневого элемента (:root) и не бужет изменяться от вложенности

% (тоже самое, что и em, только запись в процентах)
body { font-size: 20px; }
h1 { font-size: 200%; } // 40px
h1 span { font-size: 100%; } // 40px
vw (Проценты от ширины viewport)
h1 { font-size: 10vw; }

В примере: 10 процентов от высоты вьюпорта. Адаптивное значение

Ключевые слова (редко)
font-size: xx-small (9px),
font-size: x-small (10px),
font-size: small (13px),
font-size: medium (16px),
font-size: large (18px),
font-size: x-large (24px),
font-size: xx-large (32px),
font-size: smaller (на шаг ниже),
font-size: larger (на шаг выше)
font-weight
Аналог <b>		 Толщина начертания
normal - обычная*
bold - полужирная
bolder
lighter 		Some text font-weight: normal;(По ум*)
Some text font-weight: bold;
font-style
Аналог <i>		 Стиль шрифта
normal - обычный*
italic - курсив 		Some text font-style: normal;(По ум*)
Some text font-style: italic;
font-family Семейство шрифтов Some text font-family: Mistral;
Some text font-family: Verdana;
Some text font-family: Impact;
font-variant Все заглавные, но первая буква выше остальных SOME TEXT font-variant: small-caps;
line-height Высота строки (Интерльяж)
В Google Chrome по ум*.fz(16px;18px;"Times New Roman");

Как задавать line-height

Пиксели (Самое распространённое)
line-height: 20px;

Просто и понятно. Фиксированное абсолютное значение

Множитель (Адаптивное значение)
font-size: 20px;
line-height: 1.5;

Зависит от размера шрифта. line-height = 20px * 1.5 = 30px;

Проценты (Адаптивное значение)
font-size: 20px;
line-height: 150%;

То же самое как и множитель, только в процентах. line-height = 20px * 1.5 = 30px;

Ключевое слово
font-size: 20px;
line-height: normal;

Будет вычисляться автоматически по стандартным свойствам браузера
color Цвет шрифта Some text color: blue;
Some text color: #abc123;
(чаще всего)
Some text color: rgb(125,125,125);
text-decoration Текстовые декорации:
underline - подчёркивание (Аналог <u>);
line-through - зачёркивание (Аналог <s>);
overline - верхняя черта;
none - убирает декорации, стоящие по умолчанию
 Some text text-decoration: underline;
Some text text-decoration: line-through;
Some text text-decoration: overline;
text-decoration-color Цвет декорации Some text text-decoration: underline;
text-decoration-color: red;
text-transform Регистр символов:
lowercase - все строчные;
uppercase - все заглавные;
capitalize - каждое слово с заглавной;
none - убирает трансформации, стоящие по умолчанию
 Some text text-transform: lowercase;
Some text text-transform: uppercase;
Some text text-transform: capitalize;
white-space Управление пробелами:
nowrap - без переносов, весь текст одной строкой;
pre - сохраняет все пробелы как написано в коде (Аналог <pre>);
pre-wrap - так же как и pre, но добавляется перенос строки, если текст не помещается в контейнер;
normal - режим по умолчанию
 Some text Some text Some text Some text white-space: nowrap;
S o m e t e x t white-space: pre;
text-align
(для контейнеров)		 Выравнивание текста (по гор.):
left - по левому краю (по ум*);
right - по правому краю;
center - по центру;
justify - по ширине контейнера
 Some text text-align: left;
Some text text-align: right;
Some text text-align: center;
vertical-align
(для элементов)		 Выравнивание текста (по вер.):
top - по верхнему краю;
middle - по середине;
bottom - по нижнему краю;
baseline - по базовой линии (по ум*)
 Some text vertical-align: top;
Some text vertical-align: middle;
Some text vertical-align: bottom;
Вертикальный ритм текста: http://www.gridlover.net/try
letter-spacing Расстояние между буквами Some text Some text Some text Some text Some text Some text Some text Some text letter-spacing: 1em;
Some text Some text Some text Some text Some text Some text Some text Some text letter-spacing: 0.5em;
Some text Some text Some text Some text Some text Some text Some text Some text letter-spacing: -1px;
word-spacing Расстояние между словами Some text Some text Some text Some text Some text Some text Some text Some text word-spacing: 1.5em;
Some text Some text Some text Some text Some text Some text Some text Some text word-spacing: 0.5em;
Some text Some text Some text Some text Some text Some text Some text Some text word-spacing: -1px;
text-indent Отступ первой строки Some text Some text Some text Some text Some text Some text Some text Some text text-indent: 25px;
Some text Some text Some text Some text Some text Some text Some text Some text text-indent: 10px;
direction Направление текста
lrt - слева-направо (по ум*);
rtl - справа-налево;
 Some text Some text Some text Some text Some text Some text Some text Some text direction: ltr;
Some text Some text Some text Some text Some text Some text Some text Some text direction: rtl;
 У таблиц меняется направление ячеек
Some text Some text Some text Some text Some text Some text Some text Some text direction: rtl;
unicode-bidi:bidi-override;
Колонки
column-count Количество колонок
 Для читабельности нужно размещать в одной колонке 40-50 символов -webkit-column-count: 3;
   -moz-column-count: 3;
    -ms-column-count: 3;
     -o-column-count: 3;
        column-count: 3;
ИЛИ:
-webkit-columns: 3;
   -moz-columns: 3;
    -ms-columns: 3;
     -o-columns: 3;
        columns: 3;

Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text
column-width Ширина колонок
 Если column-count не задано, то браузер устанавливает число колонок автоматичесики -webkit-column-width: 150px;
  -moz-column-width: 150px;
   -ms-column-width: 150px;
    -o-column-width: 150px;
       column-width: 150px;

Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text
column-gap Расстояние между колонками
 -webkit-column-gap: 4em;
   -moz-column-gap: 4em;
    -ms-column-gap: 4em;
     -o-column-gap: 4em;
        column-gap: 4em;

Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text
overflow Переполнение
auto - появяться полосы прокрутки при необходимости;
scroll - появяться гор. и верт. полосы прокруток;
hidden - контент, который "вылезает" из заданных границ контейнера будет спрятан;
visible - отображается всё содержимое элемента, даже за пределами установленной высоты и ширины;
Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text
overflow: auto;
Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text
  overflow: scroll;
overflow-x: scroll;
overflow-y: scroll;
Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text
overflow: hidden;
Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text
overflow: visible;
word-wrap Перенос символов
normal - переносится по пробелам;
break-word - переносится, если не помещается в контейнер;


Some_text_Some_text_Some_text_
word-wrap: normal;
Some_text_Some_text_Some_text_
word-wrap: break-word;
word-break Перенос символов (подобное word-wrap)
normal - переносится по пробелам;
break-word - переноситс по словам, если не помещается в контейнер;
break-all - переносится, если не помещается в контейнер;
keep-all - ???


Some_text_Some_text_Some_text_
word-break: normal;
Some_text_Some_text_Some_text_
word-break: break-word;
writing-mode Устанавливает направление текста на странице — по горизонтали или вертикали

horizontal-tb* - устанавливает направление текста по горизонтали слева направо и сверху вниз
vertical-rl - задаёт направление текста по вертикали сверху вниз и справа налево;
vertical-lr - адаёт направление текста по вертикали сверху вниз и слева направо.
Some text
 writing-mode: horizontal-tb;
Some text
 writing-mode: vertical-rl;
Some text
 writing-mode: vertical-lr;
text-overflow Переполнение текста Обрезается по области text-overflow: clip;
Добавляется многоточие text-overflow: ellipsis;

Ellipsis

Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit incidunt accusantium laudantium dolorem corporis accusamus suscipit deleniti architecto soluta esse natus nam quisquam est facilis inventore perferendis, et illo id quidem ad consequatur nemo sit laborum? Aspernatur placeat nam fuga dolores tempore nulla eum et debitis libero eligendi quidem odio, quod, adipisci nemo provident, eaque atque! Vero, similique, possimus esse voluptatem libero nulla ipsam reiciendis omnis quo, ratione eligendi autem sit facere nemo vel. Dolor debitis corporis perferendis quae cumque modi itaque praesentium similique totam dignissimos blanditiis consectetur repudiandae sint animi architecto ipsa quibusdam, distinctio numquam, nesciunt sequi possimus perspiciatis.

p {
    display: block; /* Не работает с flex и другими */
    text-overflow: ellipsis; /* Добавляем многоточие */
    white-space: nowrap; /* Запрещаем перенос строк */
    overflow: hidden; /* Обрезаем все, что не помещается в область */
    background: #fc0;
    padding: 5px;
  }

Текст градиентом

background-clip: text;
color: transparent;
background-image: linear-gradient(to bottom, #f68a12, #ef520c);

Если проблемы с overflow:

overflow: -webkit-paged-x;
overflow: -moz-hidden-unscrollable;

Разработчик: Евгений Леухин
EvgenyLeukhin@yandex.ru

© 2016 - 2021