Установка рисунка маркера перечня ('list-style-image').
Значение: <url> | none По умолчанию: none Область применения: элементы со значением 'list-item' для свойства 'display' Наследование: есть Процентное выражение: неопр.
Это свойство определяет изображение, которое должно быть использовано в качестве маркера перечня. В случае недоступности изображения последнее будет заменено маркером, определенным по свойству "тип маркера перечня".
UL { list-style-image: url(http://png.com/ellipse.png) }
Установка отступа маркера перечня 'list-style-position'
Значение: inside | outside По умолчанию: outside Область применения: элементы со значением 'list-item' для свойства 'display' Наследование: есть Процентное выражение: неопр.
Значение свойства "отступ маркера перечня" определяет, каким образом маркер перечня будет расположен относительно содержания. Примеры форматирования см. в разделе 4.1.3.
Установка обобщающего свойства "перечень" ('list-style')
Значение: <keyword> <position> <url> По умолчанию: не определено для обобщающих свойств Область применения: элементы со значением 'list-item' для свойства 'display' Наследование: есть Процентное выражение: неопр.
Это свойство является обобщающим для установки трех свойств: "тип маркера перечня", "рисунок маркера перечня" и "отступ маркера перечня" в одном месте таблицы стилей.
UL { list-style: upper-roman inside } UL UL { list-style: circle outside } LI.square { list-style: square }
Прямое указание значений свойств "перечень" для элементов 'LI' может иметь непредсказуемые результаты. НаПример:
<STYLE TYPE="text/css"> OL.alpha LI { list-style: lower-alpha } UL LI { list-style: disc } </STYLE> <BODY> <OL CLASS=alpha> <LI>level 1 <UL> <LI>level 2 </UL> </OL> </BODY>
Поскольку приоритет установки (как определено в каскаде установок) выше для первой строки таблицы стилей вышеуказанного примера, он отменяет действие второй строки для всех элементов 'LI' и позиции будут маркироваться только строчными буквами в алфавитном порядке. Таким образом, рекомендуется устанавливать значения для обобщающего свойства "перечень" только для элементов перечня:
OL.alpha { list-style: lower-alpha } UL { list-style: disc }
В вышеуказанных примерах свойства "перечень" будут унаследованы элементами 'LI' от элементов 'OL' и 'UL'.
Значение URL можно сочетать с любыми другими значениями:
UL { list-style: url(http://png.com/ellipse.png) disc }
В вышеуказанном примере значение 'disc' будет использоваться в случае недоступности изображения.
Appendix C: Encoding
(This appendix is informative, not normative)
HTML documents may contain any of the about 30,000 different characters defined by Unicode. Many documents only need a few hundred. Many fonts also only contain just a few hundred glyphs. In combination with section 5.2, this appendix explains how the characters in the document and the glyphs in a font are matched.
Appendix D: Gamma correction
(This appendix is informative, not normative)
See the in the PNG specification [12] if you aren't already familiar with gamma issues.
In the computation, UAs displaying on a CRT may assume an ideal CRT and ignore any effects on apparent gamma caused by dithering. That means the minimal handling they need to do on current platforms is:
PC using MS-Windows
none
Unix using X11
none
Mac using QuickDraw
apply gamma 1.39 [13] (ColorSync-savvy applications may simply pass the sRGB ICC profile [14] to ColorSync to perform correct color correction)
SGI using X
apply the gamma value from /etc/config/system.glGammaVal (the default value being 1.70; applications running on Irix 6.2 or above may simply pass the sRGB ICC profile to the color management system)
NeXT using NeXTStep
apply gamma 2.22
"Applying gamma" means that each of the three R, G and B must be converted to R'=Rgamma, G'=Ggamma, G'=Bgamma, before handing to the OS.
This may rapidly be done by building a 256-element lookup table once per browser invocation thus:
for i := 0 to 255 do raw := i / 255; corr := pow (raw, gamma); table[i] := trunc (0.5 + corr * 255.0) end
which then avoids any need to do transcendental math per color attribute, far less per pixel.
This appendix is informative, not
( This appendix is informative, not normative)
The goal of the work on CSS1 has been to create a simple style sheet mechanism for HTML documents. The current specification is a balance between the simplicity needed to realize style sheets on the web, and pressure from authors for richer visual control. CSS1 offers:
visual markup replacement: HTML extensions, e.g. "CENTER", "FONT" and "SPACER", are easily replaced with CSS1 style sheets.
nicer markup: instead of using "FONT" elements to achieve the popular small-caps style, one declaration in the style sheet is sufficient. Compare the visual markup:
<H1>H<FONT SIZE=-1>EADLINE</FONT></H1>
with the style sheet:
H1 { font-style: small-caps }
<H1>Headline</H1>
various integration levels: CSS1 style rules can be fetched from external style sheets, included in the 'STYLE' element, or put into 'STYLE' attributes. The latter option offers easy transition from HTML extensions.
new effects: some new visual effects have been added to offer users new toys. The typographical pseudo-elements and the extra values on the background property fall into this category.
scalability: CSS1 will be useful on equipment ranging from text terminals to high-resolution color workstations. Authors can write one style sheet and be reasonably sure that the intended style will come across in the best possible manner.
CSS1 does not offer:
per pixel control: CSS1 values simplicity over level of control, and although the combination of background images and styled HTML is powerful, control to the pixel level is not possible.
author control: the author cannot enforce the use of a certain sheet, only suggest
a layout language: CSS1 does not offer multiple columns with text-flow, overlapping frames etc.
a rich query language on the parse tree: CSS1 can only look for ancestor elements in the parse tree, while other style sheet languages (e.g. DSSSL [6]) offers a full query language.
We expect to see extensions of CSS in several directions:
paper: better support for printing HTML documents
support for non-visual media: work is in the process to add a list of properties and corresponding values to support speech and braille output
color names: the currently supported list may be extended
fonts: more precise font specification systems are expected to complement existing CSS1 font properties.
values, properties: we expect vendors to propose extensions to the CSS1 set of values and properties. Extending in this direction is trivial for the specification, but interoperability between different UAs is a concern
layout language: support for two-dimensional layout in the tradition of desktop publishing packages.
other DTDs: CSS1 has some HTML-specific parts (e.g. the special status of the 'CLASS' and 'ID' attributes) but should easily be extended to apply to other DTDs as well.
We do not expect CSS to evolve into:
a programming language
© 1996 (, , ), All Rights Reserved. W3C
, and rules apply.
Разработка простых таблиц стилей является довольно простым занятием. Разработчик должен иметь базовые знания по HTML и по полиграфической терминологии. Например для определения цвета элементов 'H1' как синий, достаточно сказать:
H1 { color: blue }
Приведенный пример является простым правилом CSS. Правило состоит из двух основных частей: селектора ('H1') и определения ('color: blue'). Определение в свою очередь тоже состоит из двух частей: свойства ('color') и значения ('blue'). В то время, как приведенный пример пытается повлиять только на одно из свойств, необходимых для построения HTML документа, он уже является таблицей стилей. Скомбинированный с другими таблицами стилей (одним из фундаментальных свойств CSS является комбинирование таблиц стилей) он будет определять конечный вид всего документа.
Селектор является связью между HTML документом и таблицей стилей, полный набор типов элементов содержит все возможные селекторы. Типы элементов определены в спецификации HTML [2].
Cвойство 'color' является одним из порядка 50 свойств, которые определяют вид HTML документа. Список свойств и их возможных значений определяется в данной спецификации.
Авторам HTML необходимо определять свою таблицу стилей только в том случае, если они хотят предложить специфический стиль для своих документов. Каждый UA должен иметь таблицу стилей по умолчанию, которая представляет документы в приемлемом, но может быть достаточно простом виде. П приложении А приведена примерная таблица стилей для представления HTML документов так, как это предлагается в спецификации HTML 2.0 [3].
Формальная грамматика языка CSS1 определена в приложении B.
Благодарности
В течение короткой жизни HTML было видвинуто несколько предложений о таблицах стилей которым данное предложение обязано своим появлением. Особенно большое влияние оказали предложения от Robert Raisch, Joe English и Pei Wei.
Много людей приняло участие в разработке CSS1. Мы хотим особенно поблагодарить: Terry Allen, Murray Altheim, Glenn Adams, Walter Bender, Tim Berners-Lee, Yves Bertot, Scott Bigham, Steve Byrne, Robert Cailliau, James Clark, Daniel Connolly, Donna Converse, Adam Costello, Todd Fahrner, Todd Freter, Roy Fielding, Neil Galarneau, Wayne Gramlich, Phill Hallam-Baker, Philipp Hoschka, Kevin Hughes, Scott Isaacs, Tony Jebson, William Johnston, Gilles Kahn, Philippe Kaplan, Phil Karlton, Evan Kirshenbaum, Yves Lafon, Murray Maloney, Lou Montulli, Colas Nahaboo, Henrik Frystyk Nielsen, David Perrell, William Perry, Scott Preece, Paul Prescod, Liam Quin, Vincent Quint, Jenny Raggett, Thomas Reardon, C?cile Roisin, Michael Seaton, David Seibert, David Siegel, David Singer, Benjamin Sittler, Jon Smirl, Charles Peyton Taylor, Ir?ne Vatton, Daniel Veillard, Mandira Virmani, Greg Watkins, Mike Wexler, Lydja Williams, Brian Wilson, Chris Wilson, Lauren Wood и Stephen Zilles.
Трое людей заслуживают специального упоминания: Dave Raggett (за его работу над HTML3), Chris Lilley (за его вклад, особенно в вопросах цвета и шрифтов) и Steven Pemberton (за его организационные и созидательные способности).
Блочные элементы
Элементы с параметром 'display', имеющим значение 'block' или 'list-item' относятся к блочным элементам. Плавающие (floating) элементы ( т.е. со значением параметра 'float' иным, чем 'none') также считаются блочными.
Следующий пример показывает, как границы и отступы форматируют элемент 'UL' с двумя дочерними. Для упрощения границы на диаграмме не показаны. Учтите, что односимвольные "константы" в данном примере - это не синтаксис CSS1, это просто удобный способ связать значения таблицы стилей с рисунком.
<STYLE TYPE="text/css"> UL { background: red; margin: A B C D; padding: E F G H; } LI { color: white; background: blue; margin: a b c d; padding: e f g h; } </STYLE> .. <UL> <LI>1й элемент списка <LI>2й элемент списка </UL> _______________________________________________________ | | | A UL граница прозрачная | | _______________________________________________ | | D | | B | | | E UL отступ красный | | | | _______________________________________ | | | | H | | F | | | | | a LI граница прозрачная | | | | | | красный цвет просвечивает | | | | | | _______________________________ | | | | | | d | | b | | | | | | | e LI отступ синий (blue) | | | | | | | | | | | | | | | | h 1й элемент списка f | | | | | | | | | | | | | | | | g | | | | | | | |_______________________________| | | | | | | | | | | | | max(a, c) | | | <- См. max | | | _______________________________ | | | | | | | | | | | | | | d | e LI отступ синий (blue) | | | | | | | | | | | | | | | | h 2й элемент списка f | | | | | | | | | | | | | | | | g | | | | | | | |_______________________________| | | | | | | | | | | | | c LI отступ прозрачный, | | | | | | красный цвет просвечивает | | | | | |_______________________________________| | | | | | | | | G | | | |_______________________________________________| | | | | C | |_______________________________________________________|
В техническом плане, свойства заполнения и границы не наследуются. Но, как видно из примера, элемент позиционируется относительно родительских и "братских", поэтому свойства границы и заполнения последних отражаются на дочерних элементах.
Если бы в вышеназванном примере указывались рамки, они бы располагались между отступами и границами.
Некоторые из используемых терминов иллюстрирует следующая диаграмма:
--------------- <-- верх верхняя граница --------------- верхняя рамка --------------- верхний отступ +-------------+ <-- потолок | | | | | | | | | левая | левая | левый | | правый | правая | правая | |-граница|-рамка--|-отступ-|-содержание--|-отступ--|--рамка--|-граница-| | | | | | | | | +-------------+ <-- подвал ^ ^ ^ ^ левый внешний край | левый внутр. край | правый внутр. край | правый внешний край нижний отступ --------------- нижняя рамка --------------- нижняя граница --------------- <-- низ
Левый внешний край - это край всего элемента, с учетом отступа, рамки и границы. Левый внутренний край - это край содержания внутри отступа, рамки и границы. Справа - аналогично. Верх - это верх самого объекта с учетом отступа, рамки и границы; он определяется для строковых и плавающих элементов, но не для фиксированных блочных элементов. Потолок - это верх содержания внутри отступа, рамки и границы. Низ - это низ самого элемента, ниже отступа, рамки и границы; он определяется для строковых и плавающих элементов, но не для фиксированных блочных элементов. Подвал - это низ элемента внутри отступа, рамки и границы (низ содержания).
Ширина элемента - это ширина содержания, т.е. расстояние между левым и правым внутренними краями. Высота - это высота содержания, т. е. расстояние от подвала до потолка.
Character encoding
The content of an HTML document is a sequence of characters and markup. To send it "over the wire", it is encoded as a sequence of bytes, using one of several possible encodings. The HTML document has to be decoded to find the characters. For example, in Western Europe it is customary to use the byte 224 for an a-with-grave-accent (à), but in Hebrew, it is more common to use 224 for an Aleph. In Japanese, the meaning of a byte usually depends on the bytes that preceded it. In some encodings, one character is encoded as two (or more) bytes.
The UA knows how to decode the bytes by looking at the "charset" parameter in the HTTP header. Typical encodings (charset values) are "ASCII" (for English), "ISO-8859-1" (for Western Europe), "ISO-8859-8" (for Hebrew), "Shift-JIS" (for Japanese).
HTML [2],[4], allows some 30,000 different characters, namely those defined by Unicode. Not many documents will use that many different characters, and choosing the right encoding will usually ensure that the document only needs one byte per character. Occasional characters outside the encoded range can still be entered as numerical character references: 'Π' will always mean the Greek uppercase Pi, no matter what encoding was used. Note that this entails that UAs have to be prepared for any Unicode character, even if they only handle a few encodings.
Font encoding
A font doesn't contain characters, it contains pictures of characters, known as glyphs. The glyphs, in the form of outlines or bitmaps, constitute a particular representation of a character. Either explicitly or implicitly, each font has a table associated with it, the font encoding table, that tells for each glyph what character it is a representation for. In Type 1 fonts, the table is referred to as an encoding vector.
In fact, many fonts contain several glyphs for the same character. Which of those glyphs should be used depends either on the rules of the language, or on the preference of the designer.
In Arabic, for example, all letters have four different shapes, depending on whether the letter is used at the start of a word, in the middle, at the end, or in isolation. It is the same character in all cases, and thus there is only one character in the HTML document, but when printed, it looks differently each time.
There are also fonts that leave it to the graphic designer to choose from among various alternative shapes provided. Unfortunately, CSS1 doesn't yet provide the means to select those alternatives. Currently, it is always the default shape that is chosen from such fonts.
Font sets
To deal with the problem that a single font may not be enough to display all the characters in a document, or even a single element, CSS1 allows the use of font sets.
A font set in CSS1 is a list of fonts, all of the same style and size, that are tried in sequence to see if they contain a glyph for a certain character. An element that contains English text mixed with mathematical symbols may need a font set of two fonts, one containing letters and digits, the other containing mathematical symbols. See section 5.2 for a detailed description of the selection mechanism for font sets.
Here is an example of a font set suitable for a text that is expected to contain text with Latin characters, Japanese characters, and mathematical symbols:
BODY { font-family: Baskerville, Mincho, Symbol, serif }
The characters available in the Baskerville font (a font with only Latin characters) will be taken from that font, Japanese will be taken from Mincho, and the mathematical symbols will come from Symbol. Any other characters will (hopefully) come from the generic font family 'serif'. The 'serif' font family will also be used if one or more of the other fonts is unavailable.
Группирование
Для уменьшения размера таблицы стилей можно группировать селекторы в разделенные запятыми списки:
H1, H2, H3 { font-family: helvetica }
Точно также можно группировать определения:
H1 { font-weight: bold; font-size: 12pt; line-height: 14pt; font-family: helvetica; font-variant: normal; font-style: normal; }
В дополнение к этому некоторые свойства имеют собственный синтаксис группировки:
H1 { font: bold 12pt/14pt helvetica }
что эквивалентно предыдущему примеру.
Холст
Холст представляет собой часть изображаемой на экране поверхности UA, где воспроизводятся документы. Ни один из структурных элементов документа не сопоставляется с холстом, в связи с чем при форматировании документа возникают два вопроса:
откуда должны определяться размеры холста? если документ не покрывает весь холст, как должна воспроизводиться эта область?
Логично было бы ответить на первый вопрос: "Изначальные размеры холста основаны на размерах окна", но CSS1 оставляет эту задачу на усмотрение UA. Также было бы логично, чтобы UA менял размеры холста соответственно размерам окна, но это также выходит за рамки полномочий CSS1.
Расширение языка HTML создало прецедент по второму вопросу: атрибуты элемента 'BODY' определяют фон для всего холста. Чтобы не разочаровать дизайнеров, CSS1 использует особое правило для определения фона холста:
Если значения свойств фона для элемента 'HTML' отличаются от 'transparent', то они и используются, в ином случае используются значения свойств фона, указанные для элемента 'BODY'. Если в результате все равно значение параметров фона равно 'transparent', то свойства фона считаются незаданными.
По этому правилу допускается:
<HTML STYLE="background: url(http://style.com/marble.png)"> <BODY STYLE="background: red">
В вышеуказанном примере, холст покрывается картинкой marble.png. Фон элемента 'BODY' (он может и не полностью покрывать холст) будет красным.
Пока другие способы адресации графики на холсте не станут доступными, рекомендуется, чтобы свойства холста задавались в элементе 'BODY'.
ID в качестве селектора
HTML [2] также теперь определяет атрибут 'ID', который гарантированно имеет уникальное значение в документе. Таким образом он имеет особое значение, как селектор таблицы стилей, и может адресоваться с помощью '#':
#z98y { letter-spacing: 0.3em } H1#z98y { letter-spacing: 0.5em }
<P ID=z98y>Wide text</P>
В приведенном примере первый селектор соответствует элементу 'P' благодаря 'ID' атрибута. Второй селектор определяет как тип элемента ('H1'), так и значение ID, и, поэтому, не соответствует элементу 'P'.
Используя ID в качестве селектора, можно устанавливать свойства поэлементно. В то время как таблицы стилей были разработаны для визуализации структуры документа, это свойство позволяет авторам создавать документы, которые корректно отображаются на холсте без использования структурных элементов HTML. Такое использование таблиц стилей не приветствуется.
'Important'
Дизайнеры таблиц стилей могут увеличить веса определений:
H1 { color: black ! important; background: white ! important } P { font-size: 12pt ! important; font-style: italic }
В приведенном примере первые три определения имеют повышенный вес, а последнее определение имеет нормальный вес.
Читательское правило с повышенным с помощью 'important' весом определения переопределяет правило автора с нормальным весом. А авторское правило с повышенным весом определения переопределяет читательское правило с повышенным весом определения.
Элементы 'BR'
Текущие свойства и значения CSS1 не способны описать поведение элемента 'BR'. В языке HTML элемент 'BR' определяется как перевод строки между словами. Фактически, это принудительный перевод строки. Будущие версии CSS будут поддерживать ввод и замену содержания, но средства форматирования основанные на CSS1, должны использовать отдельные алгоритмы обработки объекта 'BR'
В CSS влиять на внешний вид документа может не только одна таблица стилей, а сразу несколько одновременно. Для этого есть две основных причины: модульная структура и баланс автор/читатель.
модульная структура Дизайнер таблицы стилей может комбинировать несколько (частичных) таблиц стилей для уменьшения избыточности:
@import url(http://www.style.org/pastoral); @import url(http://www.style.org/marine);
H1 { color: red } /* переопределить импортированные таблицы */
баланс автор/читатель Как читатели так и авторы могут влиять на внешний вид с помощью таблиц стилей. Для достижения этого они используют один и тот же язык таблиц стилей. UA имеет право самостоятельно вырабатывать механизм обращения к персональной таблице стилей.
Иногда могут возникать конфликты между таблицами стилей, которые влияют на документ. Разрешение конфликтов основывается на том, что каждое правило имеет вес. По умолчанию веса читательских правил меньше, чем веса правил, определенных автором. Т.е., если есть конфликт между правилом автора и правилом читателя, будет использовано правило автора. Как читательское, так и авторское правила переопределяют значения по умолчанию UA.
Импортируемые таблицы стилей также каскадируются в порядке их импортирования, в соответствии с правилами каскадирования, описанными ниже. Любые правила, определенные в самой таблице стилей, переопределяют правила импортированной таблицы стилей. Импортируемые таблицы стилей могут в свою очередь сами импортировать и, соответственно, переопределять другие таблицы стилей.
В CSS1 все определения '@import' должны помещаться в начало таблицы стилей перед всеми определениями. Это создает наглядность в переопределении правил в импортированных таблицах стилей.
Класс в качестве селектора
Для увеличения гибкости контроля над элементами, в HTML добавлен новый атрибут [2] 'CLASS'. Все элементы внутри элемента 'BODY' могут быть классифицированы, а на класс можно сослаться через таблицу стилей:
<HTML> <HEAD> <TITLE>Title</TITLE> <STYLE TYPE="text/css"> H1.pastoral { color: #00FF00 } </STYLE> </HEAD> <BODY> <H1 CLASS=pastoral>Way too green</H1> </BODY> </HTML>
К классифицированным элементам применяются нормальные правила наследования, они наследуют значения своих родителей в структуре документа.
Можно адресовать все элементы одного класса опустив имя тэга в селекторе:
.pastoral { color: green } /* all элементы with CLASS pastoral */
Для каждого селектора можно определить только один класс. 'P.pastoral.marine' таким образом является неправильным селектором в CSS1. (Контекстные селекторы, описанные ниже, могут определять один класс для одного простого селектора).
CSS предоставляет настолько большие возможности для использования атрибута CLASS, что во многих случаях не важно у какого элемента HTML устанавливается класс - можно заставить любой элемент эмулировать любой другой элемент. Но не рекомендуется полагаться на такую возможность, т.к. это лишает документ структуры, которая имеет универсальное значение (элементы HTML). Структура основанная на классах имеет узкое применение только в тех случаях, когда значения классов оговорены с обеих сторон.
в таблицах стилей оформляются так
Текстовые комментарии в таблицах стилей оформляются так же как и в языке Си [7]:
EM { color: red } /* red, really red!! */
Комментарии не могут вкладываться друг в друга. Для обработчика CSS1 комментарий эквивалентен пробелу.
Контекстные селекторы
Наследование значительно уменьшает количество напечатанного текста CSS дизайнерами. Вместо того, чтобы указывать все свойства стилей, можно установить значения по умолчанию, а затем указать исключения. Для того, чтобы элементы 'EM' внутри 'H1' имели другой текст, можно было бы указать:
H1 { color: blue } EM { color: red }
Когда данная таблица стилей будет использована, весь текст внутри 'EM', как внутри, так и вне 'H1' станет красным. Очевидно, хотелось, чтобы только те элементы 'EM', которые заключены в 'H1' стали красными. Этого можно достигнуть, указав:
H1 EM { color: red }
В этом случае селектор является маской поиска в стеке открытых элементов, а такой селектор называется контекстным селектором. Контекстные селекторы состоят из простых селекторов, разделенных пробелом (все описываемые до этого селекторы являлись простыми селекторами). Описанные правила применяются только к элементу, который соответствует последнему простому селектору (в данном случае элемент 'EM'), и только в том случае, если результат поиска является положительным. Контекстные селекторы в CSS1 описывают только наследственные взаимосвязи, в то время как последующие версии могут описывать м другие виды связи.
UL LI { font-size: small } UL UL LI { font-size: x-small }
В этом случае первый селектор соответствует элементам 'LI' в как минимум одним предком 'UL'. Второй селектор соответствует подмножеству первого, т.е. элементы 'LI' с как минимум двумя предками 'UL'. Конфликт разрешается тем, что второй селектор является более специфичным в связи с более длинной маской поиска. См. подробнее о порядке каскадирования (раздел 3.2).
Контекстные селекторы могут содержать тип элемента, атрибуты CLASS, атрибуты ID или их комбинацию:
DIV P { font: small sans-serif } .reddish H1 { color: red } #x78y CODE { background: blue } DIV.sidenote H1 { font-size: large }
Первый селектор соответствует элементам 'P', которые среди предков имеют 'DIV'. Второй селектор соответствует всем элементам 'H1' которые имеют предка класса 'reddish'. Третий селектор соответствует всем элементам 'CODE', которые являются наследниками элемента с 'ID=x78y'. Четвертый селектор соответствует всем элементам 'H1', которые имеют предка 'DIV' с классом 'sidenote'.
Можно группировать несколько контекстных селекторов:
H1 B, H2 B, H1 EM, H2 EM { color: red }
что эквивалентно:
H1 B { color: red } H2 B { color: red } H1 EM { color: red } H2 EM { color: red }
[1] W3C (http://www.w3.org/pub/WWW/Style)
[2] Sometime in 1997 we expect there to be a single HTML specification that has support for Style Sheets and Internationalization. Among the works in progess in this area is "" (http://www.w3.org/pub/WWW/TR/WD-style) and the "" (http://www.w3.org/pub/WWW/MarkUp/Cougar/HTML.dtd).
[3] T Berners-Lee, D Connolly: "Hypertext Markup Language - 2.0", , MIT/W3C, November 1995. The specification is also available in (http://www.w3.org/pub/WWW/MarkUp/html-spec/html-spec_toc.html)
[4] F Yergeau, G Nicol, G Adams, M Dürst: "" (ftp://ietf.org/internet-drafts/draft-ietf-html-i18n-05.txt).
[5] . Information Processing - Text and Office Systems - Standard Generalized Markup Language (SGML)
[6] Information technology -- Processing languages -- Document Style Semantics and Specification Language (DSSSL). The specification is also available in
[7] Programming languages -- C.
[8] The Unicode Consortium, "The Unicode Standard -- Worldwide Character Encoding -- Version 1.0", Addison-Wesley, Volume 1, 1991, Volume 2, 1992.
[9] M Anderson, R Motta, S Chandrasekar, M Stokes: "" (http://www.hpl.hp.com/personal/Michael_Stokes/srgb.htm)
[10] 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)
[11] T Berners-Lee, L Masinter, M McCahill: "Uniform Resource Locators (URL)", , CERN, Xerox Corporation, University of Minnesota, December 1994
[12] "" (http://www.w3.org/pub/WWW/TR/REC-png-multi.html)
[13] Charles A. Poynton: "" (ftp://ftp.inforamp.net/pub/users/poynton/doc/Mac/Mac_gamma.pdf)
[14] International Color Consortium: "", 1995 (ftp://sgigate.sgi.com/pub/icc/ICC32.pdf)
[15] S C Johnson: "YACC - Yet another compiler compiler", Technical Report, Murray Hill, 1975
[16] "Flex: The Lexical Scanner Generator", Version 2.3.7, ISBN 1882114213
Множество псевдо-элементов
Можно комбинировать несколько псевдо-элементов:
P { color: red; font-size: 12pt } P:first-letter { color: green; font-size: 200% } P:first-line { color: blue }
<P>Some text that ends up on two lines</P>
В этом примере первая буква каждого элемента 'P' будет зеленой с размером шрифта 24pt. Остаток первой строки (в соответствии с форматированием на холсте) будет синим, в то время как весь остальной параграф будет красным. Предположив, что перенос строки произойдет перед словом "ends", фиктивная последовательность тэгов будет такова:
<P> <P:first-line> <P:first-letter> S </P:first-letter>ome text that </P:first-line> ends up on two lines </P>
Обратите внимание, что элемент 'first-letter' находится внутри элемента 'first-line'. Свойства, установленные в 'first-line' будут унаследованы 'first-letter', но будут переопределены, если то же свойство установлено в 'first-letter'.
Если псевдо-элемент разрывает настоящий элемент должны быть сгенерированны дополнительные тэги в фиктивной последовательности тэгов. Например, если элемент SPAN длится дальше тэга </P:first-line>, должен быть сгенерирован дополнительный набор тэгов SPAN, т.е. фиктивная последовательность тэгов примет следующий вид:
<P> <P:first-line> <SPAN> This text is inside a long </SPAN> </P:first-line> <SPAN> span элемент </SPAN>
CSS1 предполагает простой ортогональный способ форматирования, когда каждый элемент образуется одним или несколькими прямоугольными полями. (Элементы, имеющие параметр 'display' со значением 'none', не форматируются и поэтому не влияют на поле. Все поля имеют внутреннюю содержательную область с устанавливаемыми смежными областями отступа, рамки и границы.
_______________________________________ | | | граница (прозрачная) | | _________________________________ | | | | | | | рамка | | | | ___________________________ | | | | | | | | | | | отступ | | | | | | _____________________ | | | | | | | | | | | | | | | содержание | | | | | | | |_____________________| | | | | | |___________________________| | | | |_________________________________| | |_______________________________________|
| ширина элемента |
| ширина поля |
Размеры границы, рамки и отступа устанавливаются соответственно описаниям следующих разделов настоящего документа: (5.5.1-5.5.5) для границы; (5.5.6-5.5.10) для отступа; (5.5.11-5.5.22) для рамки.
Отступ использует тот же самый фон, что и сам элемент (установка свойств фона см. 5.3.2-5.3.7). Цвет и стиль рамки устанавливаются в свойствах рамки. Границы всегда прозрачны, поэтому через них будет просвечивать родительский элемент.
Размеры поля есть сумма размеров элемента (форматированного текста или изображения) и размеров областей отступа, рамки и границы.
С точки зрения форматирования элементы подразделяются на два основных типа: блочные и строчные .
Наследование
В первом примере цвет элементов 'H1' был установлен в синий. Представьте, что есть элемент 'H1' с элементом <EM> внутри:
<H1>The headline <EM>is</EM> important!</H1>
Если для элемента 'EM' не было определено никакого цвета, то Emированный "is" унаследует цвет родительского элемента, т.е. он также будет отображен синим цветом. Другие свойства стиля также наследуются, например 'font-family' и 'font-size'.
Для определения свойства стиля по умолчанию для документа, можно задать это свойство у элемента, от которого наследуются все остальные видимые элементы. В HTML документах элемент 'BODY' выполняет эту функцию:
BODY { color: black; background: url(texture.gif) white; }
Этот пример сработает даже если автор опустил тэг 'BODY' (что является допустимым) благодаря тому, что браузер вставит пропущенный тэг. Предыдущий пример устанавливает цвет текста в черный, а фон - содержащий картинку. Фон будет белым в том случае, если картинка будет недоступна. (См. подробности в главе 5.3)
Некоторые свойства стилей не наследуются от родительских элементов дочерними элементами. В большинстве случаев интуитивно понятно в каких случаях возникает такая ситуация. Например свойство 'background' не наследуется, но фон родительского элемента по умолчанию будет просвечивать сквозь.
Часто значение свойства указывается в процентах от другого свойства:
P { font-size: 10pt } P { line-height: 120% } /* relative to 'font-size', i.e. 12pt */
Для любого свойства, значения которого могут указываться в процентах, определено свойство на которое оно ссылается. Дочерние элементы 'P' унаследуют вычисленное а не процентное значение 'line-height' (12pt).
Обозначение цвета
Цвет обозначатся либо зарезервированным словом, либо численно по спецификации RGB.
Допустимы следующие зарезервированные слова для указания цвета: aqua (светло-голубой), black (черный), blue (синий), fuchsia (светло-фиолетовый), gray (серый), green (зеленый), lime (светло-зеленый), maroon (коричневый), navy (темно-синий), olive (оливковый), purple (фиолетовый), red (красный), silver (светло-серый), teal (сине-зеленый), white (белый), и yellow (желтый). Эти 16 цветов взяты из палитры VGA для Windows, и их значения RGB не определены в данной спецификации.
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) } /* integer range 0 - 255 */ EM { color: rgb(100%, 0%, 0%) } /* float range 0.0% - 100.0% */
Значения в формате RGB указываются в шестнадцатеричной системе счисления в виде знака #, за которым без пробелов указываются три или шесть шестнадцатеричных символа. Трехсимвольная запись RGB (#rgb) преобразовывается в шестисимвольную путем дублирования цифр, а не добавлением нулей. Например, #fb0 расширяется до #ffbb00. Поэтому понятно, что белый цвет (#ffffff) может быть кратко записан как (#fff), и это устранит любые зависимости от специфики отображения цвета на экране.
Формат значения RGB в функциональной записи следующий: 'rgb(' далее разделенный точками список из трех численных значений (либо три целочисленных значения в интервале 0-255б либо три процентных значения в диапазоне от 0.0% до 100.0%), далее ')'.
Значения за пределами числовых интервалов должны отсекаться. Ниже приводятся три эквивалентных примера:
EM { color: rgb(255,0,0) } /* значения в диапазоне 0 - 255 */ EM { color: rgb(300,0,0) } /* замена на 255 */ EM { color: rgb(110%, 0%, 0%) } /* замена на 100% */
Цвета RGB определяются для цветового поля sRGB [9]. UA может варьировать результаты обработки в пределах точности, с которой они могут отображать цвета, однако применение sRGB обеспечивает однозначное и объективно измеримое определение цвета в соответствии с международными стандартами[10].
UA может накладывать ограничения на указанные условия для отображаемых цветов, производя коррекцию их гаммы. В определенных условиях просмотра sRGB определяет гамму 2.2. UA регулирует заданные CSS цвета таким образом, чтобы применительно к устройству вывода получить "естественную" гамму цветов, гамму 2.2. В приложении D это рассматривается более подробно. Обратите внимание, что речь идет только о цветах, определенных через CSS, а, к примеру, для графических изображений будет использоваться их собственная цветовая информация.
Порядок каскадирования
Наличие конфликтов правил присуще механизму CSS. Чтобы найти значение комбинации элемент/свойство, необходимо следовать следующему алгоритму:
1. Найти все определения, которые соответствуют паре элемент/свойство. Определение применяется, если селектор соответствует элементу. Если определение не применяется, используется унаследованное значение. Если унаследованного значения нет, используется значение по умолчанию.
2. Отсортировать определения по их весу: определения, обозначенные как '!important', имеют больший вес, чем необозначенные (нормальные) определения.
3. Отсортировать по источнику: авторская таблица стилей переопределяет читательскую таблицу стилей, которая переопределяет значения по умолчанию UA. Импортируемая таблица стилей имеет тот же источник, что и импортирующая.
4. Отсортировать по специфичности селектора: более специфичные селекторы переопределяют менее специфичные. Для определения значения специфичности необходимо сосчитать количество атрибутов ID в селекторе (a), количество атрибутов с классом в селекторе (b) и количество имен тэгов в селекторе (c). Объединение трех чисел (по системе счисления с большим основанием) дает искомое значение специфичности. Некоторые примеры:
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 */ LI.red {...} /* a=0 b=1 c=1 -> специфичность = 11 */ UL OL LI.red {...} /* a=0 b=1 c=3 -> специфичность = 13 */ #x34y {...} /* a=1 b=0 c=0 -> специфичность = 100 */
Псевдо-элементы и псевдо-классы учитываются соответственно также, как и нормальные элементы и классы.
5. Отсортировать в порядке определения: если два правила имеют одинаковый вес, указанное позднее побеждает. Правила в импортированной таблице стилей считаются предшествующими любому правилу внутри самой таблицы стилей.
Поиск значения свойства может быть прекращен, если одно правило имеет больший вес чем остальные правила, соответствующие той же паре элемент/свойство.
Такая стратегия дает писателю большую власть над отображением документа, чем у читателя. В связи с этим важно предоставлять читателю возможность отключать действие конкретной таблицы стилей.
Определение в атрибуте 'STYLE' элемента (см. раздел 1.1) имеет тот же вес, что и определение через ID селектор, определенный в таблице стилей:
<STYLE TYPE="text/css"> #x97z { color: blue } </STYLE>
<P ID=x97z STYLE="color: red">
Но в данном примере элемент 'P' будет красным. Так как специфичность обоих определений одинакова, определение в атрибуте 'STYLE' переопределит определение через ID согласно правилу 5.
UA могут по-прежнему поддерживать стилистические атрибуты HTML, например 'ALIGN'. Если так, то эти атрибуты должны переводиться в соответствующее правило CSS со специфичностью равной 1. Должно считаться, что такие правила описаны в начале авторской таблицы стилей и могут быть переопределены нижеследующими правилами в таблице стилей. В переходный период такая политика позволит стилистическим атрибутам сосуществовать с таблицей стилей.
Последовательно-совместимый синтаксический анализ
Данная спецификация определяет CSS первого уровня. В перспективе ожидается появление более высоких уровней CSS с дополнительными свойствами. Чтобы обеспечить совместимость UA, поддерживающих только CSS1, с более поздними версиями языка, в данном разделе описываются процедуры действий UA в случае обнаружения несоответствия требованиям CSS первого уровня.
установка неизвестного свойства игнорируется. К примеру, таблицу стилей
H1 { color: red; rotation: 70deg }
UA будет обрабатывать, как если бы она имела вид
H1 { color: red; }
недопустимые значения, либо значения с недопустимыми частями, обрабатываются, как если бы определение отсутствовало:
IMG { float: left } /* верно для CSS1 */ IMG { float: left top } /* "top" недопустимое значение для 'float' */ IMG { background: "red" } /* в CSS1 ключевые слова не закавычиваются */ IMG { border-width: 3 } /* должна быть указана размерность числа, */ /* выражающего значение длины */
В вышеприведенном примере анализатор CSS1 должен принять к исполнению первую строку и игнорировать последующие, в результате чего таблица стилей примет вид:
IMG { float: left } IMG { } IMG { } IMG { }
UA, совместимый с будущей спецификацией CSS, может отработать какую - либо из остальных строк надлежащим образом. неправильная приставка к зарезервированному слову игнорируется вместе со всем последующим, вплоть до первой следующей точки с запятой (;) либо парных фигурных скобок ({}) включительно. Например, пусть мы имеем таблицу стилей:
@three-dee { @background-lighting { azimuth: 30deg; elevation: 190deg; } H1 { color: red } } H1 {color: blue}
где '@three-dee' - недопустимое выражение для CSS1. Следовательно, вся строка с "собачкой" (вплоть до третьих правых фигурных скобок включительно) игнорируется.
UA с поддержкой CSS1 пропускает изъятое выражение, фактически сокращая таблицу стилей до:
H1 {color: blue}
Более подробно:
Таблица стилей CSS, для любой версии CSS, состоит из перечня директив (statements). Есть два вида директив: предустановки и установки. Возле директив допускаются промежутки (пробелы, табуляция, новые строки).
Таблица стилей CSS часто вставляется в документы HTML, и для сокрытия таблицы стилей от более ранних UA, желательно вставлять ее внутри комментариев HTML. Знаки комментариев HTML "" могут быть расположены перед, после и охватывая утверждения. Они могут отделяться интервалами.
Предустановки начинаются с зарезервированных слов с приставкой в виде знака "собачки" '@' (к примеру: @import', '@page') и идентификатора. Идентификатор может состоять из букв, цифр, черточек и спецсимволов (определение ниже).
Предустановка состоит из всего, что находится до следующей точки с запятой (;) включительно. UA для CSS, встречая предустановку, начинающуюся со слова с приставкой, иной чем слово '@import', игнорируют всю предустановку и продолжают отработку после ее окончания. Также игнорируется любая предустановка, начинающаяся с '@import', если она не располагается вверху таблицы стилей, скажем, после какого-либо правила (даже игнорируемого). Рассмотрим пример.
Пусть анализатор CSS1 обрабатывает следующую таблицу стилей:
@import "subs.css"; H1 { color: blue } @import "list.css";
Вторая предустановка '@import' для CSS недопустима. Анализатор CSS1 пропускает всю предустановку, преобразуя таблицу стилей к следующему виду:
@import "subs.css"; H1 {color: blue}
Блок начинается с левых фигурных скобок ({) и кончается правыми (}). Между ними могут быть различные знаки, включая круглые (()), квадратные ([]) и фигурные скобки, которые всегда присутствуют в анализируемых парах и могут быть вложенными. Одинарные кавычки (') и двойные кавычки ("), также присутствующие в анализируемых парах, и знаки между ними воспринимаются как строка (см определение строки в примечании B). Ниже приведен пример блока; обратите внимание, что правая скобка между кавычками не воспринимается как открытие скобки в блоке, и что вторая одинарная кавычка является пропускаемым символом, а не рассматривается как открытие кавычек:
{ causta: "}" + ({7} * '\'') }
Установка состоит из селектора-строки, за которым следует блок - определение. Селектор-строка состоит из всего, что находится вплоть до первой левой фигурной скобки, исключая последнюю. Установка, начинающаяся с некорректной для CSS1, опускается.
К примеру, обработчик CSS1 встречает следующую таблицу стилей:
H1 { color: blue } P[align], UL { color: red; font-size: large } P EM { font-weight: bold }
Вторая строка примера содержит селектор-строку, недопустимую для CSS1. UA для CSS1 должен пропустить эту установку и привести таблицу стилей к следующему виду:
H1 { color: blue } P EM { font-weight: bold }
Блок-определение начинается с левой фигурной скобки ({) и заканчивается обнаруженной правой фигурной скобкой. Между ними располагается перечень из определений (0 или больше), разделенных точками с запятой (;).
Определение состоит из свойства, двоеточия и значения, каждое из которых может отделяться пробелами. Как указывалось ранее, свойство является идентификатором. В значении могут быть использованы разные символы, однако в анализируемых парах должны присутствовать круглые скобки (()), квадратные скобки ([]), фигурные скобки ({}), одинарные кавычки (') и двойные кавычки ("). Круглые, квадратные и фигурные кавычки могут быть вложенными. Внутри кавычек символы воспринимаются как строки.
Чтобы гарантировать возможность в будущем вводить новые свойства и новые значения для существующих свойств, UA должно опускать определение с некорректным названием свойства или некорректным значением свойства. Каждое из свойств CSS1 имеет собственные синтаксические и семантические ограничения значений, которое оно может принимать.
Например, допустим, что обработчик CSS1 встретил следующую таблицу стилей:
H1 { color: red; font-style: 12pt } P { color: blue; font-vendor: any; font-variant: small-caps } EM EM { font-style: normal }
Второе определение в первой линии имеет недопустимое значение '12pt'. Второе определение во второй линии содержит неопределенное свойство 'font-vendor'. Обработчик CSS1 пропустит эти определения, сокращая таблицу стилей до:
H1 { color: red; } P { color: blue; font-variant: small-caps } EM EM { font-style: normal }
Комментарии (см. секцию 1.7) могут быть вставлены везде, где допускается простановка пробелов. CSS1 определяет допустимые места вставки пробелов (напр. внутри значений), и там же могут быть вставлены комментарии.
Всегда соблюдаются следующие правила:
все таблицы стилей CSS независимы от регистра, исключая части, не находящиеся под контролем CSS. Например, в CSS1 названия семейства шрифта и URL могут зависеть от внешних обстоятельств. Также зависимые от внешних обстоятельств атрибуты для CLASS и ID находятся под контролем HTML [2]. для CSS1 селекторы (имена, классы и ID элемента) могут включать только символы A-Z, 0-9 и символы Unicode 161-255, плюс черточку (-); они не могут начинаться с черточки или цифры; они могут также включать непечатаемые и символы Unicode в виде цифрового кода (см. ниже). обратный слеш, после которого идут не более четырех шестнадцатеричных цифр (0..9A..F), представляет собой символ Unicode с указанным числом. любой символ за исключением шестнадцатеричной цифры, может быть пропущен для игнорирования его специального значения, путем установки перед ним обратного слеша. Например: "\"" - строка, состоящая из одной двойной кавычки. два предшествующих пункта определяют переходы по обратному слешу. Такие переходы всегда считаются частью идентификатора, за исключением случаев, когда они находятся внутри строки (т.е. "\7B" - это не пунктуация, даже если присутствует "{", а "\32" допускается в начале имени класса, даже если "2" - нет).
Примечание: атрибут HTML CLASS допускает больше символов в названии класса, чем установлено для вышеназванных селекторов. В CSS1 эти символы будут пропущены или транслитерированы в числа Unicode: "B&W?" может быть написано в виде "B\&W\?", или "B\26W\3F", "??????" (Greek: "kouros") может быть написано как "\3BA\3BF\3C5\3C1\3BF\3C2". Ожидается, что в последующих версиях CSS непосредственно можно будет вводить больше символов.
В приложении В дана грамматика CSS1.
Некоторые стили, например цвета, были
(Это приложение является информативным, а не формальным)
Предлагаемая таблица стилей написана в соответствии с предлагавшимся форматированием документов в спецификации HTML 2.0 [3]. Некоторые стили, например цвета, были добавлены для завершенности. Предлагается, что UA будет использовать по умолчанию таблицу стилей, схожую с представленной.
BODY { margin: 1em; font-family: serif; line-height: 1.1; background: white; color: black; }
H1, H2, H3, H4, H5, H6, P, UL, OL, DIR, MENU, DIV, DT, DD, ADDRESS, BLOCKQUOTE, PRE, BR, HR { display: block }
B, STRONG, I, EM, CITE, VAR, TT, CODE, KBD, SAMP, IMG, SPAN { display: inline }
LI { display: list-item }
H1, H2, H3, H4 { margin-top: 1em; margin-bottom: 1em } H5, H6 { margin-top: 1em } H1 { text-align: center } H1, H2, H4, H6 { font-weight: bold } H3, H5 { font-style: italic }
H1 { font-size: xx-large } H2 { font-size: x-large } H3 { font-size: large }
B, STRONG { font-weight: bolder } /* relative to the parent */ I, CITE, EM, VAR, ADDRESS, BLOCKQUOTE { font-style: italic } PRE, TT, CODE, KBD, SAMP { font-family: monospace }
PRE { white-space: pre }
ADDRESS { margin-left: 3em } BLOCKQUOTE { margin-left: 3em; margin-right: 3em }
UL, DIR { list-style: disc } OL { list-style: decimal } MENU { margin: 0 } /* tight formatting */ LI { margin-left: 3em }
DT { margin-bottom: 0 } DD { margin-top: 0; margin-left: 3em }
HR { border-top: solid } /* 'border-bottom' could also have been used */
A:link { color: blue } /* unvisited link */ A:visited { color: red } /* visited links */ A:active { color: lime } /* active links */
/* setting the anchor border around IMG элементы requires контекстный селекторs */
A:link IMG { border: 2px solid blue } A:visited IMG { border: 2px solid red } A:active IMG { border: 2px solid lime }
any version of CSS) grammar
(Это приложение является формальным)
The minimal CSS (i.e., any version of CSS) grammar that all implementations need to support is defined in section 7. The grammar below defines a much smaller language, a language that defines the syntax of CSS1.
It is in some sense, however, still a superset of CSS1: there are additional semantic constraints not expressed in this grammar. A conforming UA must also adhere to the forward-compatible parsing rules (section 7.1), the property and value notation (section 5) and the unit notation (section 6). In addition, HTML imposes restrictions, e.g., on the possible values of the CLASS attribute.
The grammar below is LL(1) (but note that most UA's should not use it directly, since it doesn't express the parsing conventions, only the CSS1 syntax). The format of the productions is optimized for human consumption and some shorthand notation beyond yacc [15] is used: * : 0 or more + : 1 or more ? : 0 or 1 | : separates alternatives [] : grouping
The productions are:
stylesheet : [CDO|CDC]* [ import [CDO|CDC]* ]* [ ruleset [CDO|CDC]* ]* ; import : IMPORT_SYM [STRING|URL] ';' /* E.g., @import url(fun.css); */ ; unary_operator : '-' | '+' ; operator : '/' | ',' | /* empty */ ; property : IDENT ; ruleset : selector [ ',' selector ]* '{' declaration [ ';' declaration ]* '}' ; selector : simple_selector+ [ pseudo_element | solitary_pseudo_element ]? | solitary_pseudo_element ; /* An "id" is an ID that is attached to an element type ** on its left, as in: P#p007 ** A "solitary_id" is an ID that is not so attached, ** as in: #p007 ** Analogously for classes and pseudo-classes. */ simple_selector : element_name id? class? pseudo_class? /* eg: H1.subject */ | solitary_id class? pseudo_class? /* eg: #xyz33 */ | solitary_class pseudo_class? /* eg: .author */ | solitary_pseudo_class /* eg: :link */ ; element_name : IDENT ; pseudo_class /* as in: A:link */ : LINK_PSCLASS_AFTER_IDENT | VISITED_PSCLASS_AFTER_IDENT | ACTIVE_PSCLASS_AFTER_IDENT ; solitary_pseudo_class /* as in: :link */ : LINK_PSCLASS | VISITED_PSCLASS | ACTIVE_PSCLASS ; class /* as in: P.note */ : CLASS_AFTER_IDENT ; solitary_class /* as in: .note */ : CLASS ; pseudo_element /* as in: P:first-line */ : FIRST_LETTER_AFTER_IDENT | FIRST_LINE_AFTER_IDENT ; solitary_pseudo_element /* as in: :first-line */ : FIRST_LETTER | FIRST_LINE ; /* There is a constraint on the id and solitary_id that the ** part after the "#" must be a valid HTML ID value; ** e.g., "#x77" is OK, but "#77" is not. */ id : HASH_AFTER_IDENT ; solitary_id : HASH ; declaration : property ':' expr prio? | /* empty */ /* Prevents syntax errors... */ ; prio : IMPORTANT_SYM /* !important */ ; expr : term [ operator term ]* ; term : unary_operator? [ NUMBER | STRING | PERCENTAGE | LENGTH | EMS | EXS | IDENT | hexcolor | URL | RGB ] ; /* There is a constraint on the color that it must ** have either 3 or 6 hex-digits (i.e., [0-9a-fA-F]) ** after the "#"; e.g., "#000" is OK, but "#abcd" is not. */ hexcolor : HASH | HASH_AFTER_IDENT ;
The following is the tokenizer, written in flex [16] notation. Note that this assumes an 8-bit implementation of flex. The tokenizer is case-insensitive (flex command line option -i).
unicode \\[0-9a-f]{1,4} latin1 [?-ÿ] escape {unicode}|\\[ -~?-ÿ] stringchar {escape}|{latin1}|[ !#$%&(-~] nmstrt [a-z]|{latin1}|{escape} nmchar [-a-z0-9]|{latin1}|{escape} ident {nmstrt}{nmchar}* name {nmchar}+ d [0-9] notnm [^-a-z0-9\\]|{latin1} w [ \t\n]* num {d}+|{d}*\.{d}+ string \"({stringchar}|\')*\"|\'({stringchar}|\")*\'
%x COMMENT %s AFTER_IDENT
%% "/*" {BEGIN(COMMENT);} <COMMENT>"*/" {BEGIN(0);} <COMMENT>\n {/* ignore */} <COMMENT>. {/* ignore */} @import {BEGIN(0); return IMPORT_SYM;} "!"{w}important {BEGIN(0); return IMPORTANT_SYM;} {ident} {BEGIN(AFTER_IDENT); return IDENT;} {string} {BEGIN(0); return STRING;}
{num} {BEGIN(0); return NUMBER;} {num}"%" {BEGIN(0); return PERCENTAGE;} {num}pt/{notnm} {BEGIN(0); return LENGTH;} {num}mm/{notnm} {BEGIN(0); return LENGTH;} {num}cm/{notnm} {BEGIN(0); return LENGTH;} {num}pc/{notnm} {BEGIN(0); return LENGTH;} {num}in/{notnm} {BEGIN(0); return LENGTH;} {num}px/{notnm} {BEGIN(0); return LENGTH;} {num}em/{notnm} {BEGIN(0); return EMS;} {num}ex/{notnm} {BEGIN(0); return EXS;}
<AFTER_IDENT>":"link {return LINK_PSCLASS_AFTER_IDENT;} <AFTER_IDENT>":"visited {return VISITED_PSCLASS_AFTER_IDENT;} <AFTER_IDENT>":"active {return ACTIVE_PSCLASS_AFTER_IDENT;} <AFTER_IDENT>":"first-line {return FIRST_LINE_AFTER_IDENT;} <AFTER_IDENT>":"first-letter {return FIRST_LETTER_AFTER_IDENT;} <AFTER_IDENT>"#"{name} {return HASH_AFTER_IDENT;} <AFTER_IDENT>"."{name} {return CLASS_AFTER_IDENT;}
":"link {BEGIN(AFTER_IDENT); return LINK_PSCLASS;} ":"visited {BEGIN(AFTER_IDENT); return VISITED_PSCLASS;} ":"active {BEGIN(AFTER_IDENT); return ACTIVE_PSCLASS;} ":"first-line {BEGIN(AFTER_IDENT); return FIRST_LINE;} ":"first-letter {BEGIN(AFTER_IDENT); return FIRST_LETTER;} "#"{name} {BEGIN(AFTER_IDENT); return HASH;} "."{name} {BEGIN(AFTER_IDENT); return CLASS;}
url\({w}{string}{w}\) | url\({w}([^ \n\'\")]|\\\ |\\\'|\\\"|\\\))+{w}\) {BEGIN(0); return URL;} rgb\({w}{num}%?{w}\,{w}{num}%?{w}\,{w}{num}%?{w}\) {BEGIN(0); return RGB;}
[-/+{};,#:] {BEGIN(0); return *yytext;} [ \t]+ {BEGIN(0); /* ignore whitespace */} \n {BEGIN(0); /* ignore whitespace */} \<\!\-\- {BEGIN(0); return CDO;} \-\-\> {BEGIN(0); return CDC;} . {fprintf(stderr, "%d: Illegal character (%d)\n", lineno, *yytext);}
HTML documents may contain any
(Это приложение является информативным, а не формальным)
HTML documents may contain any of the about 30,000 different characters defined by Unicode. Many documents only need a few hundred. Many fonts also only contain just a few hundred glyphs. In combination with , this appendix explains how the characters in the document and the glyphs in a font are matched.
See the in the PNG
(Это приложение является информативным, а не формальным)
See the in the PNG specification if you aren't already familiar with gamma issues.
In the computation, UAs displaying on a CRT may assume an ideal CRT and ignore any effects on apparent gamma caused by dithering. That means the minimal handling they need to do on current platforms is:
PC using MS-Windows
none
Unix using X11
none
Mac using QuickDraw
apply gamma 1.39 (ColorSync-savvy applications may simply pass the sRGB ICC profile to ColorSync to perform correct color correction)
SGI using X
apply the gamma value from /etc/config/system.glGammaVal (the default value being 1.70; applications running on Irix 6.2 or above may simply pass the sRGB ICC profile to the color management system)
NeXT using NeXTStep
apply gamma 2.22
"Applying gamma" means that each of the three R, G and B must be converted to R'=Rgamma, G'=Ggamma, G'=Bgamma, before handing to the OS.
This may rapidly be done by building a 256-element lookup table once per browser invocation thus:
for i := 0 to 255 do raw := i / 255; corr := pow (raw, gamma); table[i] := trunc (0.5 + corr * 255.0) end
which then avoids any need to do transcendental math per color attribute, far less per pixel.
The goal of the work
(Это приложение является информативным, а не формальным)
The goal of the work on CSS1 has been to create a simple style sheet mechanism for HTML documents. The current specification is a balance between the simplicity needed to realize style sheets on the web, and pressure from authors for richer visual control. CSS1 offers:
visual markup replacement: HTML extensions, e.g. "CENTER", "FONT" and "SPACER", are easily replaced with CSS1 style sheets.
nicer markup: instead of using "FONT" elements to achieve the popular small-caps style, one declaration in the style sheet is sufficient. Compare the visual markup:
<H1>H<FONT SIZE=-1>EADLINE</FONT></H1>
with the style sheet:
H1 { font-style: small-caps }
<H1>Headline</H1>
various integration levels: CSS1 style rules can be fetched from external style sheets, included in the 'STYLE' element, or put into 'STYLE' attributes. The latter option offers easy transition from HTML extensions.
new effects: some new visual effects have been added to offer users new toys. The typographical pseudo-elements and the extra values on the background property fall into this category.
scalability: CSS1 will be useful on equipment ranging from text terminals to high-resolution color workstations. Authors can write one style sheet and be reasonably sure that the intended style will come across in the best possible manner.
CSS1 does not offer:
per pixel control: CSS1 values simplicity over level of control, and although the combination of background images and styled HTML is powerful, control to the pixel level is not possible.
author control: the author cannot enforce the use of a certain sheet, only suggest
a layout language: CSS1 does not offer multiple columns with text-flow, overlapping frames etc.
a rich query language on the parse tree: CSS1 can only look for ancestor elements in the parse tree, while other style sheet languages (e.g. DSSSL ) offers a full query language.
We expect to see extensions of CSS in several directions:
paper: better support for printing HTML documents
support for non-visual media: work is in the process to add a list of properties and corresponding values to support speech and braille output
color names: the currently supported list may be extended
fonts: more precise font specification systems are expected to complement existing CSS1 font properties.
values, properties: we expect vendors to propose extensions to the CSS1 set of values and properties. Extending in this direction is trivial for the specification, but interoperability between different UAs is a concern
layout language: support for two-dimensional layout in the tradition of desktop publishing packages.
other DTDs: CSS1 has some HTML-specific parts (e.g. the special status of the 'CLASS' and 'ID' attributes) but should easily be extended to apply to other DTDs as well.
We do not expect CSS to evolve into:
a programming language
© 1996 (, , ), All Rights Reserved. W3C
, and rules apply.
|
Процентное выражение
Формат процентного выражения состоит из необязательного знака ("+" или "-", по умолчанию "+"), обязательного числа (с десятичной частью, отделяемой десятичной точкой, или без), и обязательного знака "%", указываемых в последовательности перечисления в настоящем абзаце.
Процентное значение всегда является относительным к другому, например, к значению длины. При назначении процентного выражения для каждого случая предполагается наличие базы отсчета - чаще всего это размер шрифта данного элемента:
P { line-height: 120% } /* 120% размера шрифта элемента */
Для всех наследованных свойств CSS1 считается, что если значение было указано в виде процентного выражение, то дочерние элементы наследуют результирующее значение, а не величину процентовки.
Псевдо-элемент 'first-letter'
Псевдо-элемент 'first-letter' используется для создания эффекта буквицы, являющимся распространенным типографским эффектом. Он соответствует строчному элементу, если его свойство 'float' равно 'none', иначе он соответствует плавающему элементу. К псевдо-элементу 'first-letter' применимы следующие свойства: свойства шрифтов (5.2), свойства цвета и фона (5.3), 'text-decoration' (5.4.3), 'vertical-align (только если 'float' равно 'none', 5.4.4), 'text-transform' (5.4.5), 'line-height' (5.4.8), свойства границ (5.5.1-5.5.5), свойства отступов (5.5.6-5.5.10), свойства рамки (5.5.11-5.5.22), 'float' (5.5.25), 'clear' (5.5.26).
Следующий пример позволяет создать эффект буквицы, когда высота первой буквы равна высоте двух строк:
<HTML> <HEAD> <TITLE>Title</TITLE> <STYLE TYPE="text/css"> P { font-size: 12pt; line-height: 12pt } P:first-letter { font-size: 200%; 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>
Если некий текстовый UA поддерживает псевдо-элемент 'first-letter' (что скорее всего не так), предыдущий пример мог бы быть отформатирован следующим образом:
___ | HE FIRST few | words of an article in the Economist.
Фиктивная последовательность тэгов в этом случае выглядит так:
<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' вставляется сразу после тэга элемента, к которому он применяется.
UA сам определяет, какие символы включаются в элемент 'first-letter'. Обычно кавычки, предшествующие первой букве, должны включаться:
/\ bird in / \ the hand /----\ is worth / \ two in the bush," says an old proverb.
Когда параграф начинается с другого знака пунктуации (например скобка) или других символов, которые не являются буквами (например цифры или математические знаки), псевдо-элементы 'first-letter' обычно игнорируются.
Некоторые языки могут иметь специфические правила, как обрабатывать определенные комбинации букв. В голландском, например, если слово начинается с "ij", то обе буквы считаются принадлежащими псевдо-элементу 'first-letter'.
Псевдо-элемент 'first-letter' может применяться только к блочным элементам.
Псевдо-элемент 'first-line'
Псевдо-элемент 'first-line' используется для применения особых стилей к первой строке элемента в соответствии с форматированием на холсте:
<STYLE TYPE="text/css"> P:first-line { font-style: small-caps } </STYLE>
<P>The first line of an article in Newsweek.
В текстовом UA это могло бы быть отформатировано так:
THE FIRST LINE OF AN article in Newsweek.
Фиктивная последовательность тэгов в этом случае такова:
<P> <P:first-line> The first line of an </P:first-line> article in Newsweek. </P>
Концевой тэг 'first-line' вставляется в конец первой строки в соответствии с тем, как документ форматируется на холсте.
Псевдо-элемент 'first-line' может применяться только к блочным элементам.
Псевдо-элемент 'first-line' соответствует строчным элементам за некоторыми исключениями. Только следующие свойства могут быть применены к элементу 'first-line': свойства шрифтов (5.2), свойства цвета и фона (5.3), 'word-spacing' (5.4.1), 'letter-spacing' (5.4.2), 'text-decoration' (5.4.3), 'vertical-align (5.4.4), 'text-transform' (5.4.5), 'line-height' (5.4.8) и 'clear' (5.5.26).
Псевдо-элементы в селекторах
В контекстных селекторах псевдо-элементы допускаются только в конце селектора:
BODY P:first-letter { color: purple }
Псевдо-элементы могут в селекторах комбинироваться с классами:
P.initial:first-letter { color: red }
<P CLASS=initial>First paragraph</A>
Этот пример позволит сделать темно красными первые буквы всех параграфов, имеющих класс initial. При комбинировании с классами или псевдо-классами псевдо-элементы должны указываться в конце селектора. В одном селекторе может быть указан только один псевдо-элемент.
В CSS1 стиль обычно применяется
В CSS1 стиль обычно применяется к элементу в соответствии с его позицией в структуре документа. Эта простая модель достаточна для широкого спектра стилей, но она не покрывает несколько типичных эффектов. Концепция псевдо-классов и псевдо-элементов расширяет механизм адресации в CSS1, чтобы позволить информации, внешней по отношению к документу, оказывать влияние на процесс форматирования.
Псевдо-классы и псевдо-элементы могут использоваться в селекторах CSS, но они не существуют в исходном тексте HTML. Напротив, они "вставляются" UA в соответствии с некоторыми условиями. Их поведение можно описать с помощью фиктивной последовательности тэгов.
Псевдо-элементы используются для адресации подчастей элементов, в то время как псевдо-классы позволяют различать различные типы элементов.
Псевдо-классы ссылок
UA часто отображают недавно посещенные ссылки не так как не посещенные или посещенные давно.. В CSS1 эти ситуации обрабатываются с помощью псевдо-классов элемента 'A':
A:link { color: red } /* unvisited link */ A:visited { color: blue } /* visited links */ A:active { color: lime } /* active links */
Все элементы 'A' с атрибутом 'HREF' будут помещены в одну и только одну из этих групп (т.е. псевдо-классы не влияют на ссылки-якоря). UA могут по собственному усмотрению перемещать элемент из 'visited' в 'link' после некоторого периода времени. Ссылка типа 'active' - это ссылка, которая в данный момент выбрана (например нажатием на кнопку мыши) читателем.
Форматирование псевдо-класса ссылки происходит также, как если бы класс был указан вручную. UA не обязан переформатировать уже отображаемый документ при переходе ссылки из одного псевдо-класса в другой. Например таблица стилей может законно указывать, что 'font-size' ссылки типа 'active' должен быть больше, чем у ссылки типа 'visited', но UA не обязан динамически переформатировать документ, когда читатель выбирает ссылку типа 'visited'.
Селекторы псевдо-класса не соответствуют обычным классам и наоборот. Правило в следующем примере не будет оказывать никакого влияния:
A:link { color: red }
<A CLASS=link NAME=target5> ... </A>
В CSS1 псевдо-классы ссылок не оказывают влияния ни на один элемент, кроме 'A'. Поэтому тип элемента в селекторе можно опускать:
A:link { color: red } :link { color: red }
Эти два селектора будут идентичны в CSS1.
Имена псевдо-классов не зависят от регистра.
Псевдо-классы могут использоваться в контекстных селекторах:
A:link IMG { border: solid blue }
Псевдо-классы также могут комбинироваться с простыми классами:
A.external:visited { color: blue }
<A CLASS=external HREF="http://out.side/">external link</A>
Если ссылка в этом примере была посещена, то она будет синей. Обратите внимание, что имя обычного класса предшествует имени псевдо-класса в селекторе.
Разъяснение значений свойств.
В настоящем тексте допустимые значения для каждого свойства перечисляются с синтаксисом, подобным приведенному ниже:
Значение: N | NW | NE Значение: [ <length> | thick | thin ]{1,4} Значение: [<family-name> , ]* <family-name> Значение: <url>? <color> [ / <color> ]? Значение: <url> <color>
Слова между "<" and ">" дают нам тип значения. Наиболее распространенными типами являются <length> (длина), <percentage> (доля, процент), <url>, <number> (число) и <color> (цвет); они описаны в разделе 6. Более специфические типы (такие, как <font-family> и <border-style>) описаны в разделах соответственно свойствам.*
Другой вид слов - ключевые, которые должны указываться литерально, без знаков препинания. Знаки "слеш" (/) и запятая (,) также должны указываться литерально.
Если что-то размещается рядом, то это значит, что действия должны производиться в указанном порядке. Вертикальная черта (A|B) означает исключающее ИЛИ (ИЛИ-НЕ); должно происходить одно из двух. Двойная черта (AB) означает объединяющее ИЛИ (ИЛИ-И) - или и то и другое, или одно из двух. Квадратные скобки([]) - группировка. Расположение рядом важнее, чем ИЛИ-И, а последнее важнее, чем ИЛИ-НЕ. Так, "a b | c d e " равноценно "[ a b ] | [ c [ d e ]]".
Каждый знак, ключевое слово или группа в скобках могут следовать за одним из модификаторов:
Звездочка (*) означает, что предшествующие знак, слово или группа повторяются ноль или более раз. Плюс (+) означает, что предшествующие знак, слово или группа повторяются один или более раз. Знак вопроса (?) означает, что предшествующие знак, слово или группа являются необязательными (optional). Два числа в фигурных скобках ({A,B}) означают, что предшествующие знак, слово или группа повторяются не менее чем А и не более чем В раз.
UA, поддерживающий СSS, обрабатывает документы в соответствии со стандартом CSS1 в следующей последовательности:
делается попытка выбрать все, что указано в таблице стилей и разобрать в соответствии со спецификацией; рассортировать определения в соответствии с каскадированием установок; реализовать функции CSS1 в пределах ограничений, накладываемых устройствами вывода (см. пояснение ниже). UA, производит вывод таблицы стилей CSS, если она соответствует стандарту CSS; выводится соответствующая CSS таблица стилей.
UA, использующий CSS1 для показа и вывода документов, отрабатывает таблицу стилей CSS1 в соответствии со спецификацией, если в наличии имеются обе установки согласования.
UA не отрабатывает все функции CSS1: он может лишь согласовать результаты отработки с CSS1, реализуя функциональное ядро (сore functionality) последнего. В функциональное ядро входит вся спецификация CSS за исключением частей, изъятых явным образом. В тексте, помеченном как "ядро CSS1" следует разъяснение функций, находящихся за пределами ядра. Установки свойств, исключенные из функционального ядра, называются "расширенные свойства CSS1".
Данный раздел определяет только согласование CSS1. В будущем появятся другие уровни CSS, которые могут потребовать UA для реализации различных установок свойств в порядке согласования.
Примеры ограничений, накладываемых средством вывода, следующие: ограничение ресурсов (шрифты, цвет) и ограничение разрешения (вследствие чего границы могут быть неточными). В этих случаях UA должен аппроксимировать значения таблицы стилей. Кроме того, различные особенности пользовательских интерфейсов могут накладывать свои ограничения: например, браузер VR может масштабировать документ , основываясь на текущем "расстоянии" от пользователя.
UA может предусматривать дополнительные пользовательские установки для отображения информации. Например, UA может обеспечивать дополнительные настройки для пользователя с ухудшенным зрением или давать возможность отключать мерцающий текст.
Обратите внимание, что CSS1 не определяет всех аспектов форматирования. Например, UA вправе произвольно выбирать алгоритм определения межсимвольного расстояния.
Данная спецификация рекомендует (но не предписывает), чтобы UA:
допускал определение пользовательской таблицы стилей читателем; допускал возможность включения и выключения индивидуальной таблицы стилей.
Оба правила согласования описывают лишь функциональный, но не пользовательский интерфейс.
Строчные элементы
Элементы, не форматируемые как блочные, относятся к строчным. Строчный элемент может делить пространство строки с другими элементами. Рассмотрим следующий пример:
<P>Несколько <EM>подчеркнутых</EM> слов <STRONG>имеется</STRONG>.</P>
Элемент 'P' - нормальный блочный, в то время как 'EM' и 'STRONG' - строчные. Если ширина элемента 'P' достаточна, чтобы расположить весь элемент на одной строке, то тогда в строке будут два строчных элемента:
Несколько <u>подчеркнутых</u> слов<b>имеется</b>.
Если же в строке места не хватает, строчные элементы будут разбиты на несколько полей:
<P>Несколько <EM>подчеркнутых слов</EM> имеют место.</P>
Форматирование этого примера будет выглядеть как:
Несколько <u>подчеркнутых</u> <u>слов</u> имеют место.
Если строчный элемент имеет границы, бордюры, заполнение или приложенное текстовое оформление, то их эффект не будет проявляться в месте расчленения элемента:
------------- Несколько |<u>подчеркнутых</u> ------------- ----- <u>слов</u> | имеют место. -----
( Вышеприведенный рисунок несколько искажается из-за использования псевдографики ASCII. См. описание вычисления высоты линий в разделе 4.4.)
Таблицы стилей влияют на внешний
Таблицы стилей влияют на внешний вид документа путем присвоения тех или иных значений свойствам стилей. В данном разделе перечисляются определения свойств стилей и приводится соответствующий перечень значений, допускаемых CSS1.
Свойства "цвет" (color) и "фон" (background).
Эти свойства описывают цвет (зачастую именуемый как цвет переднего плана) и фон для элемента (т.е. поверхность, на которой располагается содержание). Они позволяют установить цвет фона и(или) его рисунок. Также определяются позиция изображения рисунка фона, повторяется ли он и каким образом, и где он размещается либо перемещается относительно холста.
Свойство "цвет", как правило, наследуется. Свойство "фон" не наследуется, но фон родительского элемента будет виден на просвет, т.к. по умолчанию значение цвета фона для дочерних элементов принимается как 'transparent' (прозрачный).
Свойства - классификации
Эти свойства классифицируют элементы по категориям, большим, чем при установке специфических визуальных параметров.
Перечень стилей свойств описывает, каким образом сформатированы элементы перечня (т.е. элементы, у которых свойство "показ" ('display') имеет значение 'list-item'). Свойства перечня стилей могут быть установлены для любого элемента, и будут наследоваться в порядке, определенном древом этого перечня. Однако этот эффект будет распространяться только на элементы, у которых свойство "показ" ('display') имеет значение 'list-item'. Для языка
Свойства полей.
Свойство "поле" устанавливают размер, периферию и расположение полей, представляющих элементы. См. модель форматирования (разд.4), в котором приведен пример использования свойства "поле".
Свойства границы устанавливают границу элемента. Обобщающее свойство 'margin' устанавливает границу для всех четырех сторон , в то время как остальные устанавливают только соответствующую сторону.
Свойства отступа определяют, сколько места оставляется между рамкой и содержанием (напр. текст или изображение). Обобщающее свойство 'padding' устанавливает отступ для всех четырех сторон, в то время как остальные устанавливают лишь соответствующую сторону.
Свойства рамки устанавливают рамки элемента. Каждый элемент имеет четыре стороны рамки, для каждой из которых устанавливаются ширина, цвет и стиль.
Свойства "ширина" ('width') и "высота" ('height') устанавливают размеры поля , а "плавающий" ('float') и "очистка" ('clear') позволяют изменять позицию элементов.
Свойства шрифта
Определение свойств шрифта относится к одному из наиболее распространенных способов применения таблицы стилей. К сожалению, пока нет четкого и универсального стандарта для типометрии шрифтов, и определения, применимые к шрифтам одного семейства, могут оказаться неподходящими для других. Так, для обозначения курсива обычно используется свойство 'italic', но могут встречаться и такие обозначения, как Oblique, Slanted, Incline, Cursive или Kursiv. Таким образом, преобразование характерных черт шрифта в типометрические свойства является непростой задачей.
CSS1 определяет следующие свойства шрифтов: "семейство" ('font-family'), "начертание" ('font-style'), "вариант" ('font-variant'), а также "вес" ('font-weight'), "размер" ('font-size'), "шрифт" 'font'.
атрибут (attribute)атрибут HTML автор (author)автор HTML документа блочный элемент (block-level element)элемент, включающий перевод строки в начале и конце (например 'H1' в HTML) холст (canvas) часть поверхности UA на которой строится (отображается) документ дочерний элемент (child element)subelement в терминологии SGML [5] контекстный селектор (contextual selector)селектор, который сопоставляется элементам на основе их позиции в структуре документа. Контекстный селектор состоит из нескольких простых селекторов. Например контекстный селектор 'H1.initial B' состоит из двух простых селекторов, 'H1.initial' и 'B'. CSSкаскадные таблицы стилей (Cascading Style Sheets) CSS1каскадные таблицы стилей, уровень 1. Этот документ определяет CSS1, которые являются простым механизмом таблиц стилей в Веб. расширенные свойства CSS1 (CSS1 advanced features)свойства, описанные в данной спецификации, но обозначенные как не включенные в основные свойства CSS1 основные свойства CSS1 (CSS1 core features)часть CSS1, которая обязательна для реализации во всех UA, поддерживающих CSS1 интерпретатор CSS1 (Интерпретатор CSS1)UA, который читает CSS1 определение (declaration)свойство (например 'font-size') и соответствующее значение (например '12pt') дизайнер (designer)дизайнер таблицы стилей документ (document)HTML документ элемент (element)HTML элемент тип элемента (элемент type)стандартный идентефикатор в терминологии SGML [5] фиктивная последовательность тэгов (fictional tag sequence)средство описания поведения псевдо-классов и псевдо-элементов размер шрифта (font size)размер, для которого разработан шрифт HTMLязык гипертекстовой разметки (Hypertext Markup Language) [2], одна из реализаций SGML. расширение HTML (HTML extension)разметка, введенная производителем UA, обычно для поддержки определенных визуальных эффектов. Элементы "FONT", "CENTER" и "BLINK" являются примерами расширений HTML, также как и атрибут "BGCOLOR". Одной из целей CSS является предоставление альтернативы расширениям HTML. строчный элемент (inline element)элемент, не имеющий переводов строк в начале и конце (например 'STRONG' в HTML) внутренние размеры (intrinsic dimensions)ширина и высота, определяемые самим элементом, а не его окружением. В данной спецификации принято, что только замещаемые элементы имеют внутренние размеры. родительский элемент (parent element)элемент контейнер в терминологии SGML [5] псевдо-элемент (pseudo-element)псевдо-элементы используются в селекторах CSS для адресации типографских элементов (например первая строка элемента), а не структурных элементов. псевдо-класс (pseudo-class)псевдо-классы используются в селекторах CSS для обеспечения возможности влияния на элементы внешней по отношению к HTML коду информации (например тот факт, что ссылка была посещена). свойство (property)стилистический параметр на который можно повлиять с помощью CSS. Данная спецификация определяет список свойств и их возможных значений. читатель (reader)человек, для которого строится (отображается) документ замещаемый элемент (replaced elementэлемент, для которого известны только внутренние размеры. В HTML элементы 'IMG', 'INPUT', 'TEXTAREA', 'SELECT' и 'OBJECT' являются примерами замещаемых элементов. Например содержимое элемента 'IMG' замещается изображением, адресуемым атрибутом SRC. CSS1 не определяет, как находятся внутренние размеры. правило (rule)определение (например 'font-family: helvetica') и ее селектор (например 'H1') селектор (selector)строка, определяющая, к каким элементам применяется данное правило. Селектор может быть простым (например 'H1') или контекстным (например 'H1 B'), который состоит из нескольких простых селекторов. SGMLстандартный обобщенный язык разметки (Standard Generalized Markup Language) [5], для которого HTML является одной из реализаций простой селектор (simple selector)селектор, который сопоставляется элементам на основе их типа и/или атрибутов, а не их положения в структуре документа. Например 'P.initial' является простым селектором. таблица стилей (style sheet)набор правил UAUser Agent, часто веб-браузер или веб-клиент пользователь (user)тоже, что и читатель вес (weight)приоритет правила
В тексте спецификации одинарные кавычки ('...') указывают на выдержки из HTML или CSS.
|
Типографские псевдо-элементы
Некоторые распространенные типографские эффекты связаны не со структурными элементами, а с элементами форматирования на холсте. В CSS1 определены два таких типографских элемента, которые можно адресовать с помощью псевдо-элементов: первая строка элемента и первая буква.
Ядро CSS1: UA могут игнорировать все правила с ':first-line' или ':first-letter' в селекторе, или поддерживать только подмножество свойств псевдо-элементов. (см. раздел 7)
URL
Универсальный локатор ресурса (URL) определяется в функциональной записи:
BODY { background: url(http://www.bg.com/pinkish.gif) }
Формат значения URL представляет собой 'url(', далее необязательный пробел, далее необязательная одинарная (') или двойная кавычка ("), далее сам URL (как определено в [11]), далее необязательная одинарная (') или двойная кавычка ("), далее необязательный пробел, далее ')'. Знаки кавычек, если они не являются частью URL, должны быть парными.
Круглые скобки, запятые, пробелы, одинарные и двойные кавычки, присутствующие в URL, должны отделяться обратным слешем: '\(', '\)', '\,'.
Неполные URL отрабатываются относительно исходника таблицы стилей, а не относительно самого документа:
BODY { background: url(yellow) }
Установка единиц длины
Формат значения длины состоит из необязательного знака ("+" или "-", по умолчанию "+"), обязательного числа (с десятичной частью, отделяемой десятичной точкой, или без), и обязательного идентификатора размерности в виде двухбуквенной аббревиатуры, указываемых в последовательности перечисления в настоящем абзаце. После числа "0" идентификатор размерности не обязателен.
Некоторые свойства используют отрицательные единицы длины, однако это может усложнить способ форматирования и могут возникнуть ограничения, диктуемые особенностями отработки. Если отрицательная длина не поддерживается, то она должна быть замещена ближайшим поддерживаемым значением.
Существуют два типа единиц длины: относительные и абсолютные. Относительные единицы определяют длину относительно другой длины свойства. Если таблица стилей использует относительные единицы, то это более удобно для масштабирования страницы на разных периферийных устройствах (напр. при выводе с экрана на печать). Такого эффекта позволяют достичь и процентные выражения (как показано ниже), а также зарезервированные слова (напр. 'x-large').
Поддерживаются следующие относительные единицы:
H1 { margin: 0.5em } /* ems, высота шрифта элемента */ H1 { margin: 1ex } /* x-height, ~ по высоте буквы 'x' */ P { font-size: 12px } /* pixels, в пикселах относительно холста */
Относительные единицы 'em' и 'ex' определяются относительно размера шрифта самого элемента. Единственное исключение из этого правила делается для свойства "размер шрифта" ('font-size'), для которого 'em' и 'ex' определяются по размеру шрифта родительского элемента.
Пиксели, указанные в последнем примере, определяются относительно разрешения холста, чаще всего - экранного разрешения. Если разрешающая способность устройства вывода отличается от характерной для экрана, UA должен масштабировать значение в пикселях. Замещающий пиксель соответствует углу зрения, под которым виден один пиксель на устройстве с разрешающей способностью 90 точек на дюйм на расстоянии, оптимальном для зрения. При величине последнего 28 дюймов угол зрения приблизительно равен 0,0227 градуса.
Дочерние элементы наследуют вычисленное значение, а не относительное:
BODY { font-size: 12pt; text-indent: 3em; /* i.e. 36pt */ } H1 { font-size: 15pt }
В приведенном примере значение абзацного отступа ('text-indent') элемента H1 будет равно 36 пунктов, а не 45.
Абсолютные единицы длины используются лишь в тех случаях, когда заведомо известны физические характеристики устройства вывода. Поддерживаются следующие абсолютные единицы:
H1 { margin: 0.5in } /* inches, 1in = 2.54cm */ H2 { line-height: 3cm } /* centimeters */ H3 { word-spacing: 4mm } /* millimeters */ H4 { font-size: 12pt } /* points, 1pt = 1/72 in */ H5 { font-size: 1pc } /* picas, 1pc = 12pt */
В случаях, когда заданная длина не может быть отработана, UA должны аппроксимировать ее. Дальнейший пересчет и наследование для всех свойств CSS1 должен уже основываться на результатах аппроксимации.
Включение в HTML
Для того, чтобы таблица стилей влияла на вид документа, UA должен знать о ее существовании. Спецификация HTML [2] определяет способы включения таблиц стилей в HTML. Поэтому данный раздел является информативным, а не нормативным:
<HTML> <HEAD> <TITLE>title</TITLE> <LINK REL=STYLESHEET TYPE="text/css" HREF="http://style.com/cool" TITLE="Cool"> <STYLE TYPE="text/css"> @import url(http://style.com/basic); H1 { color: blue } </STYLE> </HEAD> <BODY> <H1>Headline is blue</H1> <P STYLE="color: green">While the paragraph is green. </BODY> </HTML>
Данный пример демонстрирует четыре способа объединения стиля с HTML: используя элемент 'LINK' для связи с внешней таблицей стилей, используя элемент 'STYLE' внутри элемента 'HEAD', импортируя таблицу стилей с помощью нотации CSS '@import' и используя атрибут 'STYLE' в элементе внутри секции 'BODY'. Последний способ смешивает стиль с содержимым и поэтому теряет соответствующие достоинства традиционных таблиц стилей.
Элемент 'LINK' ссылается на альтернативную таблицу стилей, которую может выбрать читатель, в то время как импортируемые таблицы стилей автоматически объединяются с остальной частью таблицы стилей.
Традиционно UA игнорировали неизвестные теги. Как результат старые UA будут игнорировать элемент 'STYLE', но его содержимое будет считаться, как часть тела документа и будет отображаться в документе. В течение переходного периода содержимое элемента 'STYLE' можно "прятать", используя комментарии SGML:
<STYLE TYPE="text/css"><!-- H1 { color: green } --></STYLE>
В связи с тем, что элемент 'STYLE' определен, как "CDATA" в DTD [2], интерпретаторы SGML не будут считать таблицу стилей комментарием, который надо удалить.
Высота строки
Все элементы имеют свойство "высота строки" ('line-height'), что, в принципе, определяет общую высоту строки или текста. Высота строки увеличивается на промежуток, вставляемый выше и ниже текста в строке. К примеру, если текст 12 пунктов,
высота и "высота строки" устанавливаются равными '14pt', т.к. вставляется промежуток в 2 пункта, 1 сверху и 1 снизу строки. Пустые элементы влияют на эти расчеты точно так же, как и имеющие содержание.
Разница между размером шрифта (font size) и "высотой строки" называется интервалом (leading). Половина интервала называется полуинтервалом (half-leading). После форматирования каждая строка образует прямоугольное строчное поле.
Если строка текста содержит секции с разными значениями свойства "высота строки" (т.к. может быть несколько строчных элементов в одной строке), то каждая из таких секций имеет собственный полуинтервал сверху и снизу. Высота строчного поля отсчитывается от высоты самой высокой секции до низа самой низкой. Обратите внимание, что верх и низ не обязательно соответствуют наиболее высокому элементу, поскольку элементы могут быть позиционированы с помощью свойства "вертикальное выравнивание" ('vertical-align'). При формировании параграфа каждое строчное поле располагается ниже предшествующей строки.
Обратите внимание на то, что какой-либо отступ, рамка или граница сверху или снизу не замещаемого строчного элемента не влияют на высоту строки. Иными словами, если значение свойства "высота строки" слишком мало для выбранных отступа или рамки, они будут перекрываться с текстом других строк.
Замещаемые элементы, (напр. изображения) в строке могут увеличить строковое поле, если вершина замещаемого элемента (включая полностью его отступ, рамку и границу) находится выше самой высокой секции текста, или его низ находится ниже самой низкой секции.
В нормальных условиях, если в параграфе указано только одно значение свойства "высота строки", и при отсутствии высоких изображений, по предшествующему определению будет проверено, имеют ли базы последующих строк обособленное значение параметра "высота строки". Это важно в случае выравнивания текстовых колонок с различным шрифтом, например, в таблице.
Следует иметь в виду, что это не позволяет исключить возможность перекрытия текста двух смежных строк. Значение свойства "высота строки" может оказаться меньше высоты текста, и интервал в этом случае будет отрицательным. Это обстоятельство может оказаться полезным, если заранее известно, что в тексте не будет подстрочных символов (напр. если там будут только символы верхнего регистра), и тогда строки можно сблизить.
Замещаемые элементы
Замещаемые элементы - это элементы, замещаемые содержанием, указываемым в элементе. Например элемент 'IMG' замещается изображением, указанным в атрибуте 'SRC'. Важным свойством замещаемых элементов является наличие своих внутренних размеров. Если значения свойства "ширина"('width') равна 'auto', то в качестве ширины элемента используется внутренняя ширина. Если значение иное, чем 'auto' из перечисленных в таблице стилей, то это значение и используется, а замещаемый элемент соответственно меняет размеры (метод изменения размеров будет определяться видом информационного объекта). Таким же образом используется свойство "высота" ('height').
Замещаемые элементы могут быть как блочными, так и строчными.
