Текст

color

Цвет текста в элементе

body {
    color: #ffff33;
    color: red;
}

font

Задает в сокращенном виде шрифт: стиль, начертание, толщину, размер, высоту, наименование

body {
    font: italic small-caps bold 1.25em/150% Arial, Helvetica, sans-serif;
}

font-family

Семейство шрифтов

  • serif - шрифты с засечками

  • sans-serif - рубленые шрифты

  • cursive - курсивные шрифты

  • fantasy - декоративные шрифты

  • monospace - моноширинные шрифты

body {
    font-family: "Lucida Grande", Arial, sans-serif;
}

font-size

Размер шрифта

  • число

  • xx-small

  • x-small

  • small

  • medium - по умолчанию

  • large

  • x-large

  • xx-large

body {
    font-size: 1.25em;
    font-size: 60px;
}

font-style

Стиль начертания шрифтов

  • normal - по умолчанию

  • italic - курсивый

  • oblique - наклонный

body {
    font-style: italic;
}

font-variant

Вариант начертания шрифта

  • normal - по умолчанию

  • small-caps - строчные буквы модифицируются в заглавные, но меньшего размера

body {
    font-variant: small-caps;
}

font-weight

Жирность шрифта

  • normal - по умолчанию

  • bold

  • bolder

  • lighter

  • число от 100 до 900 с шагом 100

body {
    font-weight: bold;
}

letter-spacing

Межсимволный интервал

  • normal - по умолчанию

  • число

body {
    letter-spacing: -1px;
}

line-height

Межстрочный интервал

  • normal - по умолчанию

  • число

body {
    line-height: 200%;
}

text-align

Горизонтальное выравнивание текста

  • center - по центру

  • justify - по ширине

  • left - по левому краю

  • right - по правому краю

  • start - если направление текста слева направо, то слева, иначе справа

  • end - если направление текста слева направо, то справа, иначе слева

body {
    text-align: center;
}

text-align-last

Тип выравнивания последней строки элемента, если text-align задан как justify.

Принимает теже параметры что и text-align

.content {
    text-align: justify;
    text-align-last: left;
}

text-decoration

Начертание шрифта

  • none - по умолчанию

  • underline

  • overline

  • line-throught

  • blink

body {
    text-decoration: underline overline line-through;
}

text-indent

Отступ первой строки

body {
    text-indent: 3em;
}

text-overflow

Видимость текста

  • clip - текст обрезается, если вылезает за пределы элемента

  • ellipsis - добавляется многоточие

.content {
    text-overflow: clip;
}

text-shadow

Тень

body {
    text-shadow: -4px 4px 3px #999999 2px 3px 10px #000;
}

text-transform

Преобразование текста в заглавные или прописные буквы

  • capitalize - первый символ заглавный

  • uppercase - символы в верхнем регистре

  • lowercase - символы в нижнем регистре

  • none - по умолчанию

body {
    text-transform: uppercase;
}

vertical-align

Вертикальное положение относительно базовой линии

  • baseline - выравнивание базовой линии по соответсвующей линии родительского элемента

  • bottom - выравнивание по нижней части элемента

  • middle - по центру родительского элемента

  • sub - базовая линия по базовой линии нижнего индекса родительского элемента

  • super - базовая линия по базовой линии верхнего индекса родительского элемента

  • top - по верхней части родителя

  • text-bottom - нижний край фрагмента по нижнему краю текста родителя

  • text-top - верхний край фрагмента текста по верхнему краю текста родителя

  • число

body {
    vertical-align: top;
}

white-space

Отображение пробелов, табуляции, перевода строки

  • normal - по умолчанию, несколько пробелов преобразуются в один, переводы строк преобразуются в пробелы. браузер сам разрывает текст

  • pre - преформативное, пробелы и переводы строк сохраняются как есть. браузер сам ничего не разрывает

  • pre-line - пробелы схлопываются, переводы строк сохраняются. браузер сам все разрывает

  • pre-wrap - пробелы и переводы строк сохрнаяются, брузер сам разрывает

  • nowrap - безразрывное, несколько пробелов преобразуются в один, переводы строк преобразуются в пробелы. браузер не разрывает текст

body {
    white-space: pre;
}

word-spacing

Интервал между словами

  • normal - по умолчанию

  • число

body {
    word-spacing: -1px; word-spacing: 2em;
}

word-wrap

Указывает места, где браузер может осуществить перевод строки

  • break-word - разрыв строк может быть внутри слов

  • normal - строки разбиваются пробелами