Доступные форматы
Спецификация 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.
DСравнение лексического разбора в CSS и в CSS
Имеются некоторые различия между вышеприведённым синтаксисом и синтаксисом, специфицированным в рекомендациях CSS1 ([CSS1]). Большинство этих отличий - из-за новых понятий в CSS2, которые отсутствовали в CSS1. Другие - из-за того, что грамматика была переписана, чтобы сделать её более читабельной. Однако есть и некоторые несовместимые изменения, которые вызвали бы ошибку в CSS1. Они разъяснены ниже.
Таблицы стилей CSS1 могут быть кодированы только 1-байт-на-символ, как ASCII и ISO-8859-1. CSS2 не имеет таких ограничений. На практике было мало трудностей с экстраполированием сканера CSS1, и некоторые ПА принимали 2-байтное кодирование.
CSS1 допускал только четыре 16-ричных числа после обратного слэша (\) для ссылок на символы Unicode, CSS2 допускает шесть. Кроме того, CSS2 допускает символы пробела в качестве разграничителей escape-последовательностей. Например, в соответствии с CSS1, строка "\abcdef" имеет 3 буквы (\abcd, e и f), а в соответствии с CSS2 - только одну (\abcdef).
Символ табуляции (ASCII 9) в строках не допускается. Однако, поскольку строки в CSS1 использовались только для имён шрифтов и для URL, единственное, что может привести к несовместимости между CSS1 и CSS2, это если таблица стилей содержит семейство шрифтов, имеющее символ табуляции в своём имени.
Также символы новой строки (escape-последовательность с обратным слэшем) не допускались в строках CSS1.
CSS2 разбирает число со следующим непосредственно за ним идентификатором как обозначение DIMEN (т.е. как неизвестный модуль). CSS1 разбирал его как число и как идентификатор. Это означает, что в CSS1 объявление 'font: 10pt/1.2serif' было корректным, а в 'font: 10pt/12pt serif'; в CSS2 требуется пробел перед "serif". (Некоторые ПА принимали первый пример, но не принимали второй.)
В CSS1 имя класса могло начинаться цифрой (".55ft"), если только оно не было размером (".55in").
В CSS2 такие классы разбираются как неизвестные размеры (чтобы позволить в будущем дополнение новых модулей). Чтобы сделать ".55ft" действующим классом, CSS2 требует, чтобы первая цифра была escape (".\55ft")
Единицы измерения em-квадрата
Определённые значения, такие как метрики ширины, выражаются в единицах, относительных к абстрактному квадрату, чья высота подразумевается как расстояние между строками того же размера, что и размер типа. Этот квадрат называется em-квадрат и является дизайн-решёткой, на которой определяются контуры глифов. Значение этого дескриптора специфицирует, на сколько единиц делится EM-квадрат. Обычными значениями являются, например, 250 (Intellifont), 1000 (Type 1) и 2048 (TrueType, TrueType GX и OpenType).
Если значение не специфицировано, то невозможно определить, что означает какая-либо метрика шрифта. Например, один шрифт имеет глифы нижнего регистра высотой 450, а меньший шрифт имеет высоту 890! Числа в действительности являются дробями; первый шрифт имеет 450/1000, а второй - 890/2048, что в и в самом деле меньше.
EИнформативные ссылки
Зарегистрированные значения наборов символов. Загрузите список зарегистрированных значений наборов символов с ftp://ftp.isi.edu/in-notes/iana/assignments/character-sets.
"Document Object Model Specification", L. Wood, A. Le Hors, 9 октябрь 1997.
http://www.w3.org/TR/WD-DOM/
ISO/IEC 10179:1996 "Information technology -- Processing languages -- Document Style Semantics and Specification Language (DSSSL)"
Находится на http://occam.sjf.novell.com:8080/dsssl/dsssl96.
"Gamma correction on the Macintosh Platform", C. A. Poynton.
Находится на ftp://ftp.inforamp.net/pub/users/poynton/doc/Mac/Mac_gamma.pdf.
"HTML 3.2 Reference Specification", Dave Raggett, 14 январь 1997.
Находится на http://www.w3.org/TR/REC-html32.html.
http://www.fonts.com/hp/infinifont/moredet.html.
ISO/IEC 9899:1990 Programming languages -- C.
http://www.monotype.com/html/oem/uni_scrmod.html.
"Transparent Content Negotiation in HTTP", K. Holtman, A. Mutz, 9 март, 1997.
http://www.microsoft.com/OpenType/OTSpec/tablist.htm.
Информацию о метриках классификации PANOSE см. на http://www.fonts.com/hp/panose/greybook и следующие главы: Latin Text, Latin Script, Latin Decorative и Latin Pictorial.
Числа Panose для некоторых шрифтов доступны online и могут быть запрошены.
[PANOSE2] См.
http://www.w3.org/Fonts/Panose/pan2.html Panose-2 не ограничен латиницей.
[POSTSCRIPT] "The PostScript Language Reference Manual", Second Edition, Adobe Systems, Inc., Addision-Wesley Publishing Co., декабрь 1990.
"Universal Resource Identifiers in WWW: A Unifying Syntax for the Expression of Names and Addresses of Objects on the Network as used in the World-Wide Web", T. Berners-Lee, июнь 1994.
ftp://ftp.internic.net/rfc/rfc1630.txt.
"Tags for the Identification of Languages", H. Alvestrand, март 1995.
Находится на
ftp://ftp.internic.net/rfc/rfc1766.txt.
[RFC1866]
"HyperText Markup Language 2.0", T. Berners-Lee и D. Connolly, ноябрь 1995.
Находится на ftp://ds.internic.net/rfc/rfc1866.txt.
[RFC1942]
"HTML Tables", Dave Raggett, май 1996.
Находится на ftp://ds.internic.net/rfc/rfc1942.txt.
[TRUETYPEGX]
На http://fonts.apple.com/TTRefMan/index.html см. детальную информацию о TrueType GX от Apple Computer, включая описания добавленных таблиц и спецификации качества шрифта.
[W3CSTYLE]
W3C, страница ресурсов о таблицах стилей web.
См. на http://www.w3.org/pub/WWW/Style.
[WAI-PAGEAUTH]
"WAI Accesibility Guidelines: Page Authoring" для дизайна доступны с:
http://www.w3.org/TR/WD-WAI-PAGEAUTH.
EНормативные ссылки
"Colorimetry, Second Edition", CIE Publication 15.2-1986, ISBN 3-900-734-00-3.
Находится на http://www.hike.te.chiba-u.ac.jp/ikeda/CIE/publ/abst/15-2-86.html.
"Cascading Style Sheets, level 1", H. W. Lie and B. Bos, 17 декабря 1996.
Находится на http://www.w3.org/TR/REC-CSS1-961217.html.
"Flex: The Lexical Scanner Generator", Версия 2.3.7, ISBN 1882114213.
"HTML 4.0 Specification", D. Raggett, A. Le Hors, I. Jacobs, 8 июля 1997.
Находится на http://www.w3.org/TR/REC-html40/. В Рекомендациях находятся три Определения Типа Документу (ОТД): Strict/Строгое, Transitional/Переходное и Frameset/Набор Фрэймов, все доступны из Рекомендаций. [IANA]
"Assigned Numbers", STD 2, RFC 1700, USC/ISI, J. Reynolds и J. Postel, октябрь 1994.
Находится на ftp://ftp.internic.net/rfc/rfc1700.txt.
"ICC Profile Format Specification, версия 3.2", 1995.
Находится на ftp://sgigate.sgi.com/pub/icc/ICC32.pdf.
ISO 8879:1986
"Information Processing -- Text and Office Systems -- Standard Generalized Markup Language (SGML)", ISO 8879:1986.
Список мнемоник SGML см. на ftp://ftp.ifi.uio.no/pub/SGML/ENTITIES/. [ISO10646]
"Information Technology - Universal Multiple- Octet Coded Character Set (UCS) - Часть 1: Architecture and Basic Multilingual Plane", ISO/IEC 10646-1:1993. В текущей спецификации принято к рассмотрению также пять поправок к ISO/IEC 10646-1:1993. Полезные документы карта BMP и карта плана 1 указывают, какой скрипт в каких числовых диапазонах размещён. [PNG10]
"PNG (Portable Network Graphics) Specification, Version 1.0 specification", T. Boutell ed., 1 октябрь 1996.
Находится на http://www.w3.org/pub/WWW/TR/REC-png-multi.html.
"Relative Uniform Resource Locators", R. Fielding, июнь 1995.
Находится на ftp://ds.internic.net/rfc/rfc1808.txt.
"Multipurpose Internet Mail Extensions (MIME) Part One: Format of Internet Message Bodies", N. Freed and N. Borenstein, ноябрь 1996.
Находится на
ftp://ftp.internic.net/rfc/rfc2045.txt. Обратите внимание, что этот RFC делает устаревшими RFC1521, RFC1522 и RFC1590.
[RFC2068]
"HTTP Version 1.1 ", R. Fielding, J. Gettys, J. Mogul, H. Frystyk Nielsen и T. Berners-Lee, январь 1997.
Находится на
ftp://ftp.internic.net/rfc/rfc2068.txt.
[RFC2070]
"Internationalization of the HyperText Markup Language", F. Yergeau, G. Nicol, G. Adams, и M. Durst, январь 1997.
Находится на ftp://ds.internic.net/rfc/rfc2070.txt.
[RFC2119]
"Key words for use in RFCs to Indicate Requirement Levels", S. Bradner, март 1997.
Находится на
ftp://ds.internic.net/rfc/rfc2119.txt.
[RFC2318]
"The text/css Media Type", H. Lie, B. Bos, C. Lilley, март 1998.
Находится на ftp://ds.internic.net/rfc/rfc2318.txt.
[RFC1738]
"Uniform Resource Locators", T. Berners-Lee, L. Masinter и M. McCahill, декабрь 1994.
Находится на ftp://ds.internic.net/rfc/rfc1738.txt.
[SRGB]
"Proposal for a Standard Color Space for the Internet - sRGB", M. Anderson, R. Motta, S. Chandrasekar, M. Stokes.
Находится на
http://www.w3.org/Graphics/Color/sRGB.html.
[UNICODE]
"The Unicode Standard: Version 2.0", The Unicode Consortium, Addison-Wesley Developers Press, 1996. О двунаправленности см. также список на http://www.unicode.org/unicode/uni2errata/bidi.htm. См. дополнительную информацию на домашней странице Unicode Consortium http://www.unicode.org/.
Это последняя версия Unicode. См. дополнительную информацию на домашней странице Unicode Consortium http://www.unicode.org/.
[URI]
"Uniform Resource Identifiers (URI): Generic Syntax and Semantics", T. Berners-Lee, R. Fielding, L. Masinter, 18 ноября 1997.
Находится на http://www.ics.uci.edu/pub/ietf/uri/draft-fielding-uri-syntax-01.txt. Эта работа ещё продолжается и предположительно обновит [RFC1738] и [RFC1808].
[XML10]
"Extensible Markup Language (XML) 1.0" T. Bray, J. Paoli, C.M. Sperberg-McQueen, редакторы, 10 февраля 1998.
Находится на http://www.w3.org/TR/REC-xml/.
[YACC]
"YACC - Yet another compiler compiler", S. C. Johnson, Technical Report, Murray Hill, 1975.
Fantasy
Фантазийные шрифты, как они используются в CSS, прежде всего декоративны, а уже потом содержат представление символов (в противоположность шрифтам Pi или Picture, не представляющим символы).
Примеры:
| Латинские шрифты | Alpha Geometrique, Critter, Cottonwood, FB Reactor, Studz |
Фиксированное позиционирование
Фиксированное позиционирование это подкатегория абсолютного позиционирования. Единственное отличие в том, что для фиксированно позиционированного бокса содержащий блок устанавливается портом просмотра.
Для непрерывных носителей
фиксированные боксы не перемещаются при прокрутке документа. В этом смысле они похожи на фиксированные фоновые изображения.
Для страничных носителей
боксы с фиксированной позицией повторяются на каждой странице. Это используется для размещения, к примеру, подписи внизу каждой страницы.
Авторы могут использовать фиксированное позиционирование для создания фрэймоподобных презентаций. Рассмотрим следующую структуру фрэймов:
Этого можно добиться с помощью такого документа 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>
Фон
Авторы могут специфицировать фон элемента (т.е. его видимую поверхность) как цвет или как изображение. В терминах модели бокса, "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>
Форсированные разрывы страниц
Разрыв страницы обязан возникнуть в (1), если среди свойств 'page-break-after' и 'page-break-before'
всех элементов, генерирующих боксы у данного поля, имеется по меньшей мере одно со значением 'always', 'left' или 'right'.
Разрыв страницы обязан появиться в (1), если последний строчный бокс выше этого поля и первый бокс - ниже него не имеют одинакового значения для 'page'.
Габариты и полугабариты
Поскольку высота инлайн-бокса может отличаться от размера шрифта текста бокса (например, 'line-height' > 1em), может иметься некоторое пространство сверху и снизу от выводимых глифов. Разница между размером шрифта и вычисленным значением 'line-height' называется leading\габарит. Половина габарита называется полугабарит.
ПА центрирует глифы по вертикали в инлайн-боксе, добавляя полугабарит сверху и снизу. Например, если блок текста имеет высоту '12pt' и значение 'line-height' - '14pt', должно быть добавлено 2pts дополнительного пространства: 1pt сверху и 1pt снизу от букв. (Это применимо также и к пустым боксам, как если бы пустой бокс содержал бесконечно узкую букву.)
Если значение '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
Выравнивает низ бокса с низом строчного бокса.
Генерируемое содержимое, автоматическая нумерация и списки
Содержание
12.1 Псевдоэлементы :before и :after
12.2 Свойство 'content'
12.3 Взаимодействие :before и :after с элементами 'compact' и 'run-in'
12.4 Знаки кавычек
12.4.1 Спецификация кавычек свойством 'quotes'
12.4.2 Вставка кавычек с применением свойства 'content'
12.5 Автоматические счётчики и нумерация
12.5.1 Вложение счётчиков и область видимости
12.5.2 Стили счётчиков
12.5.3 Счётчики в элементах с 'display: none'
12.6 Маркировка и списки
12.6.1 Маркировка: свойство 'marker-offset'
12.6.2 Списки: свойства 'list-style-type', 'list-style-image', 'list-style-position' и 'list-style'
В некоторых случаях бывает необходимо, чтобы пользовательские агенты (ПА) отображали содержимое не из дерева документа. Известный пример - нумерованный список: автор не хочет, чтобы нумерация выводилась явным образом, он или она хотят, чтобы ПА генерировал нумерацию автоматически. Также автор может пожелать, чтобы ПА вставлял слово "Figure" перед заглавием или фигурой или "Chapter 7" в начале 7 главы. В особенности для аудио и брайль-носителей, ПА должны иметь возможность вставить эти строки.
В CSS2 содержимое может генерироваться с помощью различных механизмов:
Свойство 'content'
в сочетании с псевдоэлементами :before и :after. Звуковые свойства 'cue-before'
и 'cue-after'
(см. главу звуковые таблицы стилей). Если свойство 'content' комбинируется со звуковыми свойствами, то они выводятся в следующем порядке: :before, 'cue-before', ('pause-before'), содержимое элемента, ('pause-after'), 'cue-after'
и :after. Элементы со значением 'list-item' для свойства 'display'.
Ниже описаны механизмы, ассоциированные со свойством 'content'.
Горизонтальное выравнивание в столбце
Горизонтальное выравнивание содержимого ячейки в боксе ячейки специфицируется свойством 'text-align'.
Если значение свойства 'text-align'
для более чем одной ячейки в столбце установлено в<string>, содержимое этих ячеек выравнивается вдоль вертикальной оси. Начало строки касается этой оси. Направление письма определяет, расположена строка слева или справа от оси.
Выравнивание текста таким способом возможно только тогда, когда текст входит на одну строку. Результат не определён, если содержимое ячейки занимает более одной строки.
Если значение 'text-align'
ячейки таблицы это строка, но строка не появляется в содержимом ячейки, то конец содержимого ячейки соприкасается с вертикальной осью выравнивания.
Заметьте, что строки не должны быть теми же самыми для каждой ячейки, хотя, как правило, это и так.
CSS не предоставляет способа специфицировать смещение оси вертикального выравнивания относительно края бокса столбца.
Пример(ы):
Следующая таблица стилей:
TD { text-align: "." } TD:before { content: "$" }
создаст столбец знаков доллара в следующей таблице HTML:
<TABLE> <COL width="40"> <TR> <TH>Long distance calls <TR> <TD> 1.30 <TR> <TD> 2.50 <TR> <TD> 10.80 <TR> <TD> 111.01 <TR> <TD> 85. <TR> <TD> 90 <TR> <TD> .05 <TR> <TD> .06 </TABLE>
для выравнивания десятичной точки. Шутки ради, мы использовали псевдоэлемент :before для того, чтобы вставить знак доллара перед каждым значением. Таблица может выглядеть так:
Long distance calls $1.30 $2.50 $10.80 $111.01 $85. $90 $.05 $.06
Говорящие заголовки: свойство 'speak-header'
| Значение: | once | always | inherit |
| Начальное: | once |
| Применяется: | к элементам. имеющим информацию "шапки" таблицы |
| Наследуется: | да |
| Процентное: | N/A |
| Носитель: | звуковой |
Это свойство специфицирует, произносятся ли заголовки перед каждой ячейкой (данных), или только перед той ячейкой, которая ассоциирована с другим заголовком.
Значения имеют следующий смысл:
once
Заголовок произносится однократно перед серией ячеек. always
Заголовок произносится перед каждой подходящей ячейкой.
Каждый язык документов может иметь различные механизмы спецификации заголовков. Например, в HTML 4.0 ([HTML40]) можно специфицировать заголовочную информацию тремя различными атрибутами ("headers", "scope" и "axis"), и спецификация предоставляет алгоритм для определения заголовочной информации, когда эти атрибуты не специфицированы.
Изображение таблицы с заголовочными ячейками ("San Jose" и "Seattle"), которые не находятся в одном столбце или ряде с данными, к которым они относятся.
Этот пример HTML представляет денежный расчёт расходов на питание, гостиницу и транспорт в двух местах (San Jose и Seattle) на несколько дней. Концептуально Вы можете представлять таблицу в терминах n-размерного пространства. Заголовками этого пространства являются: место, день, категория и итог. Некоторые ячейки определяют метки вдоль оси, а другие дают подсчёт денег в точке данного пространства. Вот разметка для этой таблицы:
<TABLE> <CAPTION>Travel Expense Report</CAPTION> <TR> <TH></TH> <TH>Meals</TH> <TH>Hotels</TH> <TH>Transport</TH> <TH>subtotal</TH> </TR> <TR> <TH id="san-jose" axis="san-jose">San Jose</TH> </TR> <TR> <TH headers="san-jose">25-Aug-97</TH> <TD>37.74</TD> <TD>112.00</TD> <TD>45.00</TD> <TD></TD> </TR> <TR> <TH headers="san-jose">26-Aug-97</TH> <TD>27.28</TD> <TD>112.00</TD> <TD>45.00</TD> <TD></TD> </TR> <TR> <TH headers="san-jose">subtotal</TH> <TD>65.02</TD> <TD>224.00</TD> <TD>90.00</TD> <TD>379.02</TD> </TR> <TR> <TH id="seattle" axis="seattle">Seattle</TH> </TR> <TR> <TH headers="seattle">27-Aug-97</TH> <TD>96.25</TD> <TD>109.00</TD> <TD>36.00</TD> <TD></TD> </TR> <TR> <TH headers="seattle">28-Aug-97</TH> <TD>35.00</TD> <TD>109.00</TD> <TD>36.00</TD> <TD></TD> </TR> <TR> <TH headers="seattle">subtotal</TH> <TD>131.25</TD> <TD>218.00</TD> <TD>72.00</TD> <TD>421.25</TD> </TR> <TR> <TH>Totals</TH> <TD>196.27</TD> <TD>442.00</TD> <TD>162.00</TD> <TD>800.27</TD> </TR> </TABLE>
Представляя модель данных таким образом, авторы дают возможность браузерам с синтезом речи работать с таблицей различными способами, например, каждая ячейка может проговариваться как список с повторением соответствующих заголовков перед каждой ячейкой данных:
San Jose, 25-Aug-97, Meals: 37.74 San Jose, 25-Aug-97, Hotels: 112.00 San Jose, 25-Aug-97, Transport: 45.00 ...
Браузер может также проговаривать ячейки, только если они изменяются:
San Jose, 25-Aug-97, Meals: 37.74 Hotels: 112.00 Transport: 45.00 26-Aug-97, Meals: 27.28 Hotels: 112.00 ...
Группирование
Если несколько селекторов используют общие объявления, то они могут быть сгруппированы в список с разделением запятыми.
Пример(ы):
Здесь три правила с идентичными объявлениями собраны в одно. Таким образом,
H1 { font-family: sans-serif } H2 { font-family: sans-serif } H3 { font-family: sans-serif }
эквивалентно:
H1, H2, H3 { font-family: sans-serif }
CSS предлагает также другие механизмы "сокращений", включая множественные объявления
и сокращённые свойства.
Группы носителей
Каждое определение свойства CSS специфицирует типы носителя, для которых свойство обязано выполняться на соответствующих ПА. Поскольку свойства обычно применяются для различных носителей, раздел "Применяется: " каждого определения свойства перечисляет группы носителей, а не отдельные типы носителей. Каждое свойство применяется ко всем типам носителя группы, указанной в определении свойства.
CSS2 определяет следующие группы носителей:
непрерывные
или страничные. "Оба" означает, что свойство применяется к обеим группам носителей. визуальные, звуковые или осязательные. решётка (для устройств с решётками символов) или растровые. "Оба" означает, что свойство применяется к обеим группам носителей. интерактивные (для устройств, взаимодействующих с пользователем или статичные (для не взаимодействующих). "Оба" означает, что свойство применяется к носителям обеих групп. все
(включает все типы носителей).
В следующей таблице показаны соотношения между группами носителей и типами носителя:
| непрерывный | звуковой | N/A | оба |
| непрерывный | осязательный | решётка | оба |
| страничный | осязательный | решётка | оба |
| оба | визуальный | оба | оба |
| страничный | визуальный | растровый | статичный |
| страничный | визуальный | растровый | статичный |
| непрерывный | визуальный | растровый | оба |
| непрерывный | визуальный | решётка | оба |
| оба | визуальный, звуковой | растровый | оба |
Группы носителей/Media groups
Обозначает группы носителей, к которым свойство применяется. Условия соответствия определяют, что ПА обязаны поддерживать это свойство, если они поддерживают представление в типах носителя, включённых в эти группы носителей.
Имя семейства шрифта
Специфицирует ту часть имени шрифта, где указывается имя семейства данного шрифта. Например, имя семейства для Helvetica-Bold - Helvetica, имя семейства для ITC Stone Serif Semibold Italic - ITC Stone Serif. Некоторые системы рассматривают "украшения", относящиеся к сжатию или расширению как часть имени семейства.
Индекс.
Русский алфавит: Английский Алфавит
А Б В Г Д Е З И К Л М Н О П Р С Т У Ф Ц Ч Ш Э Я
А
абсолютные размеры, 1
абсолютно позиционированный элемент, 1
абстрактный глиф, 1
автоматическая нумерация, 1
авторская утилита, 1
анонимный, 1
анонимные инлайн-боксы, 1
аспект, значение, 1
at-правило, 1
at-правила, 1, 2
атрибут, 1 Русский Алфавит
Б
блок, 1
блок объявлений, 1
бокс
run-in, 1
высота, 1
высота содержимого, 1
заполнение, 1
переполнение, 1
поля, 1
рамка, 1
содержимое, 1
ширина, 1
ширина содержимого, 1
бокс блока, 1
основной, 1 Русский Алфавит
В
вектор кодирования, 1
вертикальные поля, 1
'визуальный', группа носителей, 1
внешний край, 1
внутренние размеры, 1
внутренний край, 1
вперёд-совместимый разбор, 1
выводимое содержимое, 1
вычисленное значение, 1 Русский Алфавит
Г
габарит, 1
генерируемое содержимое, 1
глиф, 1
горизонтальные поля, 1 Русский Алфавит
Д
двунаправленность (bidi), 1
двухкамерный, 1
определение, 1
действующая таблица стилей, 1
дерево документа, 1
документ-источник, 1
ДОЛЖЕН, 1
дочерний, 1 Русский Алфавит
Е
escape-последовательности, 1 Русский Алфавит
З
"зависающие заглавные", 1
замещаемый элемент, 1
заполнение
в боксе, 1
звуковая иконка, 1
'звуковой', группа носителей, 1
знак "крестик", 1
знаки обрезки, 1
значение, 1 Русский Алфавит
И
идентификатор, 1
Идентификатор Ресурса (URI), 1
игнорируется, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27
инлайн-элемент, 1 'интерактивный', группа носителей, 1 Русский Алфавит
К
канва, 1, 2
каскад, 1
код языка, 1, 2
кодировка символов, 1
по умолчанию, 1
определение пользовательским агентом, 1
комбинатор, 1, 2
комментарии, 1
компактный бокс, 1
контекст страницы, 1
контекст стэка, 1
контекст форматирования, 1
контуры, 1
корневой контекст стэка, 1
край заполнения, 1
край поля, 1
край рамки, 1
край содержимого, 1 Русский Алфавит
Л
лексический сканер, 1
лигатуры, 1
лист, 1
локальный контекст стэка, 1 Русский Алфавит
М
маркёры, 1
медиа-зависимые правила import, 1
множественные объявления, 1
модель визуального форматирования, 1
МОЖЕТ, 1
моноширинный, определение, 1 Русский Алфавит
Н
наборы правил, 1
начальные заглавные, 1
начальный содержащий блок, 1
начальное значение, 1
неверное, 1
НЕ ДОЛЖЕН, 1
НЕОБХОДИМ, 1
НЕ ОБЯЗАН, 1
НЕОБЯЗАТЕЛЕН (ПО ВЫБОРУ), 1
'непрерывный', группа носителей, 1
новая строка, 1
носитель, 1
группы, 1
тип, 1 Русский Алфавит
О
область видимости, 1
область страницы, 1
объём, 1
объявление, 1
ОБЯЗАН, 1
операторы, 1
'осязательный', группа носителей, 1
ОТД, 1, 2
относительные единицы измерения, 1
относительное позиционирование, 1
отображение по частям (прогрессирующее), 1
отображение элементов в таблицу, 1 Русский Алфавит
П
ПА, 1
переполняется, 1
пиксел, 1
позиционированный элемент/бокс, 1
поле
горизонтальное, 1
бокса, 1
вертикальное, 1
полугабарит, 1
пользовательский агент, 1
поплавок, правила поведения, 1
порт просмотра, 1
последовательности escape, 1
последующий элемент, 1
потомок, 1
по умолчанию
кодировка символов, 1
предок, 1
простой селектор, 1
псевдокласс
:first, 1
:left, 1
:right, 1
псевдоклассы, 1
:active, 1, 2
:focus, 1
:hover, 1
:lang, 1
:link, 1, 2
:visited, 1, 2
псевдоэлементы, 1
:after, 1, 2
:before, 1, 2
:first-letter, 1
:first-line, 1, 2
пустой, 1 Русский Алфавит
Р
раздельные рамки, 1
рамка
бокса, 1
'растровый', группа носителей, 1
реальное значение, 1
РЕКОМЕНДУЕТСЯ, 1
'решётка', группа носителей, 1
родительский, 1
родственник, 1 Русский Алфавит
С
свойства, 1
селектор дочерних элементов, 1
селектор, 1, 2, 3, 4
совпадение, 1
субъект, 1
селектор страницы, 1
селектор типа, 1
селекторы потомков, 1
сжатие полей, 1
сжимаемая область, 1
символ, 1
совпадает, 1
совпадения, разделённые пробелами, 1
содержащий блок, 1, 2, 3
начальный, 1
содержимое, 1
бокса, 1
выводимое, 1
сокращённое свойство, 1, 2, 3
соответствие, 1, 2, 3, 4, 5, 6, 7, 8
совпадения, список, разделённых дефисами, 1
смысловое, 1
специфицированное значение, 1
список свойства, 1
страничная модель, 1
'страничный', группа носителей, 1
страничный бокс, 1
'статичный', группа носителей, 1
строка, 1
строчный бокс, 1, 2
структура форматирования, 1
субъект (селектора), 1
сущность сообщения, 1
схема позиционирования, 1
счётчики, 1 Русский Алфавит
Т
таблица инлайн-уровня, 1
стилей по умолчанию, 1
таблица стилей, 1
таблицы, 1
точное совпадение, 1 Русский Алфавит
У
универсальный селектор, 1
уровень в стэке, 1
условный импорт, 1
устройство чтения с экрана, 1 Русский Алфавит
Ф
фиктивные тэги, последовательность, 1, 2, 3
фокус, 1
форсированный обрыв строки, 1 Русский Алфавит
Ц
цвет, 1 Русский Алфавит
Ч
чувствительность к регистру, 1 Русский Алфавит
Ш
шрифт, 1
данные, 1
загрузка, 1
набор (шрифтов), 1
однокамерный, 1, 2
определение, 1
определение ресурса, 1
описание, 1
полное имя, 1 семейство, 1
синтез, 1
системные шрифты, 1
совпадение имени, 1
таблица кодировки, 1 Русский Алфавит
Э
элемент, 1
внутренний элемент таблицы, 1
корневой/root, 1
последующий, 1
предшествующий, 1
таблицы, 1
уровня блока, 1 Русский Алфавит
Я
язык документа, 1
язык (человеческий), 1
Английский алфавит: Русский Алфавит
A B C D E F G H I K L M N O P Q R S T U V W X Z
Символы и мнемоники:
:active, 2, 3
:after, 1, 2
:before, 1, 2, 3
:first, 1
:first-child, 1
:first-letter, 1
:first-line, 1
:focus, 1
:hover, 1
:lang, 1
:left, 1
:link, 1, 2
:right, 1
:visited, 1, 2
=, 1
~=, 1
|=, 1 Английский Алфавит
@charset, 1
@font-face, 1, 2, 3, 4, 5, 6, 7
@import, 1, 2, 3
@media, 1, 2, 3, 4
@page, 1 Английский Алфавит
a
<absolute-size>
определение 1
:active (псевдокласс), 1, 2
:after, 1
<angle>, 1, 2
определение, 1
armenian, 1
'ascent' (дескриптор), 1
at-rule, 1
attr(), 1
'azimuth', 1 Английский Алфавит
b
'background', 1
'background-attachment', 1
'background-color', 1
'background-image', 1
'background-position', 1
'background-repeat', 1
backslash escapes, 1
'baseline' (дескриптор), 1
'bbox' (дескриптор), 1
before, 1
'block', определение, 1
'border', 1
'border-bottom', 1
'border-bottom-color', 1
'border-bottom-style', 1
'border-bottom-width', 1
'border-collapse', 1
'border-color', 1
'border-left', 1
'border-left-color', 1
'border-left-style', 1
'border-left-width', 1
'border-right', 1
'border-right-color', 1
'border-right-style', 1
'border-right-width', 1
'border-spacing', 1
<border-style>, 1
<border-style>, определение, 1
'border-style', 1
'border-top', 1
'border-top-color', 1
'border-top-style', 1
'border-top-width', 1
<border-width>
определение, 1
'border-width', 1
<bottom>
определение, 1
'bottom', 1 Английский Алфавит
c
'cap-height' (дескриптор), 1
'caption-side', 1
'centerline' (дескриптор), 1
circle, 1
cjk-ideographic, 1
'clear', 1
'clip', 1
close-quote, 1, 2
<color>, 1, 2
определение, 1
'color', 1
compact, 1
'compact', определение, 1
'content', 1
<counter>, 1
<counter>, определение, 1
counter(), 1
'counter-increment', 1
'counter-reset', 1
'cue', 1
'cue-after', 1
'cue-before', 1
cursive, определение, 1
'cursor', 1 Английский Алфавит
d
'dashed', 1, 2
decimal, 1
decimal-leading-zero, 1
'definition-src' (дескриптор), 1
'descent' (дескриптор), 1
'direction', 1
disc, 1
'display', 1
'dotted', 1, 2
'double', 1, 2 Английский Алфавит
e
'elevation', 1
em (единица измерения), 1
em square (em-квадрат), 1, 2
'empty-cells', 1
ex (единица измерения), 1 Английский Алфавит
f
<family-name>
определение, 1
fantasy, определение, 1
first-child, 1
first-letter, 1
first-line, 1
'float', 1
focus (псевдокласс), 1
'font', 1
<font-description>
определение, 1
<font-face-name>
определение, 1
'font-family', 1
'font-family' (дескриптор), 1
'font-size', 1
'font-size' (дескриптор), 1
'font-size-adjust', 1
'font-stretch', 1
'font-stretch' (дескриптор), 1
'font-style', 1
'font-style' (дескриптор), 1
'font-variant', 1
'font-variant' (дескриптор), 1
'font-weight', 1
'font-weight' (дескриптор), 1
<frequency>, 1
определение, 1
full font name, 1 Английский Алфавит
g
<generic-family>
определение, 1
<generic-voice>, определение, 1
georgian, 1
'groove', 1, 2 Английский Алфавит
h
hebrew, 1
'height', 1
'hidden, 1
'hidden', 1
hiragana, 1
hiragana-iroha, 1
hover (псевдокласс), 1 Английский Алфавит
i
important, 1
inherit, определение, 1
'inline', определение, 1
'inline-table', 1
'inset', 1, 2
<integer>, 1
определение, 1
invert, 1
iso-10646, 1
Italic, определение, 1 Английский Алфавит
k
katakana, 1
katakana-iroha, 1 Английский Алфавит
l
lang (псевдокласс), 1
<left>
определение, 1
'left', 1
<length>, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14
определение, 1
'letter-spacing', 1
'line-height', 1
link (псевдокласс), 1, 2
'list-item', определение, 1
'list-style', 1
'list-style-image', 1
'list-style-position', 1
'list-style-type', 1
LL(1), 1
lower-greek, 1
lower-latin, 1
lower-roman, 1 Английский Алфавит
m
'margin', 1
'margin-bottom', 1
'margin-left', 1
'margin-right', 1
'margin-top', 1
<margin-width>
определение, 1
'marker', определение, 1
'marker-offset', 1
'marks', 1
'mathline' (дескриптор), 1
'max-height', 1
'max-width', 1
'min-height', 1
'min-width', 1
monospace, определение, 1 Английский Алфавит
n
no-close-quote, 1, 2
no-open-quote, 1, 2
'none'
стиль рамки, 1, 2
в 'display', 1
<number>, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
определение, 1 Английский Алфавит
o
open-quote, 1, 2
'orphans', 1
'outline', 1
'outline-color', 1
'outline-style', 1
'outline-width', 1
'outset', 1, 2
'overflow', 1 Английский Алфавит
p
'padding', 1
'padding-bottom', 1
'padding-left', 1
'padding-right', 1
'padding-top', 1
<padding-width>
определение, 1
'page', 1
'page-break-after', 1
'page-break-before', 1
'page-break-inside', 1
Panose-1, 1
panose-1, 1
'panose-1' (дескриптор), 1
'pause', 1
'pause-after', 1
'pause-before', 1
<percentage>, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12
определение, 1
'pitch', 1
'pitch-range', 1
pixel, 1
'play-during', 1
'position', 1 Английский Алфавит
q
quad width, 1
'quotes', 1 Английский Алфавит
r
<relative-size>
определение, 1
'richness', 1
'ridge', 1, 2
<right>
определение, 1
'right', 1
root, 1
run-in, 1
'run-in', определение, 1 Английский Алфавит
s
sans-serif, определение, 1
serif, определение, 1
<shape>
определение, 1
'size', 1
'slope' (дескриптор), 1
'solid', 1, 2
'speak', 1
'speak-header', 1
'speak-numeral', 1
'speak-punctuation', 1
<specific-voice>
определение, 1
'speech-rate', 1
square, 1
'src' (дескриптор), 1
'stemh' (дескриптор), 1
'stemv' (дескриптор), 1
'stress', 1
string, 1
<string>, 1, 2, 3, 4, 5
<string>, определение, 1 Английский Алфавит
t
table, 1
'table', 1
table-caption, 1
'table-caption', 1
table-cell, 1
'table-cell', 1
table-column, 1
'table-column', 1
table-column-group, 1
'table-column-group', 1
table-footer-group, 1
'table-footer-group', 1
table-header-group, 1
'table-header-group', 1
'table-layout', 1
table-row, 1
'table-row', 1
table-row-group, 1
'table-row-group', 1
'text-align', 1
'text-decoration', 1
'text-indent', 1
'text-shadow', 1
'text-transform', 1
text/css, 1
<time>, 1
определение, 1
<top>
определение, 1
'top', 1
'topline' (дескриптор), 1 Английский Алфавит
u
unicode, 1
'unicode-bidi', 1
'unicode-range' (дескриптор), 1
Uniform Resource Locator (URL), 1
Uniform Resource Name (URN), 1
'units-per-em' (дескриптор), 1
upper-latin, 1
upper-roman, 1
<urange>
определение, 1
URI (Uniform Resource Identifier), 1
<uri>, 1, 2, 3, 4, 5, 6
определение, 1
URL (Uniform Resource Locator), 1
URN (Uniform Resource Name), 1 Английский Алфавит
v
'vertical-align', 1
'visibility', 1
visited (псевдокласс), 1, 2
'voice-family', 1
'volume', 1 Английский Алфавит
w
'white-space', 1
'widows', 1
'width', 1
'widths' (дескриптор), 1
'word-spacing', 1 Английский Алфавит
x
x-высота, 1
'x-height' (дескриптор), 1
z
'z-index', 1 Английский Алфавит
Индекс дескрипторов
| 'ascent' | <number> | не определено |
| 'baseline' | <number> | 0 |
| 'bbox' | <number>, <number>, <number>, <number> | не определено |
| 'cap-height' | <number> | не определено |
| 'centerline' | <number> | не определено |
| 'definition-src' | <uri> | не определено |
| 'descent' | <number> | не определено |
| 'font-family' | [ <family-name> | <generic-family> ] [, [<family-name> | <generic-family> ]]* | зависит от пользовательского агента |
| 'font-size' | all | <length> [, <length>]* | all |
| 'font-stretch' | all | [ normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded ] [, [ normal | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded] ]* | normal |
| 'font-style' | all | [ normal | italic | oblique ] [, [normal | italic | oblique] ]* | all |
| 'font-variant' | [normal | small-caps] [,[normal | small-caps]]* | normal |
| 'font-weight' | all | [normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900] [, [normal | bold | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900]]* | all |
| 'mathline' | <number> | не определено |
| 'panose-1' | [<integer>]{10} | 0 0 0 0 0 0 0 0 0 0 |
| 'slope' | <number> | 0 |
| 'src' | [ <uri> [format(<string> [, <string>]*)] | <font-face-name> ] [, <uri> [format(<string> [, <string>]*)] | <font-face-name> ]* | не определено |
| 'stemh' | <number> | не определено |
| 'stemv' | <number> | не определено |
| 'topline' | <number> | не определено |
| 'unicode-range' | <urange> [, <urange>]* | U+0-7FFFFFFF |
| 'units-per-em' | <number> | не определено |
| 'widths' | [<urange> ]? [<number> ]+ [,[<urange> ]? <number> ]+] | не определено |
| 'x-height' | <number> | не определено |
Индекс свойств
|
'azimuth' |
<angle> | [[ left-side | far-left | left | center-left | center | center-right | right | far-right | right-side ] || behind ] | leftwards | rightwards |inherit |
center | да | звуковой | ||
|
'background' |
[
'background-color' ||'background-image' ||'background-repeat' ||'background-attachment' ||'background-position' ] |inherit |
XX | визуальный | нет | допускается в 'background-position' | визуальный |
| 'background-attachment' | scroll | fixed | inherit | scroll | нет | визуальный | ||
| 'background-color' | <color> | transparent | inherit | transparent | нет | визуальный | ||
| 'background-image' | <uri> | none | inherit | none | нет | визуальный | ||
| 'background-position' | [ [<percentage> | <length> ]{1,2} | [ [top | center | bottom] || [left | center | right] ] ] | inherit | 0% 0% | к элементам уровня блока и к замещаемым элементам | нет | относительно размеров самого бокса | визуальный |
| 'background-repeat' | repeat | repeat-x | repeat-y | no-repeat | inherit | repeat | нет | визуальный | ||
| 'border' | [ 'border-width' || 'border-style' || <color> ] | inherit | см. индивидуальные свойства | нет | визуальный | ||
| 'border-collapse' | collapse | separate | inherit | collapse | к элементам 'table' и 'inline-table' | да | визуальный | |
| 'border-color' | <color>{1,4} | transparent | inherit | см. индивидуальные свойства | нет | визуальный | ||
| 'border-spacing' | <length> <length>? | inherit | 0 | к элементам 'table' и 'inline-table' | да | визуальный | |
| 'border-style' | <border-style>{1,4} | inherit | см. индивидуальные свойства | нет | визуальный | ||
| 'border-top'
'border-right' 'border-bottom' 'border-left' |
[ 'border-top-width' || 'border-style' || <color> ] | inherit | см. индивидуальные свойства | нет | визуальный | ||
| 'border-top-color'
'border-right-color' 'border-bottom-color' 'border-left-color' |
<color> | inherit | значение свойства 'color' | нет | визуальный | ||
| 'border-top-style'
'border-right-style' 'border-bottom-style' 'border-left-style' |
<border-style> | inherit | none | нет | визуальный | ||
| 'border-top-width'
'border-right-width' 'border-bottom-width' 'border-left-width' |
<border-width> | inherit | medium | нет | визуальный | ||
| 'border-width' | <border-width>{1,4} | inherit | см. индивидуальные свойства | нет | визуальный | ||
| 'bottom' | <length> | <percentage> | auto | inherit | auto | к позиционированным элементам | нет | относительно высоты содержащего блока | визуальный |
| 'caption-side' | top | bottom | left | right | inherit | top | к элементам 'table-caption' | да | визуальный | |
| 'clear' | none | left | right | both | inherit | none | к элементам уровня блока | нет | визуальный | |
| 'clip' | <shape> | auto | inherit | auto | к элементам уровня блока и к замещаемым элементам | нет | визуальный | |
| 'color' | <color> | inherit | зависит от ПА | да | визуальный | ||
| 'content' | [ <string> | <uri> | <counter> | attr(X) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit | пустая строка | к псевдоэлементам :before и :after | нет | визуальный | |
| 'counter-increment' | [ <identifier> <integer>? ]+ | none | inherit | none | нет | визуальный | ||
| 'counter-reset' | [ <identifier> <integer>? ]+ | none | inherit | none | нет | визуальный | ||
| 'cue' | [ 'cue-before' || 'cue-after' ] | inherit | XX | нет | звуковой | ||
| 'cue-after' | <uri> | none | inherit | none | нет | звуковой | ||
| 'cue-before' | <uri> | none | inherit | none | нет | звуковой | ||
| 'cursor' | [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ] ] | inherit | auto | да | визуальный, интерактивный | ||
| 'direction' | ltr | rtl | inherit | ltr | ко всем элементам, но см. др. информацию | да | визуальный | |
| '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 | нет | все | ||
| 'elevation' | <angle> | below | level | above | higher | lower | inherit | level | да | звуковой | ||
| 'empty-cells' | show | hide | inherit | show | к элементам 'table-cell' | да | визуальный | |
| 'float' | left | right | none | inherit | none | ко всем непозиционированным элементам и генерируемому содержимому | нет | визуальный | |
| '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-family' | [[ <family-name> | <generic-family> ],]* [<family-name> | <generic-family>] | inherit | зависит от ПА (пользовательского агента) | да | визуальный | ||
| 'font-size' | <absolute-size> | <relative-size> | <length> | <percentage> | inherit | medium | да, вычисляемое значение наследуется | относительно размера шрифта родительского элемента | визуальный | |
| 'font-size-adjust' | <number> | none | inherit | none | да | визуальный | ||
| 'font-stretch' | normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded | inherit | normal | да | визуальный | ||
| 'font-style' | normal | italic | oblique | inherit | normal | да | визуальный | ||
| 'font-variant' | normal | small-caps | inherit | normal | да | визуальный | ||
| 'font-weight' | normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | inherit | normal | да | визуальный | ||
| 'height' | <length> | <percentage> | auto | inherit | auto | ко всем элементам, кроме незамещаемых инлайн-элементов, столбцов таблиц и групп столбцов | нет | см. дополнительную информацию | визуальный |
| 'left' | <length> | <percentage> | auto | inherit | auto | к позиционированным элементам | нет | относительно ширины содержащего блока | визуальный |
| 'letter-spacing' | normal | <length> | inherit | normal | да | визуальный | ||
| 'line-height' | normal | <number> | <length> | <percentage> | inherit | normal | да | относительно размера шрифта этого элемента | визуальный | |
| 'list-style' | [ 'list-style-type' || 'list-style-position' || 'list-style-image' ] | inherit | XX | к элементам с 'display: list-item' | да | визуальный | |
| 'list-style-image' | <uri> | none | inherit | none | к элементам с 'display: list-item' | да | визуальный | |
| 'list-style-position' | inside | outside | inherit | outside | к элементам с 'display: list-item' | да | визуальный | |
| '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' | да | визуальный | |
| 'margin' | <margin-width>{1,4} | inherit | XX | нет | относительно ширины содержащего блока | визуальный | |
| 'margin-top'
'margin-right' 'margin-bottom' 'margin-left' |
<margin-width> | inherit | 0 | нет | относительно ширины содержащего блока | визуальный | |
| 'marker-offset' | <length> | auto | inherit | auto | к элементам с 'display: marker' | нет | визуальный | |
| 'marks' | [ crop || cross ] | none | inherit | none | к контексту страницы | N/A | визуальный, страничный | |
| 'max-height' | <length> | <percentage> | none | inherit | none | ко всем элементам, кроме незамещаемых инлайн-элементов и элементов таблицы | нет | относительно высоты содержащего блока | визуальный |
| 'max-width' | <length> | <percentage> | none | inherit | none | ко всем элементам, кроме незамещаемых инлайн-элементов и элементов таблицы | нет | относительно ширины содержащего блока | визуальный |
| 'min-height' | <length> | <percentage> | inherit | 0 | ко всем элементам, кроме незамещаемых инлайн-элементов и элементов таблицы | нет | относительно высоты содержащего блока | визуальный |
| 'min-width' | <length> | <percentage> | inherit | зависит от ПА | ко всем элементам, кроме незамещаемых инлайн-элементов и элементов таблицы | нет | относительно ширины содержащего блока | визуальный |
| 'orphans' | <integer> | inherit | 2 | к элементам уровня блока | да | визуальный, страничный | |
| 'outline' | [ 'outline-color' || 'outline-style' || 'outline-width' ] | inherit | см. индивидуальные свойства | нет | визуальный, интерактивный | ||
| 'outline-color' | <color> | invert | inherit | invert | нет | визуальный, интерактивный | ||
| 'outline-style' | <border-style> | inherit | none | нет | визуальный, интерактивный | ||
| 'outline-width' | <border-width> | inherit | medium | нет | визуальный, интерактивный | ||
| 'overflow' | visible | hidden | scroll | auto | inherit | visible | к элементам уровня блока и к замещаемым | нет | визуальный | |
| 'padding' | <padding-width>{1,4} | inherit | XX | нет | относительно ширины содержащего блока | визуальный | |
| 'padding-top'
'padding-right' 'padding-bottom' 'padding-left' |
<padding-width> | inherit | 0 | нет | относительно ширины содержащего блока | визуальный | |
| 'page' | <identifier> | auto | auto | к элементам уровня блока | да | визуальный, страничный | |
| 'page-break-after' | auto | always | avoid | left | right | inherit | auto | к элементам уровня блока | нет | визуальный, страничный | |
| 'page-break-before' | auto | always | avoid | left | right | inherit | auto | к элементам уровня блока | нет | визуальный, страничный | |
| 'page-break-inside' | avoid | auto | inherit | auto | к элементам уровня блока | да | визуальный, страничный | |
| 'pause' | [ [<time> | <percentage>]{1,2} ] | inherit | зависит от ПА | нет | см. описание 'pause-before' и 'pause-after' | звуковой | |
| 'pause-after' | <time> | <percentage> | inherit | зависит от ПА | нет | см. дополнительную информацию | звуковой | |
| 'pause-before' | <time> | <percentage> | inherit | зависит от ПА | нет | см. дополнительную информацию | звуковой | |
| 'pitch' | <frequency> | x-low | low | medium | high | x-high | inherit | medium | да | звуковой | ||
| 'pitch-range' | <number> | inherit | 50 | да | звуковой | ||
| 'play-during' | <uri> mix? repeat? | auto | none | inherit | auto | нет | звуковой | ||
| 'position' | static | relative | absolute | fixed | inherit | static | ко всем элементам, кроме тех, которые генерируют содержимое | нет | визуальный | |
| 'quotes' | [<string> <string>]+ | none | inherit | зависит от ПА | да | визуальный | ||
| 'richness' | <number> | inherit | 50 | да | звуковой | ||
| 'right' | <length> | <percentage> | auto | inherit | auto | к позиционированным элементам | нет | относительно ширины содержащего блока | визуальный |
| 'size' | <length>{1,2} | auto | portrait | landscape | inherit | auto | к контексту страницы | N/A | визуальный, страничный | |
| 'speak' | normal | none | spell-out | inherit | normal | да | звуковой | ||
| 'speak-header' | once | always | inherit | once | к элементам, имеющим информацию "шапки" | да | звуковой | |
| 'speak-numeral' | digits | continuous | inherit | continuous | да | звуковой | ||
| 'speak-punctuation' | code | none | inherit | none | да | звуковой | ||
| 'speech-rate' | <number> | x-slow | slow | medium | fast | x-fast | faster | slower | inherit | medium | да | звуковой | ||
| 'stress' | <number> | inherit | 50 | да | звуковой | ||
| 'table-layout' | auto | fixed | inherit | auto | к 'table' и 'inline-table' | нет | звуковой | |
| 'text-align' | left | right | center | justify | <string> | inherit | зависит от ПА и направления письма | к элементам уровня блока | да | визуальный | |
| 'text-decoration' | none | [ underline || overline || line-through || blink ] | inherit | none | нет (см. дополнительную информацию) | визуальный | ||
| 'text-indent' | <length> | <percentage> | inherit | 0 | к элементам уровня блока | да | относительно ширины содержащего блока | визуальный |
| 'text-shadow' | none | [<color> || <length> <length> <length>? ,]* [<color> || <length> <length> <length>?] | inherit | none | нет (см. дополнительную информацию) | визуальный | ||
| 'text-transform' | capitalize | uppercase | lowercase | none | inherit | none | да | визуальный | ||
| 'top' | <length> | <percentage> | auto | inherit | auto | к позиционированным элементам | нет | относительно высоты содержащего блока | визуальный |
| 'unicode-bidi' | normal | embed | bidi-override | inherit | normal | ко всем элементам, но см. др. информацию | нет | визуальный | |
| 'vertical-align' | baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length> | inherit | baseline | к элементам инлайн уровня и к 'table-cell' | нет | относительно 'line-height' самого элемента | визуальный |
| 'visibility' | visible | hidden | collapse | inherit | inherit | нет | визуальный | ||
| 'voice-family' | [[<specific-voice> | <generic-voice> ],]* [<specific-voice> | <generic-voice> ] | inherit | зависит от ПА | да | звуковой | ||
| 'volume' | <number> | <percentage> | silent | x-soft | soft | medium | loud | x-loud | inherit | medium | да | относительно унаследованного значения | звуковой | |
| 'white-space' | normal | pre | nowrap | inherit | normal | к элементам уровня блока | да | визуальный | |
| 'widows' | <integer> | inherit | 2 | к элементам уровня блока | да | визуальный, страничный | |
| 'width' | <length> | <percentage> | auto | inherit | auto | ко всем элементам, кроме незамещаемых инлайн-элементов, столбцов таблиц и групп столбцов | нет | относительно ширины содержащего блока | визуальный |
| 'word-spacing' | normal | <length> | inherit | normal | да | визуальный | ||
| 'z-index' | auto | <integer> | inherit | auto | к позиционированным элементам | нет | визуальный |
Инлайн-элементы и инлайн-боксы
Инлайн-элементы это те элементы документа-источника, которые не образуют новых блоков содержимого; содержимое определяется в строке (на месте) (например, выделенные участки текста внутри параграфа, инлайн-изображения и т.п.). Различные значения свойства 'display' делают элемент инлайн: 'inline', 'inline-table', 'compact' и 'run-in' (не всегда; см. компактные и втягивающиеся боксы). Элементы инлайн-уровня (встроенные) генерируют инлайн-боксы.
Инлайн-боксы могут принимать участие в различных контекстах форматирования:
Внутри бокса блока инлайн-бокс участвует в инлайн-контексте форматирования. Инлайн-бокс compact расположен в поле бокса блока. Боксы-маркёры имеют позицию также вне бокса блока.
Инлайн, незамещаемые элементы
Свойство 'width' не применяется. Специфицированное значение 'auto' для 'left', 'right', 'margin-left' или 'margin-right' становится вычисленным значением '0'.
Если 'top', 'bottom', 'margin-top' или 'margin-bottom' установлены в 'auto', их вычисленное значение будет '0'. Свойство 'height' не применяется, но высота бокса задаётся свойством 'line-height'.
Инлайн, замещаемые элементы
Специфицированное значение 'auto' для 'left', 'right', 'margin-left' или 'margin-right' становится вычисленным значением '0'. Специфицированное значение 'auto' для 'width' даёт внутреннюю ширину элемента как вычисленное значение.
Если 'top', 'bottom', 'margin-top' или 'margin-bottom' установлены в 'auto', их вычисленное значение будет '0'. Если 'height' - 'auto', вычисленное значение будет внутренней
высотой.
Интерфейс пользователя
Содержание
18.1 Курсоры: свойство 'cursor'
18.2 Предпочтительные цвета пользователя
18.3 Предпочтительные шрифты пользователя
18.4 Динамические контуры: свойство 'outline'
18.4.1 Контуры и фокус
18.5 Увеличение
Использование именованных страниц: '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>
Изображения и полные описания
Большинство изображений в электронной версии данной спецификации сопровождаются "полными описаниями" того, что изображено. Ссылка на полное описание обозначена "[D]" справа от изображения.
Изображения и полные описания являются исключительно информативными.
Язык документа: элементы и атрибуты
В CSS имена свойств, дескрипторов и псевдоклассов ограничиваются одиночными кавычками. Значения в CSS ограничиваются одиночными кавычками. Элементы языка документа записываются буквами в верхнем регистре. Имена атрибутов языка документа записываются в нижнем регистре и ограничиваются двойными кавычками.
Элементы уровня блока и боксы блока
Элементы уровня блока
это элементы документа-источника, визуально отформатированные как блоки (например, параграфы). Различные значения свойства 'display' создают элемент уровня блока: 'block', 'list-item', 'compact', 'run-in' (не всегда; см. компактные и втягивающиеся
боксы) и 'table'.
Элементы уровня блока генерируют основной бокс блока, и только он содержит боксы блоков. Основной бокс блока устанавливает содержащий блок для боксов-потомков и сгенерированного содержимого и является также боксом, участвующим в любой схеме позиционирования. Основные боксы блока действуют в контексте форматирования блока.
Некоторые элементы уровня блока генерируют дополнительные боксы за пределами основного бокса: элементы 'list-item' и элементы с маркёрами. Эти дополнительные боксы размещаются относительно основного бокса.
Как читать эту спецификацию
Данная спецификация написана в расчёте на читателей двух типов: CSS-авторов и CSS-разработчиков. Мы надеемся, что эта спецификация снабдит авторов средствами, необходимыми для создания эффективных, привлекательных и доступных документов без излишнего углубления в детали реализации CSS. Разработчики к тому же смогут найти всё необходимое для создания соответствующих пользовательских агентов (ПА).
Спецификация начинается общим представлением CSS и постепенно всё более углубляется в технические подробности и специфику. Для быстрого доступа к информации служат общие и специализированные оглавления в начале каждого раздела и индексы - в электронном и печатном виде.
Спецификация создана в расчёте на два типа представления: электронное и печатное. Хотя эти два типа, без сомнения, похожи, читатели могут заметить и некоторые отличия. Например, ссылки не будут работать в печатной версии (естественно), а номера страниц будут отсутствовать в электронной версии. В случае возникновения противоречий, электронная версия должна считаться определяющей.
Как организована эта спецификация
Эта спецификация содержит следующие разделы: Раздел 2: Введение в CSS2
Введение содержит краткий учебник по CSS2 и обсуждение принципов дизайна вне CSS2.
Раздел 3 - 20: Справочник-учебник CSS2
Основу составляет справочник языка CSS2. Этот справочник определяет, что может входить в таблицы стилей CSS2 (синтаксис, свойства, значения свойств) и как ПА обязаны интерпретировать эти таблицы стилей, чтобы претендовать на соответствие.
Приложения:
Содержат образцы таблиц стилей для HTML 4.0, изменения относительно CSS1, замечания по реализации и выполнению, грамматике CSS2, список нормативных и информативных ссылок
и три индекса: Свойства, Дескрипторы и Общий индекс.
Канва
Для всех носителей термин канва описывает "пространство, где выводится сформатированная структура". Канва бесконечна по каждому измерению, но представление обычно производится в пределах ограниченной области канвы, установленной ПА в соответствии с целевым носителем. Например, вывод ПАгентами на экран обычно требует наличия минимальной ширины и выбора начальной ширины на базе размеров порта просмотра. Вывод ПАгентами на страницу обычно требует ограничения ширины и высоты. Звуковые ПА могут предполагать ограничения звукового пространства, но не времени.
Капитализация: свойство 'text-transform'
| Значение: | capitalize | uppercase | lowercase | none | inherit |
| Начальное: | none |
| Применяется: | ко всем элементам |
| Наследуется: | да |
| Процентное: | N/A |
| Носитель: | визуальный |
Это свойство управляет эффектами капитализации текста элемента.
Значения имеют следующий смысл:
capitalize
Переводит первый символ каждого слова в верхний регистр. uppercase
Переводит все символы каждого слова в верхний регистр. lowercase
Переводит все символы каждого слова в нижний регистр. none
Нет эффектов капитализации.
Реальная трансформация зависит в каждом конкретном случае от языка письма. См. о способах определения языка элемента в RFC 2070 ([RFC2070]).
Соответствующие ПА
могут рассматривать значение 'text-transform' как 'none' для тех символов, которые не входят в репертуар Latin-1, и для элементов на тех языках, в которых трансформация отличается от трансформации, специфицированной таблицей конвертации регистров для ISO 10646 ([ISO10646]).
Пример(ы):
Здесь весь текст в элементе H1 переводится в верхний регистр. H1 { text-transform: uppercase }
Каскад
Таблицы стилей могут иметь три независимых источника: автор, пользователь и ПА.
Автор. Специфицирует таблицы стилей для документа-источника в соответствии с соглашениями о языке документа. К примеру, в HTML таблицы стилей могут быть включены в документ или иметь внешнюю связь.
Пользователь. Может иметь возможность специфицировать стилевую информацию для определённого документа. Например, пользователь может специфицировать файл, содержащий таблицу стилей, или ПА может предоставить интерфейс, генерирующий пользовательскую таблицу стилей (или вести себя так, как если бы предоставлял).
Пользовательский агент. Соответствующие ПА
обязаны применять таблицу стилей по умолчанию
(или вести себя так, как если бы применяли) до того, как применять к документу все другие таблицы стилей. Таблицы стилей по умолчанию в ПАгенте должны представить элементы языка документа теми способами, которые удовлетворяют общим ожиданиям для языка документа (например, для визуальных браузеров, элемент EM в HTML представляется шрифтом italic). См. "Образец таблицы стилей HTML 4.0" - рекомендуемую таблицу стилей по умолчанию для документов HTML 4.0.
Учтите, что таблица стилей по умолчанию может быть изменена, если системные настройки изменены пользователем (например, системные цвета). Однако, из-за ограничений конкретной реализации ПА, может оказаться невозможным изменить значения в таблице стилей по умолчанию.
Области видимости таблиц стилей из этих трёх источников будут перекрываться и взаимодействовать в соответствии с каскадом.
Каскад CSS назначает вес каждому правилу стиля. Если применяются несколько правил, одно, имеющее больший вес, будет иметь приоритет.
По умолчанию правила авторской таблицы стилей имеют больший вес, чем правила таблицы стилей пользователя. Преимущество зарезервировано, однако, для правил "!important". Все правила пользователя и автора имеют больший вес, чем правила таблицы стилей по умолчанию в ПА.
Импортируемы таблицы стилей также каскадируются, и их вес зависит от порядка импортирования. Правила, специфицированные в имеющейся таблице стилей, переопределяют правила, импортируемые из других таблиц. Импортированные таблицы стилей сами могут импортировать и переопределять другие таблицы стилей рекурсивно, и тогда применяются те же правила приоритета.
Каскадирование в контексте страницы
Объявления в контексте страницы
подчиняются каскаду так же, как и нормальные объявления CSS2.
Пример(ы):
@page { margin-left: 3cm; }
@page :left { margin-left: 4cm; }
Из-за более высокой специфики селектора псевдокласса, левое поле левых страниц будет '4см', а все остальные страницы (т.е. правые) - левое поле '3см'.
Каскадные Таблицы Стилей, уровеньСпецификация CSS
Рекомендации W3C от 12 Мая 1998 года
Данная версия:http://www.w3.org/TR/1998/REC-CSS2-19980512; Последняя версия:http://www.w3.org/TR/REC-CSS2
Предыдущая версия:http://www.w3.org/TR/1998/PR-CSS2-19980324
Редакторы: Bert Bos<bbos@w3.org>
Håkon Wium Lie<howcome@w3.org>
Chris Lilley<chris@w3.org>
Ian Jacobs<ij@w3.org>
На русский язык перевёл Александр Пирамидин <a_pyramidin@yahoo.com>
Ключевые слова
Ключевые слова имеют форму идентификаторов. Ключевые слова обязаны не размещаться между кавычками ("..." или '...'). Таким образом,
red
это ключевое слово, а
"red"
- нет (это строка). Другие неверные примеры:
Примеры неверного использования:
width: "auto"; border: "none"; font-family: "serif"; background: "red";
Кодировка шрифта
Явно или неявно, каждый шрифт имеет ассоциированную таблицу, таблицу кодировки шрифта, которая сообщает, какой символ представляется каждым глифом. Эту таблицу называют также вектором кодирования.
На практике, многие шрифты содержат различные глифы для одного и того же символа.
Какой из этих глифов используется и зависит или от правил языка, или от предпочтений дизайнера.
В арабском языке, например, все буквы содержат 4 (или 2) различных фигуры, в зависимости от того, используется буква в начале слова, в середине, в конце или изолированно. Во всех случаях это один символ, и, соответственно - только один символ в документе-источнике, но при печати он выглядит каждый раз по другому.
Есть также шрифты, которые оставляют за дизайнером графики право выбора из нескольких альтернативных начертаний. К сожалению, CSS2 ещё не предоставляет возможности выбора из этих альтернатив. В настоящий момент, из такого шрифта всегда выбирается начертание по умолчанию.
в любом месте между лексемами,
Комментарии начинаются символом "/*" и заканчиваются символом "*/". Они могут появляться в любом месте между лексемами, и их содержимое не влияет на представление документа. Комментарии не могут вкладываться.
CSS допускает также SGML-ограничители комментариев ("<!--" и "-->") в определённых местах, но это не комментарии CSS. Они разрешены для ввода правил стиля в документе-источнике HTML (в элементе STYLE), чтобы спрятать эти правила от до-HTML 3.2 ПАгентов. См. спецификацию HTML 4.0 ([HTML40]).
Контекст форматирования блока
В контексте форматирования блока боксы устанавливаются один за другим, вертикально, начиная от верха содержащего блока. Вертикальное расстояние между двумя родственными боксами определяется свойством 'margin'. Горизонтальные поля между смежными боксами блока в контексте форматирования блока сжимаются.
В контексте форматирования блока левый внешний край бокса касается левого края содержащего блока (для форматирования справа-налево - касается правый край). Это верно даже в случае с поплавками (хотя область содержимого может усекаться из-за поплавков).
Информацию о разрывах страниц в страничных носителях см. в разделе допустимые разрывы страниц.
Контекст инлайн-форматирования
В контексте инлайн-форматирования боксы устанавливаются по горизонтали, один за другим, начиная от верха содержащего блока. Горизонтальные поля, рамки и заполнение рассматриваются как отношения между боксами. Боксы могут быть выровнены по вертикали несколькими способами: могут быть выровнены их нижние или верхние края или базовые линии текста внутри них. Прямоугольная область, содержащая боксы, которые образуют строку, называется строчный бокс.
Ширина строчного бокса определяется содержащим блоком. Высота строчного бокса определяется правилами из раздела вычисление высоты строки. Строчный бокс всегда имеет высоту, достаточную для содержащихся в нём боксов. В то же время, он может быть выше, чем самый высокий из содержащихся в нём боксов (если, например, боксы выровнены так, что базовые линии выстроены). Если высота бокса В меньше, чем высота строчного бокса, содержащего его, то вертикальное выравнивание В внутри строчного бокса определяется свойством 'vertical-align'.
Если несколько инлайн-боксов не входят по горизонтали в один строчный бокс, они распределяются на два или более вертикально упакованных строчных бокса. Таким образом, параграф будет вертикальным стеком из строчных боксов. Строчные боксы упакованы по вертикали без разделения и никогда не перекрываются.
Вообще, левый край строчного бокса касается левого края его содержащего блока, и правый край касается правого края его содержащего блока. В то же время, боксы-поплавки могут появляться между краем содержащего блока и краем строчного блока. Таким образом, хотя строчные боксы в том же самом контексте инлайн-форматирования обычно имеют ту же самую ширину (что и содержащий блок), они могут иметь и другую ширину из-за поплавков, уменьшающих горизонтальное пространство. Строчные боксы в том же самом контексте инлайн-форматирования обычно различаются по высоте (например, одна строка может содержать высокое изображение, а другие строки - только текст).
Если суммарная ширина инлайн-боксов в строке меньше, чем ширина строчного бокса, содержащего их, то их распределение по горизонтали внутри строчного бокса определяется свойством 'text-align'. Если это свойство имеет значение 'justify', ПА может уплотнить инлайн-боксы.
Поскольку инлайн-бокс не может превысить ширину строчного бокса, длинные инлайн-боксы разделяются на несколько боксов, и эти боксы распределяются на несколько строчных боксов. Если инлайн-бокс разделён, то поля, рамки и заполнение не имеют визуального эффекта в тех местах, где происходит разделение. Форматирование полей, рамок и заполнения может не быть определено полностью, если разделение происходит внутри двунаправленного внедрения.
Инлайн-боксы могут также быть разделены на несколько боксов внутри одного строчного бокса
из-за двунаправленной обработки текста.
Вот пример конструкции инлайн-боксов. Следующий параграф (созданный элементом Р уровня блока в HTML) содержит анонимный текст, распределённый между элементами EM и STRONG:
<P>Several <EM>emphasized words</EM> appear <STRONG>in this</STRONG> sentence, dear.</P>
Элемент P генерирует бокс блока, содержащий пять инлайн-боксов, три из которых - анонимные:
Anonymous: "Several" EM: "emphasized words" Anonymous: "appear" STRONG: "in this" Anonymous: "sentence, dear."
Чтобы сформатировать параграф, ПА вставляет пять боксов в строчный бокс. В этом примере бокс, генерируемый для элемента P, устанавливает содержащий блок для строчных боксов. Если содержащий блок достаточно широк, все инлайн-боксы войдут в один строчный бокс:
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, боксы могут распределиться так:
Поле вставлено до "emphasized" и после "words".
Заполнение вставлено до, сверху и снизу от "emphasized" и после, сверху и снизу от "words". Пунктирная рамка отображается с трёх сторон в каждом случае.
Контуры и фокус
Графические интерфейсы пользователя могут использовать контуры вокруг элементов, чтобы сообщать пользователю, какой элемент страницы имеет фокус. Эти контуры дополняют рамки, и включение и выключение не должно вызывать перерисовки документа. Фокус является субъектом действий пользователя в документе (например, при вводе текста, выборе кнопки, и т.д.). ПА, поддерживающие группы интерактивных носителей, обязаны отслеживать, где находится фокус, и обязаны также отображать фокус. Это может быть сделано путём использования динамических контуров вместе с псевдоклассом :focus.
Пример(ы):
Чтобы прорисовать толстую чёрную линию вокруг элемента, когда он имеет фокус, толстую красную линию, когда он активен, можно использовать следующие правила:
:focus { outline: thick solid black } :active { outline: thick solid red }
Коррекция цветовой гаммы
По вопросам цветовой гаммы проконсультируйтесь в 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'=Rgamma, G'=Ggamma, B'=Bgamma, прежде чем быть обработанным ОС.
Это можно быстро выполнить путём однократного создания 256-элементной просмотровой таблицы при вызове браузера таким вот образом:
for i := 0 to 255 do raw := i / 255.0; corr := pow (raw, gamma); table[i] := trunc (0.5 + corr * 255.0) end
что затем позволяет исключить необходимость чрезмерных вычислений для атрибута цвета, и ещё меньше - через пикселные значения.
Краткое пособие CSS для HTML
В этом пособии мы покажем, как можно быстро создать простые таблицы стилей.
Для использования этого пособия необходимо немного знать 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 специфицирует:
тип гиперссылки: "stylesheet"; размещение таблицы стилей: в атрибуте "ref"; тип таблицы стилей, на которую ссылаются: "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 для XML
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>
Визуальный ПА может отформатировать вышеприведённый пример так:
Обратите внимание, что слово "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 }
Визуальный ПА может сформатировать этот пример так:
Добавление других правил в таблицу стилей позволить Вам сделать представление документа ещё более интересным.
Курсоры: свойство 'cursor'
| Значение: | [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | ne-resize | nw-resize | n-resize | se-resize | sw-resize | s-resize | w-resize| text | wait | help ] ] | inherit |
| Начальное: | auto |
| Применяется: | ко всем элементам |
| Наследуется: | да |
| Процентное: | N/A |
| Носитель: | визуальный, интерактивный |
Это свойство специфицирует тип курсора указательного устройства.
Значения имеют следующий смысл:
auto
пользовательский агент (ПА) определяет курсор на базе текущего контекста.
crosshair
простой крест (например, увеличение знака "+" с помощью коротких отрезков).
default
курсор по умолчанию, зависящий от платформы. Часто отображается стрелкой.
pointer
курсор - указатель на ссылку.
move
обозначает то, что перемещается.
e-resize, ne-resize, nw-resize, n-resize, se-resize, sw-resize, s-resize, w-resize
обозначают перемещение какого-либо края. Например, курсор 'se-resize' используется, если передвижение начинается в юго-восточном углу бокса.
text
обозначает текст, который может быть выделен. Часто отображается как вертикальная черта I.
wait
обозначает, что программа занята и пользователь должен подождать. Часто отображается как (песочные) часы.
help
для объекта под курсором имеется вспомогательная информация. Часто отображается как знак вопроса или воздушный шар.
<uri>
ПА получает курсор из ресурса, обозначенного в URI. Если ПА не может обработать первый курсор из списка курсоров, он должен попытаться обработать второй, и т.д. Если ПА не может обработать ни один курсор, определённый пользователем, он обязан использовать общий курсор в конце списка.
Пример(ы):
P { cursor : url("mything.cur"), url("second.csr"), text; }
Лексический разбор
Все уровни CSS - уровень 1, уровень 2 и любые будущие уровни - используют одно ядро синтаксиса. Это позволяет пользовательским агентам (ПА) разбирать (хотя и не полностью понимать) таблицы стилей, написанные в уровнях CSS, ещё не существовавших в момент создания ПА. Дизайнеры могут использовать это свойство для создания таблиц стилей, работающих со старыми ПА, применяя также возможности позднейших уровней CSS.
На лексическом уровне таблицы стилей CSS состоят из последовательности лексем (грамматических единиц). Список лексем CSS2 приведён ниже. Определения используют общепринятые выражения в стиле Lex. Восьмеричные коды относятся к ISO 10646 ([ISO10646]). Как и в Lex, в случае нескольких одновременных совпадений, самое длинное совпадение определяет лексему.
Лексема
Определение
|url\({w}([!#$%&*-~]|{nonascii}|{escape})*{w}\)
Вышеприведённые макросы в фигурных скобках ({}) определены так:
| 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), никогда не могут быть пробелами.
Левая, правая и первая страницы
При печати двухсторонних документов страничные боксы левой и правой страниц должны различаться. Это можно обозначить с помощью двух псевдоклассов 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 возможно появление других псевдоклассов страницы.
Максимальная неакцентированная глубина
Это расстояние в em-квадрате от базовой линии до низшей точки, достигаемой глифом, исключая любые акценты и знаки диакритики.
Максимальная неакцентированная высота
Это расстояние в em-квадрате от базовой линии до высшей точки, достигаемой глифом, исключая любые акценты и знаки диакритики.
