The OpenNET Project / Index page

[ новости /+++ | форум | wiki | теги | ]

Каталог документации / Раздел "Web мастеру, CGI, Perl, PHP, Apache" / Оглавление документа

16 Текст

Содержание

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

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

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

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

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

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

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

Example(s):

В следующем примере задается отступ текста, равный '3em'.

  P { text-indent: 3em }

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

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

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

left, right, center и justify
Выравнивание текста по левому или правому краю, по центру и по обоим краям соответственно.
<строка>
Определяет строку, по которой будет производиться выравнивание ячеек в абзацах таблицы (подробную информацию и примеры можно найти в разделе горизонтальное выравнивание абзаца). Это значение применяется только к ячейкам таблицы. Применительно к другим элементам значение будет трактоваться как '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
Область применения:  все элементы
Наследование:  нет (см. описание)
Процентное значение:  не используется
Устройства:  визуальные

Этим свойством описываются элементы декорирования текста элементов. Если свойство задано для элемента уровня блока, оно влияет на все последующие элементы последовательного уровня. Если свойство задано для элемента последовательного уровня (или влияет на него), оно влияет и на все блоки, генерируемые этим элементом. Если у элемента нет содержимого или текста (например, элемент 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
Область применения:  все элементы
Наследование:  нет (см. описание)
Процентное значение:  не используется
Устройства:  визуальные

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

Для каждого эффекта затенения должно быть указано смещение затенения, а также может указываться радиус размытия и цвет затенения.

Смещение затенения указывается с помощью двух значений <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
Область применения:  все элементы
Наследование:  да
Процентное значение:  не используется
Устройства:  визуальные

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

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

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

Пример(ы):

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

BLOCKQUOTE { letter-spacing: 0.1em }

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

BLOCKQUOTE { letter-spacing: 0cm }   /* Same as '0' */

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

Конформные агенты пользователей могут трактовать значение свойства 'letter-spacing' как 'normal'.

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

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

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

Алгоритм определения расстояния между словами зависит от параметров, указанных агентом пользователя. На расстояние между словами также влияет выравнивание по обоим краям (см. свойство 'text-align').

Пример(ы):

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

H1 { word-spacing: 1em }

Конформные агенты пользователей могут трактовать значение свойства 'word-spacing' как 'normal'.

16.5 Выделение заглавными буквами: свойство 'text-transform'

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

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

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
Область применения:  элементам уровня блока
Наследование:  да
Процентное значение:  не применяется
Устройства:  визуальные

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

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

Example(s):

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

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

Конформные агенты пользователей могут игнорировать в авторских и пользовательских таблицах стилей свойство 'white-space', но должны определить значение этого свойства в основной таблице стилей.




Спонсоры:
Inferno Solutions
A-Real
Hosting by Hoster.ru
Хостинг:

Закладки на сайте
Проследить за страницей
Created 1996-2021 by Maxim Chirkov
Добавить, Поддержать, Вебмастеру