16.3. Оформление.

16.3.1. Подчеркивание, надчеркивание, зачеркивание и мерцание: свойство 'text-decoration'.

'text-decoration'
Тип значения:       none | [ underline || overline || line-through || 
                    blink ] | inherit
Начальная величина: нет
Применяется:        ко всем элементам
Наследование:       нет (смотри prose)
Процентная база:    нет
Медиа:              визуальные

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

Значения свойства:

none

Не осуществляет оформления текста.

underline

Каждая строка текста подчеркивается.

overline

Каждая строка текста имеет линию над собой.

line-through

Каждая строка текста имеет линию по середине.

blink

Текст мерцает (чередует между состоянием видимым и невидимым). От согласующихся устройств вывода не требуется поддержки этого значения.

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

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

В следующем примере для HTML текстовое содержание всех элементов А, действующих как гиперссылки, будут подчеркнутыми.

A[href] { text-decoration: underline }

16.3.2. Текстовые тени: свойство 'text-shadow'.

'text-shadow'
Тип значения:       none | [<color> || <length> <length> <length>? ,]* 
                    [<color> || <length> <length> <length>?] | inherit
Начальная величина: нет
Применяется:        ко всем элементам
Наследование:       нет (смотрите prose)
Процентная база:    нет
Медиа:              визуальные

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

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

Теневое смещение определяется двумя значениями <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":

[D]

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

← Назад | Вперед →