/ / Language: Русский / Genre:computers

Спецификация CSS2

Евгений Резниченко

Курс построен по спецификации, которая определяет язык каскадных таблиц стилей CSS2.Данная спецификация поддерживает позиционирование содержимого, загружаемые шрифты, отображение таблиц, возможности интернационализации, автоматические счётчики и нумерацию и некоторые свойства, относящиеся к пользовательскому интерфейсу.

computersСпецификация CSS2

Курс построен по спецификации, которая определяет язык каскадных таблиц стилей CSS2.

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

ru
ЕвгенийРезниченко18.10.2009intuit_ru_course01-1820.99

Автор:

Название: Спецификация CSS2

Содержание

  Лекция 1. О спецификации CSS2

  Лекция 2. CSS2. Введение

  Лекция 3. Соответствие: Требования и Рекомендации

  Лекция 4. Синтаксис CSS2 и базовые типы данных

  Лекция 5. Селекторы

  Лекция 6. Установка значений свойств. Каскадирование и Наследование

  Лекция 7. Типы носителя

  Лекция 8. Модель бокса

  Лекция 9. Модель визуального форматирования

  Лекция 10. Модель визуального форматирования. Детали

  Лекция 11. Визуальные эффекты

  Лекция 12. Генерируемое содержимое, автоматическая нумерация и списки

  Лекция 13. Страничные носители

  Лекция 14. Цвета и фон

  Лекция 15. Шрифты

  Лекция 16. Текст

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

  Лекция 18. Интерфейс пользователя

  Лекция 19. Звуковые таблицы стилей

Дополнения

  Дополнение. Приложение A. Образец таблицы стиля для HTML 4.0

  Дополнение. Приложение B. Изменения по сравнению с CSS1

  Дополнение. Приложение C. Замечания по реализации и выполнению для шрифтов

  Дополнение. Приложение D. Грамматика CSS2

  Дополнение. Приложение F. Индекс свойств

  Дополнение. Приложение G. Индекс дескрипторов

Лекция 1. О спецификации CSS2

Дается общая информация о спецификации, статусе документа и его структуре.

Эта спецификация определяет Каскадные таблицы Стилей, уровень 2 (CSS2). CSS2 - это язык таблиц стилей, позволяющий авторам и пользователям подключать стили (например, шрифты, пробелы и звуковые сигналы) в структурированные документы (например, документы HTML и приложения XML). CSS2 упрощает создание и обслуживание Web-сайта путём разделения структуры и стиля представления документов.

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

Этот документ был просмотрен Членами W3C и другими заинтересованными сторонами и одобрен Директором как Рекомендации W3C. Это неизменяемый документ, он может использоваться как справочный материал или цитироваться в других документах. Задачей W3C является привлечение внимания к Рекомендациям и этой спецификации и её широкое распространение. Это расширит функциональные возможности Web.

Список текущих Рекомендаций W3C и другую техническую документацию можно найти на: http://www.w3.org/TR.

Публичная дискуссия о возможностях CSS проходит на: www-style@w3.org.

Спецификация CSS2 доступна в следующем формате:

HTML: http://www.w3.org/TR/1998/REC-CSS2-19980512 и в других форматах на W3C.

В случае разночтений между различными формами спецификации, http://www.w3.org/TR/1998/REC-CSS2-19980512 имеет приоритет.

Английская версия этой спецификации является единственным нормативным документом. Однако переводы этого документа можно найти по адресу http://www.w3.org/Style/css2-updates/translations.html.

Список ошибок и опечаток, найденных в этой спецификации (в английской версии), находится в http://www.w3.org/Style/css2-updates/REC-CSS2-19980512-errata.html

Об ошибках, замеченных Вами в этом документе, сообщайте, пожалуйста, по адресам: css2-editors@w3.org и a_pyramidin@yahoo.com (переводчик русской версии).

Внимание!

Официальная нормативная версия этой спецификации возможна только на английском языке и находится по адресу: http://www.w3.org/TR/1998/REC-CSS2-19980512.

Данный перевод НЕ является официальным документом W3C.

Все Авторские Права Принадлежат W3C.

Данный документ может содержать ошибки перевода и опечатки.

Данная спецификация написана в расчёте на читателей двух типов: CSS-авторов и CSS-разработчиков. Мы надеемся, что эта спецификация снабдит авторов средствами, необходимыми для создания эффективных, привлекательных и доступных документов без излишнего углубления в детали реализации CSS. Разработчики к тому же смогут найти всё необходимое для создания соответствующих пользовательских агентов (ПА).

Спецификация начинается общим представлением CSS и постепенно всё более углубляется в технические подробности и специфику. Для быстрого доступа к информации служат общие и специализированные оглавления в начале каждого раздела и индексы - в электронном и печатном виде.

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

Эта спецификация содержит следующие разделы:

Раздел 2: Введение в CSS2

Введение содержит краткий учебник по CSS2 и обсуждение принципов дизайна вне CSS2.

Раздел 3 - 20: Справочник-учебник CSS2

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

Приложения:

Содержат образцы таблиц стилей для HTML 4.0, изменения относительно CSS1, замечания по реализации и выполнению, грамматике CSS2, список нормативных и информативных ссылок и три индекса: Свойства, Дескрипторы и Общий индекс.

[x]. В CSS имена свойств, дескрипторов и псевдоклассов ограничиваются одиночными кавычками.

[x]. Значения в CSS ограничиваются одиночными кавычками.

[x]. Элементы языка документа записываются буквами в верхнем регистре.

[x]. Имена атрибутов языка документа записываются в нижнем регистре и ограничиваются двойными кавычками.

Каждое определение свойства CSS начинается общей ключевой информацией:

'property-name'

Значение: действительные значения & синтаксис

Начальное: начальное значение

Применяется: к соответствующим элементам

Наследуется: если свойство наследуется

Процентное: интерпретация процентных значений

Носитель: к каким группам носителей применяется свойство

Определяет набор действительных значений свойства. Типы значений могут обозначаться по-разному:

1ключевые слова (например, auto, disc и т.д.);

2базовые типы данных, вводимые между символами "<" и ">" (например, <length>, <percentage> и т.д.). В электронной версии документа каждый объект базового типа данных связан со своим определением;

3типы, имеющие те же диапазоны значений, что и свойство, имеющее то же имя (например, <'border-width'>, <'background-attachment'> и т.д.). В данном случае имя типа является именем свойства (заключённым в кавычки) между символами "<" и ">" (например, <'border-width'>). В электронной версии документа каждый объект такого типа не-терминала ссылается на соответствующее определение свойства;

4не-терминалы, не использующие имя свойства. В данном случае имя не-терминала выводится между символами "<" и ">", например, <border-width>. Заметьте разницу между <border-width> и <'border-width'>; последнее определено в терминах предыдущего. Определение не-терминала размещается поблизости от его первого вхождения в данной спецификации. В электронной версии документа каждый объект этого типа ссылается на соответствующее определение значения.

Другие слова в этих определениях являются ключевыми словами, которые обязаны появляться буквально, без кавычек (например, red). Слэш (/) и запятая (,) также обязаны появляться буквально.

Значения должны быть организованы так:

[x]. Несколько соседних слов означают, что все они должны появляться в указанном порядке.

[x]. Вертикальная линия (|) разделяет две или более альтернативы: только одна из них должна быть записана.

[x]. Двойная вертикальная черта (||) разделяет две или более опции: одна или более из них должны быть записаны в любом порядке.

[x]. Скобки ([ ]) служат для группирования.

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

a b | c || d e [ a b ] | [ c || [ d e ]]

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

[x]. Звёздочка (*) - означает, что предыдущий тип, слово или группа появляется ноль или более раз.

[x]. Плюс (+) - означает, что предыдущий тип, слово или группа появляется один или более раз.

[x]. Знак вопроса (?) - означает, что предыдущий тип, слово или группа являются необязательными.

[x]. Пара чисел в фигурных скобках ({A,B}) - означает, что предыдущий тип, слово или группа появляется не менее А и не более В раз.

Следующий пример иллюстрирует различные значения типов:

Value\Значение: N | NW | NE Value: [ <length> | thick | thin ]{1,4} Value: [<family-name> , ]* <family-name> Value: <uri>? <color> [ / <color> ]? Value: <uri> || <color>

Специфицирует начальное значение свойства. Если свойство наследуется, это значение, данное корневому элементу дерева документа. См. в разделе Каскад информацию о взаимодействии между значениями - начальными, унаследованными и специфицированными в таблице стилей.

Перечисляет элементы, к которым применяется данное свойство. Предполагается, что все элементы имеют все свойства, но некоторые свойства не имеют действия на представление элементов определённых типов. Например, 'white-space' действует только на элементы уровня блока (block-level elements).

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

Указывает, как должны интерпретироваться процентные значения, если они появляются в значении свойства. Если появляется "N/A", это значит, что свойство не принимает процентных значений.

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

Некоторые свойства являются сокращёнными свойствами, что означает, что они позволяют авторам специфицировать значения нескольких свойств в одном свойстве.

Например, свойство 'font' является сокращением для одновременной установки 'font-style', 'font-variant', 'font-weight', 'font-size', 'line-height' и 'font-family'.

Если в сокращённом свойстве значения опущены (отсутствуют), каждое "отсутствующее" свойство устанавливается в своё начальное значение (см. раздел Каскад).

Несколько правил стиля в этом примере:

H1 { font-weight: bold; font-size: 12pt; line-height: 14pt; font-family: Helvetica; font-variant: normal; font-style: normal; font-stretch: normal; font-size-adjust: none }

можно записать с помощью одного сокращённого свойства:

H1 { font: bold 12pt/14pt Helvetica }

В этом примере 'font-variant', 'font-stretch', 'font-size-adjust' и 'font-style' получают свои начальные значения.

Все примеры, иллюстрирующие неправильное использование, явно помечены - "НЕПРАВИЛЬНОЕ ИСПОЛЬЗОВАНИЕ".

Все примеры HTML соответствуют Строгому Определению Типа Документа HTML 4.0/Strict DTD, (определённом в [HTML40]), если иное не указано в объявлении типа документа.

Все примечания являются исключительно информативными.

Примеры и примечания промаркированы в коде HTML, чтобы ПА данной и CSS1 спецификаций представляли их особым образом.

Большинство изображений в электронной версии данной спецификации сопровождаются "полными описаниями" того, что изображено. Ссылка на полное описание обозначена "[D]" внизу под изображением.

Изображения и полные описания являются исключительно информативными.

Данная спецификация является продуктом работы W3C Working Group над Cascading Style Sheets (Каскадными Таблицами Стилей) и Formatting Properties (Свойствами Форматирования).

Помимо редакторов данной спецификации, членами Working Group являются:

Brad Chase (Bitstream), Chris Wilson (Microsoft), Daniel Glazman (Electricite de France), Dave Raggett (W3C/HP), Ed Tecot (Microsoft), Jared Sorensen (Novell), Lauren Wood (SoftQuad), Laurie Anna Kaplan (Microsoft), Mike Wexler (Adobe), Murray Maloney (Grif), Powell Smith (IBM), Robert Stevahn (HP), Steve Byrne (JavaSoft), Steven Pemberton (CWI), Thom Phillabaum (Netscape), Douglas Rand (Silicon Graphics), Robert Pernett (Lotus), Dwayne Dicks (SoftQuad) и Sho Kuwamoto (Macromedia).

Мы благодарим их всех.

Свой вклад внесли приглашённые эксперты Working Group: George Kersher, Glenn Rippel (Bitstream), Jeff Veen (HotWired), Markku T. Hakkinen (The Productivity Works), Martin Durst (W3C, до этого - Universitat Zurich), Roy Platon (RAL), Todd Fahrner (Verso), Tim Boland (NIST), Eric Meyer (Case Western Reserve University) и Vincent Quint (W3C).

Раздел Web Fonts разрабатывали Brad Chase (Bitstream), David Meltzer (Microsoft Typography) и Steve Zilles (Adobe).

Следующие сотрудники в разной степени участвовали в разработке разделов, относящихся к шрифтам: Alex Beamon (Apple), Ashok Saxena (Adobe), Ben Bauermeister (HP), Dave Raggett (W3C/HP), David Opstad (Apple), David Goldsmith (Apple), Ed Tecot (Microsoft), Erik van Blokland (LettError), Francois Yergeau (Alis), Gavin Nicol (Inso), Herbert van Zijl (Elsevier), Liam Quin, Misha Wolf (Reuters), Paul Haeberli (SGI) и, наконец, Phil Karlton (Netscape).

Раздел Paged Media (Страничные Носители) в значительной части авторизовали Robert Stevahn (HP) и Stephen Waters (Microsoft).

Robert Stevahn (HP), Scott Furman (Netscape) и Scott Isaacs (Microsoft) являлись ключевыми сотрудниками при разработке CSS Positioning (Позиционирование CSS).

Mike Wexler (Adobe) был редактором рабочих проектов, описавшим многие из новых возможностей CSS2.

T.V. Raman (Adobe) сделал основные разработки, относящиеся к Aural Cascading Style Sheets (ACSS)/Звуковым Таблицам Стилей/ и к концепции звукового представления, на базе своей работы в AsTeR (Audio System For Technical Readings). Он участвовал в разработке начального проекта спецификации ACSS, которая содержится в данной спецификации. Значения звуковых свойств для примера таблицы стилей HTML 4.0 разработаны им же; в настоящее время он использует всё это в каждодневной работе над своим audio desktop, в соединении с Emacspeak и браузером Emacs W3 (авторизованными William'ом Perry, разработавшим также звуковые расширения, ожидаемые W3).

Todd Fahrner (Verso) исследовал современные и предшествующие браузеры для разработки образцов таблиц стилей в Приложении.

Благодарим Jan Karrman, автора html2ps, за большую помощь, оказанную при создании PostScript версии спецификации.

Преодолевая электронные и физические проблемы, следующие люди сотрудничали в разработке CSS2:

Alan Borning, Robert Cailliau, Liz Castro, James Clark, Dan Connolly, Donna Converse, Daniel Dardailler, Al Gilman, Daniel Greene, Scott Isaacs, Geir Ivarsoy, Vincent Mallet, Kim Marriott, Brian Michalowski, Lou Montulli, Henrik Frystyk Nielsen, Jacob Nielsen, Eva von Pepel, William Perry, David Siegel, Peter Stuckey и Jason White.

Дискуссия на www-style@w3.org обсуждала многие ключевые вопросы CSS. Особо мы хотели бы поблагодарить участников:

Bjorn Backlund, Todd Fahrner, Lars Marius Garshol, Sue Jordan, Ian Hickson, Susan Lesch, Andrew Marshall, MegaZone, Eric Meyer, Russell O'Connor, David Perrell, Liam Quinn, Jon Seymour, Neil St. Laurent, Taylor, Brian Wilson и Chris Wilson.

Особая благодарность Web Accessibility Initiative Protocols и Formats Technical Review Working Group (WAI PF) за помощь в повышении доступности CSS2.

Благодарим Philippe Le Hegaret, чей проверщик CSS помогал выверить корректность примеров и правописания.

Особая благодарность Arnaud Le Hors, чья инженерная работа сделала этот документ рабочим.

Adam Costello улучшил эту спецификацию, выполнив детальную ревизию.

Наконец, благодарим Tim Berners-Lee, без которого всё это вообще было бы невозможно.

Copyright c 1997 World Wide Web Consortium, (Massachusetts Institute of Technology, Institut National de Recherche en Informatique et en Automatique, Keio University). Все Права Зарезервированы.

Документы на сайте W3C предоставляются для копирования на основе следующей лицензии.

Получая, используя и/или копируя этот документ или документ W3C, на который в данном документе имеется ссылка, Вы согласны с тем, что Вы прочитали, поняли и согласны со следующими положениями и условиями:

Разрешение на использование, копирование и распространение содержания этого документа или документа W3C, на который в данном документе имеется ссылка, на любых носителях для любых целей и без оплаты или арендной платы даётся с условием, что Вы включите нижеследующую информацию во ВСЕ копии документа или его части, которые Вы используете:

1Ссылка URI на оригинальный документ W3C.

2Уведомление о предшествующих авторских правах оригинального автора, если они отсутствуют, в форме: "Copyright c World Wide Web Consortium, (Massachusetts Institute of Technology, Institut National de Recherche en Informatique et en Automatique, Keio University). Все Права Зарезервированы."

3Если они указаны, СТАТУС документа W3C.

Если место позволяет, необходимо включать полный текст этого УВЕДОМЛЕНИЯ.

Дополнительно должны быть приписаны заверения для владельцев авторских прав на любое программное обеспечение, документы или другие объекты или продукты, которые Вы создали в соответствии с выполнением содержимого данного документа или любой его части.

Вы не имеете права, в соответствии с данной лицензией, создавать модификации или выдержки.

ЭТОТ ДОКУМЕНТ ДАЁТСЯ "AS IS\КАК ЕСТЬ" И ВЛАДЕЛЬЦЫ АВТОРСКИХ ПРАВ НЕ ДАЮТ НИКАКИХ УКАЗАНИЙ ИЛИ ГАРАНТИЙ, ЯВНЫХ ИЛИ КОСВЕННЫХ, ВКЛЮЧАЯ, НО НЕ ОГРАНИЧИВАЯ, ГАРАНТИИ РЕАЛИЗУЕМОСТИ, ПРИГОДНОСТИ ДЛЯ КОНКРЕТНЫХ ЦЕЛЕЙ, НЕНАРУШЕНИЕ ЗАКОНА ИЛИ ИМЕНОВАНИЕ, - ЧТО СОДЕРЖИМОЕ ДАННОГО ДОКУМЕНТА ПОДХОДИТ ДЛЯ ЛЮБЫХ ЦЕЛЕЙ, НИ ЧТО ВЫПОЛНЕНИЕ ТАКОГО СОДЕРЖИМОГО НЕ ВЫЗОВЕТ НАРУШЕНИЯ ПАТЕНТОВ КАКОЙ-ЛИБО ТРЕТЬЕЙ СТОРОНЫ, АВТОРСКИХ ПРАВ, ТОРГОВЫХ МАРОК И ДРУГИХ ПРАВ.

ВЛАДЕЛЬЦЫ АВТОРСКИХ ПРАВ НЕ НЕСУТ ОТВЕТСТВЕННОСТИ ЗА ЛЮБОЙ ПРЯМОЙ, КОСВЕННЫЙ, СПЕЦИАЛЬНЫЙ ИЛИ ВОЗМОЖНЫЙ ВРЕД, НАНЕСЁННЫЙ ИЗ-ЗА КАКОГО-ЛИБО ИСПОЛЬЗОВАНИЯ ДАННОГО ДОКУМЕНТА ИЛИ ВЫПОЛНЕНИЯ ИЛИ РЕАЛИЗАЦИИ ЕГО СОДЕРЖИМОГО.

Имена и торговые марки владельцев авторских прав НЕ могут использоваться для публичных целей и рекламы данного документа или его содержимого без специального письменного разрешения. Наименование авторских прав в данном документе всегда остаётся за их владельцами.

Лекция 2. CSS2. Введение

Даются начальные сведения о CSS, описываются модели процесса и адресации, а также принципы дизайна.

В этом пособии мы покажем, как можно быстро создать простые таблицы стилей.

Для использования этого пособия необходимо немного знать HTML (см. [HTML40]) и некоторые базовые термины настольных публикаций.

Вот небольшой документ HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Bach's home page</TITLE> </HEAD> <BODY> <H1>Bach's home page</H1> <P>Johann Sebastian Bach was a prolific composer. </BODY> </HTML>

Чтобы установить голубой цвет текста элемента H1, можно написать такое правило CSS:

H1 { color: blue }

Правило CSS состоит из двух главных частей: селектора ('H1') и объявления ('color: blue'). Объявление имеет две части: свойство ('color') и значение ('blue'). Поскольку в предыдущем примере делается попытка использовать только одно из свойств, необходимое для отображения документа HTML, он может быть квалифицирован как таблица стилей. В комбинации с другими таблицами стилей (возможность комбинировать таблицы стилей является одним из фундаментальных свойств CSS) оно (свойство) определит конечный вид документа.

Спецификация HTML 4.0 определяет, как правила таблиц стилей могут быть специфицированы для документов HTML: или внутри документа HTML, или в таблицах стилей. Чтобы поместить в документ таблицу стилей, используйте элемент STYLE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Bach's home page</TITLE> <STYLE type="text/css"> H1 { color: blue } </STYLE> </HEAD> <BODY> <H1>Bach's home page</H1> <P>Johann Sebastian Bach was a prolific composer. </BODY> </HTML>

Для максимальной гибкости мы рекомендуем, чтобы авторы специфицировали внешние таблицы стилей; они могут быть изменены без модификации документа-источника HTML, а также могут раздельно использоваться несколькими документами. Чтобы сослаться на внешнюю таблицу стилей, Вы можете использовать элемент LINK:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Bach's home page</TITLE> <LINK rel="stylesheet" href="bach.css" type="text/css"> </HEAD> <BODY> <H1>Bach's home page</H1> <P>Johann Sebastian Bach was a prolific composer. </BODY> </HTML>

Элемент LINK специфицирует:

[x]. тип гиперссылки: "stylesheet";

[x]. размещение таблицы стилей: в атрибуте "href";

[x]. тип таблицы стилей, на которую ссылаются: "text/css".

Чтобы продемонстрировать тесную взаимосвязь между таблицей стилей и структурной разметкой, мы продолжим использовать элемент STYLE в этом пособии. Давайте добавим больше цветов:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Bach's home page</TITLE> <STYLE type="text/css"> BODY { color: red } H1 { color: blue } </STYLE> </HEAD> <BODY> <H1>Bach's home page</H1> <P>Johann Sebastian Bach was a prolific composer. </BODY> </HTML>

Таблица стилей теперь содержит два правила: первое устанавливает цвет элемента BODY в 'red', а второе - цвет элемента H1 в 'blue'. Поскольку для элемента P не специфицирован цвет, он будет наследовать цвет от своего элемента-предка, а именно - от BODY. Элемент H1 является также дочерним элементом элемента BODY, но второе правило переопределяет наследуемое значение. В CSS часто возникают такие конфликты между различными значениями, и данная спецификация описывает, как их разрешить.

В CSS2 имеется более 100 различных свойств, в том числе - 'color'. Рассмотрим некоторые другие:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Bach's home page</TITLE> <STYLE type="text/css"> BODY { font-family: "Gill Sans", sans-serif; font-size: 12pt; margin: 3em; } </STYLE> </HEAD> <BODY> <H1>Bach's home page</H1> <P>Johann Sebastian Bach was a prolific composer. </BODY> </HTML>

Первое, что нужно отметить, это несколько объявлений, сгруппированных внутри блока, заключённого в фигурные скобки ({...}) и разделённых знаком точка с запятой, хотя последнее объявление может также заканчиваться точкой с запятой.

Первое объявление элемента BODY устанавливает семейство шрифтов "Gill Sans". Если этот шрифт недоступен, ПА (часто называемый "браузер") будет использовать семейство шрифтов 'sans-serif', которое является одним из пяти семейств шрифтов, известных всем ПА. Дочерние элементы элемента BODY унаследуют значение свойства 'font-family'.

Второе объявление устанавливает размер шрифта элемента BODY в 12 пунктов. Единица измерения "пункт" используется обычно в типографской печати для обозначения размеров шрифта и других размеров. Это пример абсолютных единиц измерения, которые не определяются относительно окружения.

Третье объявление использует относительные единицы измерения, которые определяются относительно своего окружения. Единица "em" относится к размеру шрифта элемента. В нашем случае поля вокруг элемента BODY шире размера шрифта в три раза.

CSS может использоваться с любым структурированным форматом документа, например, с приложениями eXtensible Markup Language [XML10]. На самом деле XML намного больше зависит от таблиц стилей, чем HTML, поскольку авторы могут создавать свои собственные элементы, которые не известны ПА и не могут ими выводиться.

Вот простой фрагмент XML:

<ARTICLE> <HEADLINE>Fredrick the Great meets Bach</HEADLINE> <AUTHOR>Johann Nikolaus Forkel</AUTHOR> <PARA> One evening, just as he was getting his <INSTRUMENT>flute</INSTRUMENT> ready and his musicians were assembled, an officer brought him a list of the strangers who had arrived. </PARA> </ARTICLE>

Чтобы вывести данный фрагмент в виде документа, мы обязаны сначала объявить, какие элементы являются элементами инлайн-уровня (т.е. не вызывают разрывов строк) и какие - уровня блока (т.е. вызывают разрывы строк).

INSTRUMENT { display: inline } ARTICLE, HEADLINE, AUTHOR, PARA { display: block }

Первое правило объявляет INSTRUMENT как инлайн, а второе правило с его списком разделённых запятыми селекторов объявляет все другие элементы как элементы уровня блока.

Одним из вариантов связи таблицы стилей с документом XML является использование инструкций процесса:

<?xml-stylesheet type="text/css" href="bach.css"?> <ARTICLE> <HEADLINE>Fredrick the Great meets Bach</HEADLINE> <AUTHOR>Johann Nikolaus Forkel</AUTHOR> <PARA> One evening, just as he was getting his <INSTRUMENT>flute</INSTRUMENT> ready and his musicians were assembled, an officer brought him a list of the strangers who had arrived. </PARA> </ARTICLE>

Визуальный ПА может отформатировать вышеприведённый пример так:

[D]

Обратите внимание, что слово "flute" остаётся внутри параграфа, поскольку это содержимое инлайн-элемента INSTRUMENT.

Тем не менее, текст ещё не выглядит так, как Вы могли бы ожидать. Например, шрифт заголовка должен быть крупнее, чем остальной текст, и Вам может понадобиться вывести имя автора курсивом:

INSTRUMENT { display: inline } ARTICLE, HEADLINE, AUTHOR, PARA { display: block } HEADLINE { font-size: 1.3em } AUTHOR { font-style: italic } ARTICLE, HEADLINE, AUTHOR, PARA { margin: 0.5em }

Визуальный ПА может сформатировать этот пример так:

[D]

Добавление других правил в таблицу стилей позволить Вам сделать представление документа ещё более интересным.

Этот раздел представляет одну из возможных моделей того, как работают ПА, поддерживающие CSS. Это лишь концептуальная модель; конкретные реализации могут варьироваться.

ПА в этой модели обрабатывает источник, выполняя следующие шаги:

1Разбирает документ-источник и создаёт дерево документа.

2Идентифицирует тип носителя.

3Запрашивает все таблицы стилей, ассоциированные с документом, которые специфицированы для целевого типа носителя.

4

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

Частично расчёт значений зависит от алгоритма форматирования, соответствующего целевому типу носителя. Например, если целевой носитель - это экран, то ПА применяют модель визуального форматирования. Если целевой носитель - это страница для печати, то ПА применяют страничную модель. Если целевой носитель - это устройство звукового вывода (например, речевой синтезатор), то ПА применяют модель звукового представления.

5

На базе размеченного дерева документа генерирует структуру форматирования. Часто структура форматирования напоминает дерево документа, но может также и слегка отличаться, особенно если авторы используют псевдоэлементы и генерируемое содержимое. Во-первых, структура форматирования вообще не должна иметь "очертания дерева" - природа структуры зависит от реализации. Во-вторых, структура форматирования может содержать информации больше или меньше, чем дерево документа. Например, если элемент дерева документа имеет значение 'none' для свойства 'display', то этот элемент не будет ничего генерировать в структуре форматирования. Элемент list, с другой стороны, может генерировать больше информации в структуре форматирования: содержимое элемента list и стилевую информацию (например, изображение для маркёра).

Обратите внимание, что ПА CSS не изменяет дерево документа на этом этапе. И особенно, что содержимое, генерируемое в связи с таблицой стилей, не возвращается процессору языка документа (например, для повторного разбора).

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

Шаг 1 находится вне пределов действия данной спецификации (см., например, [DOM]).

Шаги 2-5 адресуются основным объёмом данной спецификации.

Шаг 6 находится вне пределов действия данной спецификации.

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

Селекторы и свойства CSS2 позволяют обращаться из таблиц стилей к следующим частям документа или ПАгента:

[x]. Элементам дерева документа и определённым их взаимоотношениям (см. раздел селекторы).

[x]. Атрибутам элементов дерева документа и значениям этих атрибутов (см. раздел селекторы атрибутов).

[x]. Некоторым частям содержимого элемента (см. псевдоэлементы :first-line и :first-letter.

[x]. Элементам дерева документа, находящимся в определённом состоянии (см. раздел псевдоклассы).

[x]. Некоторым аспектам канвы при выводе документа.

[x]. Некоторой системной информации (см. раздел интерфейс пользователя).

CSS2, а до них - CSS1, базируются на наборе принципов дизайна:

[x]. Совместимость вперёд и обратная. ПА CSS2 понимают таблицы стилей CSS1. ПА CSS1 могут читать таблицы стилей CSS2 и отбрасывать те части, которые они не понимают. Также ПА, не поддерживающие CSS, могут отображать документы со стилями. Конечно, стилистические приёмы, возможные в CSS, не будут выводиться, но всё содержимое будет представлено.

[x]. Дополнение структурированных документов. Таблицы стилей дополняют структурированные документы (например, приложения HTML и XML), предоставляя стилистическую информацию для размеченного текста. Должна иметься возможность легко изменять таблицы стилей без или с минимальным влиянием на разметку.

[x]. Независимость от изготовителя, платформы и устройства. Таблицы стилей делают возможным создание документов, не зависящих от изготовителя, платформы и устройства. Таблицы стилей сами по себе также не зависят от изготовителя, платформы и устройства, но CSS2 позволяют Вам назначить таблицу стилей группе устройств (например, принтеров).

[x]. Удобство обслуживания. Ссылаясь из документа на таблицы стилей, web-мастера могут упростить обслуживание сайта и добиться целостного вида и содержания всего сайта. Например, если изменяется цвет фона сайта организации, нужно будет изменить лишь один файл.

[x]. Простота. CSS2 сложнее, чем CSS1, но остаётся простым языком стилей, доступным для чтения и понимания человеком. Свойства CSS не зависят одно от другого, чтобы иметь в будущем возможности для расширения, и поэтому обычно имеется лишь один способ для достижения определённого эффекта.

[x]. Скорость работы сети. CSS предоставляют компактные способы представления содержимого. По сравнению с файлами изображений или аудиофайлами, которые часто используются авторами для получения определённых эффектов представления, таблицы стилей чаще всего уменьшают объёмы содержимого. Требуется также меньше сетевых соединений, что увеличивает пропускную способность сети.

[x]. Гибкость. CSS может применяться в содержимом разными способами. Ключевым является возможность каскадирования стилевой информации, специфицированной в таблице стилей по умолчанию(в ПА), пользовательских таблицах стилей, связанных таблицах стилей, шапке документа и атрибутах элементов, формирующих тело документа.

[x]. Богатство возможностей. Предоставление авторам большого набора эффектов отображения увеличивает разнообразие Web. Дизайнерам была необходима функциональность, которая уже использовалась в настольных приложениях и слайд-презентациях. Некоторые из требуемых эффектов конфликтуют с независимостью от конкретных устройств, но CSS2 явился дальнейшим шагом на пути удовлетворения запросов дизайнеров.

[x]. Связи с другими языками. Набор свойств CSS, описанный в этой спецификации, образует последовательную модель форматирования для визуального и звукового представления. Эта модель форматирования может быть доступна из языка CSS, но возможны также связи с другими языками. Например, программа JavaScript может динамически изменить значение свойства 'color' определённого элемента.

[x]. Доступность. Некоторые возможности CSS сделают Web более доступным для пользователей с физическими проблемами:

[x]. Свойства для управления выводом шрифта позволяют авторам исключить недоступность растрированных текстовых изображений.

[x]. Свойства позиционирования позволяют авторам исключить трюки с разметкой (например, невидимые изображения) для целей изменения вывода.

[x]. Семантика правил !important означает, что пользователи с особыми требованиями к представлению могут переопределять установки авторских таблиц стилей.

[x]. Новое значение 'inherit' для всех свойств улучшает каскадирование и даёт возможность более лёгкой и точной настройки стиля.

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

[x]. Звуковые свойства дают возможность управлять речевым и аудиовыводом.

[x]. Селекторы атрибутов, функция 'attr()' function и свойство 'content' дают возможность доступа к альтернативному содержимому.

[x]. Счётчики и нумерация разделов/параграфов может улучшить навигацию по документам и сохранить пространство отступов (важно для брайль-устройств). Свойства 'word-spacing' и 'text-indent' исключают надобность в излишнем свободном пространстве в документе.

Примечание. За дополнительной информацией о разработке доступных документов с использованием CSS и HTML обратитесь, пожалуйста, на [WAI-PAGEAUTH].

Лекция 3. Соответствие: Требования и Рекомендации

Описываются базовые понятия формальной спецификации CSS2.

В этом разделе мы начинаем формальную спецификацию CSS2 с соглашения между авторами, пользователями и исполнителями.

Ключевые слова "ОБЯЗАН", "НЕ ОБЯЗАН", "НЕОБХОДИМ", "БУДЕТ", "НЕ БУДЕТ", "ДОЛЖЕН", "НЕ ДОЛЖЕН", "МОЖЕТ", "РЕКОМЕНДУЕТСЯ" И "НЕОБЯЗАТЕЛЕН" в этом документе интерпретируются так, как описано в [RFC2119].

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

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

Таблица стилей

Набор операторов, специфицирующих представление документа.

Таблицы стилей могут иметь три различных источника: автор, пользователь и ПА. Взаимодействие этих источников описано в разделе Каскадирование и наследование.

Действующие таблицы стилей

Статус таблицы стилей зависит от уровня CSS, используемого в таблице стилей. Все действующие таблицы стилей CSS1 являются действующими и в CSS2. Однако некоторые изменения по сравнению с CSS1 указывают, что некоторые таблицы стилей CSS1 будут иметь несколько другую семантику в CSS2.

Действующая таблица стилей CSS2 обязана быть написана в соответствии с грамматикой CSS2. Кроме того, она обязана содержать только at-правила, названия свойств и значения свойств, определённые в данной спецификации. Неверное at-правило, название свойства или значение свойства - это то, которое имеет неверное значение.

Документ-источник

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

Язык документа

Язык кодировки документа-источника (например, HTML или XML).

Элемент

(Термин SGML, см. [ISO8879].) Первичные синтаксические конструкции языка документа. Большинство правил таблиц стилей CSS используют имена элементов (такие как "P", "TABLE" и "OL" в HTML) для спецификации информации для их представления.

Замещаемый элемент

Элемент, для которого форматировщик CSS знает только внутренние размеры. В HTML элементы IMG, INPUT, TEXTAREA, SELECT и OBJECT можно привести в качестве примеров таких элементов. Например, содержимое элемента IMG часто замещается изображением, на которое указывает атрибут "src". CSS не определяет, как находить внутренние размеры.

Внутренние размеры

Ширина и высота, определённые самим элементом, а не его окружением. В CSS2 принято, что все замещаемые элементы - и только замещаемые элементы - появляются с внутренними размерами.

Атрибут

Значение, ассоциированное с элементом, состоящее из названия и ассоциированного значения.

Содержимое

Содержимое, ассоциированное с элементом в документе-источнике; не все элементы имеют содержимое, и в этом случае они называются пустыми. Содержимое элемента может быть текстом и может включать несколько субэлементов, тогда такой элемент называется родительским (элементом-предком)для субэлементов.

Выводимое содержимое

Содержимое элемента после вывода, которое представляется в соответствии с подключённой таблицей стилей. Выводимое содержимое замещаемых элементов поступает извне документа-источника. Выводимое содержимое может быть также альтернативным текстом для данного элемента (например, значением атрибута "alt" в HTML) и может включать объекты, вставленные, явно или неявно, таблицей стилей: маркировка или нумерация списков и т.п.

Дерево документа

Дерево элементов, кодированных в документе-источнике. Каждый элемент в этом дереве имеет только одного предка, за исключением элемента root, который предков не имеет.

Дочерний элемент

Элемент А называется дочерним элементом элемента В, если только В является родителем А.

Потомок

Элемент А называется потомком элемента В, если (1) А является дочерним по отношению к В, или (2) если А является дочерним относительно элемента С, который является потомком В.

Предок (родительский элемент)

Элемент А называется предком элемента В, если, и только если, В является потомком А.

Родственник

Элемент А называется родственником элемента В, если, и только если, В и А имеют одного общего предка.

Элемент А является предшествующим родственником, если появляется перед В в дереве документа.

Элемент В является последующим родственником, если появляется после А в дереве документа.

Предшествующий элемент

Элемент А называется предшествующим элементу В, если, и только если, (1) А является предком В или (2) А является предшествующим родственником В.

Последующий элемент

Элемент А называется последующим элементом для В, если, и только если, В является предшествующим элементом для А.

Автор

Тот, кто пишет документы и ассоциированные таблицы стилей.

Авторская утилита генерирует документы и ассоциированные таблицы стилей.

Пользователь

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

Пользовательский агент (ПА)

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

Это пример документа-источника, кодированного в HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <TITLE>My home page</TITLE> <BODY> <H1>My home page</H1> <P>Welcome to my home page! Let me tell you about my favorite composers: <UL> <LI> Elvis Costello <LI> Johannes Brahms <LI> Georges Brassens </UL> </BODY> </HTML>

Это дерево данного документа:

[D]

В соответствии с определением HTML, элементы HEAD будут вставлены во время разбора и станут частью дерева документа, даже если тэги HEAD отсутствовали в документе-источнике. Таким же образом, разборщик "знает", где заканчиваются элементы P и LI, даже если они не имеют тэгов </P> и </LI> в источнике.

Этот раздел определяет соответствие только со спецификацией CSS2. В будущем могут появиться другие уровни CSS, что может потребовать в будущем от ПА выполнения другого набора свойств, чтобы соответствовать.

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

1Он обязан поддерживать один или более типов носителя CSS2.

2Для каждого документа-источника он обязан запросить все ассоциированные таблицы стилей, подходящие для поддерживаемых типов носителя. Если он не может запросить все ассоциированные таблицы стилей (к примеру, из-за ошибок в сети), он обязан вывести документ с использованием тех таблиц, которые он может запросить.

3Он обязан разобрать таблицы стилей в соответствии с данной спецификацией. В частности, он обязан распознавать все at-правила, блоки, объявления и селекторы (см. грамматику CSS2). Если ПА обнаруживает свойство, применимое к поддерживаемому типу носителя, то ПА обязан разобрать значение в соответствии с определением свойства. Это значит, что ПА обязан принять все верные значения и игнорировать объявления с неверными значениями. ПА обязаны игнорировать правила, применяемые к неподдерживаемым типам носителя.

4В каждом элементе дерева документа ПА обязан назначить значение для каждого применимого свойства в соответствии с определением свойства и с правилами каскадирования и наследования.

5Если документ-источник поступает с альтернативными таблицами стилей (как с ключевым словом "alternate" в HTML 4.0 [HTML40]), ПА обязан предоставить пользователю возможность выбрать одну из нескольких таблиц стилей и применить её.

Не каждый ПА обязан следовать всем пунктам, однако:

[x]. ПА, который вводит таблицы стилей, обязан следовать пунктам 1 - 3.

[x]. Авторская утилита должна только производить действующие таблицы стилей

[x]. ПА, который выводит документ с ассоциированными таблицами стилей, обязан следовать пунктам 1 - 5 и представлять документ в соответствии со специфическими требованиями носителя, установленными далее в этой спецификации. Значения при необходимости могут быть приближены ПАгентом.

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

Данная спецификация рекомендует, чтобы ПА позволял пользователю специфицировать пользовательские таблицы стилей.

В общем, данный документ не специфицирует для ПА поведение при обработке ошибок (например, как ПА ведут себя, если не могут найти ресурс, указанный в URI).

Однако ПА обязаны соблюдать правила обработки ошибок разбора.

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

Таблицы стилей CSS, находящиеся во внешнем файле, пересылаются по Internet как последовательность байтов, сопровождаемая информацией о кодировании (см. [HTML40] , гл. 5). Структура переноса, называемая сущность сообщения, определена в RFC 2045 и RFC 2068 (см. [RFC2045] и [RFC2068] ).

Сущность сообщения вместе с типом содержимого "text/css" представляет независимый документ CSS. Тип содержимого "text/css" был зарегистрирован в RFC 2138 ( [RFC2318] ).

Лекция 4. Синтаксис CSS2 и базовые типы данных

В этом разделе описывается грамматика и правила разбора, общие для любой версии CSS.

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

Эти описания являются нормативными. Они также дополняются нормативными грамматическими правилами в Приложении D.

Все уровни CSS - уровень 1, уровень 2 и любые будущие уровни - используют одно ядро синтаксиса. Это позволяет пользовательским агентам (ПА) разбирать (хотя и не полностью понимать) таблицы стилей, написанные в уровнях CSS, ещё не существовавших в момент создания ПА. Дизайнеры могут использовать это свойство для создания таблиц стилей, работающих со старыми ПА, применяя также возможности позднейших уровней CSS.

На лексическом уровне таблицы стилей CSS состоят из последовательности лексем (грамматических единиц). Список лексем CSS2 приведён ниже. Определения используют общепринятые выражения в стиле Lex. Восьмеричные коды относятся к ISO 10646 ([ISO10646]). Как и в Lex, в случае нескольких одновременных совпадений, самое длинное совпадение определяет лексему.

ЛексемаОпределение
IDENT{ident}
ATKEYWORD@{ident}
STRING{string}
HASH#{name}
NUMBER{num}
PERCENTAGE{num}%
DIMENSION{num}{ident}
URIurl\({w}{string}{w}\) | url\({w}([!#$%&*-~]|{nonascii}|{escape})*{w}\)
UNICODE-RANGEU\+[0-9A-F?]{1,6}(-[0-9A-F]{1,6})?
CDO<!--
CDC-->
;;
{\{
}\}
(\(
)\)
[\[
]\]
S[ \t\r\n\f]+
COMMENT\/\*[^*]*\*+([^/][^*]*\*+)*\/
FUNCTION{ident}\(
INCLUDES~=
DASHMATCH|=
DELIMлюбой другой символ, не совпавший с вышеприведёнными правилами

Вышеприведённые макросы в фигурных скобках ({}) определены так:

МакросОпределение
ident{nmstart}{nmchar}*
name{nmchar}+
nmstart[a-zA-Z]|{nonascii}|{escape}
nonascii[^\0-\177]
unicode\\[0-9a-f]{1,6}[ \n\r\t\f]?
escape{unicode}|\\[ -~\200-\4177777]
nmchar[a-z0-9-]|{nonascii}|{escape}
num[0-9]+|[0-9]*\.[0-9]+
string{string1}|{string2}
string1\"([\t !#$%&(-~]|\\{nl}|\'|{nonascii}|{escape})*\"
string2\'([\t !#$%&(-~]|\\{nl}|\"|{nonascii}|{escape})*\'
nl\n|\r\n|\r|\f
w[ \t\r\n\f]*

Ниже дан синтаксис ядра CSS. В последующих разделах описывается, как этот синтаксис использовать. Приложение D описывает более ограниченный набор грамматических правил исключительно для уровня 2 языка CSS.

stylesheet : [ CDO | CDC | S | statement ]*; statement : ruleset | at-rule; at-rule : ATKEYWORD S* any* [ block | ';' S* ]; block : '{' S* [ any | block | ATKEYWORD S* | ';' ]* '}' S*; ruleset : selector? '{' S* declaration? [ ';' S* declaration? ]* '}' S*; selector : any+; declaration : property ':' S* value; property : IDENT S*; value : [ any | block | ATKEYWORD S* ]+; any : [ IDENT | NUMBER | PERCENTAGE | DIMENSION | STRING | DELIM | URI | HASH | UNICODE-RANGE | INCLUDES | FUNCTION | DASHMATCH | '(' any* ')' | '[' any* ']' ] S*;

Лексемы КОММЕНТАРИЕВ в грамматике отсутствуют (для сохранения читабельности), но некоторое количество этих лексем может появляться где-либо среди других лексем.

Лексема S в вышеприведённой грамматике стоит вместо пробела. Только символы "space" (Unicode code 32), "tab" (9), "line feed" (10), "carriage return" (13) и "form feed" (12) могут служить пробелами. Другие "пробелоподобные" символы, такие как "em-space" (8195) и "ideographic space" (12288), никогда не могут быть пробелами.

Ключевые слова имеют форму идентификаторов. Ключевые слова обязаны не размещаться между кавычками ("..." или '...'). Таким образом,

red

это ключевое слово, а

"red"

- нет (это строка). Другие неверные примеры:

width: "auto"; border: "none"; font-family: "serif"; background: "red";

Следующие правила всегда соблюдаются:

[x]. Все таблицы стилей CSS нечувствительны к регистру, за исключением тех частей, которые не контролируются CSS. Например, чувствительность к регистру значений атрибутов "id" и "class", имён шрифтов и URI в HTML находится вне пределов действия этой спецификации. Особо отметьте, что имена элементов нечувствительны к регистру в HTML, но чувствительны в XML.

[x].

В CSS2 идентификаторы (включая имена элементов, классы и ID в селекторах) могут содержать только символы [A-Za-z0-9] и символы ISO 10646 от 161 и выше и дефис (-); они не могут начинаться с дефиса или цифры. Они могут также содержать escape-последовательности и любые символы и цифровые коды ISO 10646 (см. далее). Например, идентификатор "B&W?" можно записать как "B\&W\?" или "B\26 W\3F".

Заметьте, что Unicode это покодовый эквивалент ISO 10646 (см. [UNICODE] и [ISO10646]).

[x].

В CSS2 символ обратного слэша (\) обозначает три типа символов - escape-последовательностей.

1В строке обратный слэш, после которого идёт новая строка, игнорируется (т.е. считается, что строка не содержит ни обратных слэшей, ни переводов строки).

2Отменяет значение специальных символов CSS. Любой символ (исключая 16-ричные числа) может войти в escape-последовательность с помощью обратного слэша для отмены своего специального значения. Например, "\"" это строка. состоящая из одной двойной кавычки. Препроцессоры таблиц стилей обязаны не удалять эти слэши из таблиц стилей до тех пор, пока они не изменят значения таблицы стилей.

3

Escape-последовательности с обратным слэшем позволяют авторам обращаться к символам, которые не могут быть напрямую помещены в документ. В таких случаях используется обратный слэш, после которого идут не более шести 16-ричных цифр (0..9A..F), что соответствует символам ISO 10646 ( [ISO10646] ) с этим числом. Если после 16-ричного числа идёт цифра или буква, то конец числа должен быть очищен. Есть два способа сделать это:

1пробел (или иной символ пробела): "\26 B" ("&B")

2предоставление точного 16-ричного числа из шести цифр: "\000026B" ("&B")

Фактически эти два метода можно комбинировать. Только один символ пробела игнорируется после 16-ричной escape-последовательности. Заметьте, что это означает, что "реальный" пробел после escape-последовательности обязан или сам быть выражен с использованием escape-последовательности, или удвоен.

[x]. Escape-последовательности с обратным слэшем всегда рассматриваются как часть идентификатора или строки (т.е. "\7B" это не пунктуация, а "{" - она, и "\32" допускается в начале имени класса, а "2" - нет).

Таблица стилей любой версии CSS состоит из списка операторов (см. грамматику выше). Есть два вида операторов: at-правила и наборы правил. Вокруг операторов могут быть пробелы.

В данной спецификации выражения "непосредственно перед" или "сразу после" означают отсутствие пробелов или комментариев.

At-правила начинаются at-ключевым словом, символом '@', сразу после которого следует идентификатор (например, '@import', '@page').

At-правило состоит из вышеназванного и последующей точки с запятой (;) или блока, в зависимости от того, что идёт первым. ПА CSS, обнаруживающий нераспознаваемое at-правило, обязан игнорировать всё это правило и продолжить разбор после него.

В CSS2 ПА обязан игнорировать любое правило '@import' , которое появляется внутри блока или предшествует всем наборам правил.

Предположим, например, что разборщик CSS2 обрабатывает такую таблицу стилей:

@import "subs.css"; H1 { color: blue } @import "list.css";

Второе '@import', в соответствии с CSS2, недопустимо. Разборщик CSS2 игнорирует всё at-правило, сокращая таблицу стилей до:

@import "subs.css"; H1 { color: blue }

Здесь второе правило '@import' - неверное, поскольку появляется внутри блока '@media'.

@import "subs.css"; @media print { @import "print-main.css"; BODY { font-size: 10pt } } H1 {color: blue }

Блок начинается с левой фигурной скобки ({) и заканчивается парной правой скобкой (}). Между ними могут находиться любые символы, кроме скобок (( )), квадратных скобок ([ ]) и фигурных скобок ({ }), которые обязаны всегда использоваться в паре и могут вкладываться. Одиночные (') и двойные (") кавычки также обязаны использоваться парами, а символы между ними разбираются как строка\string. См. выше определение строки в Лексическом разборе.

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

{ causta: "}" + ({7} * '\'') }

Заметьте, что это неверное правило CSS2, образующее, тем не менее, блок, как указано выше.

Набор правил (называемый также "правило") состоит из cелектора с последующим блоком объявлений.

Блок объявлений (называемый также в последующем тексте {}-блоком) начинается с левой фигурной скобки ({) и заканчивается парной правой скобкой (}). Между ними может находиться список из 0 или более разделённых точкой с запятой (;) объявлений.

Cелектор (см. также раздел Селекторы) состоит из чего-либо, предшествующего первой скобке (но не включая) ({). Cелектор всегда идёт вместе с {}-блоком. Если ПА не может разобрать cелектор (т.е. если он неверен в CSS2), он обязан также игнорировать и {}-блок.

В CSS2 запятая (,) имеет специальное значение в cелекторах. Однако, поскольку не известно, примет ли запятая иные значения в последующих версиях CSS, весь оператор должен быть проигнорирован, если где-либо в селекторе имеется ошибка, даже если остальная часть cелектора выглядит как соответствующая CSS2.

Например, поскольку "&" это неверная лексема в селекторе CSS2, ПА CSS2 обязан игнорировать всю вторую строку и не устанавливать красный цвет в H3:

H1, H2 {color: green } H3, H4 & H5 {color: red } H6 {color: black } Это более сложный пример. Первые две пары фигурных скобок находятся внутри строки и не обозначают конец cелектора. Это - верный оператор CSS2. P[example="public class foo\ {\ private int x;\ \ foo(int x) {\ this.x = x;\ }\ \ }"] { color: red }

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

В зависимости от способа работы cелектора, несколько объявлений для одного cелектора могут быть упорядочены точкой с запятой (;), разделяющей группы.

Таким образом, следующие правила: H1 { font-weight: bold } H1 { font-size: 12pt } H1 { line-height: 14pt } H1 { font-family: Helvetica } H1 { font-variant: normal } H1 { font-style: normal } эквивалентны: H1 { font-weight: bold; font-size: 12pt; line-height: 14pt; font-family: Helvetica; font-variant: normal; font-style: normal }

Cвойства это идентификаторы. Между ними могут находиться любые символы, кроме скобок (( )), квадратных скобок ([ ]) и фигурных скобок ({ }), которые обязаны всегда использоваться в паре, а точка с запятой вне строки обязана вводиться с использованием escape-последовательности. Угловые, квадратные и круглые скобки могут вкладываться. Внутри кавычек символы разбираются как строка.

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

ПА обязан игнорировать объявление с неверным названием cвойства или неверным значением. Каждое свойство CSS2 имеет свой собственный синтаксис и семантические ограничения для принимаемых значений.

Предположим, что разборщик CSS2 обрабатывает такую таблицу стилей:

H1 { color: red; font-style: 12pt } /* Неверное значение: 12pt */ P { color: blue; font-vendor: any; /* Неверное свойство: font-vendor */ font-variant: small-caps } EM EM { font-style: normal }

Второе объявление в первой строке имеет неверное значение '12pt'. Второе объявление второй строки содержит неопределённое свойство 'font-vendor'. Разборщик CSS2 будет игнорировать эти объявления, уменьшая таблицу до:

H1 { color: red; } P { color: blue; font-variant: small-caps } EM EM { font-style: normal }

Комментарии начинаются символом "/*" и заканчиваются символом "*/". Они могут появляться в любом месте между лексемами, и их содержимое не влияет на представление документа. Комментарии не могут вкладываться.

CSS допускает также SGML-ограничители комментариев ("<!--" и "-->") в определённых местах, но это не комментарии CSS. Они разрешены для ввода правил стиля в документе-источнике HTML (в элементе STYLE), чтобы спрятать эти правила от до-HTML 3.2 ПАгентов. См. спецификацию HTML 4.0 ( [HTML40] ).

В некоторых случаях ПА обязан игнорировать часть неверной таблицы стилей. В этой спецификации игнорирует означает, что ПА разбирает неверную часть (чтобы определить её начало и конец), но действует так, как будто её нет.

Для гарантий того, что новые cвойства и новые значения для существующих свойств смогут быть добавлены в будущем, от ПА требуется соблюдение следующих правил при обработке следующих сценариев:

[x]. Неизвестные cвойства. ПА обязан игнорировать объявление с неизвестным свойством. Например, если в таблице стилей указано:

H1 { color: red; rotation: 70minutes }

ПА будет рассматривать это, как если бы в таблице было:

H1 { color: red }

[x]. Неверные значения. ПА обязан игнорировать объявление с неверным значением. Например:

" IMG { float: left } /* корректно в CSS2 */ " IMG { float: left here } /* "here" это неверное значение для 'float' */ " IMG { background: "red" } /* ключевые слова CSS2 не могут вводиться в кавычках */ " IMG { border-width: 3 } /* для размеров должны быть указаны единицы измерения */

Разборщик CSS2 примет первое правило и проигнорирует остальные, как если бы таблица была такой:

IMG { float: left } IMG { } IMG { } IMG { }

ПА, соответствующий будущим спецификациям CSS, может учитывать также одно или более из следующих правил.

[x].

Неверные at-ключевые слова. ПА обязаны игнорировать неверные ключевые слова at- вместе с тем, что следует после них до (;) включительно или до блока ({...}), в зависимости от того, что идёт первым. Например, рассмотрим:

" @three-dee { " @background-lighting { " azimuth: 30deg; " elevation: 190deg; " } " H1 { color: red } " } H1 { color: blue }

Правило от- '@three-dee' не входит в CSS2. Следовательно, всё at-правило (до третьей правой фигурной скобки включительно) игнорируется. ПА CSS2 игнорирует его, уменьшая таблицу до:

H1 { color: blue }

Значения некоторых типов могут принимать целые (обозначенные <integer>) или реальные числа (обозначенные <number>). Реальные и целые числа специфицируются только в десятеричной нотации. <integer> состоит из одной или более цифр от "0" до "9". <number> может быть <integer> или ноль или более цифр с точкой (.), после которой идут одна или более цифр. И целые, и реальные числа могут иметь впереди "-" или "+" для указания знака числа.

Заметьте, что многие cвойства, допускающие целые и реальные числа в качестве значения, на практике ограничивают значение некоторым диапазоном, часто неотрицательным значением.

Размеры имеют отношение к горизонтальным и вертикальным измерениям.

Формат значения размера (обозначаемого в этой спецификации <length>) - это необязательный символ знака ('+' или '-', с '+' по умолчанию), после которого сразу идёт <number> (с или без десятичной точки), после которого сразу идёт идентификатор единиц измерения (например, px, deg и т.п.). После размера '0' единицы измерения не обязательны.

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

Есть два типа единиц измерения: относительные и абсолютные. Относительные размеры специфицируют значение размера относительно какого-либо исходного cвойства размера. Таблицы стилей, использующие относительные единицы измерения, легче масштабируются при переносе на различные носители (например, с дисплея компьютера на лазерный принтер).

Относительные единицы измерения являются:

[x]. em: 'font-size' соответствующего шрифта;

[x]. ex: 'x-height' соответствующего шрифта;

[x]. px: пикселы, относительно устройства просмотра.

H1 { margin: 0.5em } /* em */ H1 { margin: 1ex } /* ex */ P { font-size: 12px } /* px */

Единицы измерения 'em' эквивалентны вычисленному значению cвойства 'font-size' того элемента, в котором оно используется. Исключением является тот случай, когда 'em' появляется в самом значении cвойства 'font-size', тогда оно относится к размеру шрифта родительского элемента. Может использоваться для вертикального или горизонтального измерения. (Эта единица измерения иногда называется quad-width/квад-ширина в типографском тексте.)

Единицы 'ex' определяются 'x-height' шрифта. x-height называется так, потому что она часто равна высоте "x" нижнего регистра. Однако 'ex' определены даже для тех шрифтов, которые не содержат "x".

Правило: H1 { line-height: 1.2em } означает, что высота строки элементов H1 будет на 20% больше, чем размер шрифта элементов H1. С другой стороны: H1 { font-size: 1.2em } означает, что размер шрифта элементов H1 будет на 20% больше, чем размер шрифта, наследуемый из элементов H1.

Если они специфицированы для корня дерева документа (например, "HTML" в HTML), 'em' и 'ex' относятся к начальному значению свойства.

Пикселы относительны к разрешению устройства просмотра, т.е. чаще всего - дисплея компьютера. Если плотность пикселов выводного устройства сильно отличается от плотности типичного компьютерного дисплея, ПА должен перемасштабировать пикселные значения. Рекомендуется, чтобы пиксел в качестве точки отсчёта был визуальным углом одного пиксела на устройстве с плотностью пикселов 90dpi на расстоянии вытянутой руки от читателя. При нормальной длине руки 28 дюймов визуальный угол будет примерно 0.0227 градусов.

При чтении с расстояния вытянутой руки 1px соответствует примерно 0.28 мм (1/90 дюйма). При печати на лазерном принтере, рассчитанном на чтение с несколько меньшего расстояния, чем вытянутая рука, (55 см, 21 дюймов), 1px составляет около 0.21 мм. На принтере с разрешением 300 точек на дюйм (dpi) это можно округлить до 3 точек (0.25 мм); на принтере с 600 dpi это можно округлить до 5 точек.

Два нижеследующих изображения иллюстрируют эффект при просмотре размера пиксела с расстояния и эффект разрешения устройства. На первом рисунке расстояние чтения 71 см (28 дюймов) даёт пиксел 0.28 мм, а с расстояния 3.5 м (12 футов) требуется пиксел 1.4 мм.

[D]

На втором рисунке область 1px на 1px закрывается одной точкой устройства с низким разрешением (экран компьютера), и та же самая область покрывается 16-ю точками на устройстве с высоким разрешением (как лазерный принтер 400 dpi).

[D]

Дочерние элементы не наследуют относительные значения, специфицированные для их родителя; они (обычно) наследуют вычисленные значения.

В следующих правилах вычисленное значение 'text-indent' элементов H1 будет 36pt, а не 45pt, если H1 является дочерним относительно элемента BODY: BODY { font-size: 12pt; text-indent: 3em; /* т.е. 36pt */ } H1 { font-size: 15pt }

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

Абсолютными значениями являются:

[x]. in: inches/дюймы -- 1 дюйм равен 2.54 сантиметра.

[x]. cm: сантиметры

[x]. mm: миллиметры

[x]. pt: points/пункты - пункт, используемый в CSS2, равен 1/72 дюйма.

[x]. pc: picas/пики -- 1 пика равна 12 пунктам.

H1 { margin: 0.5in } /* дюймы */ H2 { line-height: 3cm } /* сантиметры */ H3 { word-spacing: 4mm } /* миллиметры */ H4 { font-size: 12pt } /* пункты */ H4 { font-size: 1pc } /* пики */

В тех случаях, когда специфицированные размеры не могут поддерживаться, ПА обязаны давать значение, приближённое к реальному.

Формат процентного значения (обозначаемого в этой спецификации <percentage>) - это необязательный знак ('+' или '-', с '+' по умолчанию), сразу за которым следует <number>, за которым сразу следует '%'.

Процентные значения всегда относительны к другому значению, например, размеру. Каждое свойство, допускающее процентные значения, определяет также значение, на которое ссылается процентное. Значение может быть взято из другого свойства того же элемента, свойства элемента-предка или значения контекста форматирования (например, ширины содержащего блока). Если процентное значение установлено для свойства корневого элемента и проценты определены как относительные к наследуемому значению какого-либо свойства, то результирующее значение - это начальное значение этого свойства, взятое кратным количеству процентов.

Поскольку дочерние элементы (обычно) наследуют вычисленные значения своих родителей, в следующем примере дочерние от P элементы унаследуют значение в 12pt для 'line-height', а не процентное значение (120%): P { font-size: 10pt } P { line-height: 120% } /* 120% от 'font-size' */

URL (Uniform Resource Locator, см. [RFC1738] и [RFC1808] ), предоставляет адрес ресурса Web. Ожидается появление нового способа идентификации ресурсов, называемого URN (Uniform Resource Name). Вместе они называются URI (Uniform Resource Identifiers, см. [URI] ). В этой спецификации используется термин URI.

Значения URI в этой спецификации обозначаются <uri>. Функциональное обозначение URI в значениях свойств - "url()", как здесь:

BODY { background: url("http://www.bg.com/pinkish.gif") }

Формат значения URI таков: 'url(' с последующим необязательным пробелом, с последующей необязательной одинарной кавычкой (') или двойной кавычкой ("), с последующим собственно URI, с последующей необязательной одинарной кавычкой (') или двойной кавычкой ("), с последующим необязательным пробелом с последующей ')'. Знаки кавычек должны быть одинаковыми (двойными или одинарными).

Пример без кавычек: LI { list-style: url(http://www.redballs.com/redball.png) disc }

Скобки, запятые, пробельные символы, одинарные (') и двойные (") кавычки в URI обязаны вводиться с помощью escape-последовательностей с обратным слэшем: '\(', '\)', '\,'.

В зависимости от типа URI, может иметься возможность также записывать вышеуказанные символы как URI-escape-последовательности (где "(" = %28, ")" = %29 и т.д.), как описано в [URI] .

Для того, чтобы создать модульные таблицы стилей, не зависящие от абсолютного размещения ресурса, авторы могут использовать относительные URI. Относительные URI (как определено в [RFC1808] ) расширяются до полного URI с использованием базового URI. RFC 1808, раздел 3 определяет нормативный алгоритм этого процесса. В таблицах стилей CSS базовый URI это URI таблицы стилей, а не документа-источника.

Предположим, имеется такое правило: BODY { background: url("yellow") } размещённое в таблице стилей с URI: http://www.myorg.org/style/basic.css Фон элемента BODY в документе-источнике будет заполнен каким-нибудь изображением, обозначенный ресурсом URI: http://www.myorg.org/style/yellow

ПА могут по-разному обрабатывать URI, обозначающие несуществующий или необрабатываемый ресурс

Счётчики обозначаются идентификаторами (см. свойства 'counter-increment' и 'counter-reset'). Чтобы обратиться к значению счётчика, используется обозначение 'counter(<identifier>)' или 'counter(<identifier>, <list-style-type>)'. Стиль по умолчанию - 'decimal'.

Чтобы обратиться к последовательности вложенных счётчиков с одним именем, обозначение будет: 'counters(<identifier>, <string>)' или 'counters(<identifier>, <string>, <list-style-type>)'. См. "Вложенные счётчики и область видимости" в главе о генерируемом содержимом.

В CSS2 к значениям счётчиков можно обратиться только из свойства 'content'. Заметьте, что 'none', это возможный <list-style-type>: 'counter(x, none)' рассматривается как пустая строка.

Вот таблица стилей, нумерующая параграфы (P) для каждой главы (H1). Параграфы нумеруются римскими цифрами с последующими точкой и пробелом: P {counter-increment: par-num} H1 {counter-reset: par-num} P:before {content: counter(par-num, upper-roman) ". "}

Счётчики вне области видимости какого-либо 'counter-reset', считаются сброшенными в 0 в 'counter-reset' корневого элемента.

<color> это или предопределённое слово, или числовая спецификация RGB.

Список названий цветов: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white и yellow. Эти 16 цветов определены в HTML 4.0 ([HTML40]). Пользователь может дополнительно специфицировать ключевые слова, соответствующие цветам, используемым определёнными объектами в среде пользователя. Дополнительную информацию см. в системных цветах.

BODY {color: black; background: white } H1 { color: maroon } H2 { color: olive }

Модель цветов RGB используется в числовых спецификациях цвета. Во всех данных примерах специфицируется один и тот же цвет:

EM { color: #f00 } /* #rgb */ EM { color: #ff0000 } /* #rrggbb */ EM { color: rgb(255,0,0) } /* диапазон целых чисел 0 - 255 */ EM { color: rgb(100%, 0%, 0%) } /* диапазон чисел с плавающей точкой 0.0% - 100.0% */

Формат значения RGB в 16-ричной записи - '#' за которым сразу идут три или шесть 16-ричных символов. Трёхсимвольная запись RGB (#rgb) конвертируется в шестисимвольную форму (#rrggbb) путём дублирования цифр, но не дополнением нулями. Например, #fb0 расширяется до #ffbb00. Это гарантирует, что белый (#ffffff) можно специфицировать сокращённой записью (#fff) и удалить зависимость от глубины цвета на дисплее.

Формат значения RGB в функциональной записи - 'rgb(' за которым идёт список разделённых запятыми трёх числовых значений (или трёх целых, или трёх процентных) с последующей ')'. Целое значение 255 соответствует 100% и F или FF в 16-ричной записи: rgb(255,255,255) = rgb(100%,100%,100%) = #FFF. Пробельные символы допускаются вокруг числовых значений.

Все цвета RGB специфицированы в цветовом пространстве sRGB (см. [SRGB] ). ПА могут различаться в том, насколько точно они представляют эти цвета, но использование sRGB предоставляет недвусмысленное и объективно измеряемое определение того, каким должен быть цвет, соответствующий международным стандартам (см. [COLORIMETRY] ).

Соответствующие ПА могут ограничивать свои возможности вывода цвета для выполнения коррекции гаммы цветов. sRGB специфицирует гамму дисплея в 2.2 от специфицированных условий просмотра. ПА должны уточнить цвет, заданный в CSS, так чтобы в сочетании с 'натуральной' гаммой дисплея выводного устройства воспроизводилась эффективная гамма дисплея в 2.2. См. дополнительные детали в разделе коррекция гаммы. Обратите внимание, что воздействие производится только на цвета, специфицированные в CSS; например, от изображений ожидается сопровождающая их собственная цветовая информация.

Значения вне гаммы устройства должны усекаться: значения red, green и blue обязаны измениться, чтобы войти в рамки диапазона, поддерживаемого устройством. Для типичного CRT-монитора, чья гамма устройства - та же самая, что и sRGB, следующие три правила эквивалентны:

EM { color: rgb(255,0,0) } /* диапазон целых 0 - 255 */ EM { color: rgb(300,0,0) } /* усекается до rgb(255,0,0) */ EM { color: rgb(255,-10,0) } /* усекается до rgb(255,0,0) */ EM { color: rgb(110%, 0%, 0%) } /* усекается до rgb(100%,0%,0%) */ Другие устройства, такие как принтеры, имеют гаммы, отличные от sRGB; некоторые цвета вне диапазона 0..255 sRGB будут презентабельными (в пределах гаммы устройства), в то время как другие цвета в пределах диапазона 0..255 sRGB будут вне гаммы устройства и будут, таким образом, усечены.

Примечание. Хотя цвета могут добавить значительное количество информации в документы и сделать их более читабельными, необходимо учитывать, что определённые сочетания цветов могут вызвать проблемы у людей, страдающих нарушениями восприятия цвета. Если Вы используете фоновое изображение или устанавливаете цвет фона, подбирайте, пожалуйста, подходящий цвет переднего плана.

Угловые значения (обозначаемые в тексте <angle>) используются со звуковыми таблицами стилей.

Их формат - необязательный знак ('+' или '-', с '+' по умолчанию), сразу за которым следует <number>, за которым сразу следует идентификатор единиц измерения углов.

Единицами измерения углов являются:

[x]. deg: градусы

[x]. grad: грады

[x]. rad: радианы

Угловые значения могут быть негативными. Они должны быть нормализованы ПАгентом до диапазона 0-360deg. Например, -10deg и 350deg эквивалентны.

Для примера, правый угол - '90deg' или '100grad', или '1.570796326794897rad'.

Временные значения (обозначаемые в тексте <time>) используются со звуковыми таблицами стилей.

Их формат: <number>, сразу за которым идёт идентификатор единиц измерения времени.

Идентификаторами единиц измерения времени являются:

[x]. ms: миллисекунды

[x]. s: секунды

Значения времени не могут быть негативными.

Значения частот (обозначаемые в тексте <frequency>) используются со звуковыми каскадными таблицами стилей.

Их формат: <number>, сразу за которым идёт идентификатор единиц измерения частоты.

Идентификаторами единиц измерения частоты являются:

[x]. Hz: герцы

[x]. kHz: килогерцы

Значения частоты не могут быть негативными.

Например, 200Hz (или 200hz) - это басовый звук, а 6kHz (или 6khz) - средний регистр.

Строки могут записываться в двойных или одинарных кавычках. Двойные кавычки не могут появляться внутри двойных кавычек, если только они не вводятся с помощью escape-последовательности ( '\"' или '\22'). Аналогично для одинарной кавычки ("\'" или "\27").

"this is a 'string'" "this is a \"string\"" 'this is a "string"' 'this is a \'string\''

Строка не может непосредственно содержать переход на новую строку. Чтобы вставить переход на новую строку, используйте escape-последовательность "\A" (16-ричная A - это символ прогона строки в Unicode, но в CSS представляет общее обозначение для "новой строки"). См., например, свойство 'content'.

Можно разбивать строки на несколько строк, по эстетическим и другим соображениям, но в таком случае новая строка сама escape'ируется обратным слэшем (\). Например, следующие два cелектора совершенно одинаковы:

A[TITLE="a not s\ o very long title"] {/*...*/} A[TITLE="a not so very long title"] {/*...*/}

Таблица стилей CSS это последовательность символов из Universal Character Set/Универсального Набора Символов (см. [ISO10646] ). Для передачи и хранения эти символы обязаны кодироваться в кодировке символов, поддерживающей набор символов, доступных в US-ASCII (например, ISO 8859-x, SHIFT JIS и т.д.). Чтобы хорошенько разобраться в наборах символов и кодировке, см. спецификацию HTML 4.0 ( [HTML40] , главу 5). См. также спецификацию XML 1.0 ( [XML10] , разделы 2.2 и 4.3.3, и Приложение F.

Если таблица стилей встроена в другой документ, например, элемент STYLE или атрибут "style" в HTML, таблица стилей разделяет использование кодировки символов с этим документов.

Если таблица стилей находится в отдельном файле, ПА обязаны учитывать следующий приоритет при определении кодировки символов документа (от высшего приоритета к низшему):

1Параметр HTTP "charset" в поле "Content-Type".

2At-правило @charset.

3Механизмы языка обращающегося документа (например, в HTML атрибут "charset" элемента LINK).

Не более одного правила @charset может появляться во внешней таблице стилей - оно обязано не появляться во внедрённой таблице стилей - и оно должно появляться в самом начале документа, до появления любых символов. После "@charset" авторы специфицируют имя кодировки символов. Имя обязано быть названием набора символов, как описано в регистре IANA (см. [IANA] . См. также в [CHARSETS] полный список наборов символов). Например:

@charset "ISO-8859-1";

В данной спецификации не определено, какие кодировки символов ПА обязан поддерживать.

Обратите внимание, что опора на конструкцию @charset теоретически создаёт проблему, поскольку отсутствует a priori информация о том, как она кодирована. На практике, однако, широко используемые кодировки в Internet базируются или на ASCII, UTF-16, UCS-4, или (редко) на EBCDIC. В общем, это означает, что значения начальных байтов документа дают ПАгенту возможность определить семейство кодировки, что даёт достаточно информации для декодирования правила @charset, которое, в свою очередь, определяет точную кодировку.

Таблице стилей может понадобиться обратиться к символам, которые невозможно представить в текущей кодировке символов. Эти символы обязаны быть записаны как escape'ированные ссылки на символы ISO 10646. Эти мнемоники служат для тех же целей, что и числовые ссылки в документах HTML или XML (см. [HTML40] , главы 5 и 25).

Escape-механизм символов должен использоваться только тогда, когда необходимо вывести таким способом только несколько символов. Если большая часть документа требует этого, авторы должны кодировать документ в более подходящей кодировке (например, если документ содержит много греческих символов, автор может использовать "ISO-8859-7" или "UTF-8").

Процессоры-посредники, использующие другие кодировки символов, могут транслировать эти escape-последовательности в последовательности байтов кодировки. Процессоры-посредники не обязаны, с другой стороны, изменять escape-последовательности, отменяющие специальные значения символов ASCII.

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

Например, документ, передаваемый как ISO-8859-1 (Latin-1), не может содержать напрямую греческую букву: "κουρος" (по-гречески: "kouros"), которая должна быть записана как "\3BA\3BF\3C5\3C1\3BF\3C2".

Примечание. В HTML 4.0 числовые мнемоники интерпретируются в значениях атрибута "style", но не в содержимом элемента STYLE. Из-за этой асимметрии мы рекомендуем, чтобы авторы использовали escape-механизм CSS вместо числовых мнемоник и для атрибута "style", и для элемента STYLE. Например, мы рекомендуем:

<SPAN style="voice-family: D\FC rst">...</SPAN>

вместо:

<SPAN style="voice-family: Dürst">...</SPAN>

Лекция 5. Селекторы

Описываются селекторы, их синтаксис, а также псевдоэлементы и псевдоклассы.

В CSS правила совпадения символов определяют, какое правило стиля применить к элементам дерева документа. Такие блоки символов (патэрн), называемые селекторами, могут иметь диапазон имён от простых имён элементов до сложных контекстуальных блоков. Если все условия в патэрн верны для конкретного элемента, селектор совпадает с элементом.

Чувствительность к регистру имён элементов в селекторах зависит от языка документа. Например, в HTML имена элементов нечувствительны к регистру, а в XML - чувствительны к регистру.

В этой таблице суммирован синтаксис селекторов CSS2:

ПатэрнСмыслОписан в разделе
*совпадает любой элемент.Универсальный селектор
Eсовпадает любой элемент E (т.е. элемент типа E).Типы селекторов
E Fсовпадает любой элемент F, являющийся потомком элемента E.Селекторы-потомки
E > Fсовпадает любой элемент F, являющийся дочерним относительно элемента E.Дочерние селекторы
E:first-childсовпадает элемент E, если E является первым дочерним элементом своего родителя.Псевдокласс :first-child

E:link

E:visited

совпадает элемент E, если E является якорем ещё не посещённого ресурса гиперссылки (:link) или уже посещённого (:visited).Псевдоклассы гиперссылки

E:active

E:hover

E:focus

совпадает элемент E во время определённых действий пользователя.Динамические псевдоклассы
E:lang(c)совпадает элемент типа E, если он на (человеческом) языке с (язык документа специфицирует то, как определяется язык).Псевдокласс :lang()
E + Fсовпадает любой элемент F, непосредственно перед которым идёт элемент E.Смежные селекторы
E[foo]совпадает любой элемент E с установленным атрибутом "foo" (с каким-либо значением).Селекторы атрибутов
E[foo="warning"]совпадает любой элемент E, чьё значение атрибута "foo" точно равно "warning".Селекторы атрибутов

E

[foo~="warning"]

совпадает любой элемент E, чьё значение атрибута "foo" является списком разделённых пробелами значений, одно из которых точно равно "warning".Селекторы атрибутов

E

[lang|="en"]

совпадает любой элемент E, чей атрибут "lang" содержит список разделённых дефисами значений, начинающийся (слева) с "en".Селекторы атрибутов
DIV.warningТолько в HTML. То же, что DIV[class~="warning"]. Селекторы классов
E#myidсовпадает любой ID элемента E, эквивалентный "myid".Селекторы ID

Простой селектор - селектор типа или универсальный селектор, непосредственно после которого идёт ноль или более селекторов атрибутов, селекторов ID или псевдоклассов в любом порядке. Простой селектор совпадает, если совпадают все его компоненты.

Селектор это цепь из одного или более простых селекторов, разделённых комбинаторами. Комбинаторами являются: пробелы, ">" и "+". Пробелы могут появляться между комбинатором и простыми селекторами вокруг него.

Элементы дерева документов, совпадающие с селектором, называются субъектами селектора. Cелектор, состоящий из одного простого селектора, совпадает с любым элементом, удовлетворяющим его условиям. Предопределённость простого селектора и комбинатора в цепи вызывает дополнительные ограничения для совпадения, так что субъекты селектора всегда являются поднабором элементов, совпадающим с самым правым простым селектором.

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

Если несколько селекторов используют общие объявления, то они могут быть сгруппированы в список с разделением запятыми.

Здесь три правила с идентичными объявлениями собраны в одно. Таким образом,

H1 { font-family: sans-serif } H2 { font-family: sans-serif } H3 { font-family: sans-serif }

эквивалентно:

H1, H2, H3 { font-family: sans-serif }

CSS предлагает также другие механизмы "сокращений", включая множественные объявления и сокращённые свойства.

Универсальный cелектор, записываемый "*", совпадает с именем любого типа элемента. Он совпадает с любым простым элементом в дереве документа.

Универсальный селектор не является единственным компонентом простого селектора, символ "*" может быть опущен. Например:

[x]. *[LANG=fr] и [LANG=fr] эквивалентны.

[x]. *.warning и .warning эквивалентны.

[x]. *#myid и #myid эквивалентны.

Cелектор типа совпадает с именем типа элемента языка документа. Cелектор типа совпадает с каждым вхождением типа элемента в дереве документа.

Следующее правило совпадает со всеми элементами H1 в дереве документа:

H1 { font-family: sans-serif }

Авторам может понадобиться, чтобы селекторы совпадали с элементом, который является потомком другого элемента в дереве документа (например, "Совпадать с теми элементами EM, которые содержатся в элементе H1"). Cелекторы потомков выражают следующие взаимоотношения в патэрн. Селектор потомков состоит из двух или более селекторов, разделённых пробелами. Селектор потомков "A B" совпадает, если элемент B является произвольным потомком некоторого элемента-предка A.

Рассмотрим следующие правила:

H1 { color: red } EM { color: red }

Хотя смысл этих правил в том, чтобы выделять текст путём изменения его цвета, в следующем случае эффект не будет достигнут:

<H1>This headline is <EM>very</EM> important</H1>

В этом случае мы дополняем предыдущие правила правилом, которое устанавливает голубой цвет текста, если EM появляется где-либо внутри H1:

H1 { color: red } EM { color: red } H1 EM { color: blue }

Третье правило совпадёт с элементом EM в следующем фрагменте:

<H1>This <SPAN class="myclass">headline is <EM>very</EM> important</SPAN></H1>

Следующий селектор:

DIV * P

совпадает с элементом P, который является внуком, или позднейшим потомком, элемента DIV.

Обратите внимание на пробелы с каждой стороны от "*".

Селектор в следующем правиле, сочетающий селекторы потомка и атрибута, совпадает с любым элементом, имеющим (1) установленный атрибут "href" и (2) находящимся внутри P, который сам находится внутри DIV:

DIV P *[href]

Селектор дочерних элементов совпадает , если элемент является дочерним относительно другого элемента. Селектор дочерних элементов состоит из двух или более селекторов, разделённых символом ">".

Это правило устанавливает стиль всех элементов P, являющихся дочерними относительно BODY:

BODY > P { line-height: 1.3 }

Здесь сочетаются селекторы потомков и селекторы дочерних элементов:

DIV OL>LI P

Здесь селектор совпадает с элементом P, являющимся потомком LI; элемент LI обязан быть дочерним относительно элемента OL; элемент OL обязан быть потомком DIV. Обратите внимание, что необязательные пробелы вокруг комбинатора ">" опущены.

Информацию о выборе первого дочернего элемента данного элемента см. ниже в разделе о псевдоклассе :first-child.

Смежные селекторы-родственники имеют следующий синтаксис: E1 + E2, где E2 является субъектом селектора. Селектор совпадает, если E1 и E2 имеют одного общего предка в дереве документа и E1 непосредственно предшествует E2.

В определённых контекстах смежные элементы генерируют форматированные объекты, чьё представление обрабатывается автоматически (например, сжатие вертикальных полей между смежными боксами). Селектор "+" позволяет авторам специфицировать дополнительный стиль для смежных элементов.

Так, следующее правило указывает, что если элемент P следует непосредственно за элементом MATH, то он не должен учитываться:

MATH + P { text-indent: 0 }

Следующий пример уменьшает вертикальное пространство, разделяющее H1 и H2:

H1 + H2 { margin-top: -5mm }

Следующее правило аналогично одному из вышеприведённых примеров, за исключением того, что оно добавляет селектор атрибута. Таким образом, специальное форматирование возникает только тогда, когда H1 имеет class="opener": H1.opener + H2 { margin-top: -5mm }

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

Селекторы атрибутов могут совпадать четырьмя способами:

[att]

Если элемент устанавливает атрибут "att" с каким-либо значением атрибута.

[att=val]

Если значение атрибута "att" элемента - точно "val".

[att~=val]

Если значение атрибута "att" элемента - список разделённых пробелами "слов", одно из которых - "val". Если используется данный селектор, то слова в значении обязаны не содержать пробелов (поскольку они сами разделяются пробелами).

[att|=val]

Если значения атрибута "att" элемента - список разделённых дефисами "слов", начинающийся с "val". Совпадение всегда стартует от начала значения атрибута. Это принимается во внимание прежде всего для того, чтобы позволить совпасть субкоду языка (например, атрибут "lang" в HTML), как описано в RFC 1766 ([RFC1766]).

Значением атрибута обязана быть строка или идентификатор. Чувствительность к регистру имён атрибутов и значений в селекторах зависит от языка документа.

Следующий селектор атрибута совпадает со всеми элементами H1, которые специфицировали атрибут "title" с любым значением:

H1[title] { color: blue; }

Здесь селектор совпадает со всеми элементами SPAN, чей атрибут "class" имеет значение "example":

SPAN[class=example] { color: blue; }

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

Здесь селектор совпадает со всеми элементами SPAN, чей атрибут "hello" имеет значение "Cleveland" и чей атрибут "goodbye" имеет значение "Columbus":

SPAN[hello="Cleveland"][goodbye="Columbus"] { color: blue; }

Следующие селекторы иллюстрируют разницу между "=" и "~=". первый селектор совпадает, к примеру, со значением "copyright copyleft copyeditor" атрибута "rel". Второй селектор совпадает только тогда, когда атрибут "href" имеет значение "http://www.w3.org/".

A[rel~="copyright"] A[href="http://www.w3.org/"]

Следующее правило скрывает все элементы, у которых атрибут "lang" имеет значение "fr" (т.е. язык - французский).

*[LANG=fr] { display : none }

Следующее правило совпадает для значений атрибута "lang", начинающихся с "en", включая "en", "en-US" и "en-cockney":

*[LANG|="en"] { color : red }

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

DIALOGUE[character=romeo] { voice-family: "Lawrence Olivier", charles, male } DIALOGUE[character=juliet] { voice-family: "Vivien Leigh", victoria, female }

Совпадение происходит в значениях атрибутов в дереве документа. Для языков документа, отличных от HTML, значения по умолчанию для атрибутов могут определяться в ОТД или где-либо ещё. Таблицы стилей должны создаваться так, чтобы они работали даже тогда, когда значения по умолчанию не включены в дерево документа.

Рассмотрим элемент EXAMPLE с атрибутом "notation", имеющим значение по умолчанию "decimal".

Фрагмент ОТД может быть таким:

<!ATTLIST EXAMPLE notation (decimal,octal) "decimal">

Если таблица стилей содержит правила

EXAMPLE[notation=decimal] { /*... установки по умолчанию для свойства ...*/ } EXAMPLE[notation=octal] { /*... другие установки ...*/ }

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

EXAMPLE { /*... значения по умолчанию для свойства ...*/ }

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

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

В таблицах стилей, используемых в HTML, авторы могут употреблять точку (.) как альтернативу "~=" при совпадении с атрибутом "class". Таким образом, в HTML "DIV.value" и "DIV[class~=value]" имеют одно значение. Значение атрибута обязано следовать сразу за ".".

Мы можем назначить стилевую информацию всем элементам class~="pastoral" следующим образом:

*.pastoral { color: green } /* все элементы с class~=pastoral */

или просто

.pastoral { color: green } /* все элементы с class~=pastoral */

Следующее - назначает стиль только элементам H1 с class~="pastoral":

H1.pastoral { color: green } /* элементы H1 с class~=pastoral */

При назначении этих правил первое вхождение H1 ниже не имеет зелёного цвета текста, а второе - имеет:

<H1>Not green</H1> <H1 class="pastoral">Very green</H1>

Чтобы совпасть с поднабором значений "class", каждое значение обязано иметь предшествующую ".".

Следующее правило совпадает с любым элементом P, чей атрибут "class" сопоставлен списку разделённых пробелами значений "pastoral" и "marine":

P.pastoral.marine { color: green }

Правило совпадает, если class="pastoral blue aqua marine", но не совпадает

class="pastoral blue".

Примечание. CSS даёт такую мощь атрибуту "class", что авторы могут создавать свои собственные "языки документа" на базе элементов с почти не ассоциированным представлением (таких как DIV и SPAN в HTML) и назначать стилевую информацию через атрибут "class". Авторам следует избегать такой практики, поскольку структурные элементы языка документа часто имеют распознаваемые и принимаемые значения, а классы, определённые авторами - не могут.

Языки документов могут содержать атрибуты, которые объявлены как имеющие тип ID. Особенностью атрибутов типа ID является то, что они могут иметь одно значение; независимо от языка документа, атрибут ID может использоваться для уникальной идентификации элемента. В HTML все атрибуты ID именуются "id"; приложения XML могут именовать атрибуты ID по-разному, но с применением одинаковых ограничений.

Атрибут ID языка документа позволяет авторам назначать идентификатор объекту элемента в дереве документа. В CSS ID-селекторы совпадают с объектом элемента на базе идентификатора. ID-селектор CSS содержит "#" непосредственно перед значением ID.

Следующий ID-селектор совпадает с элементом H1, чей атрибут ID имеет значение "chapter1":

H1#chapter1 { text-align: center }

В следующем пример правило таблицы стилей устанавливает совпадение с элементом, чьё значение ID - "z98y".

Правило, таким образом, совпадает для элемента P:

<HEAD> <TITLE>Match P</TITLE> <STYLE type="text/css"> *#z98y { letter-spacing: 0.3em } </STYLE> </HEAD> <BODY> <P id=z98y>Wide text</P> </BODY>

В следующем пример, однако, правило стиля совпадает только с тем элементом H1, который имеет значение ID - "z98y".

Правило в этом примере не совпадает с элементом P:

<HEAD> <TITLE>Match H1 only</TITLE> <STYLE type="text/css"> H1#z98y { letter-spacing: 0.5em } </STYLE> </HEAD> <BODY> <P id=z98y>Wide text</P> </BODY>

ID-селекторы имеют более высокий приоритет, чем селекторы атрибутов. Например, в HTML селектор #p123 более специфичен, чем [ID=p123], в терминах каскада.

Примечание. В XML 1.0 [XML10] информация о том, какой атрибут содержит ID-ы элемента, находится в ОТД. При разборе XML, ПА не всегда читают ОТД и поэтому могут не знать, какой ID у элемента. Если дизайнер таблицы стилей знает или предполагает, что это именно данный случай, он должен использовать нормальные селекторы атрибутов: [name=p371] вместо #p371. Однако каскадный порядок нормальных селекторов атрибутов отличается от ID-селекторов. Может понадобиться добавить приоритет "!important" в объявления: [name=p371] {color: red ! important}. Конечно, элементы в документах XML 1.без ОТД не имеют ID-ов вообще.

В CSS2 стиль обычно присоединяется к элементу на базе его позиции в дереве документа. Этой простой модели во многих случаях достаточно, но некоторые обычные сценарии могут оказаться недоступными из-за структуры дерева документа. Например, в HTML 4.0 (см. [HTML40]) нет элементов, относящихся к первой строке параграфа, и, следовательно, простой селектор CSS не может с ним соотноситься.

CSS вводит псевдоэлементы и псевдоклассы, чтобы разрешить форматирование на базе информации, находящейся вне дерева документа.

[x]. Псевдоэлементы создают абстракции дерева документа наряду с абстракциями, специфицированными языком документа. Например, языки документа не имеют механизмов для доступа к первой букве или первой строке содержимого элемента . Псевдоэлементы CSS позволяют дизайнерам таблиц стилей получить доступ к информации, иначе не доступной. Псевдоэлементы могут также предоставить способ назначить стиль содержимому, которое не существует в документе-источнике (например, псевдоэлементы :before и :after дают доступ к генерируемому содержимому).

[x]. Псевдоклассы классифицируют элементы не по их именам, атрибутам или содержимому, а по другим характеристикам ; по характеристикам, которые в принципе не могут быть получены из дерева документа. Псевдоклассы могут быть динамическими в предположении, что элемент может получить или потерять псевдокласс, пока пользователь взаимодействует с документом. Исключением является ':first-child', который может быть вычислен из дерева документа.

Ни псевдоэлементы , ни псевдоклассы не появляются в документе-источнике или в дереве документа.

Псевдоклассы допустимы в селекторах везде, в то время как псевдоэлементы могут появляться только после субъекта селектора .

Имена псевдоэлементов и псевдоклассов нечувствительны к регистру.

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

ПА, соответствующие HTML могут игнорировать все правила с селекторами :first-line или :first-letter или, альтернативно, могут поддерживать только поднаборы свойств этих псевдоэлементов.

Псевдокласс :first-child совпадает с элементом, являющимся первым дочерним элементом какого-либо другого элемента.

Здесь селектор совпадает с любым элементом P, являющимся первым дочерним элементом элемента DIV. Правило подавляет отступ для первого параграфа DIV:

DIV > P:first-child { text-indent: 0 }

Следующий селектор может совпасть с элементом P внутри DIV в следующем фрагменте:

<P> Последний P перед note. <DIV class="note"> <P> Первый P внутри note. </DIV>

но не совпадёт со вторым P в следующем фрагменте:

<P> Последний P перед note. <DIV class="note"> <H2>Note</H2> <P> Первый P внутри note. </DIV>

Следующее правило устанавливает вес шрифта 'bold' для любого элемента EM, являющегося каким-либо потомком элемента P, который, в свою очередь, является первым дочерним элементом:

P:first-child EM { font-weight : bold }

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

Например, EM в:

<P>abc <EM>default</EM>

является первым дочерним элементом от P.

Следующие два раздела эквивалентны:

* > A:first-child /* первый дочерний элемент любого элемента */ A:first-child /* То же самое */

ПА обычно отображают непосещённые гиперссылки иначе, чем посещённые. CSS псевдоклассы ':link' и ':visited' для этих случаев:

[x]. Псевдокласс :link применяется к ссылкам, которые ещё не посещены.

[x]. Псевдокласс :visited применяется после того, как пользователь посетил ссылку.

Примечание. По истечении некоторого времени ПА могут вернуть посещённую гиперссылку к первоначальному состоянию (непосещённому) ':link'.

Эти два состояния взаимоисключающи.

Язык документа определяет, какие элементы являются якорями ссылки на ресурс. Например, в HTML 4.0 псевдоклассы гиперссылки применяются к элементам A с атрибутом "href". Таким образом, следующие два объявления CSS2 имеют один эффект:

A:link { color: red } :link { color: red }

Если следующая ссылка:

<A class="external" href="http://out.side/">external link</A>

будет посещена, то данное правило:

A.external:visited { color: blue }

сделает её голубой.

Интерактивные ПА иногда изменяют представление в ответ на действия пользователя. CSS имеет три псевдокласса для общих случаев:

[x]. Псевдокласс :hover применяется, если указал на элемент (каким-либо указательным устройством), но не активировал его. Например, визуальный ПА может применить этот псевдокласс, когда курсор (указатель мыши) проходит над боксом, сгенерированным элементом. ПА, не поддерживающие интерактивные носители, не должны поддерживать этот псевдокласс. Некоторые соответствующие ПА, поддерживающие интерактивные носители, могут оказаться неспособными поддерживать этот псевдокласс (например, устройство "карандаш").

[x]. Псевдокласс :active применяется, если элемент активирован пользователем. Например, между нажатием и отпусканием пользователем клавиши мыши.

[x]. Псевдокласс :focus применяется, если элемент имеет фокус (принял событие от клавиатуры или другие формы ввода текста).

Эти псевдоклассы не являются взаимоисключающими. Элемент может совпадать с несколькими из них одновременно.

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

От ПА не требуется перерисовывать отображаемый в данный момент документ из-за переносов псевдоклассов. Например, таблица стилей может специфицировать, что 'font-size' гиперссылки :active должен быть больше, чем у неактивной гиперссылки, но поскольку это может вызвать изменение положения букв при выборе пользователем гиперссылки, ПА может проигнорировать соответствующее правило стиля.

A:link { color: red } /* непосещённые ссылки */ A:visited { color: blue } /* посещённые ссылки */ A:hover { color: yellow } /* пользователь провёл над */ A:active { color: lime } /* активные ссылки */

Заметьте, что A:hover обязан размещаться после правил A:link и A:visited, поскольку иначе правила каскадирования спрячут свойство 'color' правила A:hover. Аналогично, поскольку A:active размещено после A:hover, цвет активной ссылки (lime) будет применён, когда пользователь и активирует и проведёт над элементом A.

Пример комбинации динамических псевдоклассов:

A:focus { background: yellow } A:focus:hover { background: white }

Последний селектор совпадает с элементами A, которые входят в псевдоклассы :focus и :hover.

О представлении контуров фокуса см. раздел динамические контуры фокуса.

Примечание. В CSS1 псевдокласс ':active' взаимно исключался с ':link' и ':visited'. Сейчас это уже не так. Элемент может быть и ':visited'', и ':active' (или ':link' и ':active'), и нормальные правила каскадирования определяют применение свойств.

Если язык документа специфицирует, как определяется человеческий язык, то становится возможным записывать селекторы CSS, которые совпадают с элементом, на базе его языка. Например, в HTML [HTML40] язык определяется комбинацией атрибута "lang", элемента META и, возможно, информацией из протокола (такой как в "шапках" HTTP). XML использует атрибут, называемый XML:LANG, и могут быть также и другие методы определения языка, зависящие от языковой специфики.

Псевдокласс :lang(C)' совпадает, если документ написан на языке C. Здесь C - это код языка, как специфицировано в HTML 4.0 [HTML40] и RFC 1766 [RFC1766] . Он совпадает тем же способом, что и для оператора '|='.

Следующие правила устанавливают знаки кавычек для документа HTML на французском или немецком языке:

HTML:lang(fr) { quotes: '« ' ' »' } HTML:lang(de) { quotes: '»' '«' '\2039' '\203A' } :lang(fr) > Q { quotes: '« ' ' »' } :lang(de) > Q { quotes: '»' '«' '\2039' '\203A' }

Вторая пара правил в действительности устанавливает свойство 'quotes' элементов Q в соответствии с языком его предка.

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

Псевдоэлемент :first-line применяет специальный стиль к первой форматированной строке параграфа. К примеру:

P:first-line { text-transform: uppercase }

Это правило говорит: "Перевести буквы первой строки каждого параграфа в верхний регистр". Однако селектор "P:first-line" не совпадёт ни с каким реальным элементом HTML. Он совпадёт с псевдоэлементом, который соответствующие ПА будут вставлять в начале каждого параграфа.

Заметьте, что длина первой строки зависит от нескольких факторов, включая ширину страницы, размер шрифта и т.д. Таким образом, обычный параграф HTML:

<P>This is a somewhat long HTML paragraph that will be broken into several lines. The first line will be identified by a fictional tag sequence. The other lines will be treated as ordinary lines in the paragraph.</P>

строки которого могут быть разбиты так:

THIS IS A SOMEWHAT LONG HTML PARAGRAPH THAT will be broken into several lines. The first line will be identified by a fictional tag sequence. The other lines will be treated as ordinary lines in the paragraph.

может быть "переписан" ПАгентами с включением последовательности фиктивных тэгов для :first-line. Эта фиктивная последовательность тэгов поможет продемонстрировать, как наследуются свойства:

<P><P:first-line> This is a somewhat long HTML paragraph that will </P:first-line> be broken into several lines. The first line will be identified by a fictional tag sequence. The other lines will be treated as ordinary lines in the paragraph.</P>

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

<P><SPAN class="test"> This is a somewhat long HTML paragraph that will be broken into several lines.</SPAN> The first line will be identified by a fictional tag sequence. The other lines will be treated as ordinary lines in the paragraph.</P>

ПА сможет сгенерировать соответствующие начальный и конечный тэги для SPAN при вставке последовательности фиктивных тэгов для :first-line.

<P><P:first-line><SPAN class="test"> This is a somewhat long HTML paragraph that will </SPAN></P:first-line><SPAN class="test"> be broken into several lines.</SPAN> The first line will be identified by a fictional tag sequence. The other lines will be treated as ordinary lines in the paragraph.</P>

Псевдоэлемент :first-line может быть присоединён только к элементу уровня блока.

Псевдоэлемент :first-line подобен инлайн-элементу, но с некоторыми ограничениями. К псевдоэлементу :first-line применяются только следующие свойства : свойства шрифта, свойства цвета, свойства фона, 'word-spacing', 'letter-spacing', 'text-decoration', 'vertical-align', 'text-transform', 'line-height', 'text-shadow' и 'clear'.

Псевдоэлемент :first-letter можно использовать для "начальных заглавных" и "зависающих заглавных", которые являются распространёнными типографскими эффектами. Этот тип начальных букв похож на инлайн-элемент, если его свойство 'float' - 'none', иначе он похож на всплывающий элемент.

Вот свойства, применимые к псевдоэлементу :first-letter: свойства шрифта, свойства цвета, свойства фона, 'text-decoration', 'vertical-align' (только если 'float' установлен в 'none'), 'text-transform', 'line-height', свойства полей, свойства заполнения, свойства рамок, 'float', 'text-shadow' и 'clear'.

Следующий CSS2 сделает начальную заглавную зависающую букву, захватывающую две строки:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Drop cap initial letter</TITLE> <STYLE type="text/css"> P { font-size: 12pt; line-height: 12pt } P:first-letter { font-size: 200%; font-style: italic; font-weight: bold; float: left } SPAN { text-transform: uppercase } </STYLE> </HEAD> <BODY> <P><SPAN>The first</SPAN> few words of an article in The Economist.</P> </BODY> </HTML>

Этот пример может быть сформатирован так:

[D]

Последовательность фиктивных тэгов такова:

<P> <SPAN> <P:first-letter> T </P:first-letter>he first </SPAN> few words of an article in the Economist. </P>

Обратите внимание, что тэги псевдоэлемента :first-letter примыкают к содержимому (т.е. к начальному символу), поскольку начальный тэг псевдоэлемента :first-line вставлен справа после начального тэга элемента, к которому он присоединён.

Чтобы выполнить форматирование традиционных зависающих заглавных букв, ПА могут выровнять размеры шрифта, например, по базовой линии. Также и контуры глифов могут быть приняты в расчёт при форматировании.

Пунктуация (т.е. символы, определённые в Unicode [UNICODE] в классах пунктуации "open" (Ps), "close" (Pe) и "other" (Po)), которая предшествует первой букве, должна включаться, как в этом примере:

[D]

Псевдоэлемент :first-letter совпадает только с частью элементов уровня блока.

В некоторых языках могут быть специфические правила рассмотрения определённых сочетаний букв. В датском языке, например, если комбинация "ij" появляется в начале слова, обе буквы должны рассматриваться псевдоэлементом :first-letter.

Следующий пример иллюстрирует, как может действовать перекрывание псевдоэлементов. Первые буквы каждого элемента P будут зелёными и размером '24pt'. Остаток первой форматированной строки будет 'blue', а остаток параграфа - 'red'.

P { color: red; font-size: 12pt } P:first-letter { color: green; font-size: 200% } P:first-line { color: blue } <P>Какой-нибудь текст не менее двух строк.</P>

Если предположить, что разрыв строки появится перед словом "не", последовательность фиктивных тэгов для этого фрагмента может быть такой:

<P> <P:first-line> <P:first-letter> К </P:first-letter>акой-нибудь текст </P:first-line> не менее двух строк. </P>

Заметьте, что элемент :first-letter находится внутри элемента :first-line. Свойства, установленные в :first-line, наследуются в :first-letter, но переопределяются, если то же самое свойство установлено в :first-letter.

Псевдоэлементы ':before' и ':after' можно использовать для вставки генерируемого содержимого до или после содержимого элемента. Они разъясняются в разделе генерируемый текст.

H1:before {content: counter(chapno, upper-roman) ". "}

Если псевдоэлементы :first-letter и :first-line сочетаются с :before и :after, то они применяются к первой букве или строке элемента, включая вставленный текст.

P.special:before {content: "Special! "} P.special:first-letter {color: #ffd800} Это выведет "S" в слове "Special!" золотом.

Лекция 6. Установка значений свойств. Каскадирование и Наследование

Описываются механизмы присвоения значений элементам, наследования значения потомками, импорт стилевых правил и порядок каскадирования.

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

Конечное значение свойства является результатом трёхступенчатого процесса вычисления: значение определяется по спецификации ("специфицированное значение"), затем, если необходимо, выводится абсолютное значение ("вычисленное значение") и наконец - трансформируется в соответствии с ограничениями локальной среды ("реальное значение").

ПА обязаны сначала назначить свойству специфицированное значение на основе следующих механизмов (по приоритету):

1Если каскад даёт значение, использовать его.

2Иначе, если свойство унаследовано, использовать значение элемента-предка, обычно - вычисленное значение.

3Иначе, использовать начальное значение свойства. Начальное значение каждого свойства указано в определении свойства.

Не имея предков, корневой элемент дерева документа не может использовать значения, унаследованные от элемента-предка; в этом случае используется, если необходимо, начальное значение.

Специфицированные значения могут быть абсолютными (т.е. не специфицированными относительно других значений: 'red' или '2mm') или относительными (т.е. специфицированными относительно других значений: 'auto', '2em', '12%'). Для абсолютных значений не требуется никаких вычислений, чтобы найти вычисленное значение.

Относительные значения, с другой стороны, обязаны быть трансформированы в вычисленные значения: процентные рассчитываются относительно данного значения-ссылки (каждое свойство определяет соответствующее значение), значения с указанием единиц измерения (em, ex, px) должны быть сделаны абсолютными путём применения подходящих по размеру шрифтов или в пикселах, значения 'auto' должны высчитываться по формулам, данным для каждого свойства, ключевые слова ('smaller', 'bolder', 'inherit') должны быть замещены в соответствии со своими определениями.

В большинстве случаев элементы наследуют вычисленные значения. Однако есть некоторые свойства, чьи специфицированные значения могут наследоваться (например, числовое значение свойства 'line-height'). В тех случаях , когда дочерние элементы не наследуют вычисленные значения, это описывается в определении свойства.

Вычисленное значение в принципе готово для использования, но ПА могут не иметь возможности использовать такое значение в имеющемся окружении. Например, ПА могут иметь возможность представлять рамки лишь размером в целое число пикселов и, следовательно, должны сделать приближение до вычисленной ширины. Реальное значение - это вычисленное значение после выполнения некоторого приближения.

Некоторые значения наследуются потомками элемента в дереве документа. Каждое свойство определяет, наследуется оно или нет.

Предположим, имеется элемент H1 с выделенным элементом (EM) внутри:

<H1>The headline <EM>is</EM> important! </H1>

Если цвет элементу EM не назначен, выделенное "is" будет наследовать цвет элемента-предка, и, поскольку H1 имеет голубой цвет, элемент EM будет, соответственно, голубым.

Чтобы установить свойство стиля "по умолчанию" в документе, авторы могут установить это свойство в корне дерева документа. В HTML, например, эту функцию могут выполнить элементы HTML или BODY. Заметьте, что это будет работать, даже если автор опустит тэг BODY в тексте HTML, поскольку разборщик HTML вставит отсутствующие тэги.

Например, поскольку свойство 'color' наследуется, все потомки элемента BODY будут наследовать цвет 'black':

BODY { color: black; }

Специфицированные процентные значения не наследуются, а вычисленные значения - наследуются.

В данной таблице:

BODY { font-size: 10pt } H1 { font-size: 120% }

и в этом фрагменте документа:

<BODY> <H1>A <EM>large</EM> heading</H1> </BODY>

свойство 'font-size' элемента H1 будет иметь вычисленное значение'12pt' (120% от 10pt, значения-предка). Поскольку значение свойства 'font-size' наследуется, элемент EM также получит вычисленное значение '12pt'. Если ПА не имеет доступного шрифта в 12pt, реальное значение 'font-size' и для H1, и для EM может быть, например, '11pt'.

Каждое свойство может иметь специфицированное значение 'inherit', которое означает, что для данного элемента свойство принимает то же самое вычисленное значение, что и свойство элемента-предка. Наследуемое значение, которое как правило используется только как возвращаемое значение, может быть усилено путём явной установки 'inherit'.

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

BODY { color: black !important; background: white !important; } * { color: inherit !important; background: transparent; }

Правило '@import' даёт пользователям возможность импортировать правила стиля из других таблиц стилей. Любое правило @import обязано предшествовать всем наборам правил в таблице стилей. После ключевого слова '@import' обязан следовать URI подключаемой таблицы стилей. Допустима также строка; она будет интерпретироваться так, как будто имеет вокруг себя url(...).

Следующие строки эквивалентны по значению и обе иллюстрируют синтаксис '@import' (одно с "url()", а другое - с простой строкой):

@import "mystyle.css"; @import url("mystyle.css");

Поскольку ПА могут исключать запрос ресурсов неподдерживаемых типов носителя, авторы могут специфицировать медиа-зависимые правила @import. Эти условные @import специфицируют список разделённых запятыми типов носителя после URI.

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

@import url("fineprint.css") print; @import url("bluish.css") projection, tv;

При отсутствии любых типов носителя, импорт является безусловным. Спецификация 'all' для носителя имеет тот же эффект.

Таблицы стилей могут иметь три независимых источника: автор, пользователь и ПА.

[x]. Автор. Специфицирует таблицы стилей для документа-источника в соответствии с соглашениями о языке документа. К примеру, в HTML таблицы стилей могут быть включены в документ или иметь внешнюю связь.

[x]. Пользователь. Может иметь возможность специфицировать стилевую информацию для определённого документа. Например, пользователь может специфицировать файл, содержащий таблицу стилей, или ПА может предоставить интерфейс, генерирующий пользовательскую таблицу стилей (или вести себя так, как если бы предоставлял).

[x].

Пользовательский агент. Соответствующие ПА обязаны применять таблицу стилей по умолчанию (или вести себя так, как если бы применяли) до того, как применять к документу все другие таблицы стилей. Таблицы стилей по умолчанию в ПАгенте должны представить элементы языка документа теми способами, которые удовлетворяют общим ожиданиям для языка документа (например, для визуальных браузеров, элемент EM в HTML представляется шрифтом italic). См. "Образец таблицы стилей HTML 4.0" - рекомендуемую таблицу стилей по умолчанию для документов HTML 4.0.

Учтите, что таблица стилей по умолчанию может быть изменена, если системные настройки изменены пользователем (например, системные цвета). Однако, из-за ограничений конкретной реализации ПА, может оказаться невозможным изменить значения в таблице стилей по умолчанию.

Области видимости таблиц стилей из этих трёх источников будут перекрываться и взаимодействовать в соответствии с каскадом.

Каскад CSS назначает вес каждому правилу стиля. Если применяются несколько правил, одно, имеющее больший вес, будет иметь приоритет.

По умолчанию правила авторской таблицы стилей имеют больший вес, чем правила таблицы стилей пользователя. Преимущество зарезервировано, однако, для правил "!important". Все правила пользователя и автора имеют больший вес, чем правила таблицы стилей по умолчанию в ПА.

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

Чтобы найти значение для комбинации элемент/свойство, ПА обязаны применять следующий порядок сортировки:

1Найти все объявления, применяемые в запросе к элементу и свойству, для целевого типа носителя. Объявления применяются, если ассоциированный селектор подбирает элемент в запросе.

2Сначала объявления сортируются по весу и источнику: для нормальных объявлений - авторские таблицы стилей переопределяют пользовательские, которые, в свою очередь, переопределяют таблицу стилей по умолчанию. Для объявлений "!important" - пользовательские таблицы стилей переопределяют авторские таблицы, которые, в свою очередь, переопределяют таблицу стилей по умолчанию. Объявления "!important" переопределяют нормальные объявления. Импортированная таблица стилей имеет тот же источник, что и таблица стилей, импортировавшая её.

3Вторая сортировка производится по специфике селектора: более специфические селекторы переопределяют более общие. Псевдоэлементы и псевдоклассы обсчитываются как нормальные элементы и классы соответственно.

4Наконец, идёт сортировка по специфицированному порядку: если два правила имеют одинаковые вес, источник и специфику, выбирается специфицированное позже. Правила в импортируемых таблицах стилей рассматриваются перед любыми правилами имеющейся таблицы стилей.

Независимо от установок "!important" индивидуальных объявлений, эта стратегия даёт авторским таблицам стилей больший вес, чем таблицам читателя. Это тем более важно, поскольку ПА предоставляют пользователю возможность отключить влияние определённых таблиц стилей, например, в выпадающих меню.

CSS пытается создать баланс между авторскими и пользовательскими таблицами стилей. По умолчанию правила авторской таблицы стилей переопределяют правила пользовательской таблицы (см. каскадное правило 3).

Однако, для баланса, объявление "!important" (ключевое слово "!" и "important" следуют за объявлением) имеет преимущество перед нормальной декларацией. И авторские, и пользовательские таблицы стилей могут содержать объявление "!important", и пользовательские правила "!important" переопределяют авторские "!important". Это свойство CSS улучшает доступность документов путём предоставления пользователям со специфическими требованиями (крупные шрифты, комбинации цветов и т.п.) контроля над представлением.

Примечание. Это семантическое изменение в сравнении с CSS1. В CSS1 авторские правила "!important" имели приоритет перед пользовательскими правилами "!important".

Объявление сокращённого свойства (например, 'background') как "!important" эквивалентно объявлению всех его подсвойств как "!important".

Первое правило пользовательской таблицы стилей в данном примере содержит объявление "!important", которое переопределяет соответствующее объявление в авторской таблице стилей. Второе объявление также будет иметь приоритет как помеченное "!important".

Однако третье правило пользовательской таблицы стилей - не "!important" - и поэтому будет отброшено в пользу второго правила авторской таблицы стилей (которое устанавливает стиль сокращённого свойства). Таким образом, третье авторское правило будет отброшено в пользу второго авторского правила, поскольку второе правило - "!important". Это показывает, что объявления "!important" имеют действие также и внутри авторских таблиц стилей.

/* Из пользовательской таблицы стилей */ P { text-indent: 1em ! important } P { font-style: italic ! important } P { font-size: 18pt } /* Из авторской таблицы стилей */ P { text-indent: 1.5em !important } P { font: 12pt sans-serif !important } P { font-size: 24pt }

Специфика селектора высчитывается так:

[x]. вычисляется количество атрибутов ID в селекторе (= a)

[x]. вычисляется количество других атрибутов и псевдоклассов в селекторе (= b)

[x]. вычисляется количество имён элементов в селекторе (= c)

[x]. игнорируются псевдоэлементы.

Конкатенация трёх чисел a-b-c (в числовой системе с большой базой) дают специфику.

* {} /* a=0 b=0 c=0 -> специфика = 0 */ LI {} /* a=0 b=0 c=1 -> специфика = 1 */ UL LI {} /* a=0 b=0 c=2 -> специфика = 2 */ UL OL+LI {} /* a=0 b=0 c=3 -> специфика = 3 */ H1 + *[REL=up]{} /* a=0 b=1 c=1 -> специфика = 11 */ UL OL LI.red {} /* a=0 b=1 c=3 -> специфика = 13 */ LI.red.level {} /* a=0 b=2 c=1 -> специфика = 21 */ #x34y {} /* a=1 b=0 c=0 -> специфика = 100 */

В HTML значения атрибута "style" элемента являются правилами таблицы стилей. Эти правила не имеют селекторов, но для целей шага 3 каскадного алгоритма они рассматриваются как имеющие селектор ID (специфика: a=1, b=0, c=0). Для целей шага 4 они рассматриваются после всех других правил.

<HEAD> <STYLE type="text/css"> #x97z { color: blue } </STYLE> </HEAD> <BODY> <P ID=x97z style="color: red"> </BODY>

В данном примере цвет элемента P будет красным. Хотя специфика - одна и та же для обоих объявлений, объявление атрибута "style" переопределит объявление в элементе STYLE в соответствии с каскадным правилом 4.

ПА могут предпочесть подсказки (hints) из других источников, а не из таблиц стилей, например, элемент FONT или атрибут "align" в HTML. Если это так, не-CSS подсказки обязаны быть переведены в соответствующие правила CSS со спецификой=0. Принимается, что правила находятся в начале авторской таблицы стилей и могут быть переопределены последующими правилами таблиц стилей.

Примечание. В фазе переноса эта политика облегчит сосуществование стилистических атрибутов с таблицами стилей.

Примечание. В CSS1 не-CSS подсказки получали специфику=1, а не 0. Это изменение сделано из-за введения универсального селектора, имеющего специфику 0.

Лекция 7. Типы носителя

Даются спецификации таблиц стилей, зависимых от типа носителя и описания этих типов.

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

Некоторые свойства CSS созданы для конкретных носителей (например, свойство 'cue-before' - для звуковых пользовательских агентов (ПА)). Иногда, однако, таблицы стилей для различных носителей могут использовать одно и то же свойство, но при этом требуют для него различных значений. Например, свойство 'font-size' используется и для экрана, и для носителя печати. Однако эти два носителя достаточно различны, чтобы требовать различных значений для общего свойства; документ обычно требует для экрана более крупный шрифт, чем для печати. Опыт показывает также, что шрифты sans-serif лучше читаются на экране, а шрифты с засечками (serif) лучше читаются на бумаге. Исходя из этих соображений, необходимо указывать, что таблица стилей - или раздел таблицы стилей - применяется к носителю определённого типа.

В настоящее время есть два способа специфицировать зависимость от типа носителя в таблицах стилей:

[x].

Специфицировать целевой носитель из таблицы стилей с помощью at-правил @media или @import.

@import url("loudvoice.css") aural; @media print { /* здесь идёт таблица стилей для печати */ }

[x].

Специфицировать целевой носитель в языке документа. Например, в HTML 4.0 ( [HTML40] ) атрибут "media" элемента LINK специфицирует целевой носитель для внешней таблицы стилей:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Link to a target medium</TITLE> <LINK rel="stylesheet" type="text/css" media="print, handheld" href="foo.css"> </HEAD> <BODY> <P>Тело документа... </BODY> </HTML>

Правило @import определено в главе о каскадах.

Правило @media специфицирует целевые типы носителя (разделённые запятыми) в наборе правил (ограниченных фигурными скобками). Конструкция @media допускает присутствие правил таблиц стилей для различных носителей в одной таблице стилей:

@media print { BODY { font-size: 10pt } } @media screen { BODY { font-size: 12pt } } @media screen, print { BODY { line-height: 1.2 } }

Тип носителя CSS именует набор свойств CSS. ПА, заявляющий о поддержке типа носителя по имени, обязан поддерживать все свойства, применимые к данному типу носителя.

Имена для типов носителя в CSS отражают целевое устройство, на которое соответствующие свойства оказывают действие. В следующем списке типов носителя CSS описания в скобках не являются нормативными. Они лишь дают представление о том, к каким устройствам относится данный тип носителя.

все

Для всех устройств.

звуковой

Предполагается для использования в речевых синтезаторах. См. детали в разделе звуковые таблицы стилей.

брайль-устройство

Для брайль-устройств.

брайль-принтер

Для страничных брайль-принтеров.

портативный

Для портативных устройств (обычно с маленьким экраном, монохромных, с ограниченной пропускной способностью).

печатный

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

проектор

Предполагается для проецируемых презентаций, например, проекторов или печати на прозрачные носители. Информацию о вопросах форматирования, специфичных для страничных носителей, см. в разделе Страничные носители.

экран

Прежде всего - для компьютерного цветного экрана.

tty

Для носителей, использующих решётку символов фиксированного размера, таких как телетайп, терминал или портативные устройства с ограниченными возможностями дисплея. Авторы не должны использовать пикселы с типом носителя "tty".

tv

Для устройств типа телевизора (низкое разрешение, цвет, ограниченная возможность прокрутки экрана, звуковые возможности).

Названия типов носителя нечувствительны к регистру.

Из-за быстрых изменений технологий, CSS2 не специфицирует определительный список типов носителя, которые могут быть значениями для @media.

Примечание. Будущие версии CSS могут расширить этот список. Авторы не должны ссылаться на названия типов носителя, ещё не определённых в спецификации CSS.

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

CSS2 определяет следующие группы носителей:

[x]. непрерывные или страничные. "Оба" означает, что свойство применяется к обеим группам носителей.

[x]. визуальные, звуковые или осязательные.

[x]. решётка (для устройств с решётками символов) или растровые. "Оба" означает, что свойство применяется к обеим группам носителей.

[x]. интерактивные (для устройств, взаимодействующих с пользователем или статичные (для не взаимодействующих). "Оба" означает, что свойство применяется к носителям обеих групп.

[x]. все (включает все типы носителей).

В следующей таблице показаны соотношения между группами носителей и типами носителя:

Соотношения между группами носителя и типами носителя
Типы носителяГруппы носителей
непрерывный / страничныйвизуальный / звуковой / осязательныйрешётка / растровыйинтерактивный / статичный
звуковойнепрерывныйзвуковойN/Aоба
брайль-устройствонепрерывныйосязательныйрешёткаоба
брайль-принтерстраничныйосязательныйрешёткаоба
портативныйобавизуальныйобаоба
печатныйстраничныйвизуальныйрастровыйстатичный
проекторстраничныйвизуальныйрастровыйстатичный
экраннепрерывныйвизуальныйрастровыйоба
ttyнепрерывныйвизуальныйрешёткаоба
tvобавизуальный, звуковойрастровыйоба

Лекция 8. Модель бокса

Описывается модель бокса, свойства полей бокса, заполнения бокса и его рамок.

Модель бокса CSS описывает прямоугольный бокс, который генерируется для элементов дерева документа и располагается в соответствии с моделью визуального форматирования. Страничный бокс это особый вид бокса, детально описанный в разделе страничный носитель.

Каждый бокс имеет область содержимого(например, текст, изображение и т.п.) и необязательное окружение - области заполнения, рамки и поля; размер каждой области специфицируется свойствами, определёнными ниже. На диаграмме показано соотношение этих областей и терминология, используемая для ссылок на разные участки поля/margin, рамки/border и заполнения/padding:

[D]

Поле, рамка и заполнение могут быть разорваны в левом, правом, верхнем или нижнем сегментах (например, на диаграмме, "LM" в левом поле, "RP" в правом заполнении, "TB" в верху рамки и т.д.).

Периметр каждой из четырёх областей (содержимого, заполнения, рамки и поля) называется "край", соответственно - каждый бокс имеет четыре края:

content edge/край содержимого или inner edge/внутренний край

Край содержимого окружает отображаемое содержимое.

padding edge/край заполнения

Окружает заполнение бокса . Если заполнение имеет ширину 0, край заполнения - это то же, что и край содержимого. Край заполнения бокса определяет края содержащего блока, установленного боксом.

border edge/край рамки

Окружает рамку бокса . Если рамка имеет ширину 0, то край рамки - это то же, что и край заполнения.

margin edge/край поля или outer edge/внешний край

Окружает поле бокса. Если поле имеет ширину 0, то край поля - тот же, что и край рамки.

Каждый край может быть разорван слева, справа, вверху и внизу.

Размеры области содержимого бокса - ширина содержимого и высота содержимого - зависят от нескольких факторов: имеет ли элемент, генерирующий бокс, установленные свойства 'width' или 'height', содержит ли бокс текст или другие боксы, является ли бокс таблицей и т.д. Ширина и высота бокса обсуждаются в главе некоторые детали модели визуального форматирования.

Ширина бокса выводится как сумма левого и правого поля, рамки, заполнения и ширины содержимого. Высота выводится как сумма верхнего и нижнего поля, рамки, заполнения и высоты содержимого.

Стиль фона различных областей бокса определяется так:

[x]. Область содержимого: свойство 'background' генерирующего элемента.

[x]. Область заполнения: свойство 'background' генерирующего элемента.

[x]. Область рамки: свойства рамки генерирующего элемента.

[x]. Область поля: поля всегда прозрачны.

Этот пример документа HTML показывает, как поля, рамки и заполнение взаимодействуют:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Пример полей, заполнения и рамок</TITLE> <STYLE type="text/css"> UL { background: green; margin: 12px 12px 12px 12px; padding: 3px 3px 3px 3px; /* Рамки не установлены */ } LI { color: black; /* цвет текста - чёрный */ background: gray; /* Содержимое, заполнение будет серым */ margin: 12px 12px 12px 12px; padding: 12px 0px 12px 12px; /* Заметьте, что заполнение справа 0px */ list-style: none /* перед элементом списка нет никаких глифов */ /* Рамки не установлены */ } LI.withborder { border-style: dashed; border-width: medium; /* устанавливает ширину рамок всех сторон */ border-color: black; } </STYLE> </HEAD> <BODY> <UL> <LI>Первый элемент списка <LI class="withborder">Второй элемент списка длиннее, чтобы показать перенос. </UL> </BODY> </HTML>

и даёт дерево документа с (помимо других соотношений) элементом UL, в котором есть два дочерних LI.

Первая диаграмма иллюстрирует, что этот пример даст в результате. Вторая иллюстрирует взаимоотношения между полями, рамками и заполнением элементов UL и LI.

[D]

Обратите внимание, что:

[x]. Ширина содержимого каждого бокса LI вычисляется сверху вниз; содержащий блок для каждого бокса LI устанавливается элементом UL.

[x]. Высота каждого бокса LI задаётся высотой содержимого плюс верхнее и нижнее заполнение, рамки и поля. Обратите внимание, что горизонтальные поля между боксами LI сжаты.

[x]. Правое заполнение боксов LI было установлено шириной 0 (свойство 'padding'). Результат виден на второй иллюстрации.

[x]. Поля боксов LI прозрачны - поля всегда прозрачны - так что цвет фона (зелёный) заполнения и области содержимого UL просвечивает сквозь него.

[x]. Второй элемент LI специфицирует пунктирную рамку (свойство 'border-style').

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

Свойства, определённые в этом разделе, относятся к типу значений <margin-width>, который может устанавливаться в:

<length>

Специфицирует фиксированную ширину.

<percentage>

Процентное значение высчитывается относительно ширины содержащего блока сгенерированного бокса. Это верно для 'margin-top' и 'margin-bottom' везде, кроме контекста страницы, где процентные значения относятся к высоте бокса страницы.

auto

См. расчёт ширины и полей.

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

'margin-top', 'margin-right', 'margin-bottom', 'margin-left'

Значение: <margin-width> | inherit

Начальное: 0

Применяется: ко всем элементам

Наследуется: нет

Процентное: относительно ширины содержащего блока

Носитель: визуальный

Это свойство устанавливает верхнее, нижнее, правое и левое поля бокса.

H1 { margin-top: 2em }

'margin'

Значение: <margin-width>{1,4} | inherit

Начальное: не определено для сокращённого свойства

Применяется: ко всем элементам

Наследуется: нет

Процентное: относительно ширины содержащего блока

Носитель: визуальный

'margin' - это сокращённое свойство для установки значений 'margin-top', 'margin-right', 'margin-bottom' и 'margin-left' в одном месте в таблице стилей.

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

BODY { margin: 2em } /* все поля установлены в 2em */ BODY { margin: 1em 2em } /* верхнее и нижнее = 1em, правое и левое = 2em */ BODY { margin: 1em 2em 3em } /* верхнее=1em, правое=2em, нижнее=3em, левое=2em */

Последнее правило эквивалентно следующему:

BODY { margin-top: 1em; margin-right: 2em; margin-bottom: 3em; margin-left: 2em; /* копируется из противоположной стороны (из правой) */

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

В CSS2 вертикальные поля никогда не сжимаются.

Горизонтальные поля могут сжиматься между определёнными боксами:

[x]. Два или более смежных горизонтальных поля боксов блока при нормальном расположении сжимаются. Результирующая ширина поля - это максимальная ширина из смежных полей. В случае негативных значений полей, абсолютный максимум негативных смежных полей отсчитывается от максимума позитивных смежных полей. Если нет позитивных полей, абсолютный максимум негативных смежных полей отсчитывается от нуля.

[x]. Вертикальные поля между обтекаемым боксом и любым другим боксом не сжимаются.

[x]. Поля абсолютно и относительно позиционированных боксов не сжимаются.

См. иллюстрацию сжимаемых полей в примере полей, заполнения и рамок.

Свойства обтекания специфицируют ширину области заполнения бокса. Сокращённое свойство 'padding' устанавливает заполнение для всех четырёх сторон, а другие свойства заполнения устанавливают соответствующие стороны.

Свойства, определённые в этом разделе, относятся к типу значений <padding-width>, который может устанавливаться в:

<length>

Специфицирует фиксированную ширину.

<percentage>

Процентное, высчитывается относительно ширины содержащего блока, генерирующего бокс, в том числе и для 'padding-top' и 'padding-bottom'.

В отличие от свойств полей, значения заполнения не могут быть негативными. Как и в свойствах полей, процентные значения свойств заполнения относятся к ширине бокса, сгенерированного содержащим блоком.

'padding-top', 'padding-right', 'padding-bottom', 'padding-left'

Значение: <padding-width> | inherit

Начальное: 0

Применяется: ко всем элементам

Наследуется: нет

Процентное: относительно ширины содержащего блока

Носитель: визуальный

Эти свойства устанавливают верхнее, правое, нижнее и левое заполнение для бокса.

BLOCKQUOTE { padding-top: 0.3em }

'padding'

Значение: <padding-width>{1,4} | inherit

Начальное: не определено для сокращённого свойства

Применяется: ко всем элементам

Наследуется: нет

Процентное: относительно ширины содержащего блока

Носитель: визуальный

Свойство 'padding' - это сокращённое свойство для установки 'padding-top', 'padding-right', 'padding-bottom' и 'padding-left' в одном месте в таблице стилей.

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

Цвет поверхности области заполнения специфицируется через свойство 'background':

H1 { background: white; padding: 1em 2em; }

Вышеприведённый пример специфицирует вертикальное заполнение '1em' ('padding-top' и 'padding-bottom') и горизонтальное заполнение '2em' ('padding-right' и 'padding-left'). Единицы измерения 'em' относительны к размеру шрифта элемента: '1em' эквивалентно размеру используемого шрифта.

Свойства рамки специфицируют ширину, цвет и стиль области рамки бокса. Эти свойства применимы ко всем элементам.

Примечание. Особенно в HTML, ПА могут отображать рамки определённых элементов (например, кнопок, меню и т.п.) иначе, чем у "обычных" элементов.

Свойства ширины рамки специфицируют ширину области рамки. Свойства, определённые в этом разделе, относятся к типу значений <border-width>, который может устанавливаться в:

thin

Тонкая рамка.

medium

Средняя рамка.

thick

Толстая рамка.

<length>

Толщина рамки имеет точное значение. Это значение не может быть негативным.

Интерпретация первых трёх значений зависит от ПА. Следующие соотношения, однако, обязаны выдерживаться:

'thin' <='medium' <= 'thick'.

К тому же эти значения ширины обязаны быть константными в пределах документа.

'border-top-width', 'border-right-width', 'border-bottom-width', 'border-left-width'

Значение: <border-width> | inherit

Начальное: medium

Применяется: ко всем элементам

Наследуется: нет

Процентное: N/A

Носитель: визуальный

Эти свойства устанавливают верхнюю, правую, нижнюю и левую линии рамки для бокса.

'border-width'

Значение: <border-width>{1,4} | inherit

Начальное: см. индивидуальные свойства

Применяется: ко всем элементам

Наследуется: нет

Процентное: N/A

Носитель: визуальный

Это сокращённое свойство для установки 'border-top-width', 'border-right-width', 'border-bottom-width' и 'border-left-width' в одном месте в таблице стилей.

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

Комментарии в данном примере поясняют результаты установки ширины верхней, правой, нижней и левой линий рамки:

H1 { border-width: thin } /* thin thin thin thin */ H1 { border-width: thin thick } /* thin thick thin thick */ H1 { border-width: thin thick medium } /* thin thick medium thick */

Эти свойства специфицируют цвет рамки бокса.

'border-top-color', 'border-right-color', 'border-bottom-color', 'border-left-color'

Значение: <color> | inherit

Начальное: значение свойства 'color'

Применяется: ко всем элементам

Наследуется: нет

Процентное: N/A

Носитель: визуальный

'border-color'

Значение: <color>{1,4} | transparent | inherit

Начальное: см. индивидуальные свойства

Применяется: ко всем элементам

Наследуется: нет

Процентное: N/A

Носитель: визуальный

Свойство 'border-color' устанавливает цвет рамки с четырёх сторон. Значения имеют следующий смысл:

<color>

Специфицирует значение цвета.

transparent

Рамка прозрачна (хотя и может иметь ширину).

Свойство 'border-color' может иметь от одного до четырёх значений, и эти значения устанавливаются для четырёх сторон так же, как и в 'border-width'.

Если цвет рамки элемента не специфицирован в свойстве рамки, ПА обязаны использовать значение свойства 'color' элемента как вычисленное значение цвета рамки.

В этом примере рамка будет сплошной и чёрной:

P { color: black; background: white; border: solid; }

Свойства стиля рамки специфицируют стиль линии рамки бокса (solid, double, dashed и т.д.). Свойства, определённые в этом разделе, относятся к типу значений <border-style>, который может устанавливаться в:

none

Нет рамки. Форсирует вычисленное значение 'border-width' в '0'.

hidden

То же, что и 'none', за исключением разрешения конфликтов рамок для элементов таблицы.

dotted

Рамка из точек.

dashed

Рамка из пунктирных линий.

solid

Рамка из сплошной линии.

double

Двойная сплошная линия. Сумма двух линий и пространства между ними равна значению 'border-width'.

groove

Рамка выглядит как вырезанная в канве.

ridge

Противоположно 'groove': рамка выглядит как выступающая над канвой.

inset

Весь бокс выглядит вдавленным в канву.

outset

Противоположно 'inset': выпуклый бокс.

Все рамки прорисовываются на поверхности фона бокса. Цвет рамок со значениями 'groove', 'ridge', 'inset' и 'outset' зависит от свойства 'color' элемента.

Соответствующие пользовательские агенты (ПА) HTML могут интерпретировать 'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset' и 'outset' как 'solid'.

'border-top-style', 'border-right-style', 'border-bottom-style', 'border-left-style'

Значение: <border-style> | inherit

Начальное: none

Применяется: ко всем элементам

Наследуется: нет

Процентное: N/A

Носитель: визуальный

'border-style'

Значение: <border-style>{1,4} | inherit

Начальное: см. индивидуальные свойства

Применяется: ко всем элементам

Наследуется: нет

Процентное: N/A

Носитель: визуальный

Свойство 'border-style' устанавливает стиль для четырёх сторон рамки. Может иметь от одного до четырёх значений, и значения устанавливаются для разных сторон, как для 'border-width' выше.

#xy34 { border-style: solid dotted }

В этом примере горизонтальные линии рамки будут 'solid', а вертикальные - 'dotted'.

Поскольку начальное значение стиля рамки - 'none', рамка будет видна только после установки значения стиля.

'border-top', 'border-right', 'border-bottom', 'border-left'

Значение: [ <'border-top-width'> || <'border-style'> || <color> ] | inherit

Начальное: см. индивидуальные свойства

Применяется: ко всем элементам

Наследуется: нет

Процентное: N/A

Носитель: визуальный

Это сокращённое свойство для установки ширины, стиля и цвета верхней, правой, нижней и левой сторон рамки.

H1 { border-bottom: thick solid red }

Это правило устанавливает ширину, стиль и цвет рамки после элемента H1. Опущенные значения установлены в свои начальные значения.

Поскольку нижеследующее правило не специфицирует цвет рамки, рамка будет иметь цвет, определённый свойством 'color':

H1 { border-bottom: thick solid }

'border'

Значение: [ <'border-width'> || <'border-style'> || <color> ] | inherit

Начальное: см. индивидуальные свойства

Применяется: ко всем элементам

Наследуется: нет

Процентное: N/A

Носитель: визуальный

Свойство 'border' - это сокращённое свойство для установки одинаковых значений ширины, цвета и стиля для всех четырёх сторон рамки бокса. В отличие от сокращённых свойств 'margin' и 'padding', свойство 'border' не может устанавливать разные значения для четырёх сторон. Для этого придётся использовать одно или более других свойств.

Первое правило эквивалентно установке четырёх последующих значений:

P { border: solid red } P { border-top: solid red; border-right: solid red; border-bottom: solid red; border-left: solid red }

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

BLOCKQUOTE { border-color: red; border-left: double; color: black }

В приведённом примере цвет левой линии рамки - чёрный, а других линий - красный. Это потому, что в 'border-left' установлены ширина, стиль и цвет. Поскольку значение цвета в свойстве 'border-left' не установлено, оно будет взято из свойства 'color'. Фактически свойство 'color', установленное после свойства 'border-left', не имеет к этому никакого отношения.

Лекция 9. Модель визуального форматирования

Описывается модель визуального форматирования: то как пользовательские агенты обрабатывают дерево документа для визуального носителя.

Эта и последующие главы описывают модель визуального форматирования: то как пользовательские агенты (ПА) обрабатывают дерево документа для визуального носителя.

В модели визуального форматирования каждый элемент дерева документа генерирует ноль или более боксов в соответствии с моделью боксов. Структура этих боксов управляется:

[x]. размерами боксов и типом.

[x]. схемой позиционирования (нормальное позиционирование, всплывание и абсолютное).

[x]. взаимоотношениями между элементами в дереве документа.

[x]. внешней информацией (например, размером порта просмотра, внутренними размерами изображений и т.д.).

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

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

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

В CSS2 многие варианты позиционирования и размеры вычисляются относительно кромки прямоугольного бокса, называемого содержащий блок. Обычно генерируемые боксы действуют как содержащие блоки для боксов-потомков; мы говорим, что бокс "устанавливает" содержащий блок для своих потомков. Фраза "блок, содержащий бокс" означает "блок, в котором бокс находится", а не блок, генерирующий бокс.

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

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

Ширина начального содержащего блока может быть специфицирована свойством 'width' корневого элемента. Если это свойство имеет значение 'auto', ПА предоставляет начальное значение ширины (например, ПА использует текущую ширину порта просмотра).

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

Начальный содержащий блок не может быть позиционирован или всплывать (т.е. ПА игнорируют свойства 'position' и 'float корневого элемента).

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

Последующие разделы описывают типы боксов, которые могут генерироваться в CSS2. Тип бокса воздействует отчасти на его (бокса) поведение в модели визуального форматирования. Свойство 'display', описанное ниже, специфицирует тип бокса.

Элементы уровня блока это элементы документа-источника, визуально отформатированные как блоки (например, параграфы). Различные значения свойства 'display' создают элемент уровня блока: 'block', 'list-item', 'compact', 'run-in' (не всегда; см. компактные и втягивающиеся боксы) и 'table'.

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

Некоторые элементы уровня блока генерируют дополнительные боксы за пределами основного бокса: элементы 'list-item' и элементы с маркёрами. Эти дополнительные боксы размещаются относительно основного бокса.

В этом документе:

<DIV> Some text <P>More text</P> </DIV>

(и приняв, что и DIV, и P оба имеют 'display: block'), DIV имеет содержимое и инлайн-уровня, и уровня блока. Чтобы легче было определить форматирование, мы примем, что вокруг "Some text" имеется анонимный бокс блока.

На диаграмме изображены три бокса, один из которых анонимный, в примере - верхний.

На диаграмме изображены три бокса, один из которых анонимный, в примере - верхний.

[D]

Другими словами: если бокс блока (такой как сгенерированный в DIV выше) имеет внутри себя другой бокс блока (как P), тогда мы заставляем его иметь боксы блока только внутри себя, перенеся любые инлайн-боксы в анонимный бокс блока.

Эта модель будет применена в следующем примере, если данные правила:

/* Примечание: ПАгенты HTML могут не рассматривать эти правила */ BODY { display: inline } P { display: block }

будут использованы в данном документе HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HEAD> <TITLE>Анонимный текст, прерываемый блоком. </TITLE> </HEAD> <BODY> Анонимный текст до P. <P>Содержимое элемента P. </P> Анонимный текст после P. </BODY>

Элемент BODY содержит отрывок (C1) анонимного текста, после которого идут элемент уровня блока и второй отрывок анонимного текста (C2). В результате получим анонимный бокс блока> для BODY, содержащий анонимный бокс блока вокруг C1, бокс блока P и второй анонимный бокс блока вокруг C2.

Свойства анонимных боксов наследуются из содержащего неанонимного бокса (в примере: из DIV). Ненаследуемые свойства имеют свои начальные значения. Например, шрифт анонимного бокса наследуется из DIV, но поля имеют значения 0.

Инлайн-элементы это те элементы документа-источника, которые не образуют новых блоков содержимого; содержимое определяется в строке (на месте) (например, выделенные участки текста внутри параграфа, инлайн-изображения и т.п.). Различные значения свойства 'display' делают элемент инлайн: 'inline', 'inline-table', 'compact' и 'run-in' (не всегда; см. компактные и втягивающиеся боксы). Элементы инлайн-уровня (встроенные) генерируют инлайн-боксы.

Инлайн-боксы могут принимать участие в различных контекстах форматирования:

[x]. Внутри бокса блока инлайн-бокс участвует в инлайн-контексте форматирования.

[x]. Инлайн-бокс compact расположен в поле бокса блока.

[x]. Боксы-маркёры имеют позицию также вне бокса блока.

В таком документе:

<p>Некоторый <em>выделенный</em> текст.</P>

элемент P генерирует бокс блока с несколькими инлайн-боксами внутри. Бокс для "выделенный" - это инлайн-бокс, сгенерированный инлайн-элементом (EM), но другие боксы ("Некоторый" и "текст") являются инлайн-боксами, сгенерированными элементом уровня блока (P). Последние называются анонимными инлайн-боксами, поскольку они не имеют ассоциированного инлайн-элемента.

Такие анонимные инлайн-боксы наследуют наследуемые свойства своего родительского бокса уровня блока. Ненаследуемые свойства получают свои начальные значения. В примере - цвет анонимных начальных боксов наследуется из P, но фон остаётся прозрачным.

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

Имеются и другие типы анонимных боксов, возникающие при форматировании таблиц.

Бокс compact ведёт себя так:

[x]. Если бокс блока (не поплавок и не позиционированный абсолютно) следует после бокса compact, то compact-бокс форматируется как однострочный инлайн-бокс. Ширина результирующего бокса сравнивается с одним из полей бокса блока. Выбор левого или правого поля определяется в 'direction', специфицируемом для элемента, производящего содержащий блок для compact-бокса и следующего бокса. Если ширина инлайн-бокса меньше, чем/равна ширине поля, то инлайн-бокс позиционируется в поле, как описано далее.

[x]. В ином случае compact-бокс становится боксом блока.

Compact-бокс позиционируется в поле следующим образом: он находится вне (слева или справа от) первого cтрочного бокса блока, но влияет на расчёт высоты cтрочного бокса. Свойство 'vertical-align' compact-бокса определяет вертикальную позицию compact-бокса относительно cтрочного бокса. Позиция compact-бокса по горизонтали - всегда в поле бокса блока.

Элемент, который не может быть отформатирован в пределах одной строчки, не может размещаться в поле последующего блока. Например, элемент 'compact' в HTML, который содержит элемент BR, всегда будет форматироваться как бокс блока (принимая для BR стиль по умолчанию, когда вставляется новая строка). Для размещения многострочного текста в поле часто больше подойдёт свойство 'float.

Следующий пример иллюстрирует compact-бокс:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>A compact box example</TITLE> <STYLE type="text/css"> DT { display: compact } DD { margin-left: 4em } </STYLE> </HEAD> <BODY> <DL> <DT>Short <DD><P>Description goes here. <DT>too long for the margin <DD><P>Description goes here. </DL> </BODY> </HTML>

Этот пример может выглядеть после форматирования так:

short Description goes here too long for the margin Description goes here

Свойство 'text-align' можно использовать для выравнивания compact-элемента внутри поля: у левого края поля ('left'), у правого края поля ('right') или по центру поля ('center'). Значение 'justify' не применяется и обрабатывается или как 'left', или как 'right', в зависимости от 'direction'/направления элемента блока, в поле которого форматируется compact-элемент ('left', если направление - 'ltr', 'right', если направление 'rtl').

Информацию о том, как compact-боксы взаимодействуют с генерируемым содержимым, см. в разделе генерируемое содержимое.

Бокс run-in ведёт себя так:

[x]. Если бокс блока (не поплавок и не позиционированный абсолютно) следует за боксом run-in, то бокс run-in становится первым инлайн-боксом в боксе блока.

[x]. Иначе бокс run-in становится боксом блока.

Бокс 'run-in' используется для run-in-заголовков, как в этом примере:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Пример бокса run-in</TITLE> <STYLE type="text/css"> H3 { display: run-in } </STYLE> </HEAD> <BODY> <H3>Заголовок run-in. </H3> <P>И параграф текста, следующий за ним. </BODY> </HTML>

Этот пример может форматироваться так:

Заголовок run-in. И параграф текста, следующий за ним.

Свойства run-in-элемента наследуются от родителя в дереве-источнике, а не от бокса блока, частью которого он визуально является.

Информацию о том, как compact-боксы взаимодействуют с генерируемым содержимым, см. в разделе Генерируемое содержимое.

'display'

Значение: inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit

Начальное: inline

Применяется: все элементы

Наследуется: нет

Процентное: N/A

Носитель: все

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

block

Элемент генерирует основной бокс блока.

inline

Элемент генерирует один или более инлайн-боксов.

list-item

Элемент (например, LI в HTML) генерирует основной бокс блока и инлайн-бокс элемента списка. О списках и примерах форматирования списков см. раздел списки.

marker

Объявляет генерируемое содержимое до или после бокса-маркёра. Это значение должно использоваться только вместе с псевдоэлементами :before и :after, присоединёнными к элементам уровня блока. В других случаях это значение интерпретируется как 'inline'. См. также раздел Маркёры.

none

Элемент не генерирует боксы в структуре форматирования (т.е. элемент не влияет на вид документа). Элементы-потомки не генерируют никаких боксов; это поведение не может быть переопределено установкой у потомков свойства 'display'.

Обратите внимание, что отображение 'none' не создаёт невидимый бокс; боксы вообще не создаются. CSS содержит механизмы, делающие возможным генерацию элементом бокса в структуре форматирования, который влияет на структуру форматирования, но невидим. См. детали в разделе Видимость.

run-in и compact

Эти значения создают боксы блока и инлайн, в зависимости от контекста. Свойства, применяемые к боксам run-in и compact, базируются на окончательном статусе боксов (уровень инлайн или блока). Например, свойство 'white-space' применяется только тогда, когда бокс получает уровень блока.

table, inline-table, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell и table-caption

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

Заметьте, что, хотя начальное значение 'display' - 'inline', правила в таблицах по умолчанию в ПА могут переопределить это значение. См. пример таблицы стилей для HTML 4.0 в приложении.

Несколько примеров свойства 'display':

P { display: block } EM { display: inline } LI { display: list-item } IMG { display: none } /* Не выводить изображения */

Соответствующие ПА HTML могут игнорировать свойство 'display'.

В CSS2 бокс может находиться в разных слоях в соответствии со схемами позиционирования:

1Normal flow/Нормальное расположение. В CSS2 нормальное расположение включает форматирование блока для боксов блока, инлайн-форматирование для инлайн-боксов, относительное позиционирование боксов блока или инлайн и позиционирование compact и run-in боксов.

2Floats/Поплавки. В модели поплавка бокс сначала накладывается в соответствии с нормальным расположением, затем изымается из расположения и сдвигается влево или вправо, насколько возможно. Содержимое может обтекать по стороне "всплывания" поплавка.

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

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

Свойства 'position' и 'float' определяют, какой из алгоритмов позиционирования CSS2 используется для расчёта позиции бокса.

'position'

Значение: static | relative | absolute | fixed | inherit

Начальное: static

Применяется: ко всем элементам, но не к генерируемому содержимому

Наследуется: нет

Процентное: N/A

Носитель: визуальный

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

static

Бокс является нормальным боксом, расположенным в соответствии с нормальным расположением. Свойства 'left' и 'top' не применяются.

relative

Позиция бокса высчитывается в соответствии с нормальным расположением. Затем бокс смещается относительно нормального расположения. Если бокс В позиционирован относительно, расположение последующего бокса вычисляется так, как если бы бокс В не имел смещения.

absolute

Позиция бокса (и возможные размеры) определяется свойствами 'left', 'right', 'top' и 'bottom'. Эти свойства устанавливают смещение относительно бокса содержащего блока. Абсолютно позиционированные боксы изымаются из нормального обтекания. Это значит, что они не влияют на вывод последующих родственных элементов. Также, хотя абсолютно позиционированные боксы имеют поля, они не соединяются с другими полями.

fixed

Позиция бокса вычисляется в соответствии с моделью 'absolute', но, в дополнение к этому, бокс фиксируется в соответствии с некоторой ссылкой. В случае с непрерывными носителями, бокс фиксируется относительно порта просмотра (и не перемещается при прокрутке). В случае со страничными носителям, бокс фиксируется относительно страницы, даже если страница просматривается через порт просмотра (в случае просмотра перед печатью, например). Авторам может понадобиться специфицировать 'fixed' способом, не зависящим от носителя. Например, автор может захотеть, чтобы бокс оставался в верхней части порта просмотра экрана, но не вверху каждой печатаемой страницы. Две такие спецификации можно разделить, используя правило @media, как здесь:

@media screen { H1#first { position: fixed } } @media print { H1#first { position: static } }

Элемент называется позиционированным, если его свойство 'position' имеет значение, отличное от 'static'. Позиционированные элементы генерируют позиционированные боксы, располагающиеся в соответствии с четырьмя свойствами:

'top'

Значение: <length> | <percentage> | auto | inherit

Начальное: auto

Применяется: к позиционируемым элементам

Наследуется: нет

Процентное: относительно высоты содержащего блока

Носитель: визуальный

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

'right'

Значение: <length> | <percentage> | auto | inherit

Начальное: auto

Применяется: к позиционируемым элементам

Наследуется: нет

Процентное: относительно ширины содержащего блока

Носитель: визуальный

Это свойство специфицирует, насколько смещён влево правый край содержимого бокса относительно правого края содержащего блока.

'bottom'

Значение: <length> | <percentage> | auto | inherit

Начальное: auto

Применяется: к позиционируемым элементам

Наследуется: нет

Процентное: относительно высоты содержащего блока

Носитель: визуальный

Это свойство специфицирует, насколько смещён вверх нижний край содержимого бокса относительно низа содержащего блока.

'left'

Значение: <length> | <percentage> | auto | inherit

Начальное: auto

Применяется: к позиционируемым элементам

Наследуется: нет

Процентное: относительно ширины содержащего блока

Носитель: визуальный

Это свойство специфицирует, насколько смещён вправо левый край содержимого бокса относительно левого края содержащего блока.

Значения для этих четырёх свойств имеют следующий смысл:

<length>

Смещением является расстояние от соответствующего края.

<percentage>

Смещением является процент ширины содержащего блока (для 'left' или 'right') или высоты содержащего блока (для 'top' и 'bottom'). Для 'top' и 'bottom', если высота содержащего блока не специфицирована явно (т.е. зависит от высоты содержимого), процентное значение интерпретируется так же, как 'auto'.

auto

Действие этого значения зависит от того, какое из соответствующих свойств также имеет значение 'auto'. См. также разделы ширина и высота абсолютно позиционируемых, незамещаемых элементов.

Для абсолютно позиционируемых боксов - смещения являются относительными к содержащему блоку бокса. Для относительно позиционируемых боксов - смещения являются относительными к внешним краям самого бокса (т.е. боксу задаётся нормальное расположение, а затем - смещение от этой позиции в соответствии с вышеуказанными свойствами).

Боксы при нормальном обтекании относятся к контексту форматирования, который может быть уровня блока и инлайн, но не тем и другим одновременно. Боксы блока находятся в контексте форматирования блока. Инлайн-боксы находятся в контексте инлайн-форматирования.

В контексте форматирования блока боксы устанавливаются один за другим, вертикально, начиная от верха содержащего блока. Вертикальное расстояние между двумя родственными боксами определяется свойством 'margin'. Горизонтальные поля между смежными боксами блока в контексте форматирования блока сжимаются.

В контексте форматирования блока левый внешний край бокса касается левого края содержащего блока (для форматирования справа-налево - касается правый край). Это верно даже в случае с поплавками (хотя область содержимого может усекаться из-за поплавков).

Информацию о разрывах страниц в страничных носителях см. в разделе допустимые разрывы страниц.

В контексте инлайн-форматирования боксы устанавливаются по горизонтали, один за другим, начиная от верха содержащего блока. Горизонтальные поля, рамки и заполнение рассматриваются как отношения между боксами. Боксы могут быть выровнены по вертикали несколькими способами: могут быть выровнены их нижние или верхние края или базовые линии текста внутри них. Прямоугольная область, содержащая боксы, которые образуют строку, называется строчный бокс.

Ширина cтрочного бокса определяется содержащим блоком. Высота cтрочного бокса определяется правилами из раздела вычисление высоты строки. Строчный бокс всегда имеет высоту, достаточную для содержащихся в нём боксов. В то же время, он может быть выше, чем самый высокий из содержащихся в нём боксов (если, например, боксы выровнены так, что базовые линии выстроены). Если высота бокса В меньше, чем высота cтрочного бокса, содержащего его, то вертикальное выравнивание В внутри cтрочного бокса определяется свойством 'vertical-align'.

Если несколько инлайн-боксов не входят по горизонтали в один cтрочный бокс, они распределяются на два или более вертикально упакованных строчных бокса. Таким образом, параграф будет вертикальным стеком из строчных боксов. Строчные боксы упакованы по вертикали без разделения и никогда не перекрываются.

Вообще, левый край cтрочного бокса касается левого края его содержащего блока, и правый край касается правого края его содержащего блока. В то же время, боксы-поплавки могут появляться между краем содержащего блока и краем строчного блока. Таким образом, хотя строчные боксы в том же самом контексте инлайн-форматирования обычно имеют ту же самую ширину (что и содержащий блок), они могут иметь и другую ширину из-за поплавков, уменьшающих горизонтальное пространство. Строчные боксы в том же самом контексте инлайн-форматирования обычно различаются по высоте (например, одна строка может содержать высокое изображение, а другие строки - только текст).

Если суммарная ширина инлайн-боксов в строке меньше, чем ширина cтрочного бокса, содержащего их, то их распределение по горизонтали внутри cтрочного бокса определяется свойством 'text-align'. Если это свойство имеет значение 'justify', ПА может уплотнить инлайн-боксы.

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

Инлайн-боксы могут также быть разделены на несколько боксов внутри одного cтрочного бокса из-за двунаправленной обработки текста.

Вот пример конструкции инлайн-боксов. Следующий параграф (созданный элементом Р уровня блока в HTML) содержит анонимный текст, распределённый между элементами EM и STRONG:

<P>Several <EM>emphasized words</EM> appear <STRONG>in this</STRONG> sentence, dear.</P>

Элемент P генерирует бокс блока, содержащий пять инлайн-боксов, три из которых - анонимные:

[x]. Anonymous: "Several"

[x]. EM: "emphasized words"

[x]. Anonymous: "appear"

[x]. STRONG: "in this"

[x]. Anonymous: "sentence, dear."

Чтобы сформатировать параграф, ПА вставляет пять боксов в cтрочный бокс. В этом примере бокс, генерируемый для элемента P, устанавливает содержащий блок для строчных боксов. Если содержащий блок достаточно широк, все инлайн-боксы войдут в один cтрочный бокс:

Several emphasized words appear in this sentence, dear.

если нет, инлайн-боксы будут разделены и распределены по нескольким строчным боксам. Предыдущий параграф может быть разделён так:

Several emphasized words appear in this sentence, dear.

или так:

Several emphasized words appear in this sentence, dear.

В предыдущем примере бокс EM был разделён на два бокса EM (назовём их "split1" и "split2"). Поля, рамки, заполнение или текстовый орнамент не имеют видимого эффекта после split1 или до split2.

Рассмотри следующий пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Example of inline flow on several lines</TITLE> <STYLE type="text/css"> EM { padding: 2px; margin: 1em; border-width: medium; border-style: dashed; line-height: 2.4em; } </STYLE> </HEAD> <BODY> <P>Several <EM>emphasized words</EM> appear here.</P> </BODY> </HTML>

В зависимости от ширины P, боксы могут распределиться так:

[D]

[x]. Поле вставлено до "emphasized" и после "words".

[x]. Заполнение вставлено до, сверху и снизу от "emphasized" и после, сверху и снизу от "words". Пунктирная рамка отображается с трёх сторон в каждом случае.

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

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

Относительно позиционированный бокс генерируется, когда свойство 'position' элемента имеет значение 'relative'. Смещение специфицируется свойствами 'top', 'bottom', 'left' и 'right'.

Динамическое перемещение боксов, позиционированных относительно, может создавать эффекты анимации в среде скриптов (см. также свойство 'visibility'). Относительное позиционирование можно использовать также как общую форму под- и надиндексов, за исключением того, что высота строки не устанавливается автоматически при рассмотрении позиционирования. См. дополнительно описание вычисления высоты строки.

Примеры относительного позиционирования есть в разделе Сравнение нормального позиционирования, поплавков и абсолютного позиционирования.

Поплавок это бокс, который "всплывает" (смещается) влево или вправо на текущей строке. Самое интересное в поведении поплавка (или "всплывающего", или "плавающего" бокса) то, что содержимое может обтекать его по сторонам (или это может быть запрещено свойством 'clear'). Содержимое обтекает справа бокс, всплывающий влево, и слева - бокс всплывающий вправо.

Далее следует введение в позиционирование поплавков и обтекание содержимого; точные правила, управляющие поведением поплавков, даны в описании свойства 'float.

Всплывающий бокс обязан иметь явно установленную ширину (назначенную свойством 'width', или свою внутреннюю ширину - в случае замещаемых элементов). Любой всплывающий бокс становится боксом блока, который сдвигается влево или вправо, пока его внешний край не коснётся края содержащего блока или внешнего края другого поплавка. Верх всплывающего бокса выравнивается с верхом текущего cтрочного бокса (или низом предшествующего бокса блока, если отсутствует cтрочный бокс). Если для поплавка не хватает горизонтального пространства на текущей строке, он сдвигается вниз строка за строкой, пока строка не получит достаточно пространства для него.

Пока поплавок не всплыл, непозиционированные боксы блока, созданные до и после всплывающего бокса, всплывают вертикально, как будто поплавка не существует. Однако строчные боксы, созданные сразу после поплавка, уменьшаются, чтобы дать пространство для всплывающего бокса. Любое содержимое на текущей строке до всплывающего бокса перерисовывается на первой доступной строке с противоположной стороны поплавка.

Несколько поплавков могут быть смежными, и эта модель применяется также к смежным поплавкам на той же строке.

Следующее правило вызывает всплывание влево всех боксов IMG с class="icon" (и устанавливает левое поле в '0'):

IMG.icon { float: left; margin-left: 0; }

Рассмотрим следующие HTML и таблицу стилей:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Float example</TITLE> <STYLE type="text/css"> IMG { float: left } BODY, P, IMG { margin: 2em } </STYLE> </HEAD> <BODY> <P><IMG src=img.gif alt="This image will illustrate floats"> Some sample text that has no other... </BODY> </HTML>

IMG-бокс всплывает влево. Последующее содержимое форматируется справа от поплавка, начиная с той же строки, где находится поплавок. Строчные боксы справа от поплавка укорачиваются из-за присутствия поплавка, но имеют свою "нормальную" ширину (как в содержащем блоке, установленном элементом P) после поплавка. Этот документ может быть сформатирован так:

[D]

Форматирование могло бы быть точно таким же, если бы документ был следующим:

<BODY> <P>Some sample text <IMG src=img.gif alt="This image will illustrate floats"> that has no other... </BODY>

поскольку содержимое слева от поплавка замещается поплавком и обтекает его вниз по его правой стороне.

Поля всплывающих боксов никогда не сжимаются полями смежных боксов. Таким образом, в предыдущем примере вертикальные поля не сжимаются между боксом P и всплывающим IMG-боксом.

Поплавок может перекрывать другие боксы при нормальном позиционировании (например, когда нормально позиционированный бокс, следующий за поплавком, имеет отрицательные поля). Когда инлайн-бокс перекрывается поплавком, содержимое, фон и рамки инлайн-бокса отображаются впереди поплавка. Если блок бокса перекрывается, фон и рамки бокса блока отображаются позади поплавка и видны только там, где бокс прозрачен. Содержимое бокса блока отображается спереди от поплавка.

Вот другая иллюстрация, показывающая, что происходит, когда поплавок перекрывает рамки элемента с нормальным всплыванием.

Всплывающее изображение скрывает рамки перекрываемого бокса блока.

Всплывающее изображение скрывает рамки перекрываемого бокса блока.

[D]

Следующий пример иллюстрирует использование свойства 'clear' для предотвращения всплывания содержимого после поплавка.

При таком правиле:

P { clear: left }

форматирование может выглядеть так:

Оба параграфа установлены в 'clear: left', что "выталкивает вниз" второй параграф в положение под поплавком - его верхнее поле растягивается, чтобы выполнить это (см. свойство 'clear').

Оба параграфа установлены в 'clear: left', что "выталкивает вниз" второй параграф в положение под поплавком - его верхнее поле растягивается, чтобы выполнить это (см. свойство 'clear').

[D]

'float

Значение: left | right | none | inherit

Начальное: none

Применяется: ко всему, кроме позиционированных элементов и генерируемого содержимого

Наследуется: нет

Процентное: N/A

Носитель: визуальный

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

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

left

Элемент генерирует бокс блока, всплывающий влево. Содержимое обтекает по правой стороне бокса, начиная от верха (субъект свойства 'clear'). 'display' игнорируется, если только оно не имеет значения 'none'.

right

То же, что 'left', но содержимое обтекает по левой стороне бокса, начиная от верха.

none

Бокс не всплывает.

Вот точные правила, управляющие поведением поплавка:

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

2Если текущий бокс всплывает влево и имеются другие всплывающие влево боксы, сгенерированные элементами в документе-источнике ранее, тогда для каждого такого предшествующего бокса или левый внешний край текущего бокса обязан быть справа от правого внешнего края предшествующего бокса, или его верх обязан быть ниже, чем низ предшествующего бокса. Аналогичное правило действует для боксов, всплывающих вправо.

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

4Верхний внешний край всплывающего бокса не может быть выше, чем верх его содержащего блока.

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

6Верхний внешний край всплывающего бокса элемента не может быть выше, чем верх любого cтрочного бокса, содержащего бокс, сгенерированный элементом ранее в документе-источнике.

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

8Всплывающий бокс должен быть размещён так высоко, насколько это возможно.

9Всплывающий влево бокс обязан быть размещён так далеко влево, насколько это возможно, а всплывающий вправо бокс обязан быть размещён так далеко вправо, насколько это возможно. Более высокая позиция имеет преимущество перед позицией, идущей далее влево/вправо.

'clear'

Значение: none | left | right | both | inherit

Начальное: none

Применяется: к элементам уровня блока

Наследуется: нет

Процентное: N/A

Носитель: визуальный

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

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

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

left

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

right

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

both

Генерируемый бокс перемещается ниже всех всплывающих боксов элементов, появившихся ранее в документе-источнике.

none

Нет ограничений на позицию бокса относительно поплавков.

Если свойство установлено на всплывающие элементы, результатом будет модификация правил позиционирования поплавка. Прибавляется дополнительное условие (/storebooks/E/E-Reznichenko/Speczifikacziya-Css2/10):

[x]. Верхний внешний край поплавка обязан быть ниже нижнего внешнего края всех ранее всплывающих влево боксов (если 'clear: left'), или всех ранее всплывающих вправо боксов (если 'clear: right'), или обоих ('clear: both').

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

Ссылки в данной спецификации на абсолютно позиционированный элемент (или его бокс) подразумевают, что свойство 'position' элемента имеет значение 'absolute' или 'fixed'.

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

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

[D]

Этого можно добиться с помощью такого документа HTML и таблицы стилей:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Документ с фрэймами в CSS2</TITLE> <STYLE type="text/css"> BODY { height: 8.5in } /* Необходим далее для процентной высоты */ #header { position: fixed; width: 100%; height: 15%; top: 0; right: 0; bottom: auto; left: 0; } #sidebar { position: fixed; width: 10em; height: auto; top: 15%; right: auto; bottom: 100px; left: 0; } #main { position: fixed; width: auto; height: auto; top: 15%; right: 0; bottom: 100px; left: 10em; } #footer { position: fixed; width: 100%; height: 100px; top: auto; right: 0; bottom: 0; left: 0; } </STYLE> </HEAD> <BODY> <DIV id="header"> ... </DIV> <DIV id="sidebar"> ... </DIV> <DIV id="main"> ... </DIV> <DIV id="footer"> ... </DIV> </BODY> </HTML>

Три свойства, влияющие на генерацию и структуру бокса -- 'display', 'position' и 'float -- взаимодействуют так:

1Если 'display' имеет значение 'none', ПА обязаны игнорировать 'position' и 'float. В этом случае элемент не генерирует бокса.

2Иначе, если 'position' имеет значение 'absolute' или 'fixed', 'display' установлен в 'block', а 'float установлен в 'none'. Позиция бокса будет определяться свойствами 'top', 'right', 'bottom' и 'left' и содержащим блоком бокса.

3Иначе, если 'float имеет значение не 'none', 'display' установлен в 'block', и бокс всплывает.

4Иначе, оставшиеся свойства 'display' применяются так, как специфицированы.

Примечание. CSS2 не специфицирует поведение структуры, если значения этих свойств изменяются скриптами. Например, что произойдёт, если элемент, имеющий 'width: auto' изменит позицию? Будет ли перерисовано содержимое или форматирование останется первоначальным? Ответ находится за пределами данного документа, и похоже, что такое поведение отличалось для ранних реализаций CSS2.

Чтобы проиллюстрировать разницу между нормальным и относительным позиционированием, поплавками и абсолютным позиционированием, мы предлагаем серию примеров на базе следующего фрагмента HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Сравнение схем позиционирования</TITLE> </HEAD> <BODY> <P>Beginning of body contents. <SPAN id="outer"> Start of outer contents. <SPAN id="inner"> Inner contents.</SPAN> End of outer contents.</SPAN> End of body contents. </P> </BODY> </HTML>

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

BODY { display: block; line-height: 200%; width: 400px; height: 400px } P { display: block } SPAN { display: inline }

Окончательные позиции боксов, генерируемых внешними и внутренними элементами, различны в каждом примере. В каждой иллюстрации числа слева от иллюстрации обозначают позицию нормального позиционирования строк. (Примечание: иллюстрации используют различные горизонтальные и вертикальные масштабы.)

Рассмотрим следующие объявления CSS для outer и inner, которые не изменяют нормального расположения боксов:

#outer { color: red } #inner { color: blue }

Элемент P содержит всё инлайн-содержимое: анонимный инлайн-текст и два элемента SPAN. Следовательно, всё содержимое будет расположено вне инлайн-контекста форматирования внутри содержащего блока, устанавливаемого элементом P, и получится что-то подобное:

[D]

Чтобы увидеть действие относительного позиционирования, мы специфицируем:

#outer { position: relative; top: -12px; color: red } #inner { position: relative; top: 12px; color: blue }

Текст расположен нормально до элемента outer. Текст outerзатем всплывает в своей нормальной позиции и размерах в конце строки 1. Затем инлайн-боксы, содержащие текст (распределённый на три строки), сдвигаются вместе на '-12px' (вверх).

Содержание inner как дочернего от outer было бы нормально расположено сразу после слов "of outer contents" (на строке 1.5). Однако содержимое innerсамо смещено относительно содержимого outer на '12px' (вниз), обратно на свою первоначальную позицию на строке 2.

Обратите внимание, что на содержимое, следующее после outer, Относительное позиционирование outer не влияет.

[D]

Заметьте также, что, имея смещение для outer '-24px', текст outer и текст тела могут быть перекрыты.

Теперь рассмотрим эффект от всплывания текста элемента inner вправо при использовании следующих правил:

#outer { color: red } #inner { float: right; width: 130px; color: blue }

Текст нормально расположен до бокса inner, который вытолкнут из расположения и всплыл к правому полю (его 'width' установлено явно). Строчные боксы слева от поплавка укорочены, и оставшийся текст документа всплывает в них.

[D]

Чтобы увидеть действие свойства 'clear', мы добавим в пример родственные элементы:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Сравнение схем позиционирования II</TITLE> </HEAD> <BODY> <P>Beginning of body contents. <SPAN id=outer> Start of outer contents. <SPAN id=inner> Inner contents.</SPAN> <SPAN id=sibling> Sibling contents.</SPAN> End of outer contents.</SPAN> End of body contents. </P> </BODY> </HTML>

Следующие правила:

#inner { float: right; width: 130px; color: blue } #sibling { color: red }

заставляют бокс inner всплывать вправо, как и раньше, а остальной текст документа - всплывать в незанятом пространстве:

[D]

Однако, если свойство 'clear' родственного элемента установлено в 'right' (т.е. генерируемый родственный бокс не займёт позицию справа от всплывающего бокса), родственное содержимое начнёт располагаться ниже поплавка:

#inner { float: right; width: 130px; color: blue } #sibling { clear: right; color: red }

[D]

Наконец, мы рассмотрим действие абсолютного позиционирования. Вот объявления CSS для outer и inner:

#outer { position: absolute; top: 200px; left: 200px; width: 200px; color: red; } #inner { color: blue }

которые позиционируют верх бокса outer относительно его содержащего блока. Содержащий блок для позиционируемого бокса устанавливается ближайшим позиционированным предком (или, если таковой не существует, начальным содержащим блоком, как в нашем примере). Верхняя сторона бокса outer на '200px' ниже верха содержащего блока, а левая сторона - на '200px' от левой стороны. Дочерний бокс outer'а позиционирован нормально относительно родителя.

[D]

#outer { position: relative; color: red } #inner { position: absolute; top: 200px; left: -100px; height: 130px; width: 130px; color: blue; }

В результате получится примерно так:

[D]

Если мы не позиционируем бокс outer:

#outer { color: red } #inner { position: absolute; top: 200px; left: -100px; height: 130px; width: 130px; color: blue; }

содержащий блок для inner станет начальным содержащим блоком (в нашем примере). Следующая иллюстрация показывает, где в этом случае окажется бокс inner.

[D]

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

<P style="position: relative; margin-right: 10px; left: 10px;"> I used two red hyphens to serve as a change bar. They will "float" to the left of the line containing THIS <SPAN style="position: absolute; top: auto; left: -1em; color: red;">--</SPAN> word.</P>

может дать в результате примерно это:

[D]

Сначала параграф (стороны содержащего блока которого показаны на иллюстрации) расположен нормально. Затем он смещается на '10px' от левого края содержащего блока (таким образом, правое поле в '10px' резервируется для предполагаемого смещения). Два дефиса, работающие как сменяющиеся баннеры, изымаются из расположения и позиционируются на текущей строке (поскольку 'top: auto'), на '-1em' от левого края своего содержащего блока (установленного P в свою окончательную позицию). В результате сменяющиеся баннеры "всплывают" слева от текущей строки.

В последующих разделах выражение "спереди от" означает ближе к пользователю, смотрящему на экран.

В CSS2 каждый бокс имеет позицию в трёх измерениях. В дополнение к позиции относительно вертикали и горизонтали, боксы расположены вдоль "z-axis/оси z" и форматируются один над другим. Позиции по оси z обычно рассматриваются, когда боксы перекрываются визуально. В этом разделе обсуждается, как боксы можно позиционировать относительно оси z.

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

Корневой элемент создаёт корневой контекст стэка, но другие элементы могут устанавливать локальные контексты стэка. Контексты стэка наследуются. Локальный контекст стэка первичен; боксы других контекстов стэка не могут появляться между его боксами.

Элемент, устанавливающий локальный контекст стэка, генерирует бокс, который имеет два уровня стэка: один для контекста создаваемого стэка (всегда '0') и второй для контекста стэка, к которому он (бокс) принадлежит (задаваемый свойством 'z-index').

Бокс элемента имеет тот же уровень стэка, что и его бокс-родитель, если только не задан другой уровень стэка свойством 'z-index'.

'z-index'

Значение: auto | <integer> | inherit

Начальное: auto

Применяется: к позиционированным элементам

Наследуется: нет

Процентное: N/A

Носитель: визуальный

Для позиционированных боксов свойство 'z-index' специфицирует:

1Уровень стэка бокса в текущем контексте стэка.

2Устанавливает ли бокс локальный контекст стэка.

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

<integer>

Это целое число - уровень стэка сгенерированного бокса в текущем контексте стэка. Бокс также устанавливает локальный контекст стэка со своим уровнем в стэке '0'.

auto

Уровень стэка сгенерированного бокса в текущем контексте стэка тот же, что и у бокса-родителя. Бокс не устанавливает новый локальный контекст стэка.

В следующем примере уровни стэка боксов (именованных своими атрибутами "id"): "text2"=0, "image"=1, "text3"=2 и "text1"=3. Уровень стэка для "text2" наследуется от корневого бокса. Остальные - специфицируются свойством 'z-index'.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Z-позиционирование</TITLE> <STYLE type="text/css"> .pile { position: absolute; left: 2in; top: 2in; width: 3in; height: 3in; } </STYLE> </HEAD> <BODY> <P> <IMG id="image" class="pile" src="butterfly.gif" alt="A butterfly image" style="z-index: 1"> <DIV id="text1" class="pile" style="z-index: 3"> This text will overlay the butterfly image. </DIV> <DIV id="text2"> This text will be beneath everything. </DIV> <DIV id="text3" class="pile" style="z-index: 2"> This text will underlay text1, but overlay the butterfly image </DIV> </BODY> </HTML>

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

Символы в некоторых видах письма записываются справа налево. В некоторых документах, особенно на арабском и еврейском, и в некоторых контекстах смешивания языков текст в одиночном (визуально отображаемом) блоке может появляться со смешанным направлением письма. Этот феномен называется bidirectionality\двунаправленность, или сокращённо - "bidi".

Стандарт Unicode ( [UNICODE] , раздел 3.11) даёт сложный алгоритм определения направления текста. Этот алгоритм состоит из подразумеваемой части, базирующейся на свойствах символов, а также явной, контролирующей внедрения и переопределения. CSS2 обращается к этому алгоритму для достижения соответствующего двунаправленного отображения. Свойства 'direction' и 'unicode-bidi' позволяют авторам специфицировать, как элементы и атрибуты языка документа отображаются в этот алгоритм.

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

Поскольку направление текста зависит от структуры и семантики документа, эти свойства должны в большинстве случаев использоваться только дизайнерами описания типа документа (ОТД) или авторами специальных документов. Если таблица стилей по умолчанию специфицирует эти свойства, то авторы и пользователи не должны специфицировать правила для их переопределения. Типичным исключением будет переопределение bidi-поведения в ПА, если этот ПА производит транслитерацию идиша (обычно записанного буквами иврита) на латиницу по запросу пользователя.

Спецификация HTML 4.0 ( [HTML40] , раздел 8.2) определяет двунаправленное поведение для элементов HTML. Соответствующие HTML ПАгенты могут поэтому игнорировать свойства 'direction' и 'unicode-bidi' в авторских и пользовательских таблицах стилей. Правила таблиц стилей, которые необходимо применять для bidi-поведения и которые специфицированы в [HTML40] , даны в примере таблицы стилей. Спецификация HTML 4.0 содержит также дополнительную информацию о вопросах двунаправленности.

'direction'

Значение: ltr | rtl | inherit

Начальное: ltr

Применяется: ко всем элементам, но см. текст

Наследуется: да

Процентное: N/A

Носитель: визуальный

Это свойство специфицирует базовое направление письма блоков и направление внедрений и переопределений (см. 'unicode-bidi') для двунаправленного алгоритма Unicode. Дополнительно оно специфицирует направление для столбца таблицы, направление горизонтального переполнения и позицию неполной последней строки блока в том случае, если 'text-align: justify'.

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

ltr

Направление слева направо.

rtl

Справа налево.

Чтобы свойство 'direction' работало в элементах инлайн-уровня, значение свойства 'unicode-bidi' обязано быть 'embed' или 'override'.

Примечание. Свойство 'direction', специфицированное для элементов столбца таблицы, не наследуется ячейками столбца, поскольку столбцы не существуют в дереве документа. Таким образом, CSS не может использовать правила наследования атрибута "dir", описанные в [HTML40] , в разделе 11.3.2.1.

'unicode-bidi'

Значение: normal | embed | bidi-override | inherit

Начальное: normal

Применяется: ко всем элементам, но см. текст

Наследуется: нет

Процентное: N/A

Носитель: визуальный

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

normal

Элемент не открывает дополнительный уровень внедрения относительно двунаправленного алгоритма. Для элементов инлайн-уровня неявное переупорядочивание работает вне границ элемента.

embed

Если элемент - инлайн-уровня, это значение открывает дополнительный уровень внедрения относительно двунаправленного алгоритма. Направление в этом уровне внедрения задаётся свойством 'direction'. Внутри элемента переупорядочивание выполняется неявно. Это соответствует дополнению LRE (U+202A; для 'direction: ltr') или RLE (U+202B; для 'direction: rtl') в начале элемента и PDF (U+202C) в конце элемента.

bidi-override

Если элемент - уровня блока или инлайн и содержит только элементы инлайн-уровня, это значение создаёт переопределение. Это означает, что внутри элемента переупорядочивание выполняется строго в соответствии со свойством 'direction'; неявная часть двунаправленного алгоритма игнорируется. Это соответствует дополнению LRO (U+202D; для 'direction: ltr') или RLO (U+202E; для 'direction: rtl') в начале элемента и a PDF (U+202C) в конце элемента.

Окончательный порядок символов в каждом элементе уровня блока - такой, как если бы bidi-код управления был добавлен так, как описано выше, разметка была бы вырезана, а результирующая последовательность символов - передана в двунаправленный алгоритм Unicode в обычный текст, который производил бы те же самые разрывы строк, что и стилизованный текст. В этом процессе нетекстуальные объекты, такие как изображения, рассматриваются как нейтральные символы, если только их свойство 'unicode-bidi' не имеет значений, отличных от 'normal', тогда они рассматриваются как полужирные (strong) символы в 'direction', специфицированном для элемента.

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

Поскольку алгоритм Unicode имеет предел - 15 уровней внедрения, лучше не использовать 'unicode-bidi' со значениями, отличными от 'normal', если отсутствуют подходящие. Значение 'inherit' должно использоваться особенно осторожно. Однако для элементов, которые обычно предполагается отображать как блоки, установка 'unicode-bidi: embed' предпочтительнее для удержания элементов вместе в том случае, когда дисплей изменяется на инлайн (см. пример ниже).

В следующем примере показан документ XML с двунаправленным текстом. Он иллюстрирует важный принцип дизайна: дизайнеры ОТД должны принимать в расчёт bidi и в собственно языке (элементы и атрибуты), и в сопровождающих таблицах стилей. Таблицы стилей должны быть разработаны так, чтобы правила bidi были отделены от других правил стиля. Правила bidi не должны переопределяться другими таблицами стилей, чтобы сохранить поведение bidi языка и ОТД.

Здесь буквы нижнего регистра присущи символам слева-направо, а буквы верхнего регистра - символам справа-налево:

<HEBREW> <PAR>HEBREW1 HEBREW2 english3 HEBREW4 HEBREW5</PAR> <PAR>HEBREW6 <EMPH>HEBREW7</EMPH> HEBREW8</PAR> </HEBREW> <ENGLISH> <PAR>english9 english10 english11 HEBREW12 HEBREW13</PAR> <PAR>english14 english15 english16</PAR> <PAR>english17 <HE-QUO>HEBREW18 english19 HEBREW20</HE-QUO></PAR> </ENGLISH>

Поскольку это - XML, таблица стилей отвечает за направление письма. Это таблица стилей:

/* Правила для bidi */ HEBREW, HE-QUO {direction: rtl; unicode-bidi: embed} ENGLISH {direction: ltr; unicode-bidi: embed} /* Правила для представления */ HEBREW, ENGLISH, PAR {display: block} EMPH {font-weight: bold}

Элемент HEBREW это блок с базовым направлением справа-налево, элемент ENGLISH это блок с базовым направлением слева-направо. PARы - это блоки, наследующие базовое направление от своих родителей. Таким образом, первые два PARа готовы начаться справа сверху, а последние три готовы начаться слева сверху. Обратите внимание, пожалуйста, что HEBREW и ENGLISH выбраны как имена элементов лишь для ясности; обычно имена элементов должны относиться к структуре, без ссылок на языки.

Элемент EMPH - уровня инлайн, и, поскольку его значение для 'unicode-bidi' - 'normal' (начальное значение), он не оказывает воздействия на порядок расположения текста. Элемент HE-QUO, напротив, создаёт внедрение.

Если длина строки достаточно большая, форматирование текста может выглядеть примерно так:

5WERBEH 4WERBEH english3 2WERBEH 1WERBEH 8WERBEH 7WERBEH 6WERBEH english9 english10 english11 13WERBEH 12WERBEH english14 english15 english16 english17 20WERBEH english19 18WERBEH

Заметьте, что внедрение HE-QUO заставляет HEBREW18 находиться справа от english19.

Если строки должны быть разбиты, то выглядеть будет примерно так:

2WERBEH 1WERBEH -EH 4WERBEH english3 5WERB -EH 7WERBEH 6WERBEH 8WERB english9 english10 en- glish11 12WERBEH 13WERBEH english14 english15 english16 english17 18WERBEH 20WERBEH english19

Поскольку HEBREW18 обязан быть прочитан до english19, он находится в строке над english19. Простой разрыв строки из предыдущего форматирования не должен сработать.

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

Лекция 10. Модель визуального форматирования. Детали

Описываются детали модели визуального форматирования.

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

Содержащий блок элемента определяется так:

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

2Для других элементов, если только элемент не позиционирован абсолютно, содержащий блок формируется краем содержимого бокса ближайшего предка уровня блока.

3Если элемент имеет 'position: fixed', то Содержащий блок устанавливается портом просмотра.

4

Если элемент имеет 'position: absolute', то Содержащий блок устанавливается ближайшим предком с 'position', отличным от 'static', следующим образом:

1Если предок - уровня блока, Содержащий блок формируется краем заполнения предка.

2Если предок - инлайн-уровня, Содержащий блок зависит от свойства 'direction' предка:

1Если 'direction' - 'ltr', верхний и левый края содержащего блока являются верхним и левым краями первого бокса, генерируемого предком, а нижний и правый края являются нижним и правым краями содержимого последнего бокса предка.

2Если 'direction' - 'rtl', верхний и правый края содержащего блока являются верхним и правым краями первого бокса, генерируемого предком, а нижний и левый края являются нижним и левым краями содержимого последнего бокса предка.

Если такого предка нет, край содержимого бокса корневого элемента устанавливает Содержащий блок.

Содержащие блоки (СБ) без позиционирования в этом документе:

<HTML> <HEAD> <TITLE>Illustration of containing blocks</TITLE> </HEAD> <BODY id="body"> <DIV id="div1"> <P id="p1">This is text in the first paragraph...</P> <P id="p2">This is text <EM id="em1"> in the <STRONG id="strong1">second</STRONG> paragraph.</EM></P> </DIV> </BODY> </HTML>

устанавливаются так:

Для бокса, генерируемогоСБ устанавливается
bodyначальным СБ (зависит от ПА)
div1body
p1div1
p2div1
em1p2
strong1p2

Если позиция "div1":

#div1 { position: absolute; left: 50px; top: 50px }

то его содержащий блок - уже не <body>; им становится начальный содержащий блок (поскольку отсутствуют другие позиционированные боксы предка).

Также, если позиция "em1":

#div1 { position: absolute; left: 50px; top: 50px } #em1 { position: absolute; left: 100px; top: 100px }

таблица содержащих блоков будет:

Для бокса, генерируемогоСБ устанавливается
bodyначальным СБ
div1начальным СБ
p1div1
p2div1
em1div1
strong1em1

При позиционировании "em1", его содержащим блоком становится ближайший позиционированный бокс предка (т.е. тот, который сгенерирован "div1").

'width'

Значение: <length> | <percentage> | auto | inherit

Начальное: auto

Применяется: ко всем элементам, кроме незамещаемых инлайн-элементов, рядов таблиц и групп рядов

Наследуется: нет

Процентное: относительно ширины содержащего блока

Носитель: визуальный

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

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

Ширина бокса замещаемого элемента является внутренней и может масштабироваться ПА, если значение этого свойства отличается от 'auto'. Значения имеют следующий смысл:

<length>

Специфицирует фиксированную ширину.

<percentage>

Специфицирует ширину в процентах. Проценты вычисляются относительно ширины содержащего блока генерируемого бокса.

auto

Ширина зависит от значений других свойств. См. следующие разделы.

Отрицательные значения для 'width' не допускаются.

Это правило фиксирует ширину содержимого параграфа в 100 пикселов:

P { width: 100px }

Вычисленные значения свойств 'width', 'margin-left', 'margin-right', 'left' и 'right' для элементов зависят от типа генерируемого бокса и друг от друга. В принципе вычисленные значения - те же, что и специфицированные, с 'auto', замещаемым другим подходящим значением, но есть и исключения. Должны быть рассмотрены следующие варианты:

1инлайн, незамещаемые элементы

2инлайн, замещаемые элементы

3уровень блока, незамещаемые элементы при нормальном всплывании

4уровень блока, замещаемые элементы при нормальном всплывании

5всплывание, незамещаемые элементы

6всплывание, замещаемые элементы

7абсолютно позиционированные незамещаемые элементы

8абсолютно позиционированные замещаемые элементы

Пункты 1-6 включают относительное позиционирование.

Свойство 'width' не применяется. Специфицированное значение 'auto' для 'left', 'right', 'margin-left' или 'margin-right' становится вычисленным значением '0'.

Специфицированное значение 'auto' для 'left', 'right', 'margin-left' или 'margin-right' становится вычисленным значением '0'. Специфицированное значение 'auto' для 'width' даёт внутреннюю ширину элемента как вычисленное значение.

Если 'left' или 'right' заданы как 'auto', их вычисленное значение - '0'. Следующее условие обязано соблюдаться между свойствами:

'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' = ширина содержащего блока

(Если стиль рамки - 'none', используйте '0' как ширину рамки.) Если все вышеуказанные имеют специфицированные значения, отличные от 'auto', то говорят, что значения "переограниченны", и одно из вычисленных значений должно будет получить значение, отличное от своего специфицированного. Если свойство 'direction' имеет значение 'ltr', специфицированное значение 'margin-right' игнорируется и новое значение вычисляется так, чтобы сделать равенство верным. Если значение 'direction' - 'rtl', то же самое выполняется для 'margin-left'.

Если имеется только одно значение, специфицированное как 'auto', его вычисленное значение является результатом уравнения.

Если 'width' установлено в 'auto', любые другие значения 'auto' становятся '0', и 'width' является результатом уравнения.

Если и 'margin-left', и 'margin-right' - 'auto', их вычисленные значения равны.

Если 'left' или 'right' - 'auto', их вычисленное значение - '0'. Если 'width' специфицировано как 'auto', его значением является внутренняя ширина элемента. Если одно из полей - 'auto', его вычисленное значение задаётся вышеприведённым уравнением. Кроме того, если оба поля - 'auto', их вычисленные значения равны.

Если 'left', 'right', 'width', 'margin-left' или 'margin-right' специфицированы как 'auto', их вычисленное значение - '0'.

Если 'left', 'right', 'margin-left' или 'margin-right' специфицированы как 'auto', их вычисленное значение - '0'. Если 'width' - 'auto', его значением является внутренняя ширина элемента.

Условие, определяющее вычисленные значения для этих элементов:

'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = ширина содержащего блока

(Если стиль рамки - 'none', используется '0' как значение ширины рамки.) Решение данного условия достигается серией замен в следующем порядке:

1Если 'left' имеет значение 'auto' при 'direction' - 'ltr', 'auto' заменяется расстоянием от левого края содержащего блока до края левого поля гипотетического бокса, который мог бы быть первым боксом элемента, если его свойство 'position' было бы 'static'. (Но вместо того, чтобы действительно рассчитать этот бокс, ПА свободны предполагать о его возможной позиции.) Значение является отрицательным, если гипотетический бокс находится слева от содержащего блока.

2Если 'right' имеет значение 'auto' при 'direction' - 'rtl', 'auto' заменяется расстоянием от правого края содержащего блока до края правого поля того же гипотетического бокса, что и выше. Значение является положительным, если гипотетический бокс находится слева от края содержащего блока.

3Если 'width' - 'auto', любые оставшиеся 'auto' для 'left' или 'right' заменяются на '0'.

4Если 'left', 'right' или 'width' - (ещё) 'auto', 'auto' в 'margin-left' или 'margin-right' заменяются на '0'.

5Если в данной точке 'margin-left' и 'margin-right' всё ещё 'auto', уравнение решается с дополнительным условием: что эти два поля обязаны получить одинаковые значения.

6Если в данной точке осталось только одно 'auto', уравнение решается с этим значением.

7Если в данной точке значения переограниченны, игнорируется значение 'left' (если 'direction' - 'rtl') или 'right' (если 'direction' - 'ltr') и уравнение решается с этим значением.

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

1Если 'width' - 'auto', оно замещается внутренней шириной элемента.

2Если 'left' имеет значение 'auto' при 'direction' - 'ltr', 'auto' замещается расстоянием от левого края содержащего блока до края левого поля гипотетического бокса, который мог бы быть первым боксом элемента, если его свойство 'position' было бы 'static'. (Но вместо того, чтобы действительно рассчитать этот бокс, ПА свободны предполагать о его возможной позиции.) Значение является отрицательным, если гипотетический бокс находится слева от содержащего блока.

3Если 'right' имеет значение 'auto' при 'direction' - 'rtl', 'auto' заменяется расстоянием от правого края содержащего блока до края правого поля того же гипотетического бокса, что и выше. Значение является положительным, если гипотетический бокс находится слева от края содержащего блока.

4Если 'left' или 'right' - 'auto', любое 'auto' для 'margin-left' или 'margin-right' замещается на '0'.

5Если в данной точке 'margin-left' и 'margin-right' всё ещё 'auto', уравнение решается с дополнительным условием: что эти два поля обязаны получить одинаковые значения.

6Если в данной точке осталось только одно 'auto', уравнение решается с этим значением.

7Если в данной точке значения переограниченны, игнорируется значение 'left' (если 'direction' - 'rtl') или 'right' (если 'direction' - 'ltr') и уравнение решается с этим значением.

'min-width'

Значение: <length> | <percentage> | inherit

Начальное: зависит от ПА

Применяется: ко всем элементам, за исключением незамещаемых инлайн элементов и элементов таблицы

Наследуется: нет

Процентное: относительно ширины содержащего блока

Носитель: визуальный

'max-width'

Значение: <length> | <percentage> | none | inherit

Начальное: none

Применяется: ко всем элементам, за исключением незамещаемых инлайн элементов и элементов таблицы

Наследуется: нет

Процентное: относительно ширины содержащего блока

Носитель: визуальный

Эти два свойства позволяют авторам ограничить ширину бокса определёнными рамками.

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

<length>

Специфицирует фиксированную минимальную и максимальную вычисленную ширину.

<percentage>

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

none

(Только для 'max-width') Нет ограничений на ширину бокса.

Следующий алгоритм описывает, как эти два свойства воздействуют на вычисленное значение свойства 'width':

1Ширина вычисляется (без 'min-width' и 'max-width') по вышеприведённым правилам "Вычисление ширины и полей".

2Если вычисленное значение 'min-width' больше, чем значение 'max-width', то 'max-width' устанавливается в значение 'min-width'.

3Если вычисленная ширина больше, чем 'max-width', вышеприведённые правила применяются вновь, но на этот раз с использованием значения 'max-width' как специфицированного для 'width'.

4Если вычисленная ширина меньше, чем 'min-width', вышеприведённые правила применяются вновь, но на этот раз с использованием значения 'min-width' как специфицированного для 'width'.

ПА может определить неотрицательное минимальное значение для свойства 'min-width', которое (значение) может варьироваться от элемента к элементу и даже зависеть от других свойств. Если 'min-width' выходит за нижнюю границу этого лимита из-за того, что было установлено явно, или из-за того, что оно 'auto' и вышеприведённые правила сделают его слишком маленьким, ПА может использовать минимальное значение как вычисленное значение.

'height'

Значение: <length> | <percentage> | auto | inherit

Начальное: auto

Применяется: ко всем элементам, кроме незамещаемых инлайн-элементов, столбцов и групп столбцов таблицы

Наследуется: нет

Процентное: см. текст

Носитель: визуальный

Свойство определяет высоту содержимого боксов, генерируемых элементами уровня блока и замещаемыми элементами.

Это свойство не применяется к незамещаемым элементам инлайн-уровня. Высота боксов незамещаемых инлайн-элементов задаётся значением (возможно, наследуемым) 'line-height' элемента.

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

<length>

Специфицирует фиксированную высоту.

<percentage>

Специфицирует высоту в процентах. Проценты высчитываются относительно высоты содержащего блока генерируемого бокса. Если высота содержащего блока не специфицирована явно (т е. зависит от высоты содержимого), значение интерпретируется как 'auto'.

auto

Высота зависит от значений других свойств. См. ниже.

Отрицательные значения 'height' недопустимы.

Следующее правило фиксирует высоту параграфа в 100 пикселов:

P { height: 100px }

Параграф, требующий высоты более 100 пикселов, будет вызывать переполнение в соответствии со свойством 'overflow'.

Для вычисления значений 'top', 'margin-top', 'height', 'margin-bottom' и 'bottom' обязано быть проведено разграничение между различными видами боксов:

1инлайн, незамещаемые элементы

2инлайн, замещаемые элементы

3уровень блока, незамещаемые элементы при нормальном всплывании

4уровень блока, замещаемые элементы при нормальном всплывании

5всплывание, незамещаемые элементы

6всплывание, замещаемые элементы

7абсолютно позиционированные незамещаемые элементы

8абсолютно позиционированные замещаемые элементы

Пункты 1-6 включают относительное позиционирование.

Если 'top', 'bottom', 'margin-top' или 'margin-bottom' установлены в 'auto', их вычисленное значение будет '0'. Свойство 'height' не применяется, но высота бокса задаётся свойством 'line-height'.

Если 'top', 'bottom', 'margin-top' или 'margin-bottom' установлены в 'auto', их вычисленное значение будет '0'. Если 'height' - 'auto', вычисленное значение будет внутренней высотой.

Если 'top', 'bottom', 'margin-top' или 'margin-bottom' - 'auto', их вычисленное значение - '0'. Если 'height' - 'auto', высота зависит от того, имеет ли элемент дочерние элементы уровня блока. Если он имеет дочерние элементы только инлайн-уровня, высота будет от верха самого верхнего строчного бокса до низа самого нижнего строчного бокса. Если он имеет дочерние элементы уровня блока, это будет расстояние от верхнего края рамки самого верхнего дочернего бокса уровня блока до нижнего края рамки самого нижнего дочернего бокса уровня блока. В расчёт берутся только потомки при нормальном всплывании (т.е. боксы-поплавки и абсолютно позиционированные боксы игнорируются, а относительно позиционированные боксы рассматриваются без своих смещений). Обратите внимание, что дочерний бокс может быть анонимным боксом.

Для абсолютно позиционированных элементов вертикальные размеры должны удовлетворять следующему условию:

'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = высота содержащего блока

(Если стиль рамки - 'none', '0' используется как значение ширины рамки.) Решение данного уравнения достигается путём проведения ряда замен в следующем порядке:

1Если 'top' имеет значение 'auto', оно заменяется расстоянием от верхнего края содержащего блока до края верхнего поля гипотетического бокса, который мог бы быть первым боксом элемента, если его свойство 'position' было бы 'static'. (Но вместо того, чтобы действительно рассчитать этот бокс, ПА свободны предполагать о его возможной позиции.) Значение является отрицательным, если гипотетический бокс находится сверху от содержащего блока.

2Если и 'height' и 'bottom' - 'auto', 'bottom' заменяется на '0'.

3Если 'bottom' или 'height' (ещё) имеют значение 'auto', любое 'auto' в 'margin-top' или 'margin-bottom' заменяется на '0'.

4Если в данной точке и 'margin-top', и 'margin-bottom' - всё ещё 'auto', уравнение решается с помощью дополнительного условия: что эти два поля обязаны получить одинаковые значения.

5Если в данной точке имеется только одно значение 'auto', уравнение решается с этим значением.

6Если в данной точке значения переограничены, игнорируется значение 'bottom', и уравнение решается с этим значением.

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

1Если 'height' - 'auto', оно заменяется внутренней высотой элемента.

2Если 'top' имеет значение 'auto', оно заменяется расстоянием от верхнего края содержащего блока до края верхнего поля гипотетического бокса, который мог бы быть первым боксом элемента, если его свойство 'position' было бы 'static'. (Но вместо того, чтобы действительно рассчитать этот бокс, ПА свободны предполагать о его возможной позиции.) Значение является отрицательным, если гипотетический бокс находится сверху от содержащего блока.

3Если 'bottom' - 'auto', 'auto' в 'margin-top' или 'margin-bottom' заменяется на '0'.

4Если в данной точке и 'margin-top', и 'margin-bottom' - всё ещё 'auto', уравнение решается с помощью дополнительного условия: что эти два поля обязаны получить одинаковые значения.

5Если в данной точке имеется только одно значение 'auto', уравнение решается с этим значением.

6Если в данной точке значения переограничены, игнорируется значение 'bottom', и уравнение решается с этим значением.

Иногда необходимо ограничить высоту элементов определёнными рамками. Два свойства выполняют эту функцию:

'min-height'

Значение: <length> | <percentage> | inherit

Начальное: 0

Применяется: ко всем элементам, за исключением незамещаемых инлайн-элементов и элементов таблицы

Наследуется: нет

Процентное: относительно высоты содержащего блока

Носитель: визуальный

'max-height'

Значение: <length> | <percentage> | none | inherit

Начальное: none

Применяется: ко всем элементам, за исключением незамещаемых инлайн-элементов и элементов таблицы

Наследуется: нет

Процентное: относительно высоты содержащего блока

Носитель: визуальный

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

<length>

Специфицирует фиксированный минимум и максимум вычисленной высоты.

<percentage>

Специфицирует проценты для определения вычисленного значения. Проценты высчитываются относительно высоты содержащего блока генерируемого бокса. Если высота содержащего блока не специфицирована явно (т.е. зависит от высоты содержимого), процентные значения интерпретируются так же, как 'auto'.

none

(Только для 'max-height') Высота бокса не ограничена.

Следующий алгоритм описывает, как эти два свойства вводят вычисленное значение свойства 'height':

1Высота вычисляется (без 'min-height' и 'max-height') по вышеприведённым правилам в "Вычислении высоты и полей".

2Если вычисленное значение 'min-height' больше значения 'max-height', 'max-height' устанавливается в значение 'min-height'.

3Если вычисленная высота больше, чем 'max-height', вновь применяются вышеприведённые правила, но на этот раз с использованием значения 'max-height' как специфицированного значения для 'height'.

4Если вычисленная высота меньше, чем 'min-height', вновь применяются вышеприведённые правила, но на этот раз с использованием значения 'min-height' как специфицированного значения для 'height'.

Как описано в разделе о контекстах инлайн-форматирования, ПА заполняют инлайн-боксами вертикальный стэк строчных боксов. Высота инлайн-бокса определяется так:

1Вычисляется высота каждого инлайн-бокса в строчном боксе (см. "Вычисление высоты и полей" и свойство 'line-height').

2Инлайн-боксы выравниваются по вертикали в соответствии с их свойствами 'vertical-align'.

3Высота строчного бокса - это расстояние между верхом самого верхнего бокса и низом самого нижнего бокса.

Пустые инлайн-элементы генерируют пустые инлайн-боксы, но эти боксы всё же имеют поля, заполнение, рамки и высоту строки и, таким образом, вычисления выполняются как с элементами, имеющими содержимое.

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

Поскольку высота инлайн-бокса может отличаться от размера шрифта текста бокса (например, 'line-height' > 1em), может иметься некоторое пространство сверху и снизу от выводимых глифов. Разница между размером шрифта и вычисленным значением 'line-height' называется leading\габарит. Половина габарита называется полугабарит.

ПА центрирует глифы по вертикали в инлайн-боксе, добавляя полугабарит сверху и снизу. Например, если блок текста имеет высоту '12pt' и значение 'line-height' - '14pt', должно быть добавлено 2pts дополнительного пространства: 1pt сверху и 1pt снизу от букв. (Это применимо также и к пустым боксам, как если бы пустой бокс содержал бесконечно узкую букву.)

Если значение 'line-height' меньше размера шрифта, окончательная высота инлайн-бокса будет меньше, чем размер шрифта, и выводимые глифы будут "просачиваться" за пределы бокса. Если такой бокс касается края строчного бокса, выводимые глифы будут также "просачиваться" в смежный строчный бокс.

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

'line-height'

Значение: normal | <number> | <length> | <percentage> | inherit

Начальное: normal

Применяется: ко всем элементам

Наследуется: да

Процентное: относительно размера шрифта самого элемента

Носитель: визуальный

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

Если это свойство установлено в элементе инлайн-уровня, оно специфицирует точную высоту каждого бокса, генерируемого элементом (за исключением замещаемых инлайн-элементов, когда высота бокса задаётся свойством 'height').

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

normal

Сообщает в ПА, что нужно установить вычисленное значение в "приемлемое" значение на базе размера шрифта элемента. Значение имеет тот же смысл, что и <number>. Для 'normal' мы рекомендуем значения в пределах от 1.0 до 1.2.

<length>

Высота бокса устанавливается в эту величину. Отрицательные значения недопустимы.

<number>

Вычисленное значение свойства является числом, умноженным на размер шрифта элемента. Отрицательные значения недопустимы. В то же время, число, не являющееся вычисленным значением, наследуется.

<percentage>

Вычисленное значение свойства является процентами от вычисленного размера шрифта элемента. Отрицательные значения недопустимы.

Эти три правила дают в результате одно значение высоты строки:

DIV { line-height: 1.2; font-size: 10pt } /* число */ DIV { line-height: 1.2em; font-size: 10pt } /* размер */ DIV { line-height: 120%; font-size: 10pt } /* проценты */

Если элемент содержит текст, выводимый с помощью нескольких шрифтов, ПА должен определить значение 'line-height' в соответствии с размером самого большого шрифта.

Вообще, если имеется только одно значение 'line-height' для всех инлайн-боксов параграфа (и нет высоких изображений), вышесказанное гарантирует, что базовые линии последовательных строк точно отделены от 'line-height'. Это важно в тех случаях, когда столбцы текста с различными шрифтами должны быть выровнены, например, в таблице.

Обратите внимание, что замещаемые элементы имеют свойства 'font-size' и 'line-height', даже если они (свойства) не используются непосредственно для определения высоты бокса. 'font-size', однако, используется для определения единиц измерения 'em' и 'ex', а 'line-height' задействовано в свойстве 'vertical-align'.

'vertical-align'

Значение: baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit

Начальное: baseline

Применяется: к инлайн-элементам и элементам 'table-cell'

Наследуется: нет

Процентное: относительно 'line-height' самого элемента

Носитель: визуальный

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

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

baseline

Выравнивает базовую линию бокса с базовой линией бокса-родителя. Если бокс не имеет базовой линии, выравнивается низ бокса с базовой линией родителя.

middle

Выравнивает вертикальную среднюю точку бокса с базовой линией бокса-родителя плюс половина x-высоты родителя.

sub

Понижает базовую линию бокса до соответствующей позиции подиндексов родительского бокса. (Это значение не воздействует на размер шрифта текста элемента.)

super

Повышает базовую линию бокса до соответствующей позиции надиндексов родительского бокса. (Это значение не воздействует на размер шрифта текста элемента.)

text-top

Выравнивает верх бокса с верхом шрифта родительского элемента.

text-bottom

Выравнивает низ бокса с низом шрифта родительского элемента.

<percentage>

Увеличивает (позитивное значение) или уменьшает (негативное значение) бокс на эту величину (процент значения 'line-height'). Значение '0%' это то же, что 'baseline'.

<length>

Увеличивает (позитивное значение) или уменьшает (негативное значение) бокс на эту величину. Значение '0cm' это то же, что 'baseline'.

Остальные значения относятся к строчному боксу, в котором появляется генерируемый бокс:

top

Выравнивает верх бокса с верхом строчного бокса.

bottom

Выравнивает низ бокса с низом строчного бокса.

Лекция 11. Визуальные эффекты

Описываются визуальные эффекты, механизмы переполнения и сжатия.

Обычно содержимое бокса блока ограничено краями бокса. В определённых случаях бокс может переполняться, то есть его содержимое частично или полностью находится за пределами бокса, например:

[x]. Строка не может быть разорвана, и строчный бокс оказывается шире, чем бокс блока.

[x]. Бокс уровня блока слишком широк для содержащего блока. Это случается, если свойство 'width' элемента имеет такое значение, которое вызывает растекание генерируемого бокса блока за пределы содержащего блока.

[x]. Высота элемента превосходит явно установленную высоту содержащего блока (т.е. высота содержащего блока определяется свойством 'height', а не высотой содержимого).

[x]. Бокс позиционирован абсолютно.

[x]. Бокс имеет отрицательные значения полей.

Когда возникает переполнение, свойство 'overflow' специфицирует, как сжимается бокс ( и сжимается ли). Свойство 'clip' специфицирует размер и форму сжимаемой области. Спецификация маленькой области для сжатия может вызвать сжатие другого видимого содержимого.

'overflow'

Значение: visible | hidden | scroll | auto | inherit

Начальное: visible

Применяется: к элементам уровня блока и к замещаемым элементам

Наследуется: нет

Процентное: N/A

Носитель: визуальный

Это свойство специфицирует, сжимается ли содержимое элемента уровня блока, если оно переполняет бокс элемента (который действует как содержащий блок для содержимого).

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

visible

Указывает, что содержимое не сжимается, т.е. может отображаться за пределами бокса блока.

hidden

Указывает, что содержимое сжимается и что механизм прокрутки не должен предоставляться для просмотра содержимого вне сжимаемой области; пользователь не получит доступа к сжатому содержимому. Размер и форма сжимаемой области специфицируются свойством 'clip'.

scroll

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

auto

Поведение значения 'auto' зависит от ПА, но должно вызывать предоставление механизма прокрутки для переполняемых боксов.

Даже если 'overflow' установлено в 'visible', содержимое может быть обрезано до размеров окна документа ПА средой окружения.

Рассмотрим следующий пример блока кавычек (BLOCKQUOTE), который слишком велик для своего содержащего блока (установленного DIV). Вот документ-источник:

<DIV> <BLOCKQUOTE> <P>I didn't like the play, but then I saw it under adverse conditions - the curtain was up. <DIV class="attributed-to">- Groucho Marx</DIV> </BLOCKQUOTE> </DIV>

Это таблица стилей, управляющая размерами и стилем генерируемых боксов:

DIV { width : 100px; height: 100px; border: thin solid red; } BLOCKQUOTE { width : 125px; height : 100px; margin-top: 50px; margin-left: 50px; border: thin dashed black } DIV.attributed-to { text-align : right; }

Начальное значение 'overflow' - 'visible', поэтому BLOCKQUOTE может быть сформатирован без сжатия примерно так:

[D]

Установка 'overflow' в 'hidden' для элемента DIV, с другой стороны, вызывает усечение BLOCKQUOTE содержащим блоком:

[D]

Значение 'scroll' сообщит ПАгенту, что поддерживается визуальный механизм прокрутки, чтобы вывести его для обеспечения доступа пользователя к усечённому содержимому.

Сжимаемая область определяет, какая часть выводимого содержимого элемента видна. По умолчанию сжатая область имеет тот же размер и форму, что и бокс(ы) элемента. В то же время сжимаемая область может быть модифицирована свойством 'clip'.

'clip'

Значение: <shape> | auto | inherit

Начальное: auto

Применяется: к элементам уровня блока и к замещаемым элементам

Наследуется: нет

Процентное: N/A

Носитель: визуальный

Свойство 'clip' применяется к элементам, имеющим свойство 'overflow' со значением, отличным от 'visible'.

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

auto

Cжимаемая область имеет тот же размер и размещение, что и бокс(ы) элемента.

<shape>

В CSS2 верными значениями для <shape> являются: rect (<top> <right> <bottom> <left>) где <top>, <bottom> <right> и <left> специфицируют смещение относительно соответствующих сторон бокса.

<top>, <right>, <bottom> и <left> могут иметь или значение <length>, или 'auto'. Отрицательные значения разрешены. Значение 'auto' указывает, что данный край сжимаемой области будет тем же, что и край генерируемого бокса элемента (т.е. 'auto' означает то же, что '0'.)

Если координаты округляются до пикселных значений, необходимо следить, чтобы не осталось видимых пикселов, когда <left> + <right> равно ширине элемента (или <top> + <bottom> равно высоте элемента), и наоборот, чтобы не оставалось невидимых пикселов, когда эти значения равны 0.

Предки элемента могут также иметь сжатые области (в тех случаях, когда их свойство 'overflow' - 'visible'); то, что отображается, находится на пересечении различных сжатых областей.

Если сжатая область выходит за пределы окна документа ПА, содержимое может быть сжато до размеров окна среды окружения.

Эти два правила:

P { clip: rect(5px, 10px, 10px, 5px); } P { clip: rect(5px, -5px, 10px, 5px); }

создадут прямоугольную сжимаемую область, ограниченную пунктирной линией:

[D]

Примечание. В CSS2 все сжимаемые области прямоугольны. Мы предполагаем в будущем расширение, разрешающее непрямоугольное сжатие

'visibility'

Значение: visible | hidden | collapse | inherit

Начальное: inherit

Применяется: ко всем элементам

Наследуется: нет

Процентное: N/A

Носитель: визуальный

Свойство 'visibility' специфицирует, отображаются ли боксы, генерируемые элементом. Невидимые боксы всё ещё влияют на структуру (см. свойство 'display' - 'none', чтобы полностью подавить генерацию бокса). Значения имеют следующий смысл:

visible

Генерируемый бокс виден.

hidden

Генерируемый бокс невидим (полностью прозрачен), но влияет на структуру.

collapse

См. также раздел динамические эффекты рядов и столбцов в таблицах. Если используется не с рядами или столбцами, 'collapse' имеет то же значение, что и 'hidden'.

Это свойство может использоваться вместе со скриптами для создания динамических эффектов.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <STYLE type="text/css"> <!-- #container1 { position: absolute; top: 2in; left: 2in; width: 2in } #container2 { position: absolute; top: 2in; left: 2in; width: 2in; visibility: hidden; } --> </STYLE> </HEAD> <BODY> <P>Choose a suspect:</P> <DIV id="container1"> <IMG alt="Al Capone" width="100" height="100" src="suspect1.jpg"> <P>Name: Al Capone</P> <P>Residence: Chicago</P> </DIV> <DIV id="container2"> <IMG alt="Lucky Luciano" width="100" height="100" src="suspect2.jpg"> <P>Name: Lucky Luciano</P> <P>Residence: New York</P> </DIV> <FORM method="post" action="http://www.suspect.org/process-bums"> <P> <INPUT name="Capone" type="button" value="Capone" onclick='show("container1");hide("container2")'> <INPUT name="Luciano" type="button" value="Luciano" onclick='show("container2");hide("container1")'> </FORM> </BODY> </HTML>

Лекция 12. Генерируемое содержимое, автоматическая нумерация и списки

Описываются механизмы генерации содержимого.

В некоторых случаях бывает необходимо, чтобы пользовательские агенты (ПА) отображали содержимое не из дерева документа. Известный пример - нумерованный список: автор не хочет, чтобы нумерация выводилась явным образом, он или она хотят, чтобы ПА генерировал нумерацию автоматически. Также автор может пожелать, чтобы ПА вставлял слово "Figure" перед заглавием или фигурой или "Chapter 7" в начале 7 главы. В особенности для аудио и брайль-носителей, ПА должны иметь возможность вставить эти строки.

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

[x]. Свойство 'content' в сочетании с псевдоэлементами :before и :after.

[x]. Звуковые свойства 'cue-before' и 'cue-after' (см. главу звуковые таблицы стилей). Если свойство 'content' комбинируется со звуковыми свойствами, то они выводятся в следующем порядке: :before, 'cue-before', ('pause-before'), содержимое элемента, ('pause-after'), 'cue-after' и :after.

[x]. Элементы со значением 'list-item' для свойства 'display'.

Ниже описаны механизмы, ассоциированные со свойством 'content'.

Авторы специфицируют стиль и размещение генерируемого содержимого с помощью псевдоэлементов :before и :after. Как видно из их имён, псевдоэлементы :before и :after специфицируют размещение содержимого до и после содержимого дерева документа элемента. Свойство 'content' в соединении с этими псевдоэлементами специфицирует, что же будет вставлено.

Следующее правило вставляет строку "Note: " перед содержимым каждого элемента P, чей атрибут "class" имеет значение "note":

P.note:before { content: "Note: " }

Форматирующие объекты (напр., боксы), генерируемые элементом, включают генерируемое содержимое. Так, например, изменение вышеприведённой таблицы стилей:

P.note:before { content: "Note: " } P.note { border: solid green }

вызовет появление сплошной зелёной рамки вокруг параграфа, включая начальную строку.

Псевдоэлементы :before и :after наследуют любые наследуемые свойства из тех элементов дерева документа, к которым они присоединены.

Следующие правила вставляют открывающий знак кавычек перед каждым элементом Q. Цвет знака кавычки - красный, но шрифт будет тот же, что и шрифт остальной части элемента Q:

Q:before { content: open-quote; color: red }

В объявлениях псевдоэлементов :before или :after ненаследуемые свойства получают свои начальные значения.

Так, например, поскольку начальное значение свойства 'display' - 'inline', кавычка в предыдущем примере вставляется как инлайн-бокс (т.е. на той же самой строке, что и содержимое начального текста элемента). В следующем примере свойство 'display' явно устанавливается в 'block', так что вставленный текст становится блоком:

BODY:after { content: "The End"; display: block; margin-top: 2em; text-align: center; }

Обратите внимание, что пользователи аудио-ПА услышат слова "The End" после вывода оставшейся части содержимого BODY.

ПА обязаны игнорировать следующие свойства при наличии псевдоэлементов :before и :after: 'position', 'float', свойства списков и таблиц.

Псевдоэлементы :before и :after допускают значения свойства 'display':

[x].

Если субъект селектора является элементом уровня блока, допустимыми значениями будут 'none', 'inline', 'block' и 'marker'.

Если 'display' имеет другие значения, псевдоэлементы будут вести себя так, как если бы значение было 'block'.

[x].

Если субъект селектора является инлайн-элементом, допустимыми значениями будут 'none' и 'inline'.

Если 'display' имеет другие значения, псевдоэлементы будут вести себя так, как если бы значение было 'inline'.

Примечание. Другие значения могут быть допущены в будущих уровнях CSS.

'content'

Значение: [ <string> | <uri> | <counter> | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit

Начальное: пустая строка

Применяется: к псевдоэлементам :before и :after

Наследуется: нет

Процентное: N/A

Носитель: все

Это свойство используется с псевдоэлементами :before и :after для генерации содержимого документа.

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

<string>

Содержимое текста (см. раздел строки).

<uri>

Значением является URI, обозначающий внешний ресурс. Если ПА не может поддержать данный ресурс (в связи с типами носителя), он может игнорировать данный ресурс.

Примечание.CSS2 не предлагает механизмов для изменения размеров внедрённого объекта или для предоставления его текстуального описания, подобных атрибутам "alt" или "longdesc" для изображений HTML. Это может быть изменено в будущих уровнях CSS.

<counter>

Счётчики/Counters могут быть специфицированы двумя различными функциями: 'counter()' или 'counters()'. Первая имеет две формы: 'counter(name)' или 'counter(name, style)'. Генерируемый текст является значением именованного счётчика от этой точки в структуре форматирования; он форматируется в указанном стиле (по умолчанию - 'decimal'). Вторая функция имеет также две формы: 'counters(name, string)' или 'counters(name, string, style)'. Генерируемый текст является значениями всех счётчиков с данным именем от этой точки в структуре форматирования, разделёнными специфицированной строкой. Счётчики выводятся в указанном стиле(по умолчанию - 'decimal'). См. раздел автоматические счётчики и нумерация.

open-quote и close-quote

Эти значения замещаются подходящей строкой свойства 'quotes'.

no-open-quote и no-close-quote

Ничего не вставляют (пустая строка), но увеличивают (уменьшают) уровень вложения кавычек.

attr(X)

Эта функция возвращает строковое значение X для субъекта селектора. Строка не разбирается процессором CSS. Если субъект селектора не имеет атрибута X, возвращается пустая строка. Чувствительность к регистру имён атрибутов зависит от языка документа.

Примечание. В CSS2 невозможно обращаться к значениям атрибутов других элементов селектора.

Свойство 'display' регулирует, куда помещается содержимое, в блок, инлайн- или маркированный бокс.

Авторы должны поместить объявление 'content' в правила @media, если содержимое является медиа-чувствительным. Например, буквенный текст может использоваться для любой группы носителей, но изображения применяются только к медиа-группам visual + bitmap, а звуковые файлы применяются только к звуковым медиа-группам.

Следующее правило вызывает проигрывание звукового файла в конце отрезка с кавычками (см. дополнительные механизмы в разделе "звуковые таблицы стилей"):

@media aural { BLOCKQUOTE:after { content: url("beautiful-music.wav") } }

Следующее правило вставляет текст атрибута "alt" HTML перед изображением. Если изображение не выводится, пользователь увидит текст "alt".

IMG:before { content: attr(alt)}

Авторы могут включать новые строки в генерируемое содержимое путём ввода escape-последовательности "\A" в одной из строк после свойства 'content'. Это вставляет форсированный обрыв строки, подобно элементу BR в HTML. См. дополнительную информацию об escape-последовательности "\A" в разделах "Строки" и "Символы и регистр" .

H1:before { display: block; text-align: center; content: "chapter\A hoofdstuk\A chapitre" }

Генерируемое содержимое не изменяет дерево документа. Обычно оно не передаётся обратно процессору языка документа (например, для повторного разбора).

Примечание. В будущих уровнях CSS свойство 'content' сможет принимать дополнительные значения, позволяя варьировать стиль участков генерируемого содержимого, но в CSS2 всё содержимое псевдоэлементов :before или :after имеет один стиль.

Могут быть следующие ситуации:

1Элемент 'run-in' или 'compact' имеет псевдоэлемент :before типа 'inline': псевдоэлементы учитываются, если размер бокса элемента вычислен (для 'compact') и выведен внутри того же бокса блока, что и элемент.

2Элемент 'run-in' или 'compact' имеет псевдоэлемент :after типа 'inline': применяются правила предыдущего пункта.

3Элемент 'run-in' или 'compact' имеет псевдоэлемент :before типа 'block': псевдоэлемент форматируется как блок поверх элемента и не участвует в вычислении размера элемента (для 'compact').

4Элемент 'run-in' или 'compact' имеет псевдоэлемент :after типа 'block': и элемент, и его псевдоэлемент :after форматируются как боксы блока. Элемент не форматируется как инлайн-бокс в своём собственном псевдоэлементе :after.

5Элемент, следующий за элементом 'run-in' или 'compact', имеет :before типа 'block': решение о том, как форматировать элемент 'run-in'/'compact', принимается с учётом результирующего бокса блока из псевдоэлемента :before.

6Элемент, следующий за элементом 'run-in' или 'compact', имеет :before типа 'inline': решение о том, как форматировать элемент 'run-in'/'compact', зависит от значения 'display' элемента, к которому присоединён :before.

Это заголовок 'run-in' с псевдоэлементом :after, после которого идёт параграф с псевдоэлементом :before. В этом примере все псевдоэлементы являются инлайн (по умолчанию).

Когда таблица стилей:

H3 { display: run-in } H3:after { content: ": " } P:before { content: "... " }

применяется к такому документу-источнику:

<H3>Centaurs</H3> <P>have hoofs <P>have a tail

визуальное форматирование будет таким:

Centaurs: ... have hoofs ... have a tail

В CSS2 авторы могут специфицировать, в чувствительной к стилю и контекстно-зависимой манере, как ПА должны отображать знаки кавычек. Свойство 'quotes' специфицирует пары знаков кавычек для каждого уровня внедрённого закавычивания. Свойство 'content' даёт доступ к таким знакам кавычек и вставляет их до и после закавычивания.

'quotes'

Значение: [<string> <string>]+ | none | inherit

Начальное: зависит от ПА

Применяется: ко всем элементам

Наследуется: да

Процентное: N/A

Носитель: визуальный

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

none

Значения 'open-quote' и 'close-quote' свойства 'content' не производят знаков кавычек.

[<string> <string>]+

Значения для 'open-quote' и 'close-quote' свойства 'content' берутся из данного списка пар знаков кавычек (закрывающих и открывающих). Первая (самая левая) пара представляет самый внешний уровень закавычивания, вторая пара - первый уровень внедрения и т.д. ПА обязан применять подходящие пары знаков кавычек в соответствии с уровнем внедрения.

Применение следующей таблицы стилей:

/* Специфицируются пары кавычек двух уровней для двух языков */ Q:lang(en) { quotes: '"' '"' "'" "'" } Q:lang(no) { quotes: """ """ "<" ">" } /* Вставляются кавычки до и после содержимого элемента Q */ Q:before { content: open-quote } Q:after { content: close-quote }

к данному фрагменту HTML:

<HTML lang="en"> <HEAD> <TITLE>Quotes</TITLE> </HEAD> <BODY> <P><Q>Quote me!</Q> </BODY> </HTML>

позволит ПАгенту выдать:

"Quote me!"

а данный фрагмент HTML:

<HTML lang="no"> <HEAD> <TITLE>Quotes</TITLE> </HEAD> <BODY> <P><Q>Trondere grater nar <Q>Vinsjan pa kaia</Q> blir deklamert.</Q> </BODY> </HTML>

выдаст:

"Trondere grater nar <Vinsjan pa kaia> blir deklamert."

Примечание. Хотя знаки кавычек, специфицированные в 'quotes' предыдущего примера, по соглашению находятся на клавиатурах компьютера, установки для высококачественного вывода потребуют других символов ISO 10646. В следующей информативной таблице приведён список некоторых символов кавычек ISO 10646:

Ориентировочное представлениекод ISO 10646 (hex)Описание
"0022КАВЫЧКА [двойная кавычка ASCII]
'0027АПОСТРОФ [одиночная кавычка ASCII]
<2039ОДИНОЧНАЯ ЛЕВАЯ УГЛОВАЯ КАВЫЧКА
>203AОДИНОЧНАЯ ПРАВАЯ УГЛОВАЯ КАВЫЧКА
«00ABЛЕВАЯ ДВОЙНАЯ УГЛОВАЯ КАВЫЧКА
»00BBПРАВАЯ ДВОЙНАЯ УГЛОВАЯ КАВЫЧКА
`2018ЛЕВАЯ ОДИНОЧНАЯ КАВЫЧКА [single high-6]
'2019ПРАВАЯ ОДИНОЧНАЯ КАВЫЧКА [single high-9]
``201CЛЕВАЯ ДВОЙНАЯ КАВЫЧКА [double high-6]
''201DПРАВАЯ ДВОЙНАЯ КАВЫЧКА [double high-9]
,,201EДВОЙНАЯ КАВЫЧКА LOW-9 [double low-9]

Знаки кавычек вставляются в соответствующих местах документа значениями 'open-quote' и 'close-quote' свойства 'content'. Каждое вхождение 'open-quote' или 'close-quote' замещается одной их строк значения 'quotes', базируясь на глубине вложения.

'Open-quote' относится к первой кавычке из пары, 'close-quote' относится ко второй. То, какая пара кавычек используется, зависит от уровня вложения кавычек: число вхождений 'open-quote' во всём сгенерированном тексте перед текущим вхождением минус число вхождений 'close-quote'. Если глубина - 0, используется первая пара, если глубина - 1, вторая пара и т.д. Если глубина вложения больше, чем число пар, повторяется последняя пара.

Обратите внимание, что глубина вложения кавычек не зависит от вложения документа-источника или структуры форматирования.

Некоторые стили печати требуют, чтобы знак открывающей кавычки повторялся перед каждым параграфом блока кавычек, охватывающего несколько параграфов, но только последний параграф оканчивался знаком закрывающей кавычки. В CSS этого можно добиться вставкой "фантома" закрывающих кавычек. Ключевое слово 'no-close-quote' уменьшает уровень кавычек, но не вставляет знак кавычки.

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

BLOCKQUOTE P:before { content: open-quote } BLOCKQUOTE P:after { content: no-close-quote } BLOCKQUOTE P.last:after { content: close-quote }

Это относится к последнему параграфу, маркированному классом "last", поскольку нет селекторов, которые могут совпадать с последним потомком элемента.

Для симметрии имеется также ключевое слово 'no-open-quote', которое ничего не вставляет, а увеличивает глубину закавычивания на единицу.

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

Французский внутри английского:

The device of the order of the garter is "Honi soit qui mal y pense."

Английский внутри французского:

Il disait: " Il faut mettre l'action en < fast forward >."

Таблица стилей типа следующей установит свойство 'quotes' таким образом, что 'open-quote' и 'close-quote' будут корректно работать во всех элементах.

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

Обратите внимание на использование комбинатора-потомка (">") для установки кавычек в элементы на базе языка окружающего текста:

[LANG|=fr] > * { quotes: """ """ "\2039" "\203A" } [LANG|=en] > * { quotes: "\201C" "\201D" "\2018" "\2019" }

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

Если Вы можете печатать их напрямую, то они будут выглядеть примерно так:

[LANG|=fr] > * { quotes: """ """ "<" ">" } [LANG|=en] > * { quotes: """ """ "'" "'" }

Автоматическая нумерация в CSS2 контролируется двумя свойствами, 'counter-increment' и 'counter-reset. Счётчики, определённые в этих свойствах, используются с функциями counter() и counters() свойства 'content'.

'counter-reset

Значение: [ <identifier> <integer>? ]+ | none | inherit

Начальное: none

Применяется: ко всем элементам

Наследуется: нет

Процентное: N/A

Носитель: все

'counter-increment'

Значение: [ <identifier> <integer>? ]+ | none | inherit

Начальное: none

Применяется: ко всем элементам

Наследуется: нет

Процентное: N/A

Носитель: все

Свойство 'counter-increment' принимает одно или более имён счётчиков (идентификаторы), за каждым из которых может следовать целое число. Это число обозначает, насколько счётчик увеличивается при каждом появлении элемента. Увеличение по умолчанию - 1. Допустимы 0 и негативные значения.

Свойство 'counter-reset также содержит список из одного или более имён счётчиков, за каждым из которых может следовать целое число. Целое число задаёт значение, в которое счётчик сбрасывается при каждом появлении элемента. По умолчанию - 0.

Если 'counter-increment' относится к счётчику, который не находится в области видимости (см. ниже) какого-либо 'counter-reset, то принимается, что счётчик установлен в 0 корневым элементом.

Здесь показан способ нумерации глав и разделов: "Chapter 1", "1.1", "1.2" и т.д.:

H1:before { content: "Chapter " counter(chapter) ". "; counter-increment: chapter; /* Добавляет 1 к главе */ counter-reset: section; /* Устанавливает раздел в 0 */ } H2:before { content: counter(chapter) "." counter(section) " "; counter-increment: section; }

Если элемент увеличивает/сбрасывает счётчик и использует его (в свойстве 'content' в псевдоэлементах :before или :after), то счётчик используется после того, как увеличен/сброшен.

Если элемент и увеличивает, и сбрасывает счётчик, то счётчик сначала сбрасывается, а затем увеличивается.

Свойство 'counter-reset следует правилам каскадирования. Таким образом, в соответствии с каскадированием, следующая таблица стилей:

H1 { counter-reset: section -1 } H1 { counter-reset: imagenum 99 }

сбросит только 'imagenum'. Чтобы сбросить оба счётчика, их нужно специфицировать вместе:

H1 { counter-reset: section -1 imagenum 99 }

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

Так, следующего достаточно для нумерации вложенных элементов списка. Результат очень похож на применение установки 'display:list-item' и 'list-style: inside' в элементе LI:

OL { counter-reset: item } LI { display: block } LI:before { content: counter(item) ". "; counter-increment: item }

Самовложение базируется на том принципе, что каждый элемент, имеющий 'counter-reset для счётчика X, создаёт новый счётчик X, область видимости которого - элемент, его предшествующие родственники и все потомки элемента и его предшествующих родственников.

В предыдущем примере OL создаст счётчик, и все потомки OL будут ссылаться на этот счётчик.

Если мы обозначим с помощью item[n] nый экземпляр счётчика "item" и "(" и ")" - начало и конец области видимости, то следующий фрагмент HTML будет использовать указанные счётчики. (Мы используем ту же таблицу стилей, что и в предыдущем примере).

<OL> <!-- (set item[0] to 0 --> <LI>item <!-- increment item[0] (= 1) --> <LI>item <!-- increment item[0] (= 2) --> <OL> <!-- (set item[1] to 0 --> <LI>item <!-- increment item[1] (= 1) --> <LI>item <!-- increment item[1] (= 2) --> <LI>item <!-- increment item[1] (= 3) --> <OL> <!-- (set item[2] to 0 --> <LI>item <!-- increment item[2] (= 1) --> </OL> <!-- ) --> <OL> <!-- (set item[3] to 0 --> <LI> <!-- increment item[3] (= 1) --> </OL> <!-- ) --> <LI>item <!-- increment item[1] (= 4) --> </OL> <!-- ) --> <LI>item <!-- increment item[0] (= 3) --> <LI>item <!-- increment item[0] (= 4) --> </OL> <!-- ) --> <OL> <!-- (reset item[4] to 0 --> <LI>item <!-- increment item[4] (= 1) --> <LI>item <!-- increment item[4] (= 2) --> </OL> <!-- ) -->

Функция 'counters()' генерирует строку, составленную из значений всех счётчиков с тем же самым именем, разделённых заданной строкой.

Следующая таблица стилей нумерует вложенные элементы списка как "1", "1.1", "1.1.1" и т.д.

OL { counter-reset: item } LI { display: block } LI:before { content: counters(item, "."); counter-increment: item }

По умолчанию счётчики форматируются десятичными числами, а все стили, доступные для свойства 'list-style-type', доступны также для счётчиков. Обозначение будет такое:

counter(name)

для таблицы стилей по умолчанию, или:

counter(name, 'list-style-type')

Допустимы все стили, включая 'disc', 'circle', 'square' и 'none'.

H1:before { content: counter(chno, upper-latin) ". " } H2:before { content: counter(section, upper-roman) " - " } BLOCKQUOTE:after { content: " [" counter(bq, hebrew) "]" } DIV.note:before { content: counter(notecntr, disc) " " } P:before { content: counter(p, none) }

Элемент, который не отображается ('display' установлено в 'none'), не может установить или сбросить счётчик.

С помощью следующей таблицы стилей элементы H2 с классом "secret" не увеличивают 'count2'.

H2.secret {counter-increment: count2; display: none}

В то же время, элементы с 'visibility', установленной в 'hidden', увеличивают счётчики.

Большинство элементов уровня блока в CSS генерируют один основной бокс блока.

В этом разделе мы обсуждаем два механизма CSS, которые заставляют элемент генерировать два бокса: один основной бокс блока (для содержимого элемента) и отдельный бокс маркёра (для элемента оформления, такого как кружок, изображение или номер). Бокс маркёра может быть позиционирован внутри или вне основного бокса. В отличие от содержимого :before и :after, бокс маркёра не влияет на позицию основного бокса, какой бы ни была схема позиционирования.

Самым общим из этих двух механизмов является новый для CSS2 механизм, называемый маркёры. Механизм с более ограниченными возможностями привлекает свойства списков CSS1. Свойства списков дают авторам быстрый результат для многих сценариев упорядоченных и неупорядоченных списков. Однако маркёры дают авторам точный контроль над содержимым и позицией маркёров. Маркёры можно использовать вместе со счётчиками для создания новых стилей списков, нумерации примечаний на полях и многого другого.

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

Эта программа HTML и таблица стилей:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Создание списка с маркёрами</TITLE> <STYLE type="text/css"> LI:before { display: marker; content: counter(mycounter, lower-roman) "."; counter-increment: mycounter; } </STYLE> </HEAD> <BODY> <OL> <LI> Это первый элемент списка. <LI> Это второй элемент списка. <LI> Это третий элемент списка. </OL> </BODY> </HTML>

должны дать на выходе примерно следующее:

i. Это первый элемент списка. ii. Это второй элемент списка. iii. Это третий элемент списка.

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

Маркёры создаются путём установки свойства 'display' в 'marker' внутри псевдоэлементов :before или :after. Поскольку содержимое 'block' и 'inline' в :before и :after является частью основного бокса, генерируемого элементом, содержимое 'marker' форматируется в независимом боксе маркёра вне основного бокса. Боксы маркёра форматируются как единая строка (т.е. один бокс строки (строчный бокс)), поэтому они не обладают такой гибкостью, как поплавки. Боксы маркёра создаются только тогда, когда свойство 'content' псевдоэлементов действительно генерирует содержимое.

Боксы маркёра имеют заполнение и рамку, но не имеют полей.

Для псевдоэлемента :before базовая линия текста в боксе маркёра будет выровнена вертикально относительно базовой линии текста первой строки содержимого основного бокса. Если основной бокс не содержит текста, верхний внешний край бокса маркёра будет выровнен с верхним внешним краем основного бокса. Для псевдоэлемента :after базовая линия текста в боксе маркёра будет выровнена вертикально относительно базовой линии текста последней строки содержимого основного бокса. Если основной бокс не содержит текста, нижний внешний край бокса маркёра будет выровнен с нижним внешним краем основного бокса.

Высота бокса маркёра задаётся в свойстве 'line-height'. Бокс маркёра :before (:after) участвует в подсчёте высоты первого (последнего) строчного бокса основного бокса. Таким образом, маркёры выравниваются по первой и последней строке содержимого элемента, даже если боксы маркёра находятся в разных строчных боксах. Если в основном боксе отсутствует первый или последний строчный бокс, то бокс маркёра сам устанавливает свой первый строчный бокс.

Вертикальное выравнивание бокса маркёра внутри его строчного бокса специфицируется свойством 'vertical-align'.

Если значение свойства 'width' - 'auto', то ширина содержимого бокса маркёра является шириной содержимого, иначе - это значение 'width'. Для значений 'width' меньших, чем ширина содержимого, свойство 'overflow' специфицирует поведение при переполнении. Боксы маркёра могут перекрывать основные боксы. Для значений 'width' больших, чем ширина содержимого, свойство 'text-align' определяет горизонтальное выравнивание содержимого в боксе маркёра.

Свойство 'marker-offset' специфицирует смещение по горизонтали между боксом маркёра и ассоциированным основным боксом. Расстояние измеряется между их ближайшими краями рамок.

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

Если свойство 'display' имеет значение 'marker' для содержимого, генерируемого элементом с 'display: list-item', то бокс маркёра, генерируемый для ':before', замещает нормальный маркёр элемента списка.

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Выравнивание содержимого в боксе маркёра</TITLE> <STYLE type="text/css"> LI:before { display: marker; content: "(" counter(counter) ")"; counter-increment: counter; width: 6em; text-align: center; } </STYLE> </HEAD> <BODY> <OL> <LI> Это первый элемент списка. <LI> Это второй элемент списка. <LI> Это третий элемент списка. </OL> </BODY> </HTML>

должен дать примерно такой вывод:

(1) Это первый элемент списка. (2) Это второй элемент списка. (3) Это третий элемент списка.

В следующем примере создаются маркёры до и после элементов списка.

Этот документ:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Маркёры до и после элементов списка</TITLE> <STYLE type="text/css"> @media screen, print { LI:before { display: marker; content: url("smiley.gif"); LI:after { display: marker; content: url("sad.gif"); } } </STYLE> </HEAD> <BODY> <UL> <LI>первый элемент списка появляется первым <LI>второй элемент списка появляется вторым </UL> </BODY> </HTML>

должен дать примерно такой вывод (здесь используется рисунок ascii вместо изображения gif улыбки):

:-) первый элемент списка появляется первым :-( :-) второй элемент списка появляется вторым :-(

В следующем примере маркёры используются для нумерации примечаний (параграфов).

Данный документ:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Маркёры для создания нумерованных примечаний 4</TITLE> <STYLE type="text/css"> P { margin-left: 12 em; } @media screen, print { P.Note:before { display: marker; content: url("note.gif") "Примечание " counter(note-counter) ":"; counter-increment: note-counter; text-align: left; width: 10em; } } </STYLE> </HEAD> <BODY> <P>Это первый параграф данного документа.</P> <P CLASS="Note">Это очень короткий документ.</P> <P>Это конец.</P> </BODY> </HTML>

должен дать примерно такой вывод:

Это первый параграф данного документа. Примечание 1: Это очень короткий документ. Это конец.

'marker-offset'

Значение: <length> | auto | inherit

Начальное: auto

Применяется: к элементам с 'display: marker'

Наследуется: нет

Процентное: N/A

Носитель: визуальный

Это свойство специфицирует расстояние между ближайшим краем рамки бокса маркёра и ассоциированным с ним основным боксом. Смещение может или специфицироваться пользователем (<length>), или выбираться ПА ('auto').

Значения размеров могут быть отрицательными, но могут существовать ограничения, в зависимости от специфики реализации.

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

Эта программа HTML и таблица стилей:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>Пример маркёров 5</TITLE> <STYLE type="text/css"> P { margin-left: 8em } /* Создаёт пространство для счётчиков */ LI:before { display: marker; marker-offset: 3em; content: counter(mycounter, lower-roman) "."; counter-increment: mycounter; } </STYLE> </HEAD> <BODY> <P> Это большой предшествующий параграф ... <OL> <LI> Это первый элемент списка. <LI> Это второй элемент списка. <LI> Это третий элемент списка. </OL> <P> Это большой последующий параграф ... </BODY> </HTML>

должен дать примерно такой вывод:

Это большой предшествующий параграф ... i. Это первый элемент списка. ii. Это второй элемент списка. iii. Это третий элемент списка. Это большой последующий параграф ...

Свойства списков создают базовое визуальное форматирование списков. Как и с более общими маркёрами, элемент с 'display: list-item' генерирует основной для содержимого элемента и необязательный бокс маркёра. Другие свойства списка позволяют авторам специфицировать тип маркёра (изображение, глиф или цифра) и его позицию относительно основного бокса (вне или внутри него перед содержимым). Они не позволяют авторам специфицировать другие стили (цвет, шрифт, выравнивание и т.п.) для маркёра списка или уточнять его позицию относительно основного бокса.

Следовательно, если маркёр M (созданный в 'display: marker') используется с элементом списка, созданным в свойстве списка, M замещает стандартный маркёр элемента списка.

Вместе со свойствами списка свойства фона применяются только к основному боксу; бокс маркёра 'outside' прозрачен. Маркёры дают больший контроль над стилем бокса маркёра.

'list-style-type'

Значение: disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-alpha | lower-latin | upper-alpha | upper-latin | hebrew | armenian | georgian | cjk-ideographic | hiragana | katakana | hiragana-iroha | katakana-iroha | none | inherit

Начальное: disc

Применяется: к элементам с 'display: list-item'

Наследуется: да

Процентное: N/A

Носитель: визуальный

Это свойство специфицирует вид маркёра элемента списка, если 'list-style-image' имеет значение 'none' или если изображение, на которое указывает URI, не может быть отображено. Значение 'none' специфицирует отсутствие маркёров, для других случаев имеются три типа маркёров: глифы, системы нумерации и алфавитные системы.

Примечание. Нумерованные списки улучшают доступность документа, т.к. делают списки более удобными для навигации.

Глифы специфицируются с помощью disc, circle и square. Их точное представление зависит от ПА.

Системы нумерации специфицируются с помощью:

decimal

Десятеричных чисел, начинающихся с 1.

decimal-leading-zero

Десятеричных чисел, дополненных начальными нулями (например, 01, 02, 03, ..., 98, 99).

lower-roman

Римских цифр в нижнем регистре (i, ii, iii, iv, v и т.д.).

upper-roman

Римских цифр в верхнем регистре (I, II, III, IV, V и т.д.).

hebrew

Традиционной еврейской нумерации.

georgian

Традиционной грузинской нумерации (an, ban, gan, ..., he, tan, in, in-an, ...).

armenian

Традиционной армянской нумерации.

cjk-ideographic

Простых идеографических чисел.

hiragana

a, i, u, e, o, ka, ki, ...

katakana

A, I, U, E, O, KA, KI, ...

hiragana-iroha

i, ro, ha, ni, ho, he, to, ...

katakana-iroha

I, RO, HA, NI, HO, HE, TO, ...

ПА, не распознающий системы нумерации, должен использовать 'decimal'.

Примечание. Этот документ не специфицирует точный механизм действия каждой системы нумерации (например, как вычисляются римские цифры). В будущих Примечаниях W3C могут быть даны дальнейшие разъяснения.

Алфавитные системы специфицируются с помощью:

lower-latin или lower-alpha

Букв ascii нижнего регистра (a, b, c, ... z).

upper-latin или upper-alpha

Букв ascii верхнего регистра (A, B, C, ... Z).

lower-greek

Классических греческих букв нижнего регистра альфа, бета, гамма, ... (?, ?, ?, ...)

Эта спецификация не определяет то, как происходит перенос алфавитной системы в конце алфавита. Например, после 26 элементов списка представление 'lower-latin' не определено. Поэтому для длинных списков мы рекомендуем, чтобы авторы специфицировали точные числа.

Например, следующий документ HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Нумерация латинскими буквами нижнего регистра</TITLE> <STYLE type="text/css"> OL { list-style-type: lower-roman } </STYLE> </HEAD> <BODY> <OL> <LI> Это первый элемент списка. <LI> Это второй элемент списка. <LI> Это третий элемент списка. </OL> </BODY> </HTML>

может дать на выходе:

i Это первый элемент списка. ii Это второй элемент списка. iii Это третий элемент списка.

Обратите внимание, что выравнивание маркёров списка (здесь - по правому краю) зависит от ПА.

Примечание. Следующие версии CSS могут предоставить более совершенные механизмы международных стилей нумерации.

'list-style-image'

Значение: <uri> | none | inherit

Начальное: none

Применяется: к элементам с 'display: list-item'

Наследуется: да

Процентное: N/A

Носитель: визуальный

Это свойство определяет изображение, которое будет использоваться как маркёр элемента списка. Если изображение доступно, оно замещает маркёр, установленный 'list-style-type'.

В следующем примере устанавливается маркёр - изображение "ellipse.png" - в начале каждого элемента списка .

UL { list-style-image: url("http://png.com/ellipse.png") }

'list-style-position'

Значение: inside | outside | inherit

Начальное: outside

Применяется: к элементам с 'display: list-item'

Наследуется: да

Процентное: N/A

Носитель: визуальный

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

outside

Бокс маркёра находится вне основного бокса блока

Примечание. CSS1 не специфицировал точное размещение бокса маркёра из соображений совместимости, и в CSS2 осталась такая же двусмысленность. Для более точного управления боксами маркёров используйте маркёры.

inside

Бокс маркёра это первый инлайн-бокс в боксе основного блока, после которого всплывает содержимое элемента.

Например:

<HTML> <HEAD> <TITLE>Сравнение позиций inside/outside</TITLE> <STYLE type="text/css"> UL { list-style: outside } UL.compact { list-style: inside } </STYLE> </HEAD> <BODY> <UL> <LI>first list item comes first <LI>second list item comes second </UL> <UL class="compact"> <LI>first list item comes first <LI>second list item comes second </UL> </BODY> </HTML>

Этот пример отображается так:

[D]

В тексте справа-налево маркёры должны выводиться с правой стороны бокса.

'list-style'

Значение: [ <list-style-type> || <'list-style-position'> || <'list-style-image'> ] | inherit

Начальное: не определено для сокращённых свойств

Применяется: к элементам с 'display: list-item'

Наследуется: да

Процентное: N/A

Носитель: визуальный

Свойство 'list-style' - это сокращённое обозначение для установки трёх свойств: 'list-style-type', 'list-style-image' и 'list-style-position' в одном месте в таблице стилей.

UL { list-style: upper-roman inside } /* Какой-либо UL */ UL > UL { list-style: circle outside } /* UL - потомок UL */

Хотя авторы могут специфицировать информацию о 'list-style' непосредственно в элементах списка (напр., LI в HTML), это нужно делать аккуратно. Следующие правила похожи, но в первом объявляется селектор-потомок, а во втором (более специфический) дочерний селектор.

OL.alpha LI { list-style: lower-alpha } /* LI - потомок OL */ OL.alpha > LI { list-style: lower-alpha } /* LI-наследник OL */

Авторы, использующие только селекторы-потомки, могут не получить тот результат, на который рассчитывали. Рассмотрим следующие правила:

<HTML> <HEAD> <TITLE>ПРЕДУПРЕЖДЕНИЕ: Непредсказуемый результат из-за каскадирования</TITLE> <STYLE type="text/css"> OL.alpha LI { list-style: lower-alpha } UL LI { list-style: disc } </STYLE> </HEAD> <BODY> <OL class="alpha"> <LI>level 1 <UL> <LI>level 2 </UL> </OL> </BODY> </HTML>

Ожидается, что элементы списка уровня 1 будут маркированы лэйблами 'lower-alpha', а элементы уровня 2 - лэйблами 'disc'. Однако порядок каскадирования вызовет маскирование второго правила первым (которое содержит специфическую информацию класса). В следующих правилах для решения проблемы используется дочерний селектор:

OL.alpha > LI { list-style: lower-alpha } UL LI { list-style: disc }

Другим решением может быть спецификация информации 'list-style' только для типа элемента списка:

OL.alpha { list-style: lower-alpha } UL { list-style: disc }

При наследовании значения 'list-style' будут перенесены из элементов OL и UL в элементы LI. Это рекомендуемый способ спецификации информации стиля списка.

Значение URI может комбинироваться с любым другим значением, как здесь:

UL { list-style: url("http://png.com/ellipse.png") disc }

В данном примере 'disc' будет использоваться, если изображение недоступно. Значение 'none' свойства 'list-style' устанавливает 'list-style-type' и 'list-style-image' в 'none':

UL { list-style: none }

В результате - никакие маркёры элементов списка не отображаются.

Лекция 13. Страничные носители

Описываются механизмы форматирования страничной модели CSS.

Страничный носитель (например, бумага, плёнка, страницы , выводимые на экране компьютера и т.п.) отличается от непрерывного носителя тем, что содержимое документа разделяется на одну или более абстрактных страниц. Чтобы обрабатывать разрывы страниц, CSS2 расширяет модель визуального форматирования следующим образом:

1Страничный бокс расширяет модель бокса, что позволяет авторам специфицировать размеры страницы, её полей и т.д.

2Страничная модель расширяет модель визуального форматирования, чтобы рассчитывать разрывы страниц.

Страничная модель CSS 2 специфицирует, как форматируется документ в пределах прямоугольной области - страничного бокса - который имеет конечные ширину и высоту. Страничный бокс не обязательно соответствует реальному листу\странице, на котором документ в конце концов будет выведен (бумага, плёнка, экран и т.п.). Страничная модель CSS специфицирует форматирование в страничном боксе, но за перенос страничного бокса на лист отвечает пользовательский агент (ПА).

Некоторые возможности переноса:

[x]. Перенос одного страничного бокса на один лист (например, односторонняя печать).

[x]. Перенос двух страничных боксов на две стороны одного листа (например, двухсторонняя печать).

[x]. Перенос N (маленького) страничного бокса на один лист (называется "n-up").

[x]. Перенос одного (большого) страничного бокса на N x M листов (называется "tiling").

[x]. Создание подписей. Подпись, это группа страниц, напечатанных на листе, которые после брошюрования и обрезки выглядят, как книга, и расположены в соответствующем порядке.

[x]. Печать одного документа в несколько потоков печати.

[x]. Вывод в файл.

Хотя CSS2 не специфицирует то, как ПА переносят страничные боксы на листы, не даётся также и определённого механизма для того, чтобы сообщить ПА о размерах и ориентации целевого листа.

Страничный бокс это прямоугольный регион, содержащий две области:

[x]. Область страницы. Включает боксы, расположенные на этой странице. Края области страницы работают как начальный содержащий блок планировки и расположены между разрывами страниц.

[x]. Область полей, окружающих область страницы.

Примечание. В CSS2 свойства рамки и заполнения не применяются к страницам; это возможно в будущем.

Авторы специфицируют размеры, ориентацию, поля и т.п. страничного бокса в правиле @page. Правило @page состоит из ключевого слова "@page", селектора станицы (и, без пробелов, возможного псевдокласса страницы) и блока объявлений (находящихся в т.н. контексте страницы).

Селектор страницы специфицирует, для каких страниц объявления применяются. В CSS2 селекторы страницы могут означать первую страницу, все левые страницы, все правые страницы или страницу с определённым именем.

Размеры страничного бокса устанавливаются свойством 'size'. Размеры области страницы - это размеры страничного бокса минус область полей.

Следующее правило @page устанавливает размер страничного бокса в 8.5 x 11 дюймов и создаёт поле '2см' со всех сторон между краем страничного бокса и областью листа:

@page { size 8.5in 11in; margin: 2cm }

Свойство 'marks' в правиле @page специфицирует знаки обрезки и крестика для страничного бокса.

Свойства полей ('margin-top', 'margin-right', 'margin-bottom', 'margin-left' и 'margin') применяются внутри контекста страницы. На следующей диаграмме показаны соотношения между листом, страничным боксом и полями страницы:

[D]

Вычисленное значение полей бокса вверху или внизу области страницы - '0'.

Контекст страницы не имеет никаких указаний о шрифте, так что единицы измерения 'em' и 'ex' не допускаются. Процентные значения свойств полей относительны к размерам страничного бокса; для левого и правого полей - они соотносятся с шириной страничного бокса, а для верхнего и нижнего полей - к высоте страничного бокса. Все другие единицы измерения, ассоциированные с соответствующими свойствами CSS2, являются допустимыми.

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

'size'

Значение: <length>{1,2} | auto | portrait | landscape | inherit

Начальное: auto

Применяется: к контексту страницы

Наследуется: N/A

Процентное: N/A

Носитель: визуальный, страничный

Это свойство специфицирует размер и ориентацию страничного бокса.

Размер страничного бокса может быть или "absolute/абсолютным" (фиксированный размер), или "relative/относительным" (масштабируемым, т.е. соответствующим имеющимся размерам листа). Относительные страничные боксы позволяют ПА масштабировать документ и оптимально использовать целевые размеры.

Три значения свойства 'size' создают относительный cтраничный бокс:

auto

Страничный бокс будет установлен в соответствии с размерами и ориентацией целевого листа.

landscape

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

portrait

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

Здесь внешний край страничного бокса будет выровнен с целевым. Процентные значения свойства 'margin' - относительны к целевым размерам, поэтому, если целевые размеры - 21.0см x 29.7см (т.е. A4), поля будут 2.10см и 2.97см.

@page { size: auto; /* auto это начальное значение */ margin: 10%; }

Измеряемые значения свойства 'size' создают абсолютный страничный бокс. Если специфицировано только одно значение, оно устанавливает и ширину, и высоту страничного бокса (т.е. квадратный бокс). Поскольку страничный бокс является начальным содержащим блоком, процентные значения для свойства 'size' не допускаются.

@page { size: 8.5in 11in; /* ширина - высота */ }

В этом примере устанавливаются: ширина страничного бокса - 8.5 дюймов и высота - 11 дюймов. Такой страничный бокс требует размеров целевого листа 8.5"x11" или больше.

ПА могут позволять пользователям контролировать перенос страничного бокса на лист (например, поворачивать абсолютный страничный бокс при печати).

Если страничный бокс не вмещается в размеры целевого листа, ПА может:

[x]. Повернуть страничный бокс на 90°, если это поможет разместить его.

[x]. Масштабировать бокс, чтобы вместить в целевые размеры.

ПА должен запрашивать у пользователя подтверждение на эти операции.

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

'marks'

Значение: [ crop || cross ] | none | inherit

Начальное: none

Применяется: к контексту страницы

Наследуется: N/A

Процентное: N/A

Носитель: визуальный, страничный

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

знаки обрезки обозначают место, где страница должна быть обрезана. Знак "крестик" (известный также как знак регистрации) используется для выравнивания листов.

Маркировка видна только на абсолютных страничных боксах (см. свойство 'size'). При относительных страничных боксах, страничный бокс будет выровнен с целевым, а маркировка будет находиться за пределами области печати.

Размеры, стиль и расположение крестиков зависят от ПА.

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

Все страницы автоматически классифицируются ПАгентами на псевдоклассы :left или :right.

@page :left { margin-left: 4cm; margin-right: 3cm; } @page :right { margin-left: 3cm; margin-right: 4cm; }

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

Авторы могут специфицировать также стиль для первой страницы документа псевдоклассом :first:

@page { margin: 2cm } /* Все поля установлены в 2см */ @page :first { margin-top: 10cm /* Верхнее поле на первой странице - 10см */ }

Является ли первая страница документа :left или :right, зависит от направления письма в документе и находится вне пределов рассмотрения данного документа. Однако, чтобы форсировать первую страницу в :left или :right, авторы могут вставить разрыв страницы перед первым генерируемым боксом (например, в HTML, специфицировать это для элемента BODY).

Свойства, специфицированные в :left (или :right) в правилах @page, переопределяют те же свойства, специфицированные в правиле @page и не имеющие специфицированного псевдокласса. Свойства, специфицированные в :first в правиле @page, переопределяют те же свойства, специфицированные в :left (или :right) в правилах @page.

Примечание. Добавление объявлений в псевдоклассы :left или :right не указывает, выходит ли документ на принтер одно- или двухсторонним (это находится вне рамок данной спецификации).

Примечание. В будущих версиях CSS возможно появление других псевдоклассов страницы.

При форматировании содержимого модели страницы, часть содержимого может выйти за границы страничного бокса. Например, элемент, чьё свойство 'white-space' имеет значение 'pre', может генерировать бокс, который окажется шире страничного бокса. Также, если боксы позиционированы абсолютно, они могут оканчиваться в "несогласованном" месте. Например, изображения могут быть размещены у края страничного бокса или на 100,000 дюймов ниже страничного бокса.

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

[x]. Содержимое должно допускаться немного позади страничного бокса, чтобы страницы слегка "сочились".

[x]. ПА должны исключить генерирование большого количества пустых страничных боксов для позиционирования элементов (например, Вы не захотите печатать 100 пустых страниц). Заметьте, однако, что генерирование небольшого количества пустых страничных боксов может понадобиться для значений 'left' и 'right' в 'page-break-before' и 'page-break-after'.

[x]. Авторы не должны позиционировать элементы в несогласованных местах в целях исключения их вывода. Вместо этого нужно:

[x]. Чтобы в целом уменьшить генерацию боксов, установить свойство 'display' в 'none'.

[x]. Чтобы сделать бокс невидимым, использовать свойство 'visibility'.

[x]. ПА могут обрабатывать боксы, расположенные вне страничного бокса, разными способами, в том числе - отбрасывая их или создавая для них страничные боксы в конце документа.

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

'page-break-before'

Значение: auto | always | avoid | left | right | inherit

Начальное: auto

Применяется: к элементам уровня блока

Наследуется: нет

Процентное: N/A

Носитель: визуальный, страничный

'page-break-after'

Значение: auto | always | avoid | left | right | inherit

Начальное: auto

Применяется: к элементам уровня блока

Наследуется: нет

Процентное: N/A

Media: визуальный, страничный

'page-break-inside'

Значение: avoid | auto | inherit

Начальное: auto

Применяется: к элементам уровня блока

Наследуется: да

Процентное: N/A

Media: визуальный, страничный

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

auto

Ни форсирует, ни запрещает разрыв страницы перед (после, внутри) генерируемого бокса.

always

Всегда форсирует разрыв страницы перед (после, внутри) генерируемого бокса.

avoid

Исключает разрыв страницы перед (после, внутри) генерируемого бокса.

left

Форсирует один или два разрыва страницы перед (после, внутри) генерируемого бокса, так что следующая страница форматируется как левая страница.

right

Форсирует один или два разрыва страницы перед (после, внутри) генерируемого бокса, так что следующая страница форматируется как правая страница.

Потенциально размещение разрыва страницы находится под влиянием свойства 'page-break-inside' родительского элемента, свойства 'page-break-after' предыдущего элемента и свойства 'page-break-before' последующего элемента. Если эти свойства имеют значения, отличные от 'auto', то значения 'always', 'left' и 'right' получают преимущество перед 'avoid'.

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

'page'

Значение: <identifier> | auto

Начальное: auto

Применяется: к элементам уровня блока

Наследуется: да

Процентное: N/A

Носитель: визуальный, страничный

Свойство 'page' можно использовать для спецификации определённого типа страницы, на которой элемент должен быть выведен.

Все таблицы будут размещены на правой стороне страницы с ориентацией landscape:

@page rotated {size: landscape} TABLE {page: rotated; page-break-before: right}

Свойство 'page' работает так: если бокс блока с инлайн-содержимым имеет свойство 'page', отличное от аналогичного свойства предшествующего бокса блока с инлайн-содержимым, тогда один или два разрыва страницы вставляются между ними, и боксы после разрыва отображаются в страничном боксе именованного типа. См. ниже "Форсированные разрывы страниц".

В этом примере две таблицы отображаются на landscape-страницах (или на одной странице, если входят), и тип страницы "narrow" вообще не используется, вопреки установкам в DIV:

@page narrow {size: 9cm 18cm} @page rotated {size: landscape} DIV {page: narrow} TABLE {page: rotated}

с этим документом:

<DIV> <TABLE>...</TABLE> <TABLE>...</TABLE> </DIV>

'orphans'

Значение: <integer> | inherit

Начальное: 2

Применяется: к элементам уровня блока

Наследуется: да

Процентное: N/A

Носитель: визуальный, страничный

'widows'

Значение: <integer> | inherit

Начальное: 2

Применяется: к элементам уровня блока

Наследуется: да

Процентное: N/A

Носитель: визуальный, страничный

Свойство 'orphans' специфицирует минимальное количество строк параграфа, которые должны оставаться внизу страницы. Свойство 'widows' специфицирует минимальное количество строк параграфа, которые должны оставаться вверху страницы. Примеры того, как они используются для управления разрывами страниц, даны ниже.

Информацию о форматировании параграфов см. в разделе Строчные боксы.

При нормальном обтекании разрывы страниц могут появляться в следующих местах:

1На вертикальном поле между боксами блока. Если разрыв страницы появляется здесь, вычисленные значения соответствующих свойств 'margin-top' и 'margin-bottom' установлены в '0'.

2Между строчными боксами внутри бокса блока.

Эти разрывы являются субъектами для следующих правил:

[x]. Правило A: Разрывы из пункта (1) допускаются, только если свойства 'page-break-after' и 'page-break-before' всех элементов, генерирующих боксы у данного поля, разрешают это, что имеет место, когда по меньшей мере одно из них (свойств) имеет значение 'always', 'left' или 'right', или когда все они - 'auto'.

[x]. Правило B: В то же время, если все они - 'auto' и ближайший общий предок всех элементов имеет значение свойства 'page-break-inside' - 'avoid', тогда разрыв здесь не разрешается.

[x]. Правило C: Разрывы из пункта (2) допускаются, только если количество строчных боксов между разрывом и началом закрывающего бокса блока имеет значение 'orphans' или более, а количество строчных боксов между разрывом и концом бокса имеет значение 'widows' или более.

[x]. Правило D: В дополнение, разрывы (2) допускаются, только если свойство 'page-break-inside' - 'auto'.

Если вышесказанное не обеспечивает достаточное количество точек разрывов для предотвращения выхода содержимого за пределы страничного бокса, тогда правила B и D исключаются для того, чтобы найти дополнительные точки разрывов.

Если это всё ещё не даёт достаточного количества точек разрывов, то правила A и C также исключаются, чтобы найти дополнительные точки разрывов.

Разрывы страниц не могут появляться внутри боксов, позиционированных абсолютно.

Разрыв страницы обязан возникнуть в (1), если среди свойств 'page-break-after' и 'page-break-before' всех элементов, генерирующих боксы у данного поля, имеется по меньшей мере одно со значением 'always', 'left' или 'right'.

Разрыв страницы обязан появиться в (1), если последний строчный бокс выше этого поля и первый бокс - ниже него не имеют одинакового значения для 'page'.

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

[x]. Делать разрывы как можно реже.

[x]. Делать все страницы, не оканчивающиеся форсированным разрывом, одинаковой высоты.

[x]. Исключить разрывы внутри блока, имеющего рамку.

[x]. Исключить разрывы внутри таблицы.

[x]. Исключить разрывы внутри всплывающего элемента.

Предположим, например, что таблица стилей содержит 'orphans : 4', 'widows : 2', и имеется 20 свободных строк (строчных боксов) внизу текущей страницы:

[x]. Если параграф в конце текущей страницы содержит 20 строк или менее, он должен быть размещён на текущей странице.

[x]. Если параграф содержит 21 или 22 строк, вторая часть параграфа обязана не нарушать работы 'widows', и, следовательно, вторая часть обязана содержать точно две строки.

[x]. Если параграф содержит 23 строки или более, первая часть должна содержать 20 строк, а вторая часть - остальные строки.

Теперь предположим, что 'orphans' - '10', 'widows' - '20', и имеется 8 свободных строк внизу текущей страницы:

[x]. Если параграф в конце текущей страницы содержит 8 строк или менее, он должен быть размещён на текущей странице.

[x]. Если параграф содержит 9 строки или более, он не может быть разделён (что могло бы нарушить работу orphans), следовательно, он должен быть перемещён как блок на следующую страницу.

Объявления в контексте страницы подчиняются каскаду так же, как и нормальные объявления CSS2.

@page { margin-left: 3cm; } @page :left { margin-left: 4cm; }

Из-за более высокой специфики селектора псевдокласса, левое поле левых страниц будет '4см', а все остальные страницы (т.е. правые) - левое поле '3см'.

Лекция 14. Цвета и фон

Дается информация о спецификациях цвета и фона, их синтаксис и свойства.

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

Синтаксис значений цвета см. в разделе единицы измерения цвета.

'color'

Значение: <color> | inherit

Начальное: зависит от пользовательского агента (ПА)

Применяется: ко всем элементам

Наследуется: да

Процентное: N/A

Носитель: визуальный

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

EM { color: red } /* предопределённое название цвета */ EM { color: rgb(255,0,0) } /* диапазон RGB 0-255 */

Авторы могут специфицировать фон элемента (т.е. его видимую поверхность) как цвет или как изображение. В терминах модели бокса, "background" относится к фону содержимого и области заполнения. Цвет и стиль обрамления устанавливаются в свойствах обрамления. Поля всегда прозрачны, поэтому фон бокса-предка всегда просвечивает.

Свойства фона не наследуются, но фон бокса-предка будет по умолчанию просвечивать, поскольку начальное значение 'background-color' - 'transparent'.

Фон бокса, генерируемый корневым элементом, покрывает всю канву.

Для документов HTML, однако, мы рекомендуем, чтобы авторы специфицировали фон элемента BODY, а не элемента HTML.

ПА должны учитывать следующие правила приоритета при заполнении фона: если значение свойства 'background' для элемента HTML отлично от 'transparent', тогда используйте его, в ином случае - используйте значение свойства 'background' элемента BODY. Если результирующее значение - 'transparent', то представление не определено.

В соответствии с этими правилами, канва следующего документа HTML будет иметь фон "marble":

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Установка фона канвы</TITLE> <STYLE type="text/css"> BODY { background: url("http://style.com/marble.png") } </STYLE> </HEAD> <BODY> <P>Мой фон - marble. </BODY> </HTML>

'background-color'

Значение: <color> | transparent | inherit

Начальное: transparent

Применяется: ко всем элементам

Наследуется: нет

Процентное: N/A

Носитель: визуальный

Это свойство устанавливает цвет фона элемента значением <color> или ключевым словом 'transparent' (чтобы сделать фон подложки просвечивающим).

H1 { background-color: #F00 }

'background-image'

Значение: <uri> | none | inherit

Начальное: none

Применяется: ко всем элементам

Наследуется: нет

Процентное: N/A

Носитель: визуальный

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

Значениями данного свойства являются <uri>, для спецификации изображения, или 'none', если изображение не используется.

BODY { background-image: url("marble.gif") } P { background-image: none }

'background-repeat'

Значение: repeat | repeat-x | repeat-y | no-repeat | inherit

Начальное: repeat

Применяется: ко всем элементам

Наследуется: нет

Процентное: N/A

Носитель: визуальный

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

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

repeat

Изображение размножается горизонтально и вертикально.

repeat-x

Изображение размножается только горизонтально.

repeat-y

Изображение размножается только вертикально.

no-repeat

Изображение не размножается: выводится только одна копия изображения.

BODY { background: white url("pendant.gif"); background-repeat: repeat-y; background-position: center; }

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

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

[D]

'background-attachment'

Значение: scroll | fixed | inherit

Начальное: scroll

Применяется: ко всем элементам

Наследуется: нет

Процентное: N/A

Носитель: визуальный

Если специфицировано изображение фона, то данное свойство определяет, является ли оно фиксированным относительно порта просмотра ('fixed'), или прокручивается вместе с документом ('scroll').

Даже если изображение зафиксировано, оно будет видно только в том случае, если находится в области фона или заполнения элемента. Таким образом, пока изображение не размножено ('background-repeat: repeat'), оно может быть невидимым.

Здесь создаётся бесконечная вертикальная полоса, остающаяся "приклеенной" к порту просмотра при прокручивании элемента.

BODY { background: red url("pendant.gif"); background-repeat: repeat-y; background-attachment: fixed; }

ПА могут рассматривать 'fixed' как 'scroll'. Однако рекомендуется, чтобы они интерпретировали 'fixed' корректно, хотя бы для элементов HTML и BODY, поскольку у автора нет способа предоставлять изображение только для тех браузеров, которые поддерживают 'fixed'. См. детали в разделе соответствие.

'background-position'

Значение: [ [<percentage> | <length> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit

Начальное: 0% 0%

Применяется: к элементам уровня блока и к замещаемым элементам

Наследуется: нет

Процентное: относится к размеру самого бокса

Носитель: визуальный

Если фоновое изображение специфицировано, то данное свойство определяет его (изображения) начальную позицию. Значения имеют следующий смысл:

<percentage> <percentage>

Если пара значений - '0% 0%', то верхний левый угол изображения выровнен с левым верхним углом кромки заполнения бокса. Пара значений '100% 100%' помещает нижний правый угол изображения в нижний правый угол области заполнения. Если пара значений - '14% 84%', точка изображения 14% поперёк и 84% вниз помещается в точку 14% поперёк и 84% вниз области заполнения.

<length> <length>

Если пара значений - '2cm 2cm', то верхний левый угол изображения помещается на 2cm вправо и на 2cm вниз от верхнего левого угла области заполнения.

top left и left top

То же, что '0% 0%'.

top, top center и center top

То же, что '50% 0%'.

right top и top right

То же, что '100% 0%'.

left, left center и center left

То же, что '0% 50%'.

center и center center

То же, что '50% 50%'.

right, right center и center right

То же, что '100% 50%'.

bottom left и left bottom

То же, что '0% 100%'.

bottom, bottom center и center bottom

То же, что '50% 100%'.

bottom right и right bottom

То же, что '100% 100%'.

Если задано только одно значение, в процентах или единицах измерения, то оно устанавливает только горизонтальную позицию, вертикальная позиция будет 50%.

Если заданы два значения, первое задаёт горизонтальную позицию. Допускаются комбинации значений в процентах и единицах измерения (например, '50% 2cm'). Допускаются негативные значения позиции. Ключевые слова не могут комбинироваться со значениями в процентах или единицах измерения (все возможные сочетания приведены выше).

BODY { background: url("banner.jpeg") right top } /* 100% 0% */ BODY { background: url("banner.jpeg") top center } /* 50% 0% */ BODY { background: url("banner.jpeg") center } /* 50% 50% */ BODY { background: url("banner.jpeg") bottom } /* 50% 100% */

Если фоновое изображение фиксировано в порте просмотра (см. свойство 'background-attachment'), то изображение размещается относительно порта просмотра, а не относительно области заполнения элемента. Например,

BODY { background-image: url("logo.png"); background-attachment: fixed; background-position: 100% 100%; background-repeat: no-repeat; }

В данном примере изображение (одиночное) размещается в правом нижнем углу порта просмотра.

'background'

Значение: [<'background-color'> || <'background-image'> || <'background-repeat'> || <'background-attachment'> || <'background-position'>] | inherit

Начальное: не определено для сокращённых свойств

Применяется: ко всем элементам

Наследуется: нет

Процентное: разрешено для 'background-position'

Носитель: визуальный

Свойство 'background' это сокращённое свойство для установки индивидуальных свойств фона (т.е. 'background-color', 'background-image', 'background-repeat', 'background-attachment' и 'background-position') в одном месте в таблице стилей.

Свойство 'background' сначала устанавливает все индивидуальные свойства фона в их начальные значения, а затем назначает явные значения, заданные в объявлении.

В первом правиле задано только значение 'background-color', а другие индивидуальные свойства установлены в свои начальные значения. Во втором правиле все индивидуальные свойства специфицированы.

BODY { background: red } P { background: url("chess.png") gray 50% repeat fixed }

По вопросам цветовой гаммы проконсультируйтесь в Gamma Tutorial в спецификации PNG ([PNG10]).

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

PC, использующий MS-Windows none

Unix, использующий X11 none

Mac, использующий QuickDraw применяет гамму 1.45 [ICC32] (приложения ColorSync-savvy могут просто передавать профиль sRGB ICC в ColorSync для выполнения необходимой коррекции цвета)

SGI, использующий X применяет значения гаммы из /etc/config/system.glGammaVal (значение по умолчанию - 1.70; приложения, запущенные на Irix 6.2 или выше могут просто передавать профиль sRGB ICC в систему управления цветом)

NeXT, использующий NeXTStep применяется гамма 2.22

"Применение гаммы" означает, что каждый из трёх - R, G и B - обязан быть конвертирован в R'=R gamma, G'=G gamma, B'=B gamma, прежде чем быть обработанным ОС.

Это можно быстро выполнить путём однократного создания 256-элементной просмотровой таблицы при вызове браузера таким вот образом:

for i := 0 to 255 do raw := i / 255.0; corr := pow (raw, gamma); table[i] := trunc (0.5 + corr * 255.0) end

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

Лекция 15. Шрифты

Описываются механизмы спецификации и выбора шрифта, общие (родовые) семейства шрифтов, их характеристики и алгоритмы совпадения.

Если текст документа отображается визуально, символы (абстрактные информационные элементы) обязаны отображаться абстрактными глифами. Один или более символов могут изображаться одним или более абстрактными глифами в доступном контекстно-зависимом стиле.

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

Шрифт - это набор глифов, соблюдающих один базовый мотив в соответствии с дизайном, размером, внешним видом и другими атрибутами, ассоциированными со всем набором, и отображение из символов в абстрактные глифы.

Визуальный пользовательский агент (ПА) обязан рассматривать следующие вопросы, прежде чем отображать символы:

[x]. Имеется ли, прямо или наследуемо, шрифт, специфицированный для данного символа?

[x]. Доступен ли этот шрифт для ПА?

[x]. Если это так, какой глиф(ы) отображает этот символ или последовательность символов?

[x]. Если нет, что нужно сделать? Подставлять ли другой шрифт? Может ли шрифт быть синтезирован? Может ли он быть получен из Web?

И в CSS1, и в CSS2 авторы специфицируют характеристики шрифта в серии свойств.

То, как ПА обрабатывают свойства, если нет совпадения шрифта на стороне клиента, было расширено в CSS2 по сравнению с CSS1. В CSS1 принималось, что все шрифты представлены в клиентской системе и идентифицируются исключительно по имени. Альтернативные шрифты могли быть специфицированы через свойства, но в то же время у ПА не было способа предложить пользователю какие-либо другие шрифты (даже стилистически подобные шрифты, которые были доступны ПА), кроме общих шрифтов по умолчанию.

В CSS2 всё это изменилось, и теперь появилось больше свободы:

[x]. для авторов таблиц стилей: описывать необходимые шрифты;

[x]. для пользовательских агентов: в выборе шрифтов, если затребованный авторами шрифт непосредственно не доступен.

CSS2 улучшает подбор шрифтов на стороне клиента, делает возможным синтезирование шрифта и прогрессирующее отображение, а также загрузку шрифтов из Web. Это улучшает возможности 'WebFonts'.

В шрифтовой модели CSS2, как и в CSS1, каждый ПА имеет в своём распоряжении базу данных (БД) шрифтов. CSS1 ссылалось на эту БД, но не предоставляло детальной информации о том, что в БД находится. CSS2 определяет информацию в этой БД и позволяет авторам таблиц стилей работать в ней. При запросе на отображение символа определённого шрифта, ПА сначала идентифицирует тот шрифт БД, который "наиболее соответствует" специфицированному шрифту (в соответствии с алгоритмом совпадения шрифтов). После идентификации шрифта, ПА запрашивает данные шрифта локально или из Web и может вывести символ с использованием соответствующих глифов.

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

То, как ПА конструирует базу шрифтов, находится вне поля зрения данной спецификации, поскольку реализация БД зависит от таких факторов, как операционная система, система окон и клиент.

Первая фаза механизма шрифтов CSS рассматривает, как авторы таблиц стилей специфицируют, какие шрифты должны использоваться ПА. Во-первых очевидно, что можно специфицировать шрифт по имени - строке, разделённой на части, например, "BT Swiss 721 Heavy Italic".

К сожалению, не существует общепринятой хорошо проработанной и универсальной системы классификации шрифтов по их именам, и терминология, применимая к именам одного семейства шрифтов, может не подходить для других. Например, термин 'italic' обычно используется для обозначения наклонного текста, но наклонный текст может также обозначаться Oblique, Slanted, Incline, Cursive или Kursiv.

Имена шрифтов обычно содержат термины, описывающие "вес" шрифта. Главной задачей этих имён является различение шрифтов одного семейства по толщине. По этим именам не существует общепринятых значений для указания толщины, и использование этих значений может очень различаться. Например, утолщённый шрифт может описываться как Regular, Roman, Book, Medium, Semi- или Demi-Bold, Bold или Black, в зависимости от того, насколько чёрным является "нормальный" шрифт.

Этот недостаток систематизации имён делает невозможным, в общем случае, генерацию модифицированного имени шрифта, отличающегося определёнными признаками, такими как "жирность".

В связи с этим CSS использует другую модель. Шрифты запрашиваются не по имени, а по серии установленных свойств шрифта. Значения этих свойств формируют базис для механизма выбора шрифта в ПА. Свойства шрифта могут модифицироваться по отдельности, например, для увеличения толщины, и новый набор значений свойств шрифта используется затем для выбора из БД шрифтов. В результате повышается надёжность работы авторов и разработчиков таблиц стилей.

CSS2 специфицирует шрифты в соответствии со следующими характеристиками:

Семейство шрифта/Font Family

Свойство Семейство шрифта специфицирует, какое семейство шрифтов используется для вывода текста. Семейство это группа шрифтов, созданных с использованием сходных принципов дизайна и внешнего вида. Один член семейства может быть italic, другой bold, третий - сжатый или использующий малые заглавные. Имена семейств включают "Helvetica", "New Century Schoolbook", и "Kyokasho ICA L". Имена семейств не ограничены латиницей. Имена семейств могут быть сгруппированы по различным категориям: без или с засечками, с непропорциональными символами, симулирующие письмо от руки, фантазийные шрифты и т.д.

Стиль шрифта/Font style

Специфицирует, отображается ли текст нормальным, italic или наклонным. Italic - это более курсивный шрифт, чем normal, но не такой курсивный, чтобы отображать письмо от руки. Oblique - это наклонная форма шрифта normal, и обычно используется вместе со шрифтами sans-serif. Такое определение устраняет путаницу, когда слегка наклонённые шрифты normal обозначают как oblique, а normal Greek - как italic.

Вариант шрифта/Font variant

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

Вес шрифта/Font weight

Вес шрифта имеет отношение к толщине глифов, используемых для вывода текста, относительно других шрифтов того же семейства.

Сжатие/Font stretch

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

Размер/Font size

Относится к размеру шрифта от базовой линии, когда установлен в solid (в терминах CSS это тогда, когда свойства 'font-size' и 'line-height' имеют одно значение).

Для всех свойств, за исключением 'font-size', значения размеров 'em' и 'ex' относятся к размеру шрифта текущего элемента. Для 'font-size' эти единицы измерения ссылаются на размер шрифта-предка. См. также раздел единицы измерения.

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

О классификации шрифтов см. раздел дескрипторы шрифта.

'font-family'

Значение: [[ <family-name> | <generic-family> ],]* [<family-name> | <generic-family>] | inherit

Начальное: зависит от ПА

Применяется: ко всем элементам

Наследуется: да

Процентное: N/A

Носитель: визуальный

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

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

BODY { font-family: Baskerville, "Heisi Mincho W3", Symbol, serif }

Латинские символы будут взяты из шрифта "Baskerville", японские глифы - из "Heisi Mincho W3", а глифы математических символов - из "Symbol". Все другие будут браться из общего семейства шрифтов 'serif'.

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

Есть два типа имён семейств шрифтов:

<family-name>/Имя семейства

Имя семейства шрифтов по выбору. В предыдущем примере "Baskerville", "Heisi Mincho W3" и "Symbol" являются семействами шрифтов. Имена семейств шрифтов, содержащие пробелы, должны заключаться в кавычки. Если кавычки отсутствуют, любые символы пробела до и после имени шрифта игнорируются, а любая последовательность пробелов внутри имени шрифта конвертируется в одиночный пробел.

<generic-family>

Определены следующие родовые семейства: 'serif', 'sans-serif', 'cursive', 'fantasy' и 'monospace'. См. описание этих семейств в разделе родовые семейства шрифтов. Имена родовых семейств являются ключевыми словами и не обязательно должны заключаться в кавычки.

Авторам рекомендуется предлагать родовое семейство шрифтов в качестве последней альтернативы, для надёжности. Например:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Font test</TITLE> <STYLE type="text/css"> BODY { font-family: "new century schoolbook", serif } </STYLE> </HEAD> <BODY> <H1 style="font-family: 'My own font', fantasy">Test</H1> <P>What's up, Doc? </BODY> </HTML>

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

*:lang(ja-jp) { font: 900 14pt/16pt "Heisei Mincho W9", serif } *:lang(zh-tw) { font: 800 14pt/16.5pt "Li Sung", serif }

Здесь выбирается любой элемент соответствующего языка - японского или традиционного китайского - и запрашивается соответствующий шрифт.

'font-style'

Значение: normal | italic | oblique | inherit

Начальное: normal

Применяется: ко всем элементам

Наследуется: да

Процентное: N/A (не установлено)

Носитель: визуальный

Свойство 'font-style' запрашивает стили normal (иногда называемый "roman" или "upright"), italic и oblique в семействе шрифтов. Значения имеют следующий смысл:

normal

Определяет шрифт, который классифицирован как 'normal' в БД шрифтов ПА.

oblique

Определяет шрифт, который классифицирован как 'oblique' в БД шрифтов в ПА. Шрифты со словами Oblique, Slanted или Incline в своих названиях обычно помечаются в БД шрифтов как 'oblique'. Шрифт, помеченный в БД шрифтов ПА как 'oblique', может в действительности генерироваться электронным наклоном нормального шрифта.

italic

Определяет шрифт, который классифицирован как 'italic' в БД шрифтов ПА, или, если это недоступно, шрифт, помеченный 'oblique'. Шрифты со словами Italic, Cursive или Kursiv в своих названиях обычно помечаются как 'italic'.

В этом примере текст normal в элементах H1, H2 или H3 будет отображаться шрифтом italic. Однако, выделенный текст (EM) в элементе H1 будет выведен как normal.

H1, H2, H3 { font-style: italic } H1 EM { font-style: normal }

'font-variant'

Значение: normal | small-caps | inherit

Начальное: normal

Применяется: ко всем элементам

Наследуется: да

Процентное: N/A

Носитель: визуальный

В шрифтах малых заглавных букв глифы символов нижнего регистра походят на символы верхнего регистра, но меньшего размера и слегка других пропорций. Свойство 'font-variant' запрашивает двухкамерный шрифт (имеющий два регистра, как в латинице). Это свойство не имеет видимого эффекта для однокамерного написания (когда имеется только один регистр, как в большинстве систем написания). Значения имеют следующий смысл:

normal

Специфицирует шрифт, который не помечен как шрифт малых заглавных букв.

small-caps

Специфицирует шрифт, который помечен как шрифт малых заглавных букв. Если конкретный шрифт малых заглавных букв недоступен, ПА должны симулировать такой шрифт, например, замещением букв нижнего регистра обычного шрифта пересчитанными символами верхнего регистра. В крайнем случае, глифы непересчитанных букв верхнего регистра шрифта normal могут замещать глифы шрифта малых заглавных букв, и весь текст выводится символами верхнего регистра.

Результатом следующего примера будет элемент H3 с малыми заглавными буквами, с выделенными словами (EM) из наклонённых малых заглавных:

H3 { font-variant: small-caps } EM { font-style: oblique }

Поскольку это свойство переводит символы текста в верхний регистр, применяется тот же подход, что и в text-transform'.

'font-weight'

Значение: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit

Начальное: normal

Применяется: ко всем элементам

Наследуется: да

Процентное: N/A

Носитель: визуальный

Свойство 'font-weight' специфицирует вес шрифта. Значения имеют следующий смысл:

от 100 до 900

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

normal

То же, что '400'.

bold

То же, что '700'.

bolder

Определяет вес шрифта, более тёмный, чем наследуемый. Если такого веса нет, результатом будет более "тёмное" числовое значение (а шрифт не изменяется), если только наследуемое значение не '900', в этом случае результат будет также '900'.

lighter

Определяет вес шрифта, назначаемый шрифту, который светлее, чем наследуемый. Если такого веса нет, результатом будет более "светлое" числовое значение (а шрифт не изменяется), если только наследуемое значение не '100', в этом случае результат будет также '100'.

P { font-weight: normal } /* 400 */ H1 { font-weight: 700 } /* bold */ BODY { font-weight: 400 } STRONG { font-weight: bolder } /* 500 возможно */

Дочерние элементы наследуют вычисленное значение веса.

'font-stretch'

Значение: normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit

Начальное: normal

Применяется: ко всем элементам

Наследуется: да

Процентное: N/A

Носитель: визуальный

Свойство 'font-stretch' выбирает стиль normal, condensed или extended из семейства. Абсолютные значения ключевых слов имеют следующий порядок, от самого узкого до самого широкого:

1ultra-condensed

2extra-condensed

3condensed

4semi-condensed

5normal

6semi-expanded

7expanded

8extra-expanded

9ultra-expanded

Относительное ключевое слово 'wider' устанавливает значение в следующее более "широкое" по сравнению с наследуемым значение (не выше 'ultra-expanded'); относительное ключевое слово 'narrower' устанавливает значение в следующее более "сжатое" значение ниже наследуемого значения (не ниже 'ultra-condensed').

'font-size'

Значение: <absolute-size> | <relative-size> | <length> | <percentage> | inherit

Начальное: medium

Применяется: ко всем элементам

Наследуется: да, вычисленное значение наследуется

Процентное: ссылается на размер шрифта родительского элемента

Носитель: визуальный

Это свойство описывает размер шрифта, установленного в solid. Значения имеют следующий смысл:

<absolute-size>

Ключевое слово <absolute-size> ссылается на вход в таблице размеров шрифта, вычисленной и хранимой пользовательским агентом. Возможные значения:

[ xx-small | x-small | small | medium | large | x-large | xx-large ]

На экране компьютера между смежными индексами применяется масштаб 1.2: если шрифт 'medium' - 12pt, то шрифт 'large' будет 14.4pt. Другие носители могут требовать других значений масштаба. Таким образом, ПА должен учитывать качество и доступность шрифтов при обсчёте таблицы размеров. Таблица может отличаться для разных семейств шрифтов.

Примечание. В CSS1 масштаб между смежными индексами принимался в 1.5 и, по опыту пользователей, оказался слишком большим.

<relative-size>/относительный размер

Ключевое слово <relative-size> интерпретируется относительно таблицы размеров шрифта и размера шрифта родительского элемента. Возможные значения:

[ larger | smaller ]

Например, если родительский элемент имеет размер шрифта 'medium', значение 'larger' сделает размер шрифта текущего элемента 'large'. Если размер родительского элемента не вмещается в диапазон таблицы, ПА свободен в интерполяции значений таблицы или округлении до ближайшего. ПАгенту может потребоваться экстраполировать значения таблицы, если цифровое значение находится вне ключевых слов.

<length>

Значение length специфицирует абсолютный размер шрифта (т.е. независимый от таблицы шрифтов ПА). Негативные значения недопустимы.

<percentage>

Процентное значение специфицирует абсолютный размер шрифта относительно размера шрифта родительского элемента. Использование процентных значений или значений в 'em' даёт более надёжные и каскадируемые таблицы стилей.

Текущее значение данного свойства может отличаться от обсчитанного свойства при наличии цифрового значения 'font-size-adjust' и недоступности некоторых размеров шрифта.

Дочерние элементы наследуют обсчитанное значение 'font-size' (в то же время, эффект 'font-size-adjust' может усложниться).

P { font-size: 12pt; } BLOCKQUOTE { font-size: larger } EM { font-size: 150% } EM { font-size: 1.5em }

'font-size-adjust'

Значение: <number> | none | inherit

Начальное: none

Применяется: ко всем элементам

Наследуется: да

Процентное: N/A

Носитель: визуальный

В двухкамерном написании субъективно очевидный размер и разборчивость шрифта меньше зависят от своих значений 'font-size', нежели от значений 'x-height', или, более доступно, от пропорции этих двух значений, называемой значением аспекта (font size, разделённый на x-height). Чем выше значение аспекта, тем более вероятно, что шрифт меньшего размера будет разборчивым. В противоположность этому, шрифты с меньшим значением аспекта скорее окажутся неразборчивыми ниже порогового значения, чем шрифты с более высоким значением аспекта. Прямая замена шрифтов в связи с размером шрифта может привести к появлению нечитаемых символов.

Например, популярный шрифт Verdana имеет значение аспекта 0.58; если измерение размера шрифта Verdana - 100 единиц, то его x-height - 58 единиц. Для сравнения, Times New Roman имеет значение аспекта 0.46. Verdana, следовательно, имеет тенденцию остаться разборчивым при меньших размерах, чем Times New Roman. И наоборот, Verdana чаще окажется слишком большим при замещении шрифта Times New Roman.

Это свойство позволяет авторам специфицировать значение аспекта, сохраняющее x-height первого шрифта в подставляемом шрифте. Значения имеют следующий смысл:

none

Не сохраняет x-height шрифта.

<number>

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

y(a/a') = c

где:

y = 'font-size' первого шрифта a' = значение аспекта доступного шрифта c = 'font-size' для применения к доступному шрифту

Например, если 14px Verdana (со значением аспекта 0.58) окажется недоступным, а доступный шрифт имеет значение аспекта 0.46, font-size замещающего будет 14 * (0.58/0.46) = 17.65px.

Уточнение размера шрифта имеет место при обсчёте текущего значения 'font-size'. Поскольку наследование базируется на обсчитанном значении, дочерние элементы будут наследовать неуточнённые значения.

Первый рисунок показывает различные типы шрифтов, растрированные в обычный размер (11pt. от 72 ppi), вместе с их значениями аспекта. Обратите внимание, что шрифты с большим значением аспекта оказываются больше, чем шрифты с низким значением аспекта. Шрифты со слишком низким значением аспекта оказываются нечитаемыми в данных размерах.

Следующий рисунок показывает результат 'font-size-adjust', где Verdana берётся как "первый шрифт", и результат применения масштаба. После применения, размеры шрифтов почти линеарны, хотя текущие (em) размеры варьируются более чем на 100%. Обратите внимание, что 'font-size-adjust' стремится также стабилизировать горизонтальное измерение строк.

'font'

Значение: [ [ <'font-style'> || <'font-variant'> || <'font-weight'> ]? <'font-size'> [ / <'line-height'> ]? <'font-family'> ] | caption | icon | menu | message-box | small-caption | status-bar | inherit

Начальное: см. конкретные свойства

Применяется: ко всем элементам

Наследуется: да

Процентное: допускается в 'font-size' и 'line-height'

Носитель: визуальный

Свойство 'font', за исключением случаев, описанных ниже, является сокращённым значением свойств установок 'font-style', 'font-variant', 'font-weight', 'font-size', 'line-height' и 'font-family' в том же месте таблицы стилей. Синтаксис этого свойства базируется на традиционной типографской нотации сокращений для установки нескольких свойств шрифта.

Все свойства, относящиеся к шрифтам, сначала устанавливаются в свои начальные значения, включая перечисленные в предыдущих параграфах, плюс 'font-stretch' и 'font-size-adjust'. Затем свойства, для которых заданы явные значения в 'font', устанавливаются в эти значения. Для определения допустимых и начальных значений см. ранее определённые свойства. Для обеспечения обратной совместимости нельзя устанавливать 'font-stretch' и 'font-size-adjust' в иные, нежели начальные, значения, используя свойство 'font'; вместо этого установите индивидуальные свойства.

P { font: 12pt/14pt sans-serif } P { font: 80% sans-serif } P { font: x-large/110% "new century schoolbook", serif } P { font: bold italic large Palatino, serif } P { font: normal small-caps 120%/120% fantasy } P { font: oblique 12pt "Helvetica Nue", serif; font-stretch: condensed }

Во втором правиле процентное значение размера шрифта ('80%') относится к размеру шрифта родительского элемента. В третьем правиле высота строки в процентах ('110%') относится к размеру шрифта самого элемента.

Первые три правила не специфицируют 'font-variant' и 'font-weight' явно, поэтому эти свойства получают свои начальные значения ('normal'). Обратите внимание, что имя семейства шрифтов "new century schoolbook", содержащее пробелы, заключено в кавычки. Четвёртое правило устанавливает 'font-weight' в 'bold', 'font-style' - в 'italic' и неявно устанавливает 'font-variant' в 'normal'.

Пятое правило устанавливает 'font-variant' ('small-caps'), 'font-size' (120% размера шрифта предка), 'line-height' (120% размера шрифта) и 'font-family' ('fantasy'). Из этого следует, что ключевое слово 'normal' применяется к двум оставшимся свойствам: 'font-style' и 'font-weight'.

Шестое правило устанавливает 'font-style', 'font-size' и 'font-family', другие свойства шрифта в свои начальные значения. Оно затем устанавливает 'font-stretch' в 'condensed', поскольку это свойство не может быть установлено в это значение путём использования сокращённого свойства 'font'.

Следующие значения относятся к системным шрифтам:

caption

Шрифт используется для именования элементов управления (ЭУ) (напр., кнопок, выпадающих боксов и меню и т.п.).

icon

Шрифт используется для лэйблов иконок.

menu

Шрифт используется в меню (напр., выпадающих меню и списках).

message-box

Шрифт используется в диалоговых боксах.

small-caption

Шрифт используется для лэйблов небольших ЭУ.

status-bar

Шрифт используется для строки состояния окна.

Системные шрифты могут устанавливаться только полностью, то есть: Семейство шрифта, размер, вес, стиль и т.д. - все устанавливаются одновременно. Эти значения могут быть затем установлены индивидуально, если это необходимо. Если шрифт с указанными характеристиками отсутствует на данной платформе, ПА или должен правильно заменить шрифт (напр., уменьшенная версия шрифта 'caption' может использоваться для шрифта 'smallcaption'), или подставить шрифт ПА по умолчанию. Как и для обычных шрифтов, если любые свойства системного шрифта не являются частью доступных операционной системе установок пользователя, то эти свойства должны быть установлены в свои начальные значения.

Это является причиной того, почему это свойство - "почти" сокращённое свойство: системные шрифты могут быть специфицированы только этим свойством, но не самим 'font-family', так что 'font' позволяет авторам сделать больше, чем вся сумма его подсвойств. В то же время, индивидуальные свойства, такие как 'font-weight', получают свои значения из системного шрифта, и (свойства) могут независимо варьироваться.

BUTTON { font: 300 italic 1.3em/1.7em "FB Armada", sans-serif } BUTTON P { font: menu } BUTTON P EM { font-weight: bolder }

Если шрифт для использования в выпадающих меню в конкретной системе установлен, к примеру, 9-пунктовый Charcoal с весом 600, тогда элементы P - потомки BUTTON будут отображаться так, как если бы действовало правило:

BUTTON P { font: 600 9pt Charcoal }

Поскольку сокращение 'font' устанавливает в начальное значение любое свойство, не получившее явно своего значения, это действие будет равносильно такому объявлению:

BUTTON P { font-style: normal; font-variant: normal; font-weight: 600; font-size: 9pt; line-height: normal; font-family: Charcoal }

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

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

Рекомендуется, чтобы ПА позволяли пользователям сделать альтернативный выбор общих шрифтов.

Глифы шрифтов serif, в терминах CSS, имеют изгибы на концах, зауженные концы или засечки на концах (включая выгнутые засечки). Шрифты Serif обычно пропорциональны. Они обычно отображают бoльшие отличия между тонкими и толстыми штрихами, нежели шрифты общего семейства 'sans-serif'. CSS использует термин 'serif' для применения со шрифтом любого письма, хотя для некоторых видов письма могут применяться другие наименования, как Mincho (японский), Sung или Song (китайский), Totum или Kodig (корейский). Любой шрифт, описанный таким образом, может использоваться для представления общего семейства 'serif'.

Вот примеры шрифтов, удовлетворяющих этому описанию:

Латинские шрифты Times New Roman, Bodoni, Garamond, Minion Web, ITC Stone Serif, MS Georgia, Bitstream Cyberbit
Греческие Bitstream Cyberbit
Кириллические Adobe Minion Cyrillic, Excelcior Cyrillic Upright, Monotype Albion 70, Bitstream Cyberbit, ER Bukinst
Еврейские New Peninim, Raanana, Bitstream Cyberbit
Японские Ryumin Light-KL, Kyokasho ICA, Futo Min A101
Арабские Bitstream Cyberbit
Шрифты Чероки Lo Cicero Cherokee

Глифы шрифтов sans-serif, в терминах CSS, имеют закруглённые ровные окончания - без засечек и каких-либо других орнаментаций. Шрифты Sans-serif обычно пропорциональны. Они часто имеют отклонения между тонкими и толстыми закруглениями, сравнимые со шрифтами семейства 'serif'. CSS использует термин 'sans-serif' для применения со шрифтом любого письма, хотя для некоторых видов письма могут применяться другие наименования, как Gothic (японский), Kai (китайский) или Pathang (корейский). Любой шрифт, описанный таким образом, может использоваться для представления общего семейства 'sans-serif'.

Примеры шрифтов, удовлетворяющих этому описанию:

Латинские шрифты MS Trebuchet, ITC Avant Garde Gothic, MS Arial, MS Verdana, Univers, Futura, ITC Stone Sans, Gill Sans, Akzidenz Grotesk, Helvetica
Греческие Attika, Typiko New Era, MS Tahoma, Monotype Gill Sans 571, Helvetica Greek
Кириллические Helvetica Cyrillic, ER Univers, Lucida Sans Unicode, Bastion
Еврейские Arial Hebrew, MS Tahoma
Японские Shin Go, Heisei Kaku Gothic W5
Арабские MS Tahoma

Глифы шрифтов cursive, в терминах CSS, обычно имеют связывающие окончания или другие курсивные характеристики типа italic. Глифы частично или полностью соединяются, и результат больше напоминает письмо от руки или кистью, чем типографскую печать. Шрифты для некоторых видов письма, таких как арабское, почти всегда курсивные. CSS использует термин 'cursive' для шрифтов любого письма, хотя другие имена - Chancery, Brush, Swing и Script также употребляются.

Примеры таких шрифтов:

Латинские Caflisch Script, Adobe Poetica, Sanvito, Ex Ponto, Snell Roundhand, Zapf-Chancery
Кириллические ER Architekt
Еврейские Corsiva
Арабские DecoType Naskh, Monotype Urdu 507

Фантазийные шрифты, как они используются в CSS, прежде всего декоративны, а уже потом содержат представление символов (в противоположность шрифтам Pi или Picture, не представляющим символы).

Примеры:

Латинские шрифты Alpha Geometrique, Critter, Cottonwood, FB Reactor, Studz

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

Латинские Courier, MS Courier New, Prestige, Everson Mono
Греческие MS Courier New, Everson Mono
Кириллические ER Kurier, Everson Mono
Японские Osaka Monospaced
Чероки Everson Mono

Вторая фаза механизма шрифтов CSS2 - выбор в ПА шрифта на базе специфицированных автором свойств шрифта, доступных шрифтов и т.д. Детали алгоритма подбора шрифта рассматриваются ниже.

Имеется четыре возможных действия при выборе шрифта: совпадение имени, смысловое совпадение, синтез и загрузка.

совпадение имени шрифта

В этом случае ПА использует существующий доступный шрифт, который имеет то же самое имя семейства, что и запрашиваемый шрифт. (Обратите внимание, что внешний вид и параметры не обязательно должны совпадать, если шрифт автора документа и шрифт клиентской системы - из разных "литеек"). Информация для сравнения ограничена свойствами шрифта CSS, включая имя семейства. Это единственный метод, используемый CSS1.

смысловое совпадение

В этом случае ПА использует существующий доступный шрифт, который имеет наибольшее совпадение с затребованным шрифтом. (Обратите внимание, что метрические параметры могут не совпадать точно). Информация для сравнения включает информацию о роде шрифта (текстовый или символьный), природе засечек, весе, cap-высоте, x-высоте, восхождении, нисхождении, наклоне и т.п.

синтез

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

загрузка

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

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

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

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

Описания шрифтов добавляются к БД шрифтов и используются затем для выбора соответствующих данных шрифта. Описание шрифта содержит дескрипторы, такие как размещение данных шрифта в Web, и описание этих данных шрифта. Дескрипторы шрифта необходимы также при выборе свойств шрифта из таблицы стилей для определённых данных шрифта. Степень детализации описания шрифта может варьироваться от имени шрифта до списка ширины глифов.

Дескрипторы шрифта можно классифицировать по трём типам:

1служащие связкой между использованием шрифта в CSS и описанием шрифта (эти дескрипторы имеют те же имена, что и соответствующие свойства шрифта CSS),

2URI для локализации данных шрифта,

3для характеристики шрифта, являющиеся связкой между описанием шрифта и данными шрифта.

Все описания шрифта специфицируются at-правилом @font-face. Общая форма такая:

@font-face { <font-description> }

где <font-description> имеет форму:

дескриптор: значение; дескриптор: значение; [...] дескриптор: значение;

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

Доступные дескрипторы шрифта описываются далее в разделах этой спецификации.

Например, это шрифт 'Robson Celtic', определённый и имеющий ссылку в таблице стилей, содержащейся в документе HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"> <HTML> <HEAD> <TITLE>Font test</TITLE> <STYLE TYPE="text/css" MEDIA="screen, print"> @font-face { font-family: "Robson Celtic"; src: url("http://site/fonts/rob-celt") } H1 { font-family: "Robson Celtic", serif } </STYLE> </HEAD> <BODY>