Спецификация CSS2 - Евгений Резниченко

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

Значение цвета может быть по выбору специфицировано до или после значений 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' используется для создания эффекта "солнечного затмения":

[D]

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

'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 }

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

'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 }

'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' в авторских и пользовательских таблицах стилей, но обязаны специфицировать для них значение в таблице стилей по умолчанию.

Лекция 17. Таблицы

Таблицы представляют взаимоотношения между данными. Авторы специфицируют эти взаимоотношения на языке документа и их представление в CSS двумя способами - визуально и звуком.

Авторы могут специфицировать визуальное форматирование таблицы как прямоугольной сетки ячеек. Ряды и столбцы ячеек можно организовать в группы рядов и столбцов. Ряды, столбцы, группы рядов, группы столбцов и ячейки могут иметь вокруг себя прорисованные рамки (в CSS2 есть две модели рамок). Авторы могут выровнять данные в ячейках по вертикали и по горизонтали и выровнять данные во всех ячейках ряда или столбца.

Авторы могут также специфицировать звуковое представление таблицы: то, как заголовки и данные будут звучать. На языке документа авторы могут помечать лэйблами ячейки и группы ячеек так, что при звуковом отображении заголовки ячеек будут произноситься перед данными ячеек. Фактически это "сериализует" таблицу: пользователи, прослушивающие таблицу, услышат последовательность заголовков и последующих данных.

Вот простая таблица из трёх рядов и трёх столбцов, написанная в HTML 4.0:

<TABLE> <CAPTION>Это простая таблица 3x3</CAPTION> <TR id="row1"> <TH>Header 1 <TD>Cell 1 <TD>Cell 2 <TR id="row2"> <TH>Header 2 <TD>Cell 3 <TD>Cell 4 <TR id="row3"> <TH>Header 3 <TD>Cell 5 <TD>Cell 6 </TABLE>

Этот код создаёт одну таблицу (элемент TABLE), три ряда (элементы TR), три заголовочных ячейки (элементы TH) и шесть ячеек данных (элементы TD). Обратите внимание, что три столбца в этом примере специфицированы неявно: в таблице столько столбцов, сколько затребовано заголовочными ячейками и ячейками данных.

Следующее правило CSS центрирует текст по горизонтали в заголовочных ячейках и выводит данные шрифтом, имеющим вес bold:

TH { text-align: center; font-weight: bold }