предыдущий   следующий   содержание   свойства   индекс

16  Текст

Содержание

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


16.1 Отступы: свойство 'text-indent'

'text-indent'
Значение: <length> | <percentage> | inherit
Начальное: 0
Применяется:   к элементам уровня блока
Наследуется: да
Процентное: относительно ширины содержащего блока
Носитель: визуальный

Это свойство специфицирует отступ первой строки текста в блоке. Точнее, оно специфицирует отступ первого бокса, всплывающего в первый строчный бокс блока. Бокс получает отступ относительно левого (или правого, для вывода справа-налево) края строчного бокса. Пользовательские агенты (ПА) должны отображать этот отступ как пробел.

Значения имеют следующий смысл:

<length>
Отступ имеет фиксированный размер.
<percentage>
Процент от ширины содержащего блока.

Значение 'text-indent' может быть отрицательным, но могут быть ограничения, зависящие от реализации.

Пример(ы):

Отступ размером '3em' для текста.

  P { text-indent: 3em }

16.2 Выравнивание: свойство 'text-align'

'text-align'
Значение: left | right | center | justify | <string> | inherit
Начальное: зависит от ПА и направления письма
Применяется:   к элементам уровня блока
Наследуется: да
Процентное: N/A
Носитель: визуальный

Это свойство описывает, как выравнивается инлайн-содержимое блока.
Значения имеют следующий смысл:

left, right, center, and justify
Выравнивает текст влево, вправо, по центру и по формату.
<string>
Специфицирует строку, в которой ячейки столбца таблицы будут выровнены (см. детали и пример в разделе Горизонтальное выравнивание в столбце). Это значение применяется только к ячейкам таблицы. Если установлено в другом элементе, оно рассматривается как 'left' или 'right', в зависимости от того, каково направление письма: 'direction' - 'ltr' или 'rtl', соответственно.

Блок текста это стопка строчных боксов. В случаях 'left', 'right' и 'center', это свойство специфицирует, как инлайн-боксы в каждом строчном боксе выравниваются относительно левой и правой сторон строчного бокса; выравнивание не производится относительно порта просмотра. В случае с  'justify', ПА может сжать инлайн-боксы в дополнение к уточнению их позиций. (См. также 'letter-spacing' и 'word-spacing'.)

Пример(ы):

Здесь обратите внимание, что, поскольку 'text-align' наследуется, все элементы уровня блока внутри элемента DIV с 'class=center' получат своё инлайн-содержимое сцентрированным.

DIV.center { text-align: center }

Примечание. Фактический алгоритм выравнивания по формату зависит от ПА и языка письма.

Соответствующие пользовательские агенты (ПА) могут интерпретировать значение 'justify' как 'left' или 'right', в зависимости от того, каково по умолчанию направление письма: слева-направо или справа-налево, соответственно.


16.3 Декоративные эффекты

16.3.1 Подчёркивание, надчёркивание, перечёркивание и мигание: свойство 'text-decoration'

'text-decoration'
Значение: none | [ underline || overline || line-through || blink ] | inherit
Начальное: none
Применяется:   ко всем элементам
Наследуется: нет (см. текст)
Процентное: N/A
Носитель: визуальный

Это свойство описывает декоративное оформление текста элемента. Если это свойство специфицировано для элемента уровня блока, оно воздействует на всех потомков инлайн-уровня данного элемента. Если оно специфицировано (или влияет на) элемент инлайн-уровня, оно воздействует на все боксы, генерируемые элементом. Если элемент не имеет содержимого или текста (например, элемент IMG в HTML), ПА обязаны игнорировать данное свойство.

Значения имеют следующий смысл:

none
Не производит декоративное оформление.
underline
Каждая строка текста подчёркнута.
overline
Каждая строка текста имеет над собой линию.
line-through
Каждая строка текста имеет посередине перечёркивающую линию.
blink
Текст мигает. От соответствующих ПА не требуется поддерживать это значение.

Цвет(а), необходимый для декорирования текста, должен быть получен из значения свойства 'color'.

Это свойство не наследуется, но боксы - потомки бокса блока должны быть сформатированы с тем же оформлением (например, все должны быть с подчёркиванием). Цвет оформления должен остаться тем же самым, даже если элементы-потомки имеют другие значения 'color'.

Пример(ы):

В следующем примере для HTML, текстовое содержимое всех элементов A будет подчёркнуто:

A[href] { text-decoration: underline }

16.3.2 Оттенение текста: свойство 'text-shadow'

'text-shadow'
Значение: none | [<color> || <length> <length> <length>? ,]* [<color> || <length> <length> <length>?] | inherit
Начальное: none
Применяется:   ко всем элементам
Наследуется: нет (см. текст)
Процентное: N/A
Носитель: визуальный

Это свойство принимает список разделённых запятыми эффектов оттенения, применяемых к тексту элемента. Эффекты оттенения применяются в том порядке, в котором они специфицированы, и могут, таким образом, перекрываться один другим, но они никогда не перекрывают сам текст. Эффекты оттенения не изменяют размеры бокса, но могут выходить за его пределы. Уровень стэка эффекта оттенения - тот же самый, что и самого элемента.

Каждый эффект оттенения обязан специфицировать смещение оттенения и может по выбору специфицировать радиус рассеяния и цвет тени.

Смещение оттенения специфицируется двумя значениями <length>, указывающими расстояние от текста. Первое значение специфицирует расстояние по горизонтали справа от текста. Отрицательное значение по горизонтали помещает тень слева от текста. Второе значение специфицирует вертикальное расстояние под текстом. Отрицательное значение по вертикали помещает тень сверху от текста.

Радиус рассеяния может быть по выбору специфицирован после смещения оттенения. Радиус рассеяния это значение, обозначающее границы эффекта рассеяния. Точный алгоритм вычисления эффекта рассеяния не специфицирован.

Значение цвета может быть по выбору специфицировано до или после значений length эффекта оттенения. Значение цвета будет использоваться как базис эффекта оттенения. Если цвет не специфицирован, вместо него будет использоваться значение свойства 'color'.

Оттенения текста могут использоваться вместе с псевдоэлементами :first-letter и :first-line.

Пример(ы):

Следующий пример установит тень справа и снизу от текста элемента. Поскольку цвет не специфицирован, тень будет того же цвета, что и сам элемент, и, поскольку радиус рассеяния не специфицирован, тень текста не будет рассеиваться:

H1 { text-shadow: 0.2em 0.2em }

Следующий пример установит тень справа и снизу от текста элемента. Тень будет иметь радиус рассеяния 5px и красный цвет:

H2 { text-shadow: 3px 3px 5px red }

Следующий пример специфицирует список эффектов оттенения. Первая тень будет справа и снизу от текста элемента и будет красного цвета без рассеяния. Вторая тень будет перекрывать первую и будет жёлтая, с рассеянием и размещена влево и ниже текста. Третья тень будет справа и сверху над текстом. Поскольку у неё цвет не специфицирован, будет использоваться значение свойства  'color' элемента:

H2 { text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px }

Пример(ы):

Рассмотри этот пример:

SPAN.glow { 
    background: white; 
    color: white;
    text-shadow: black 0px 0px 5px;
}

Здесь свойства 'background' и 'color' имеют одинаковые значения, и свойство 'text-shadow' используется для создания эффекта "солнечного  затмения":

Solar eclipse effect   [D]

Примечание. Это свойство не определено в CSS1. Некоторые эффекты оттенения (такие как в последнем примере) могут делать текст невидимым в ПА, поддерживающих только CSS1.


16.4 Расстояния между буквами и словами: свойства 'letter-spacing' и 'word-spacing'

'letter-spacing'
Значение: normal | <length> | inherit
Начальное: normal
Применяется:   ко всем элементам
Наследуется: да
Процентное: N/A
Носитель: визуальный

Это свойство специфицирует расстояние между символами текста.
Значения имеют следующий смысл:

normal
Нормальное расстояние для текущего шрифта. Это значение позволяет ПА изменять расстояние между символами при выравнивании и распределении текста.
<length>
Обозначает межсимвольное пространство, дополнительное к значению по умолчанию. Значения могут быть отрицательными, но могут иметься ограничения в конкретных реализациях. ПА могут не иметь возможности после этого возможности изменять межсимвольное пространство для распределения и выравнивания текста.

Алгоритмы межсимвольного пространства независимы от ПА. Межсимвольное пространство может также устанавливаться при выравнивании по формату (см. свойство 'text-align').

Пример(ы):

В этом примере пространство между символами в элементах BLOCKQUOTE увеличено на '0.1em'.

BLOCKQUOTE { letter-spacing: 0.1em }

В следующем примере ПАгенту не разрешено изменять межсимвольное пространство:

BLOCKQUOTE { letter-spacing: 0cm }   /* То же, что '0' */

Если расстояние-результат между двумя символами отличается от расстояния по умолчанию, ПА не должны использовать лигатуры.

Соответствующие ПА могут рассматривать значение свойства 'letter-spacing' как 'normal'.

'word-spacing'
Значение: normal | <length> | inherit
Начальное: normal
Применяется:   ко всем элементам
Наследуется: да
Процентное: N/A
Носитель: визуальный

Это свойство специфицирует расстояние между словами.
Значения имеют следующий смысл:

normal
Нормальное межсловное пространство, как определено текущим шрифтом и/или ПА.
<length>
Это значение указывает межсловное пространство, дополняющее значение по умолчанию. Значения могут быть отрицательными, но могут существовать ограничения, в зависимости от конкретной реализацией.

Алгоритмы межсловного пространства зависят от ПА. Межсловное пространство устанавливается также при выравнивании по формату (см. свойство 'text-align').

Пример(ы):

Здесь пространство между словами в элементах H1 увеличено на '1em'.

H1 { word-spacing: 1em }

Соответствующие ПА могут рассматривать значение свойство 'letter-spacing' как 'normal'.


16.5 Капитализация: свойство 'text-transform'

'text-transform'
Значение: capitalize | uppercase | lowercase | none | inherit
Начальное: none
Применяется:   ко всем элементам
Наследуется: да
Процентное: N/A
Носитель: визуальный

Это свойство управляет эффектами капитализации текста элемента.
Значения имеют следующий смысл:

capitalize
Переводит первый символ каждого слова в верхний регистр.
uppercase
Переводит все символы каждого слова в верхний регистр.
lowercase
Переводит все символы каждого слова в нижний регистр.
none
Нет эффектов капитализации.

Реальная трансформация зависит в каждом конкретном случае от языка письма. См. о способах определения языка элемента в RFC 2070 ([RFC2070]).

Соответствующие ПА могут рассматривать значение 'text-transform' как 'none' для тех символов, которые не входят в репертуар Latin-1, и для элементов на тех языках, в которых трансформация отличается от трансформации, специфицированной таблицей конвертации регистров для ISO 10646 ([ISO10646]).

Пример(ы):

Здесь весь текст в элементе H1 переводится в верхний регистр.

H1 { text-transform: uppercase }

16.6 Пробел: свойство 'white-space'

'white-space'
Значение: normal | pre | nowrap | inherit
Начальное: normal
Применяется:   к элементам уровня блока
Наследуется: да
Процентное: N/A
Носитель: визуальный

Это свойство объявляет, как обрабатываются пробелы внутри элемента.
Значения имеют следующий смысл:

normal
Это значение указывает ПАгентам, что нужно сжимать последовательности пробелов и что нужны разрывы строк для заполнения строк бокса. Дополнительные разрывы строк могут создаваться с помощью ввода "\A" в генерируемом содержимом (например, для элемента BR в HTML).
pre
Это значение предотвращает сжатие ПАгентами последовательностей пробелов. Строки переносятся только в коде документа или при появлениях "\A" в генерируемом содержимом.
nowrap
Это значение сжимает пробелы, как 'normal', но подавляет разрывы строк в тексте, за исключением тех, которые создаются "\A" в генерируемом содержимом (например, для элемента  BR в HTML).

Пример(ы):

Следующие примеры демонстрируют ожидаемое поведение пробелов в элементах PRE и P и атрибута "nowrap" HTML.

PRE        { white-space: pre }
P          { white-space: normal }
TD[nowrap] { white-space: nowrap }

Соответствующие ПА могут игнорировать свойство 'white-space' в авторских и пользовательских таблицах стилей, но обязаны специфицировать для них значение в таблице стилей по умолчанию.

 

предыдущий   следующий   содержание   свойства   индекс

 Электронные Книги по компьютерным программам
На правах рекламы:
Регистрация.
Забыли пароль?
Логин
Пароль
Запомнить меня