16. Текст |
Содержание
Свойства, представленные в этом разделе, описывают визуальное представление символов, отступов, слов и абзацев текста.
Значение: | <фиксированная величина> | <процент> | наследуется от родителя |
По умолчанию: | 0 |
Область применения | элементы, определяющие блок текста |
Наследуется подчиненными элементами: | да |
Задание в процентах: | относительно ширины всего блока |
Среда представления: | visual |
Определяет отступ (выступ) первой строки в блоке текста (красная строка). Более точно, это свойство определяет сдвиг прямоугольной области (блока линий), содержащей первую строку текста. Сдвиг происходит относительно левого (или правого, при направалении вывода текста справа налево) края блока текста. Агенты пользователя должны отображать сдвиг как пустое пространство.
Может принимать следующие значения:
Значение 'text-indent' может быть отрицательным, но, при этом, имеет ограниченные приделы видимости.
Следующий пример отпределяет текстовый отступ в '3em' для первой строки в абзаце.
P { text-indent: 3em }
Значение: | left | right | center | justify | <строка> | наследуется от родителя |
По умолчанию: | определяется агентом пользователя |
Область применения | элементы, определяющие блок текста |
Наследуется подчиненными элементами: | да |
Задание в процентах: | не поддерживается |
Среда представления: | visual |
Свойство определяет выравнивание текстового блока. Допустимые значения:
Блок текста представлет собой последовательность (стек) прямоугольных областей (блоков линий). Значения 'left', 'right' и 'center' свойства 'text-align', задают способ, по которому выравнивается каждая строка (прямоугольная область, содержащая строку) относительно левой или правой границы всего блока текста. Выравнивание не привязано к видимой области просмотра. При значении 'justify', агент пользователя может растягивать прямоугольную область, образующую строку, в дополнение к корректировке позиции. (См. также 'межбуквенный интервал' и 'расстояние между словами'.)
В этом примере обратите внимание на то, что 'text-align' - свойство, наследуемое подчиненными элементами. Это означает, что все элементы внутри блока, описываемого элементом DIV с классом 'class=center', будут выравнивать свое содержимое по центру.
DIV.center { text-align: center }
Примечание. Фактический используемый алгоритм выравнивания определяется агентом пользователя и принятым в языке направлением вывода текста.
Значение 'justify' может интерпретироваться агентом пользователя как 'left' или 'right', в зависимости от того, каким (слева направо или справо налево) является заданное по умолчанию напрвление вывода текста.
Значение: | none | [ underline || overline || line-through || blink ] | наследуется от родителя |
По умолчанию: | none |
Область применения | все элементы |
Наследуется подчиненными элементами: | нет (см. описание) |
Задание в процентах: | не поддерживается |
Среда представления: | visual |
Свойство задает оформление текстового элемента. Если свойство определено для элемента, описывающего блок текста, то оно воздействует на все элементы, лежащие внутри этого блока (подчиненные элементы). Если свойство определено для подчиненного элемента, оно действует только на область, определенную (сгенерированную) для этого элемента. Если элемент не имеет содержимого или не имеет никакого текстового содержимого (например элемент IMG в HTML), агент пользователя должен игнорировать это свойство.
Может принимать следующие значения:
Цвет оформления наследуется от значения свойства 'color' самого текста.
Свойство не наследуется подчиненными элементами, однако они должны оформляться тем же способом (например, они должны все быть подчеркнутыми). Цвет оформления должен оставаться постоянными, даже в том случае, когда значение 'color' для подчиненных элементов другое.
В следующем примере для HTML текстовое содержимое всех элементов типа A (включая <a name="...">)будет подчеркнуто:
A[href] { text-decoration: underline }
Значение: | none | [<цвет> || <значение> <значение> <значение>? ,]* [<цвет> || <значение> <значение> <значение>?] | наследуется от родителя |
По умолчанию: | none |
Область применения | все элементы |
Наследуется подчиненными элементами: | нет (см. описание) |
Задание в процентах: | не поддерживается |
Среда представления: | visual |
Свойство задает набор теневых эффектов, разделенных запятой, которые нужно применить к тексту элемента. Теневые эффекты применяются в указанном порядке, и, таким образом, накладываются друг на друга, но они не затрагивают сам текст непосредственно. Теневые эффекты не изменяют размер прямоугольной области отображения текста, но могут простираться за ее границы. Теневые эффекты отображаются на том же слое, что и текст, к которому они применяются.
Каждый теневой эффект должен задавать смещение тени и может определять величину размытости (радиус пятна) и цвет тени.
Смещение тени определяется двумя <величинами>, задающими отступ от текста. Первое значение определяет горизонтальное смешение вправо относительно текста. Отрицательное значение для горизонтального смещения располагает тень слева от текста. Второе значение определяет вертикальное смешение вниз относительно текста. Отрицательное значение для вертикального смещения задает тень над текстом.
Радиус теневого пятна может быть произвольно определен после задания смещения тени. Радиус пятна - величина, указывающая размер (границы) теневого пятна. Точный алгоритм отображения теневого пятна не определен.
Цветовое значение может быть определено до или после задания положения и величины тени. Цветовое значение используется как основание для цвета теневого эффекта. Если никакой цвет не задан, то в качестве базового цвета для отображения тени будет использоваться значение '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') используется, чтобы создать создать эффект на подобии "солнечного затмения":
Примечание. Это свойство не определено в CSS1. Некоторые теневые эффекты (наподобии используемого в последнем примере) могут сгенерировать текст, неотображаемый агентами пользователя, поддерживающими толко CSS1.
Значение: | normal | <фиксированная величина> | наследуется от родителя |
По умолчанию: | normal |
Область применения | все элементы |
Наследуется подчиненными элементами: | да |
Задание в процентах: | не поддерживается |
Среда представления: | visual |
Свойство определяет расстояние между текстовыми символами. Может принимать следующие значения:
Алгоритмы для отображение межсимвольного расстояния реализуются агентами пользователя самостоятельно. Межсимвольный интервал также может быть изменен под действием выравнивания текста (смотри свойство 'text-align').
В этом примере, межсимвольный интервал в элементах BLOCKQUOTE увеличен на '0.1em'.
BLOCKQUOTE { letter-spacing: 0.1em }
В следующем примере, агенту пользователя запрещается изменять межсимвольный интервал:
BLOCKQUOTE { letter-spacing: 0cm } /* Тоже что и '0' */
В случае, когда интервал между двумя символами, отличается от заданного по умолчанию значения, агенты пользователя не должны изменять это расстояние (связь).
Агенты пользователя могут изменять величину межбуквенного интервала, если значение свойства 'letter-spacing' определено как 'normal'.
Значение: | normal | <фиксированная величина> | наследуется от родителя |
По умолчанию: | normal |
Область применения | все элементы |
Наследуется подчиненными элементами: | да |
Задание в процентах: | не поддерживается |
Среда представления: | visual |
Свойство определяет расасстояние между словами. Может принимать следующие значения:
Алгоритм отображения расстояний между словами реализуется агентом пользователя. Расстояние между словами так же может меняться под действием директивы выравнивания текста (см. свойство 'text-align').
В этом примере, интервал между словами в элементах типа H1, увеличен на '1em'.
H1 { word-spacing: 1em }
Агенты пользователя могут корректировать величину интервала между словами, если значение свойства 'word-spacing' указано как 'normal'.
Значение: | capitalize | uppercase | lowercase | none | наследуется от родителя |
По умолчанию: | none |
Область применения | все элементы |
Наследуется подчиненными элементами: | да |
Задание в процентах: | не поддерживается |
Среда представления: | visual |
Это свойство управляет преобразованием регистра букв. Может принимать следующие значение:
Фактическое преобразование в каждом случае определяется правилами языка. Способы определения языка элементов смотри в RFC 2070 ([RFC2070]).
Агент пользователя может полагать значение 'text-transform' равным 'none' для символов, не входящих в диапозон кодировки Latin-1 и для языков, у которых подобное преобразование отличается от описываемого таблицами ISO 10646 ([ISO10646]).
В этом примере, весь текст в H1 элементе преобразован к верхнему регистру.
H1 { text-transform: uppercase }
Значение: | normal | pre | nowrap | наследуется от родителя |
По умолчанию: | normal |
Область применения | элементы, определяющие блок текста |
Наследуется подчиненными элементами: | да |
Задание в процентах: | не поддерживается |
Среда представления: | visual |
Свойство определяет допустимое форматирование пустых символов при отображении элемента. Может принимать следующие значения:
Следующие примеры описывают формат представления пустых символов на примере элементовe PRE и P, и атрибута "nowrap" в языке HTML.
PRE { white-space: pre } P { white-space: normal } TD[nowrap] { white-space: nowrap }
Агент пользователя может игнорировать свойство 'white-space' при выдаче информации пользователю, но должен указать его в стилевой спецификации.
Copyright (c) 1997-1999 ВебКлуб Email: webclub@webclub.ru Оригинальная идея Андрей Новиков |