CSS текст (часть 3)

css-text-decoration

Преобразование и оформление текста

1. Трансформирование текста text-transform

С помощью данного свойства можно преобразовать текст в верхний и нижний регистры, или превратить первые буквы каждого слова, которые были заглавными, в прописные. Наследуется.

text-transform
Значения:
none Значение по умолчанию, означает отсутствие трансформации. Также отменяет трансформацию текста для элемента в группе элементов с установленным свойством.
capitalize Изменяет написание первой буквы каждого слова в элементе, делая её прописной.
uppercase Выводит все слова в элементе прописными буквами.
lowercase Выводит все слова в элементе строчными буквами.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

text-transform

Рис. 1. Преобразование текста с помощью свойства text-transform

2. Направление написания текста direction

Свойство задаёт направление написания текста, направление размещения столбца таблицы, направление, в котором блок заполняет содержимое по горизонтали и положение последней строки выровненного по ширине элемента. Рекомендуется использовать вместе со свойством unicode-bidi. Наследуется.

direction
Значения:
ltr Значение по умолчанию, текст отражается слева направо.
rtl Текст отражается справа налево.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

3. Направление написания слов в тексте unicode-bidi

Свойство используется вместе со свойством direction для поддержки написания слов в двунаправленном тексте. Не наследуется.

unicode-bidi
Значения:
normal Значение по умолчанию, направление отображения текста определяется браузером на основе используемой кодировки.
embed Устанавливает параметры отображения текста как указано в свойстве direction, но при этом, при изменении направления, изменяется лишь расположение конечных символов пунктуации.
bidi-override Работает аналогично значению embed, но при этом, при изменении направления, меняется также и направление написания слов в тексте.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

4. Декорирование текста text-decoration

Свойство декорирует текст. Также убирает подчёркивание ссылок. Не наследуется.

text-decoration
Значения:
none Выводит текст без оформления, убирает нижнее подчёркивание у ссылок.
underline Подчёркивает текст.
overline Добавляет тексту черту сверху.
line-through Перечёркивает текст.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

text-decoration

Рис. 2. Оформление текста с помощью свойства text-decoration

5. Форматирование первой буквы и первой строки абзаца

CSS даёт возможность форматирование абзаца с использованием псевдоэлементов :first-letter и :first-line. Например, можно выделить первый символ каждого абзаца, имитируя буквицу или придать особое форматирование первому предложению абзаца. В качестве фона для :first-letter также можно устанавливать градиентую заливку.

first-letter-first-line

CSS стили

5. Форматирование кавычек quotes

Свойство задаёт тип кавычек, используемых в документе для вложенных цитат. По умолчанию кавычками оформляется текст, заключенный в тег <q>. Также кавычки можно сгенерировать помощью свойства content, задав ему значения open-quote и close-quote. В качестве значения используется специальный символ HTML или символ Юникода. Наследуется.

quotes
Значения:
[символ символ]+ Определяет вид открывающей и закрывающей кавычек. Первая пара используется для отображения внешнего уровня цитирования, вторая и последующие — для вложенных уровней цитирования.
none Текст отображается без кавычек.
initial Устанавливает значение свойства в значение по умолчанию.
inherit Наследует значение свойства от родительского элемента.

Синтаксис

Таблица 1. Кавычки в HTML
Описание Знак Юникод Спец.символ HTML
Двойные кавычки " \22 &#34;
Апостроф ' \27 &#39;
Левая одиночная кавычка \2018 &#8216;
Правая одиночная кавычка \2019 &#8217;
Левая двойная кавычка \201C &#8220;
Правая двойная кавычка \201D &#8221;
Правая нижняя двойная кавычка \201D &#8222;
Левая угловая скобка \2039 &#8249;
Правая угловая скобка \203A &#8250;
Левая двойная скобка « \AB &#171;
Правая двойная скобка » \BB &#187;