CSS

скачано с http://bizkit.land.ru
CSS – учебник, спецификация.
Терминология
атрибут (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)
fuckit@km.ru
скачано с http://bizkit.land.ru
элемент контейнер в терминологии 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)
набор правил
UA
User Agent, часто веб-браузер или веб-клиент
пользователь (user)
тоже, что и читатель
вес (weight)
приоритет правила
В тексте спецификации одинарные кавычки ('...') указывают на выдержки из HTML или CSS.
1. Базовые понятия
Разработка простых таблиц стилей является довольно простым занятием. Разработчик должен иметь
базовые знания по HTML и по полиграфической терминологии. Например для определения цвета
элементов 'H1' как синий, достаточно сказать:
H1 { color: blue }
Приведенный пример является простым правилом CSS. Правило состоит из двух основных частей:
селектора ('H1') и определения ('color: blue'). Определение в свою очередь тоже состоит из двух
частей: свойства ('color') и значения ('blue'). В то время, как приведенный пример пытается повлиять
только на одно из свойств, необходимых для построения HTML документа, он уже является таблицей
стилей. Скомбинированный с другими таблицами стилей (одним из фундаментальных свойств CSS
является комбинирование таблиц стилей) он будет определять конечный вид всего документа.
Селектор является связью между HTML документом и таблицей стилей, полный набор типов элементов
содержит все возможные селекторы. Типы элементов определены в спецификации HTML [2].
Cвойство 'color' является одним из порядка 50 свойств, которые определяют вид HTML документа.
Список свойств и их возможных значений определяется в данной спецификации.
Авторам HTML необходимо определять свою таблицу стилей только в том случае, если они хотят
предложить специфический стиль для своих документов. Каждый UA должен иметь таблицу стилей по
умолчанию, которая представляет документы в приемлемом, но может быть достаточно простом виде.
fuckit@km.ru
скачано с http://bizkit.land.ru
П приложении А приведена примерная таблица стилей для представления HTML документов так, как
это предлагается в спецификации HTML 2.0 [3].
Формальная грамматика языка CSS1 определена в приложении B.
1.1 Включение в 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 не будут
считать таблицу стилей комментарием, который надо удалить.
1.2 Группирование
Для уменьшения размера таблицы стилей можно группировать селекторы в разделенные запятыми
списки:
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;
}
В дополнение к этому некоторые свойства имеют собственный синтаксис группировки:
fuckit@km.ru
скачано с http://bizkit.land.ru
H1 { font: bold 12pt/14pt helvetica }
что эквивалентно предыдущему примеру.
1.3 Наследование
В первом примере цвет элементов '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).
1.4 Класс в качестве селектора
Для увеличения гибкости контроля над элементами, в 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
*/
fuckit@km.ru
скачано с http://bizkit.land.ru
Для каждого селектора можно определить только один класс. 'P.pastoral.marine' таким образом
является неправильным селектором в CSS1. (Контекстные селекторы, описанные ниже, могут
определять один класс для одного простого селектора).
CSS предоставляет настолько большие возможности для использования атрибута CLASS, что во многих
случаях не важно у какого элемента HTML устанавливается класс - можно заставить любой элемент
эмулировать любой другой элемент. Но не рекомендуется полагаться на такую возможность, т.к. это
лишает документ структуры, которая имеет универсальное значение (элементы HTML). Структура
основанная на классах имеет узкое применение только в тех случаях, когда значения классов
оговорены с обеих сторон.
1.5 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. Такое использование таблиц стилей не приветствуется.
1.6 Контекстные селекторы
Наследование значительно уменьшает количество напечатанного текста 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
.reddish H1
#x78y CODE
DIV.sidenote H1
{
{
{
{
font: small sans-serif }
color: red }
background: blue }
font-size: large }
Первый селектор соответствует элементам 'P', которые среди предков имеют 'DIV'. Второй селектор
соответствует всем элементам 'H1' которые имеют предка класса 'reddish'. Третий селектор
fuckit@km.ru
скачано с http://bizkit.land.ru
соответствует всем элементам 'CODE', которые являются наследниками элемента с 'ID=x78y'.
Четвертый селектор соответствует всем элементам 'H1', которые имеют предка 'DIV' с классом
'sidenote'.
Можно группировать несколько контекстных селекторов:
H1 B, H2 B, H1 EM, H2 EM { color: red }
что эквивалентно:
H1
H2
H1
H2
B { color: red }
B { color: red }
EM { color: red }
EM { color: red }
1.7 Комментарии
Текстовые комментарии в таблицах стилей оформляются так же как и в языке Си [7]:
EM { color: red }
/* red, really red!! */
Комментарии не могут вкладываться друг в друга. Для обработчика CSS1 комментарий эквивалентен
пробелу.
2. Псевдо-классы и псевдо-элементы
В CSS1 стиль обычно применяется к элементу в соответствии с его позицией в структуре документа.
Эта простая модель достаточна для широкого спектра стилей, но она не покрывает несколько
типичных эффектов. Концепция псевдо-классов и псевдо-элементов расширяет механизм адресации в
CSS1, чтобы позволить информации, внешней по отношению к документу, оказывать влияние на
процесс форматирования.
Псевдо-классы и псевдо-элементы могут использоваться в селекторах CSS, но они не существуют в
исходном тексте HTML. Напротив, они "вставляются" UA в соответствии с некоторыми условиями. Их
поведение можно описать с помощью фиктивной последовательности тэгов.
Псевдо-элементы используются для адресации подчастей элементов, в то время как псевдо-классы
позволяют различать различные типы элементов.
2.1 Псевдо-классы ссылок
UA часто отображают недавно посещенные ссылки не так как не посещенные или посещенные давно..
В CSS1 эти ситуации обрабатываются с помощью псевдо-классов элемента 'A':
A:link { color: red }
A:visited { color: blue }
A:active { color: lime }
/* unvisited link */
/* visited links */
/* 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>
fuckit@km.ru
скачано с http://bizkit.land.ru
В 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>
Если ссылка в этом примере была посещена, то она будет синей. Обратите внимание, что имя обычного
класса предшествует имени псевдо-класса в селекторе.
2.2 Типографские псевдо-элементы
Некоторые распространенные типографские эффекты связаны не со структурными элементами, а с
элементами форматирования на холсте. В CSS1 определены два таких типографских элемента,
которые можно адресовать с помощью псевдо-элементов: первая строка элемента и первая буква.
Ядро CSS1: UA могут игнорировать все правила с ':first-line' или ':first-letter' в селекторе, или
поддерживать только подмножество свойств псевдо-элементов. (см. раздел 7)
2.3 Псевдо-элемент '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).
2.4 Псевдо-элемент 'first-letter'
Псевдо-элемент 'first-letter' используется для создания эффекта буквицы, являющимся
распространенным типографским эффектом. Он соответствует строчному элементу, если его свойство
'float' равно 'none', иначе он соответствует плавающему элементу. К псевдо-элементу 'first-letter'
применимы следующие свойства: свойства шрифтов (5.2), свойства цвета и фона (5.3), 'text-decoration'
fuckit@km.ru
скачано с http://bizkit.land.ru
(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.115.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.
Когда параграф начинается с другого знака пунктуации (например скобка) или других символов,
которые не являются буквами (например цифры или математические знаки), псевдо-элементы 'firstletter' обычно игнорируются.
Некоторые языки могут иметь специфические правила, как обрабатывать определенные комбинации
букв. В голландском, например, если слово начинается с "ij", то обе буквы считаются принадлежащими
псевдо-элементу 'first-letter'.
Псевдо-элемент 'first-letter' может применяться только к блочным элементам.
2.5 Псевдо-элементы в селекторах
В контекстных селекторах псевдо-элементы допускаются только в конце селектора:
BODY P:first-letter { color: purple }
Псевдо-элементы могут в селекторах комбинироваться с классами:
P.initial:first-letter { color: red }
fuckit@km.ru
скачано с http://bizkit.land.ru
<P CLASS=initial>First paragraph</A>
Этот пример позволит сделать темно красными первые буквы всех параграфов, имеющих класс initial.
При комбинировании с классами или псевдо-классами псевдо-элементы должны указываться в конце
селектора. В одном селекторе может быть указан только один псевдо-элемент.
2.6 Множество псевдо-элементов
Можно комбинировать несколько псевдо-элементов:
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>
3. Каскадирование
В CSS влиять на внешний вид документа может не только одна таблица стилей, а сразу несколько
одновременно. Для этого есть две основных причины: модульная структура и баланс автор/читатель.
модульная структура
Дизайнер таблицы стилей может комбинировать несколько (частичных) таблиц стилей для
уменьшения избыточности:
@import url(http://www.style.org/pastoral);
@import url(http://www.style.org/marine);
H1 { color: red }
/* переопределить импортированные таблицы */
баланс автор/читатель
Как читатели так и авторы могут влиять на внешний вид с помощью таблиц стилей. Для
достижения этого они используют один и тот же язык таблиц стилей. UA имеет право
самостоятельно вырабатывать механизм обращения к персональной таблице стилей.
fuckit@km.ru
скачано с http://bizkit.land.ru
Иногда могут возникать конфликты между таблицами стилей, которые влияют на документ.
Разрешение конфликтов основывается на том, что каждое правило имеет вес. По умолчанию веса
читательских правил меньше, чем веса правил, определенных автором. Т.е., если есть конфликт между
правилом автора и правилом читателя, будет использовано правило автора. Как читательское, так и
авторское правила переопределяют значения по умолчанию UA.
Импортируемые таблицы стилей также каскадируются в порядке их импортирования, в соответствии с
правилами каскадирования, описанными ниже. Любые правила, определенные в самой таблице
стилей, переопределяют правила импортированной таблицы стилей. Импортируемые таблицы стилей
могут в свою очередь сами импортировать и, соответственно, переопределять другие таблицы стилей.
В CSS1 все определения '@import' должны помещаться в начало таблицы стилей перед всеми
определениями. Это создает наглядность в переопределении правил в импортированных таблицах
стилей.
3.1 'important'
Дизайнеры таблиц стилей могут увеличить веса определений:
H1 { color: black ! important; background: white ! important }
P { font-size: 12pt ! important; font-style: italic }
В приведенном примере первые три определения имеют повышенный вес, а последнее определение
имеет нормальный вес.
Читательское правило с повышенным с помощью 'important' весом определения переопределяет
правило автора с нормальным весом. А авторское правило с повышенным весом определения
переопределяет читательское правило с повышенным весом определения.
3.2 Порядок каскадирования
Наличие конфликтов правил присуще механизму 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. Отсортировать в порядке определения: если два правила имеют одинаковый вес, указанное позднее
побеждает. Правила в импортированной таблице стилей считаются предшествующими любому правилу
внутри самой таблицы стилей.
fuckit@km.ru
скачано с http://bizkit.land.ru
Поиск значения свойства может быть прекращен, если одно правило имеет больший вес чем остальные
правила, соответствующие той же паре элемент/свойство.
Такая стратегия дает писателю большую власть над отображением документа, чем у читателя. В связи
с этим важно предоставлять читателю возможность отключать действие конкретной таблицы стилей.
Определение в атрибуте '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.
Должно считаться, что такие правила описаны в начале авторской таблицы стилей и могут быть
переопределены нижеследующими правилами в таблице стилей. В переходный период такая политика
позволит стилистическим атрибутам сосуществовать с таблицей стилей.
4 Модель форматирования
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). Цвет
и стиль рамки устанавливаются в свойствах рамки. Границы всегда прозрачны, поэтому через них
будет просвечивать родительский элемент.
Размеры поля есть сумма размеров элемента (форматированного текста или изображения) и размеров
областей отступа, рамки и границы.
С точки зрения форматирования элементы подразделяются на два основных типа: блочные и
строчные.
fuckit@km.ru
скачано с http://bizkit.land.ru
4.1 Блочные элементы
Элементы с параметром '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
|
|
|_______________________________________________|
|
|
fuckit@km.ru
скачано с http://bizkit.land.ru
|
C
|
|_______________________________________________________|
В техническом плане, свойства заполнения и границы не наследуются. Но, как видно из примера,
элемент позиционируется относительно родительских и "братских", поэтому свойства границы и
заполнения последних отражаются на дочерних элементах.
Если бы в вышеназванном примере указывались рамки, они бы располагались между отступами и
границами.
Некоторые из используемых терминов иллюстрирует следующая диаграмма:
|
--------------- <-- верх
верхняя граница
--------------верхняя рамка
--------------верхний отступ
+-------------+ <-- потолок
|
|
|
|
|
|
| левая | левая | левый |
| правый | правая
| правая |
|-граница|-рамка--|-отступ-|-содержание--|-отступ--|--рамка-|-граница-|
|
|
|
|
|
|
|
|
+-------------+ <-- подвал
^
^
^
^
левый внешний край | левый внутр. край | правый внутр. край |
правый внешний край
нижний отступ
--------------нижняя рамка
--------------нижняя граница
--------------- <-- низ
|
Левый внешний край - это край всего элемента, с учетом отступа, рамки и границы. Левый внутренний
край - это край содержания внутри отступа, рамки и границы. Справа - аналогично. Верх - это верх
самого объекта с учетом отступа, рамки и границы; он определяется для строковых и плавающих
элементов, но не для фиксированных блочных элементов. Потолок - это верх содержания внутри
отступа, рамки и границы. Низ - это низ самого элемента, ниже отступа, рамки и границы; он
определяется для строковых и плавающих элементов, но не для фиксированных блочных элементов.
Подвал - это низ элемента внутри отступа, рамки и границы (низ содержания).
Ширина элемента - это ширина содержания, т.е. расстояние между левым и правым внутренними
краями. Высота - это высота содержания, т. е. расстояние от подвала до потолка.
4.1.1 Вертикальное форматирование
Ширина границы фиксированного блочного элемента определяют минимальное расстояние до краев
окружающих полей. Две или более прилегающих вертикальных границы (т.е. без рамки, отступа и
содержания между ними) сжимаются для максимального использования значения границы. В
большинстве случаев после сжатия вертикальных границ результат приятнее на вид и ближе к
ожидаемому дизайнером. В приведенном примере границы между двумя элементами 'LI' сжимаются с
использованием максимума нижней границы первого элемента 'LI' и верхней границы второго элемента
'LI'. Аналогично, если заполнение между 'UL' и первым элементом 'LI' (значение "Е") было бы равно
нулю, границы 'UL' и первого элемента 'LI' были бы сжаты.
В случае отрицательных границ, абсолютный максимум прилегающих отрицательных границ
вычитается из максимума прилегающих положительных границ. Если положительных границ нет,
абсолютный максимум негативных прилегающих границ вычитается из нуля.
4.1.2 Горизонтальное форматирование
Горизонтальное позиционирование и размеры фиксированного блочного элемента определяются семью
свойствами: 'margin-left', 'border-left', 'padding-left', 'width', 'padding-right', 'border-right' и 'margin-right'.
Сумма этих семи составляющих равносильна ширине родительского элемента.
fuckit@km.ru
скачано с http://bizkit.land.ru
По умолчанию, "ширине" элемента присваивается значение 'auto'. Если элемент не является
замещаемым, это значит, что UA считает "ширину" так, чтобы сумма указанных семи свойств была
эквивалентна ширине родительского элемента. Если элемент замещаемый, то значение 'auto' для
"ширины" автоматически заменяется внутренней шириной элемента.
Трем из семи свойств может быть присвоено значение 'auto': "левая граница", "ширина", и "правая
граница". Для замещаемых элементов значение 'auto' для "ширины" автоматически заменяется
внутренней шириной элемента, поэтому для них могут существовать только два значения auto'.
"Ширина" имеет неотрицательное минимально-допустимое значение, определяемое UA (которое может
меняться от элемента к элементу, и даже зависеть от других свойств). Если "ширина" меньше
допустимой (даже если она задана явным образом либо имела значение 'auto' и по приоритетному
правилу должна быть меньше), ее значение будет заменено заменяется минимально-допустимым.
Если именно одно из свойств "левая граница", "ширина" или "правая граница" имеют значение 'auto',
UA определит этому свойству значение, которое сделает сумму значений семи свойств эквивалентной
ширине родительского элемента.
Если ни одно из свойств не имеет значения 'auto', то последнее будет присвоено свойству "правая
граница".
Если более чем одному из трех вышеуказанных свойств будет присвоено значение 'auto', и одно из
них- "ширина", то остальные ("левая граница", и/или "правая граница") будут приравнены к нулю, а
"ширина" получит значение, необходимое, чтобы сделать сумму значений семи свойств эквивалентной
ширине родительского элемента.
В противоположной ситуации, если как "правая граница" так и "левая граница" будут иметь значение
'auto', им будут присвоены равноценные значения. Элемент будет выронен по центру внутри
родительского.
Если значение 'auto' было присвоено как значение для одного из вышеупомянутых семи свойств в
строчном или плавающем элементе, это будет обработано так, как если бы им было присвоено нулевое
значение.
В отличие от вертикальных границ, горизонтальные границы не сливаются.
4.1.3 Элементы-списки
Элементы со свойством 'display', имеющим значение 'list-item' ("список"), форматируются как блочные,
но предваряются маркером. Тип маркера определяется свойством "стиль списка" ('list-style'). Маркер
устанавливается в соответствии со значением свойства "стиль списка":
<STYLE TYPE="text/css">
UL
{ list-style: outside }
UL.compact { list-style: inside }
</STYLE>
<UL>
<LI>первый пункт списка идет первым
<LI>второй пункт списка идет вторым
</UL>
<UL CLASS=COMPACT>
<LI>первый пункт списка идет первым
<LI>второй пункт списка идет вторым
</UL>
Форматирование по данному примеру может выглядеть как:
* первый пункт списка
идет первым
* второй пункт списка
идет вторым
* первый пункт
списка идет первым
* второй пункт
списка идет вторым
Если текст выравнивается по ширине, маркеры должны быть на левой стороне поля.
4.1.4 Плавающие элементы
fuckit@km.ru
скачано с http://bizkit.land.ru
Используя свойство элемента "плавающий" ('float'), можно декларировать его в качестве внешнего по
отношению к нормальному потоку элементов, а затем форматировать, как блочный элемент. Например,
при установке значения 'left' для свойства "плавающий" применительно к изображению, последнее
перемещается влево до границы отступа или рамки, либо достигает другого блочного элемента.
Нормальный поток будет переноситься по правой стороне. Границы, рамки и отступы самого элемента
будут учитываться, и никогда не будут сливаться с границами смежных элементов.
При позиционировании плавающего элемента должны выполняться следующие условия (см. раздел
4.1. для разъяснения терминов):
1. Левая внешняя граница левоориентированного плавающего элемента не может быть слева от левой
внутренней границы родительского элемента. Аналогично для правоориентированных плавающих
элементов.
2. Правая внешняя граница левоориентированного плавающего элемента должна быть справа от
правой внутренней границы любого предшествующего (согласно исходному тексту HTML)
левоориентированного элемента, или же вершина предшествующего элемента должна быть ниже чем
низ последующего. Аналогично для правоориентированных плавающих элементов.
3. Правая внешняя граница левоориентированного плавающего элемента не может быть справа от
левой внешней границы правоориентированного плавающего элемента, расположенного правее его.
Аналогично для правоориентированных плавающих элементов.
4. Вершина плавающего элемента не может быть выше потолка родительского элемента.
5. Вершина плавающего элемента не может быть выше вершины любого из предшествующих
плавающих или блочных элементов.
6. Вершина плавающего элемента не может быть выше вершины строчного поля (см. раздел 4.4) с
содержанием, предшествующим описанию плавающего элемента в исходном тексте HTML.
7. Плавающий элемент должен расположиться как можно выше.
8. Левоориентированный плавающий элемент должен расположиться как можно левее,
правоориентированный - как можно правее. Приоритетно крайнее положение устанавливается для
более левого или правого элемента.
<STYLE TYPE="text/css">
IMG { float: left }
BODY, P, IMG { margin: 2em }
</STYLE>
<BODY>
<P>
<IMG SRC=img.gif>
Примерный текст, чтобы показать...
</BODY>
Форматирование в приведенном примере будет выглядеть так:
________________________________________
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
г
р
а
н
и
ц
a
B
O
D
Y
|
|
|
|
|
|
|
|
|
|
|
|
|
г
р
а
н
и
ц
а
P
max(граница BODY, граница P)
______________________________
|
Примерный текст,
|границы IMG чтобы показать, как
|
_____
плавающие элементы
|
|
|
смещаются относительно
|
| IMG |
к сторонам родительского
|
|
|
элемента, несмотря
|
|_____|
на приоритет
|
границы, бордюра
|
и заполнения.
|
Обратите внимание,
|как смежные вертикальные границы
|сжимаются между фиксированными
|блочными элементами.
Обратите внимание, как границы элемента 'P' окружают плавающий элемент 'IMG'.
Есть два случая, когда плавающие элементы могут перекрывать области границы, рамки и отступа
других элементов:


когда плавающий элемент имеет отрицательную величину границы: отрицательные границы
плавающих элементов имеют приоритет над иными блочными элементами;
когда плавающий элемент выше или шире чем элемент внутри.
fuckit@km.ru
скачано с http://bizkit.land.ru
4.2 Строчные элементы
Элементы, не форматируемые как блочные, относятся к строчным. Строчный элемент может делить
пространство строки с другими элементами. Рассмотрим следующий пример:
<P>Несколько <EM>подчеркнутых</EM> слов
<STRONG>имеется</STRONG>.</P>
Элемент 'P' - нормальный блочный, в то время как 'EM' и 'STRONG' - строчные. Если ширина элемента
'P' достаточна, чтобы расположить весь элемент на одной строке, то тогда в строке будут два строчных
элемента:
Несколько подчеркнутых слов имеется.
Если же в строке места не хватает, строчные элементы будут разбиты на несколько полей:
<P>Несколько <EM>подчеркнутых слов</EM> имеют место.</P>
Форматирование этого примера будет выглядеть как:
Несколько подчеркнутых
слов имеют место.
Если строчный элемент имеет границы, бордюры, заполнение или приложенное текстовое оформление,
то их эффект не будет проявляться в месте расчленения элемента:
------------Несколько |подчеркнутых
----------------слов | имеют место.
----( Вышеприведенный рисунок несколько искажается из-за использования псевдографики ASCII. См.
описание вычисления высоты линий в разделе 4.4.)
4.3 Замещаемые элементы
Замещаемые элементы - это элементы, замещаемые содержанием, указываемым в элементе. Например
элемент 'IMG' замещается изображением, указанным в атрибуте 'SRC'. Важным свойством замещаемых
элементов является наличие своих внутренних размеров. Если значения свойства "ширина"('width')
равна 'auto', то в качестве ширины элемента используется внутренняя ширина. Если значение иное,
чем 'auto' из перечисленных в таблице стилей, то это значение и используется, а замещаемый элемент
соответственно меняет размеры (метод изменения размеров будет определяться видом
информационного объекта). Таким же образом используется свойство "высота" ('height').
Замещаемые элементы могут быть как блочными, так и строчными.
4.4 Высота строки
Все элементы имеют свойство "высота строки" ('line-height'), что, в принципе, определяет общую
высоту строки или текста. Высота строки увеличивается на промежуток, вставляемый выше и ниже
текста в строке. К примеру, если текст 12 пунктов,
высота и "высота строки" устанавливаются равными '14pt', т.к. вставляется промежуток в 2 пункта, 1
сверху и 1 снизу строки. Пустые элементы влияют на эти расчеты точно так же, как и имеющие
содержание.
Разница между размером шрифта (font size) и "высотой строки" называется интервалом (leading).
Половина интервала называется полуинтервалом (half-leading). После форматирования каждая строка
образует прямоугольное строчное поле.
Если строка текста содержит секции с разными значениями свойства "высота строки" (т.к. может быть
несколько строчных элементов в одной строке), то каждая из таких секций имеет собственный
полуинтервал сверху и снизу. Высота строчного поля отсчитывается от высоты самой высокой секции
до низа самой низкой. Обратите внимание, что верх и низ не обязательно соответствуют наиболее
высокому элементу, поскольку элементы могут быть позиционированы с помощью свойства
"вертикальное выравнивание" ('vertical-align'). При формировании параграфа каждое строчное поле
располагается ниже предшествующей строки.
fuckit@km.ru
скачано с http://bizkit.land.ru
Обратите внимание на то, что какой-либо отступ, рамка или граница сверху или снизу не замещаемого
строчного элемента не влияют на высоту строки. Иными словами, если значение свойства "высота
строки" слишком мало для выбранных отступа или рамки, они будут перекрываться с текстом других
строк.
Замещаемые элементы, (напр. изображения) в строке могут увеличить строковое поле, если вершина
замещаемого элемента (включая полностью его отступ, рамку и границу) находится выше самой
высокой секции текста, или его низ находится ниже самой низкой секции.
В нормальных условиях, если в параграфе указано только одно значение свойства "высота строки", и
при отсутствии высоких изображений, по предшествующему определению будет проверено, имеют ли
базы последующих строк обособленное значение параметра "высота строки". Это важно в случае
выравнивания текстовых колонок с различным шрифтом, например, в таблице.
Следует иметь в виду, что это не позволяет исключить возможность перекрытия текста двух смежных
строк. Значение свойства "высота строки" может оказаться меньше высоты текста, и интервал в этом
случае будет отрицательным. Это обстоятельство может оказаться полезным, если заранее известно,
что в тексте не будет подстрочных символов (напр. если там будут только символы верхнего регистра),
и тогда строки можно сблизить.
4.5 Холст
Холст представляет собой часть изображаемой на экране поверхности 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'.
4.6 Элементы 'BR'
Текущие свойства и значения CSS1 не способны описать поведение элемента 'BR'. В языке HTML
элемент 'BR' определяется как перевод строки между словами. Фактически, это принудительный
перевод строки. Будущие версии CSS будут поддерживать ввод и замену содержания, но средства
форматирования основанные на CSS1, должны использовать отдельные алгоритмы обработки объекта
'BR'
5 Свойства CSS1
fuckit@km.ru
скачано с http://bizkit.land.ru
Таблицы стилей влияют на внешний вид документа путем присвоения тех или иных значений
свойствам стилей. В данном разделе перечисляются определения свойств стилей и приводится
соответствующий перечень значений, допускаемых CSS1.
5.1 Разъяснение значений свойств.
В настоящем тексте допустимые значения для каждого свойства перечисляются с синтаксисом,
подобным приведенному ниже:
Значение:
Значение:
Значение:
Значение:
Значение:
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) означает исключающее ИЛИ (ИЛИ-НЕ); должно происходить одно
из двух. Двойная черта (A||B) означает объединяющее ИЛИ (ИЛИ-И) - или и то и другое, или одно из
двух. Квадратные скобки([]) - группировка. Расположение рядом важнее, чем ИЛИ-И, а последнее
важнее, чем ИЛИ-НЕ. Так, "a b | c || d e " равноценно "[ a b ] | [ c || [ d e ]]".
Каждый знак, ключевое слово или группа в скобках могут следовать за одним из модификаторов:




Звездочка (*) означает, что предшествующие знак, слово или группа повторяются ноль или
более раз.
Плюс (+) означает, что предшествующие знак, слово или группа повторяются один или более
раз.
Знак вопроса (?) означает, что предшествующие знак, слово или группа являются
необязательными (optional).
Два числа в фигурных скобках ({A,B}) означают, что предшествующие знак, слово или группа
повторяются не менее чем А и не более чем В раз.
5.2 Свойства шрифта
Определение свойств шрифта относится к одному из наиболее распространенных способов применения
таблицы стилей. К сожалению, пока нет четкого и универсального стандарта для типометрии шрифтов,
и определения, применимые к шрифтам одного семейства, могут оказаться неподходящими для других.
Так, для обозначения курсива обычно используется свойство 'italic', но могут встречаться и такие
обозначения, как Oblique, Slanted, Incline, Cursive или Kursiv. Таким образом, преобразование
характерных черт шрифта в типометрические свойства является непростой задачей.
CSS1 определяет следующие свойства шрифтов: "семейство" ('font-family'), "начертание" ('font-style'),
"вариант" ('font-variant'), а также "вес" ('font-weight'), "размер" ('font-size'), "шрифт" 'font'.
5.2.1 Распознавание шрифта.
В связи с отсутствием общепринятой классификации свойств шрифта, распознавание свойств
гарнитуры шрифта должно быть произведена особенно тщательно. Свойства идентифицируются в
четко выраженном порядке, чтобы результаты распознавания были настолько последовательными,
насколько позволяют UA (предполагается, что на каждом из последних установлена одна и та же
библиотека гарнитур шрифта).
1. UA создает базу относящихся к CSS1 свойств всех известных для UA шрифтов. UA может быть
осведомлен о шрифте, если тот был установлен локально или загружен из Интернет. Если найдены два
шрифта с одинаковыми свойствами, один из них игнорируется.
fuckit@km.ru
скачано с http://bizkit.land.ru
2. Применительно к данному элементу и для каждого из символов данного элемента, UA подбирает
свойства шрифта, применимые к этому элементу. Основываясь на полном наборе свойств, UA
использует свойство "семейство" ('font-family') для выбора пробного семейства шрифта. Остальные
свойства проверяются на предмет того, насколько пробное семейство соответствует критериям
распознавания, описываемым каждым из свойств. Если все остальные свойства могут быть распознаны
UA, то распознавание гарнитуры шрифта считается завершенным.
3. В случае, если в процедуре п. 2 не удается распознать гарнитуру шрифта, и если в запасе есть
другое альтернативное семейство шрифтов, процедура п. 2 повторяется применительно к последнему.
4. Если гарнитуру шрифта удалось распознать, но оно не содержит глифа для текущего символа,
процедура п. 2 повторяется для следующего альтернативного начертания шрифта, если таковое
имеется. См. в приложении С описание шрифтов и кодировок.
5. Если с помощью процедуры п.2 не удалось распознать гарнитуру шрифта, берется гарнитура
шрифта, определенного для UA по умолчанию, затем повторяется процедура п. 2, с использованием
наилучших результатов, которые могут быть достигнуты со шрифтом по умолчанию.
(Вышеизложенный алгоритм может быть оптимизирован на предмет исключения дублирования
проверок свойств CSS1 для каждого символа).
Из правил распознавания свойств (2) вытекает следующее:
1. "Начертание" ('font-style') пробуется в первую очередь. "Курсив" ('italic') считается распознанным
если курсив явно указан, либо данная гарнитура шрифта в базе UA отмечена зарезервированными для
CSS словами 'italic' (предпочтительное), или 'oblique'. В противном случае значения должны быть
распознаны правильно, иначе "начертание" считается нераспознанным.
2. Следующим пробуется "вариант". "Нормальным" считается шрифт, не отмеченный как "малые
прописные" ('small-caps'); "малые прописные" считается (1) шрифт, помеченный как 'small-caps', (2)
шрифт, в котором синтезированы малые прописные символы или (3) шрифт, в котором строчные буквы
заменены прописными. Малые прописные буквы могут быть синтезированы путем уменьшения
размеров прописных букв нормального шрифта.
3. "Вес" шрифта опознается следующим и никогда не бывает неопознанным. (См. далее "Задание веса
шрифта").
4. "Размер" шрифта ('font-size') должен распознаваться в допустимых пределах, установленных UA.
(Обычно размеры масштабируемых шрифтов округляются до ближайшего целого пикселя, так что
допуск для растровых шрифтов на экране может доходить до 20%.) Дальнейшая обработка, например,
значений в единицах "м" других свойств, основано на том значении "размера", которое используется, а
не на том, которое определено.
5.2.2 Задание семейства шрифта ('font-family').
Значение: [[<family-name> | <generic-family>],]* [<family-name> |
<generic-family>]
По умолчанию: определяется UA
Область приложения: все элементы
Наследование: есть
Процентное выражение: неопр.
Значение свойства представляет собой перечень гарнитур шрифтов и/или их названий в порядке
приоритетности. В отличие от других свойств CSS1, здесь значения могут разделяться запятой для
указания альтернатив:
BODY { font-family: gill, helvetica, sans-serif }
Имеются два типа перечней значений:
<family-name>
Названия избранных гарнитур шрифта (в последнем примере - "gill" и "helvetica").
<generic-family>
В нижеследующем примере последнее значение указывает на семейство шрифта. Определены
следующие семейства:





'serif' (напр. Times)
'sans-serif' (напр. Helvetica)
'cursive' (напр. Zapf-Chancery)
'fantasy' (напр. Western)
'monospace' (напр. Courier)
В таблицах стилей дизайнерам рекомендуется использовать указание семейства шрифта в
качестве последней альтернативы.
Названия семейств, содержащие пробелы, должны быть в кавычках:
BODY { font-family: "new century schoolbook", serif }
fuckit@km.ru
скачано с http://bizkit.land.ru
<BODY STYLE="font-family: 'My own font', fantasy">
Если кавычки отсутствуют, то символы пробела перед и после названия гарнитуры игнорируются и
любая последовательность символов пробела внутри названия семейства преобразуется в слитное
написание.
5.2.3 Задание начертания шрифта ('font-style')
Значение: normal | italic | oblique
По умолчанию: normal
Область приложения: все элементы
Наследование: да
Процентное выражение: неопр.
Свойство "начертание" ('font-style') определяет выбор между нормальным (иногда обозначается также
терминами "roman" или "upright"), курсивным и наклонным начертанием шрифта.
Значение "нормальный" ('normal') принимается для шрифта, если он классифицирован как нормальный
('normal') в базе шрифтов UA, в то время как "наклонным" считается шрифт, помеченный как 'oblique'.
По значению "курсив" ('italic') выбирается шрифт, обозначенный как 'italic' , либо, при отсутствии
такового, обозначенный как 'oblique'.
Шрифт, обозначенный как "наклонный" ('oblique') в базе шрифтов UA, может также генерироваться
программным способом путем наклона линий нормального шрифта.
Шрифты, имеющие в названиях такие слова, как Oblique, Slanted или Incline, обычно обозначаются в
базе данных UA как "наклонные". Шрифты, имеющие в названиях такие слова, как Italic, Cursive или
Kursiv, обычно обозначаются как "курсив".
H1, H2, H3 { font-style: italic }
H1 EM { font-style: normal }
В вышеприведенном примере подчеркнутый текст, относящийся к H1, будет отрабатываться как
нормальный.
5.2.4 Задание варианта шрифта ('font-variant').
Значение: normal | small-caps
По умолчанию: normal
Область приложения: все элементы
Наследование: есть
Процентное выражение: неопр.
Другой тип варьирования внутри семейства шрифтов - это "малые прописные". В таких шрифтах
строчные буквы выглядят подобно заглавным, только меньше размером и с несколько иными
пропорциями. Такой шрифт определяется свойством "вариант" ('font-variant' ).
Значение 'normal' определяет шрифт без малых прописных букв, 'small-caps' - с малыми прописными.
Для CSS1 желательно (но не обязательно), чтобы малые прописные создавались путем замены
строчных букв уменьшенными символами прописных. В крайнем случае, для замены шрифта с малыми
прописными используются прописные буквы.
В нижеследующем примере в элементе H3 результатом будет шрифт в варианте "малые прописные", с
подчеркнутыми наклонными малыми прописными буквами.
H3 { font-variant: small-caps }
EM { font-style: oblique }
В семействе шрифтов возможны и другие варианты, например, шрифты со старинными цифрами,
малыми прописными цифрами, сжатыми или растянутыми буквами и т.п. CSS1 не предусматривает
свойств для их определения.
Ядро CSS1: как для преобразования текста в написанный заглавными буквами, так и для 'texttransform' используются одинаковые соображения. (Досл.: CSS1 core: insofar as this свойство causes
text to be transformed to uppercase, the same considerations as for 'text-transform' apply)
5.2.5 Задание веса шрифта ('font-weight')
Значение: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 |
600 | 700 | 800 | 900
По умолчанию: normal
Область приложения: все элементы
Наследование: есть
Процентное выражение: неопр.
fuckit@km.ru
скачано с http://bizkit.land.ru
Свойство "вес шрифта" определяет степень толщины линий при начертании. Это ряд значений от 100
до 900, где каждый номер указывает вес, соответствующий по крайней мере не меньшей жирности
начертания, чем для предшествующего. Нормальный шрифт 'normal' соответствует номеру 400,
полужирный 'bold' - 700. Другие слова, использованные вместо 'normal' или 'bold', зачастую
истолковывались как названия гарнитур, и поэтому была принята численная шкала в 9 позиций.
P { font-weight: normal }
H1 { font-weight: 700 }
/* 400 */
/* bold */
Значения 'bolder' и 'lighter' определяют вес шрифта по отношению к унаследованного от
родительского:
STRONG { font-weight: bolder }
Дочерние элементы наследуют результирующее значение веса, но не его ключевое слово.
Шрифты (данные шрифтов) обычно имеют одно или более свойств, значения которых являются
терминами, описывающими их веса. Общепринятых, универсальных описаний названий весов не
существует. Первичная функция этих условных имен - различать жирность внутри одного семейства
шрифтов. В целом по разным семействам шрифта терминология весьма разнообразна: к примеру,
шрифт, который по внешнему виду отнесли бы к полужирным, может быть назван как Регулярный
(Regular), Романский (Roman), Книжный (Book), Средний (Medium), Полужирный (Semi- или DemiBold),
Жирный (Bold), или как Black, в зависимости от относительной "жирности" нормального шрифта
данного семейства. В связи с отсутствием стандартных названий, свойство "вес" для CSS1 в численном
выражении соизмеряется со значением 400, которое соответствует нормальному шрифту данного
семейства. Этому весу обычно соответствуют такие условные имена шрифтов, как Book, Regular,
Roman, Normal, Medium, Обыкновенный, Книжный, Средний, Нормальный.
Соотнесение остальных весов шрифтов в семействе с их численным обозначением предполагает
сохранение только относительной жирности в пределах ряда, установленного для данной семьи. Тем
не менее в ряде типичных случаев можно поступать в соответствии со следующей логикой:




Если семейство шрифта уже использует числовую шкалу с девятью градациями (к примеру, как
шрифт Open Type), вес шрифта может быть пересчитан напрямую.
Если гарнитура отмечена как Medium, а в семействе есть хотя бы одна, помеченная как Book,
Regular, Roman или Normal, то гарнитура Medium ассоциируется с весом 500.
Шрифт, отмеченный как Bold, обычно соответствует весу 700.
Если шкала жирности шрифта имеет меньше 9 градаций, используется следующий метод
интерполяции. Если значение 500 невозможно присвоить, вместо него также присваивается
400. Если невозможно присвоить одно из значений следующего ряда - 600, 700, 800, 900 - то
берется ближайшее значение для более жирного шрифта, если таковое имеется, в противном
случае - для менее жирного. Если невозможно присвоить одно из значений следующего ряда 300, 200, 100, - то берется ближайшее значение для менее жирного шрифта, если таковое
имеется, в противном случае - для более жирного.
Данный метод иллюстрируют два нижеследующих примера. Возьмем для некоего условного семейства
шрифтов "Example1" четыре градации веса по возрастающей: Regular, Medium, Bold, Heavy. Возьмем
также шесть градаций веса для другого условного семейства шрифтов "Example2": Book, Medium, Bold,
Heavy, Black, ExtraBlack. Обратите внимание на то, как во втором примере шрифт "Example2
ExtraBlack" не был с чем-либо ассоциирован.
Доступные
"Example1
"Example1
"Example1
"Example1
шрифты
Regular"
Medium"
Bold" 700
Heavy"
Доступные шрифты
Назначен вес
Включены также
"Example2 Book" 400
"Example2 Medium"
"Example2 Bold" 700
"Example2 Heavy"
"Example2 Black"
"Example2 ExtraBlack"
Назначен вес
Включены также
400
100, 200, 300
500
600
800
900
100, 200, 300
500
600
800
900
(none)
В зависмости от того, как ключевые слова 'bolder' и 'lighter' делают шрифт в семействе жирнее или
светлее, и в связи с тем, что семейство шрифта может не содержать шрифтов, соответствующих всем
весовым значениям, обработка значения 'bolder' до следующего более жирного и значения 'lighter' до
fuckit@km.ru
скачано с http://bizkit.land.ru
менее жирного ограничена для UA пределами семейства шрифта. Если точнее, то ключевые слова
'bolder' и 'lighter' означают следующее.


Значение 'bolder' выбирает для шрифта следующий вес, соответствующий более жирному
шрифту, чем родительский. Если такого веса нет, то обычно используется ближайшее большее
численное значение (при сохранении шрифта неизменным), если наследуемое значение не
было равно 900, в противном случае вес остается равным 900.
Аналогично со значением 'lighter', но в обратном порядке: выбирается ближайшее значение,
соответствующее менее жирному шрифту, если же таковой отсутствует, то принимается
ближайшее численное значение для менее жирного шрифта, при сохранении шрифта
неизменным.
Это не дает гарантии, что для любого значения "веса" найдется более жирный шрифт; к примеру,
некоторые фонты бывают только нормальными или полужирными, остальные могут иметь восемь
гарнитур с различным весом. Нельзя заранее угадать, как именно UA сопоставит формализованные
шрифтовые параметры с конкретными шрифтами различной жирности. Можно быть уверенным лишь в
том, что шрифт заданного наименования будет не менее жирным, чем имеющиеся в семействе менее
жирные шрифты.
5.2.6 Задание размера шрифта ('font-size').
Значение: <absolute-size> | <relative-size> | <length> | <percentage>
По умолчанию: medium
Область применения: все элементы
Наследование: есть
Процентное выражение: относительно размера шрифта родительского элемента
<absolute-size>
Значение абсолютного размера (<absolute-size>) есть индекс таблицы размеров шрифта,
поддерживаемых и отрабатываемых UA. Возможные значения следующие: [ xx-small | x-small |
small | medium | large | x-large | xx-large ]. На дисплее градации масштабируются с шагом
х1,5: если 'medium' - кегль 10, то 'large' - кегль 15. Различные мультимедийные устройства
могут потребовать различные шкалы масштабирования. Кроме того, UA должен обеспечивать
качество и разборчивость шрифтов при отработке таблицы. Для разных семейств шрифтов
таблицы могут отличаться.
<relative-size>
Относительный размер (<relative-size>) отрабатывается, исходя из таблицы размеров шрифта
и размера шрифта родительского элемента. Возможные значения - [ larger | smaller ].
Например, если размер шрифта родительского элемента 'medium', то значение 'larger'
преобразует шрифт текущего элемента в 'large'. Если для размера шрифта родительского
элемента нет близкого вхождения в таблицу, то UA волен интерполировать данные таблицы
или округлить размер до ближайшего значения. UA может также экстраполировать табличные
значения, если численное значение выходит за пределы зарезервированных слов.
Для значений длины и процентного выражения таблица размеров шрифта не должна приниматься в
расчет, пока не будет вычислен размер шрифта элемента
Отрицательные значения не допускаются.
Для всех других свойств, значения длины 'em' и 'ex' относятся к размеру шрифта текущего элемента.
Для свойства "размер шрифта" эти единицы длины относятся к размеру шрифта родительского
элемента.
Заметим, что приложения могут переиначивать явно заданный размер в зависимости от содержания. К
примеру, для трехмерной сцены VR размер шрифта будет изменяться в зависимости от перспективы.
примеры:
P { font-size: 12pt; }
BLOCKQUOTE { font-size: larger }
EM { font-size: 150% }
EM { font-size: 1.5em }
Если используется градация масштабирования 1.5, то три последних случая равнозначны.
5.2.7 Задание шрифта в целом ('font')
Значение: [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [
/
<line-height> ]? <font-family>
fuckit@km.ru
скачано с http://bizkit.land.ru
По умолчанию: не определено для обобщающего свойства
Область применения: все элементы
Наследование: есть
Процентное выражение: допускается для <font-size> и <line-height>
Свойство "шрифт" есть обобщающее свойство для определения 'font-style' 'font-variant' 'font-weight'
'font-size', 'line-height' and 'font-family' в одном и том же месте таблицы стилей. Синтаксис этого
свойства основан на традиционном для полиграфии способе указания группы свойств, относящихся к
шрифтам.
Для определения допускаемых значений и значений по умолчанию см. вышеописанные свойства. Если
для тех или иных свойств значения явно не указаны, то для них принимаются значения по умолчанию.
P
P
P
P
P
{
{
{
{
{
font:
font:
font:
font:
font:
12pt/14pt sans-serif }
80% sans-serif }
x-large/110% "new century schoolbook", serif }
bold italic large Palatino, serif }
normal small-caps 120%/120% fantasy }
Во втором примере размер шрифта, указанный в процентном выражении (80%), считается от размера
шрифта родительского элемента. В третьем примере высота линии, выраженная в процентах, считается
от размера шрифта самого элемента.
В первых трех примерах начертание, вариант и вес шрифта явно не заданы, и по умолчанию всем им
присваивается значение 'normal'. В четвертом примере вес шрифта явно указан как 'bold', стиль как
'italic', а варианту по умолчанию присваивается значение 'normal'.
В пятом примере указан вариант "малые прописные" ('small-caps'), размер (120% от родительского
шрифта), высота линии (120% от размера шрифта), и гарнитура ('fantasy'). Следовательно, значение
'normal' присваивается по умолчанию двум свойствам: "стиль" и "вес".
5.3 Свойства "цвет" (color) и "фон" (background).
Эти свойства описывают цвет (зачастую именуемый как цвет переднего плана) и фон для элемента
(т.е. поверхность, на которой располагается содержание). Они позволяют установить цвет фона и(или)
его рисунок. Также определяются позиция изображения рисунка фона, повторяется ли он и каким
образом, и где он размещается либо перемещается относительно холста.
Свойство "цвет", как правило, наследуется. Свойство "фон" не наследуется, но фон родительского
элемента будет виден на просвет, т.к. по умолчанию значение цвета фона для дочерних элементов
принимается как 'transparent' (прозрачный).
5.3.1 Определение цвета ('color')
Значение: <color>
По умолчанию: Определяется UA
Область применения: все элементы
Наследование: есть
Процентное выражение: неопр.
Это свойство описывает цвет текста в элементе (зачастую именуемый как цвет переднего плана). Есть
несколько разных способов описать, к примеру, красный цвет:
EM { color: red }
EM { color: rgb(255,0,0) }
/* natural language */
/* RGB range 0-255
*/
См. раздел 6.3. для описания возможных значений цвета.
5.3.2 Определение цвета обоев ('background-color').
Значение: <color> | transparent
По умолчанию: transparent
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.
Это свойство описывает цвет обоев элемента.
H1 { background-color: #F00 }
5.3.3 Определение рисунка фона ('background-image').
fuckit@km.ru
скачано с http://bizkit.land.ru
Значение: <url> | none
По умолчанию: нет
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.
Это свойство определяет рисунок фона элемента. При назначении изображения для рисунка фона,
необходимо также определить цвет фона, который будет использоваться в случае недоступности
изображения. Если изображение доступно, оно перекрывает цвет фона сверху.
BODY { background-image: url(marble.gif) }
P { background-image: none }
5.3.4 Определение повтора рисунка фона ('background-repeat').
Значение: repeat | repeat-x | repeat-y | no-repeat
По умолчанию: repeat
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.
Если рисунок фона определен, значение свойства "повтор рисунка фона" определяет, повторяется ли
изображение и каким образом.
Значение 'repeat' указывает, что изображение повторяется как в горизонтальном, так и в вертикальном
направлении. Значение 'repeat-x' ('repeat-y') устанавливает повтор изображения соответственно
только в горизонтальном (вертикальном) направлении, создавая одну полосу из изображений от
одного края до противоположного. При значении 'no-repeat' изображение не повторяется.
BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
}
В вышеприведенном примере изображение рисунка фона повторяется только в вертикальном
направлении.
5.3.5 Определение привязки фона ('background-attachment').
Значение: scroll | fixed
По умолчанию: scroll
Область приложения: все элементы
Наследование: нет
Процентное выражение: неопр.
Если определен рисунок фона, значение свойства "привязка" ('background-attachment') определяет,
привязан ли рисунок к холсту или перемещается вместе с содержанием.
BODY {
background: red url(pendant.gif);
background-repeat: repeat-y;
background-attachment: fixed;
}
Ядро CSS1: UA вправе рассматривать 'fixed' как 'scroll'. Тем не менее рекомендуется, чтобы они
правильно отрабатывали 'fixed' по крайней мере для элементов HTML и BODY, т.к. для автора не
существует возможности использовать изображение только для браузеров, поддерживающих 'fixed'.
(См. гл.7).
5.3.6 Определение положения фона ('background-position')
Значение: [<percentage> | <length>]{1,2} | [top | center | bottom] || [left |
center | right]
По умолчанию: 0% 0%
Область применения: блочные и замещаемые элементы
Наследование: нет
Процентное значение: по отношению к стороне самого элемента
Если рисунок фона был определен, значение свойства "положение фона" определяет его начальное
расположение.
При парном значении '0% 0%', верхний левый угол изображения устанавливается в верхнем левом
углу поля, окружающего содержание элемента (т.е. не того поля, что окружает отступ, рамку или
fuckit@km.ru
скачано с http://bizkit.land.ru
границу). При парном значении '100% 100%', нижний правый угол изображения устанавливается в
нижнем правом углу элемента. При парном значении '14% 84%', точка изображения 14% вправо и
84% вниз будет установлена на точке элемента 14% вправо и 84% вниз.
При парном значении '2cm 2cm', верхний левый угол изображения будет установлен на расстоянии 2
см правее и 2 см ниже верхнего левого угла элемента.
Если задано только одно процентное выражение или абсолютные единицы, они устанавливают только
горизонтальное положение, а вертикальное по умолчанию будет 50%. Если заданы два значения, то
первое из них - горизонтальное положение. Допускаются комбинации абсолютных единиц и
процентных выражений, например, '50% 2cm'. Допускаются отрицательные значения.
Для обозначения положения изображения фона могут быть также использованы ключевые слова,
которые можно комбинировать с процентным выражением или абсолютными единицами. Ниже
перечислены возможные комбинации ключевых слов и их расшифровка:









'top left' или 'left top' равноценны '0% 0%'.
'top', 'top center' или 'center top' равноценны '50% 0%'.
'right top' или 'top right' равноценны '100% 0%'.
'left', 'left center' или 'center left' равноценны '0% 50%'.
'center' или 'center center' равноценны '50% 50%'.
'right', 'right center' или 'center right' равноценны '100% 50%'.
'bottom left' или 'left bottom' равноценны '0% 100%'.
'bottom', 'bottom center' или 'center bottom' равноценны '50% 100%'.
'bottom right' или 'right bottom' равноценны '100% 100%'.
примеры:
BODY
BODY
BODY
BODY
{
{
{
{
background:
background:
background:
background:
url(banner.jpeg)
url(banner.jpeg)
url(banner.jpeg)
url(banner.jpeg)
right top }
top center }
center }
bottom }
/* 100%
0%
/* 50%
0%
/* 50% 50%
/* 50% 100%
*/
*/
*/
*/
Если рисунок фона привязан относительно холста (см. раздел "Определение привязки фона"),
изображение устанавливается относительно холста, но не элемента. К примеру:
BODY {
background-image: url(logo.png);
background-attachment: fixed;
background-position: 100% 100%;
}
В вышеприведенном примере изображение устанавливается в нижний правый угол холста.
5.3.7 Определение свойств фона в целом ('background')
Значение: <background-color> || <background-image> || <background-repeat> ||
<background-attachment> || <background-position>
По умолчанию: для обобщающего свойства не определено
Область приложения: все элементы
Наследование: нет
Процентное выражение: применительно к <background-position>
Свойство "фон" ('background') - это обобщающее свойство для установки отдельных свойств фона (т.е.
цвета, рисунка, повтора, привязки и положения) в одном правиле таблицы стилей.
Возможные значения обобщающего свойства "фон" включают совокупность возможных значений
каждого из составляющих свойств.
BODY { background: red }
P { background: url(chess.png) gray 50% repeat fixed }
Свойство "фон" всегда устанавливает все совокупные свойства фона сразу. В первой строке
вышеуказанного примера явно задан только цвет фона, а значения остальных свойств принимаются по
умолчанию. Во второй строке все совокупные свойства заданы явным образом.
fuckit@km.ru
скачано с http://bizkit.land.ru
5.4 Свойства текста
5.4.1 Установка интервалов ('word-spacing')
Значение: normal | <length>
По умолчанию: normal
Область применения: все элементы
Наследование: есть
Процентное выражение: неопр.
Численное выражение длины указывает добавление к установленной по умолчанию величине
интервалов между словами. Это значение может быть отрицательным, но в этом случае могут иметь
место различные ограничения, накладываемые методами отработки. UA вправе самостоятельно
выбирать алгоритм вычисления интервалов. Интервалы между словами могут также зависеть от
способа выравнивания абзаца (последний определяется значением свойства "выравнивание" ('align')).
H1 { word-spacing: 0.4em }
Здесь интервал между словами в элементе H1 увеличен на единицу "м" ('1em')(0,4em?), (м
соответствует круглой - прим. перев.).
Ядро CSS1: UA вправе квалифицировать любое значение "интервала" как 'normal' (См. раздел 7.)
5.4.2 Установка трекинга ('letter-spacing')
Значение: normal | <length>
По умолчанию: normal
Область применения: все элементы
Наследование: есть
Процентное выражение: неопр.
Численное выражение длины указывает на добавление к установленной по умолчанию величине
межбуквенных пробелов. Это значение может быть отрицательным, но в этом случае могут иметь место
различные ограничения, накладываемые методами отработки. UA вправе самостоятельно выбирать
алгоритм вычисления интервалов. Межбуквенные интервалы могут также зависеть от способа
выравнивания абзаца (последний определяется значением свойства "выравнивание" ('align')).
BLOCKQUOTE { letter-spacing: 0.1em }
Здесь межбуквенный интервал для элемента BLOCKQUOTE' увеличен на '0.1em'.
В случае значения 'normal', UA может менять межбуквенное расстояние для выравнивания абзаца.
Этого не произойдет, если для "трекинга" будет указано значение длины в численном выражении:
BLOCKQUOTE { letter-spacing: 0 }
BLOCKQUOTE { letter-spacing: 0cm }
Если образующийся межбуквенный интервал не идентичен интервалу по умолчанию, UA не будет
использовать лигатуры.
Ядро CSS1: UA может интерпретировать любое значение трекинга как 'normal'. (См. секцию 7.)
5.4.3 Установка оформления текста ('text-decoration')
Значение: none | [ underline || overline || line-through || blink ]
По умолчанию: none
Область применения: все элементы
Наследование: нет с условием см ниже
Процентное выражение: неопр.
Это свойство описывает способ оформления текста в элементе. Если в элементе нет текста (напр.,
элемент 'IMG' в HTML), либо в случае пустого элемента (напр. '<EM></EM>'), это свойство не имеет
силы. Значение 'blink' делает текст мерцающим.
Цвет(а), требуемые для оформления текста, должны быть производными от значения свойства "цвет".
Это свойство не наследуется, но элементы должны соответствовать родительским. Например, если в
элементе подчеркивание, черта должна передаваться дочерним элементам. Цвет подчеркивания
остается даже в случаях, когда дочерние элементы имеют другие значения цвета.
A:link, A:visited, A:active { text-decoration: underline }
В вышеуказанном примере будет подчеркиваться текст для всех видов ссылок (т.е. все элементы 'A' с
атрибутом 'HREF').
UA должны распознавать зарезервированное слово 'blink', хотя не обязательно должны поддерживать
мерцание текста.
fuckit@km.ru
скачано с http://bizkit.land.ru
5.4.4 Установка вертикального выравнивания текста ('vertical-align').
Значение: baseline | sub | super | top | text-top | middle | bottom |
text-bottom | <percentage>
По умолчанию: baseline
Область применения: строчные элементы
Наследуемость: нет
Процентное выражение: по отношению к свойству "высота линии" ('line-height')
самого элемента
Свойство влияет на вертикальное положение элемента. Используется набор следующих
зарезервированных слов, указывающих положение относительно родительского элемента:
'baseline'
совмещает базу элемента (или его низ, если элемент не имеет базы), с базой родительского
элемента
'middle'
выравнивает среднюю линию элемента (обычно изображения) по уровню "база плюс половина
высоты ('x-height') родительского элемента"
'sub'
делает элемент подстрочным
'super'
делает элемент надстрочным
'text-top'
выравнивает верх элемента по верху шрифта родительского элемента
'text-bottom'
выравнивает низ элемента по низу шрифта родительского элемента
Другой набор значений свойства определяет выравнивание относительно форматируемой линии,
частью которой является указанный элемент:
'top'
выравнивает вершину элемента по самому высокому элементу линии
'bottom'
выравнивает низ элемента по самому низкому элементу линии.
При использовании значений 'top' и 'bottom' могут возникать неразрешимые ситуации, когда
зависимости одних элементов от других образуют замкнутый цикл.
Процентное выражение соотносится со значением свойства "высота линии" ('line-height') самого
элемента. Таким способом база элемента (или низ, если таковая отсутствует) повышается на
определенный уровень относительно базы родительского элемента. Допускаются отрицательные
значения. Например, при значении '-100%' элемент будет опущен так, что его база достигнет уровня,
где должна лежать база следующей линии. Это позволяет позиционировать по вертикали элементы, не
имеющие базы - скажем, изображения, используемые для замещения букв.
Предполагается, что в будущей версии CSS в качестве значения этого свойства будет допускаться
<length>.
5.4.5 Установка преобразования текста ('text-transform')
Значение: capitalize | uppercase | lowercase | none
По умолчанию: none
Область применения: все элементы
Наследование: есть
Процентное выражение: неопр.
'capitalize'
устанавливает первую букву каждого слова прописной
'uppercase'
устанавливает все буквы элемента прописными
'lowercase'
устанавливает все буквы элемента строчными
'none'
аннулирует наследованное значение.
Фактически преобразование в каждом случае будет зависеть от используемого языка . См. способы
определения языка элемента в [4] .
H1 { text-transform: uppercase }
В вышеприведенном примере для элемента 'H1' все буквы устанавливаются прописными.
fuckit@km.ru
скачано с http://bizkit.land.ru
Ядро CSS1: UA может игнорировать преобразование текста (т.е. отрабатывать как по значению
'none'), для символов, не относящихся к набору для кодировки Latin-1 и для элементов на языках, для
которых преобразование отличается от принятого для таблиц преобразования Unicode [8].
5.4.6 Установка выравнивания текста ('text-align')
Значение: left | right | center | justify
По умолчанию: определяется UA
Область применения: блочные элементы
Наследование: есть
Процентное выражение: неопр.
Это свойство описывает способ выравнивания текста внутри элемента. Фактически используемый UA
алгоритм будет зависеть от языка документа.
Пример:
DIV.center { text-align: center }
Поскольку выравнивание текста наследуется, все блочные элементы внутри элемента 'DIV' с
'CLASS=center' будут выровнены по середине. Обратите внимание, что выравнивание производится
относительно ширины элемента, а не холста. Если UA не поддерживает выравнивание по ширине
('justify'), он должен поддерживать замену - для западных языков это будет, как правило,
выравнивание по левому краю.
Ядро CSS: UA вправе интерпретировать выравнивание по середине как выравнивание по левому или
правому краю, в зависимости от установленного по умолчанию для элемента направления письма соответственно слева направо или справа налево.
5.4.7 Установка абзацного отступа ('text-indent')
Значение: <length> | <percentage>
По умолчанию: 0
Область применения: блочный элементы
Наследование: есть
Процентное выражение: относительно ширины родительского элемента.
Это свойство определяет величину отступа перед первой форматируемой линией абзаца. Значение для
абзацного отступа может быть отрицательным, но в пределах, накладываемых особенностями
обработки. Отступ не используется в середине элемента, если тот был разбит другим (напр. 'BR' для
HTML).
Пример:
P { text-indent: 3em }
5.4.8 Установка высоты строки ('line-height').
Значение: normal | <number> | <length> | <percentage>
По умолчанию: normal
Область применения: все элементы
Наследование: есть
Процентное выражение: относительно размера шрифта самого элемента.
Данное свойство определяет расстояние между базами двух смежных строк.
Если численное значение явно определено, высота строки определяется как высота шрифта,
умноженная на численное значение. Отличие от процентного выражения - в способе наследования:
если определено численное значение, то наследуется сам коэффициент, а не результирующее
значение, как в случае в процентным или иным способом выражения.
Отрицательные значения не допускаются.
В трех строках следующего примера получаются одинаковые результаты высоты строки:
DIV { line-height: 1.2; font-size: 10pt }
DIV { line-height: 1.2em; font-size: 10pt }
DIV { line-height: 120%; font-size: 10pt }
/* number */
/* length */
/* percentage */
Значение 'normal' устанавливает "рациональное" соотношение высоты строки и высоты шрифта
элемента. Предполагается, что UA в случае значения 'normal' устанавливает это соотношение в
пределах 1,0....1,2.
См. раздел 4.7. , описание того, как свойство "высота строки" влияет на форматирование блочного
элемента.
fuckit@km.ru
скачано с http://bizkit.land.ru
5.5 Свойства полей.
Свойство "поле" устанавливают размер, периферию и расположение полей, представляющих
элементы. См. модель форматирования (разд.4), в котором приведен пример использования свойства
"поле".
Свойства границы устанавливают границу элемента. Обобщающее свойство 'margin' устанавливает
границу для всех четырех сторон , в то время как остальные устанавливают только соответствующую
сторону.
Свойства отступа определяют, сколько места оставляется между рамкой и содержанием (напр. текст
или изображение). Обобщающее свойство 'padding' устанавливает отступ для всех четырех сторон, в то
время как остальные устанавливают лишь соответствующую сторону.
Свойства рамки устанавливают рамки элемента. Каждый элемент имеет четыре стороны рамки, для
каждой из которых устанавливаются ширина, цвет и стиль.
Свойства "ширина" ('width') и "высота" ('height') устанавливают размеры поля , а "плавающий" ('float')
и "очистка" ('clear') позволяют изменять позицию элементов.
5.5.1 Установка верхней границы ('margin-top').
Значение: <length> | <percentage> | auto
По умолчанию: 0
Область применения: все элементы
Наследование: нет
Процентное выражение: по отношению к ширине родительских элементов.
Это свойство определяет верхнюю границу элемента:
H1 { margin-top: 2em }
Допускаются отрицательные значения, но в пределах ограничений, накладываемых способом
обработки.
5.5.2 Установка правой границы ('margin-right').
Значение: <length> | <percentage> | auto
По умолчанию: 0
Область применения: все элементы
Наследование: нет
Процентное выражение: по отношению к ширине родительских элементов
Это свойство определяет правую границу элемента:
H1 { margin-right: 12.3% }
Допускаются отрицательные значения, но в пределах ограничений, накладываемых способом
обработки.
5.5.3 Установка нижней границы ('margin-bottom').
Значение: <length> | <percentage> | auto
По умолчания: 0
Область применения: все элементы
Наследование: нет
Процентное выражение: по отношению к ширине родительских элементов
Это свойство определяет нижнюю границу элемента:
H1 { margin-bottom: 3px }
Допускаются отрицательные значения, но в пределах ограничений, накладываемых способом
обработки.
5.5.4 Установка левой границы ('margin-left')
Значение: <length> | <percentage> | auto
По умолчанию: 0
Область применения: все элементы
Наследование: нет
Процентные значения: refer to родительский элемент's width
fuckit@km.ru
скачано с http://bizkit.land.ru
Это свойство устанавливает левую границу элемента:
H1 { margin-left: 2em }
Допускаются отрицательные значения, но в пределах ограничений, накладываемых способом
обработки.
5.5.5 Установка обобщающего свойства "граница" ('margin').
Значение: [ <length> | <percentage> | auto ]{1,4}
По умолчанию: не определено для обобщающих свойств
Область применения: все элементы
Наследование: нет
Процентное выражение: по отношению к ширине родительских элементов
Обобщающее свойство "граница" используется для одновременной установки свойств верхней, правой,
нижней и левой границы в одном месте таблицы стилей.
При явном указании четырех значений длины они соответственно применяются к верхней, правой,
нижней и левой стороне. Если явно указано одно значение, оно применяется ко всем сторонам, если
два или три значения, то отсутствующие значения берутся по значению противоположной стороны.
BODY { margin: 2em } /* all margins set to 2em */
BODY { margin: 1em 2em } /* top & bottom = 1em, right & left = 2em */
BODY { margin: 1em 2em 3em } /* top=1em, right=2em, bottom=3em, left=2em */
Последняя строка вышеприведенного примера равноценна нижеследующему примеру:
BODY {
margin-top: 1em;
margin-right: 2em;
margin-bottom: 3em;
margin-left: 2em;
}
/* copied from opposite side (right) */
Допускаются отрицательные значения, но в пределах ограничений, накладываемых способом
обработки.
5.5.6 Установка верхнего отступа ('padding-top').
Значение: <length> | <percentage>
По умолчанию: 0
Область применения: все элементы
Наследование: нет
Процентное выражение: по отношению к ширине родительских элементов
Это свойство определяет величину верхнего отступа элемента.
BLOCKQUOTE { padding-top: 0.3em }
Отрицательные значения для отступа не допускаются.
5.5.7 Установка правого отступа ('padding-right').
Значение: <length> | <percentage>
По умолчанию: 0
Область применения: все элементы
Наследование: нет
Процентное выражение: по отношению к ширине родительских элементов
Это свойство определяет величину правого отступа элемента.
BLOCKQUOTE { padding-right: 10px }
Отрицательные значения для отступа не допускаются.
5.5.8 Установка нижнего отступа ('padding-bottom').
Значение: <length> | <percentage>
По умолчанию: 0
Область применения: все элементы
Наследование: нет
Процентное выражение: по отношению к ширине родительских элементов
Это свойство определяет величину нижнего отступа элемента.
fuckit@km.ru
скачано с http://bizkit.land.ru
BLOCKQUOTE { padding-bottom: 2em }
Отрицательные значения для отступа не допускаются.
5.5.9 Установка левого отступа ('padding-left').
Значение: <length> | <percentage>
По умолчанию: 0
Область применения: все элементы
Наследование: нет
Процентное выражение: по отношению к ширине родительских элементов
Это свойство устанавливает величину левого отступа элемента..
BLOCKQUOTE { padding-left: 20% }
Отрицательные значения для отступа не допускаются.
5.5.10 Установка обобщающего свойства " отступ" ('padding').
Значение: [ <length> | <percentage> ]{1,4}
По умолчанию: 0
Область применения: все элементы
Наследование: нет
Процентное выражение: по отношению к ширине родительских элементов
Свойство "отступ" является обобщающим для установки свойств верхнего, правого, нижнего и левого
отступа в одном правиле таблицы стилей.
Если явно указаны четыре значения, они применяются соответственно к верхнему, правому, нижнему и
левому отступу. Если явно указано только одно значение, оно применяется ко всем сторонам, если два
или три, то отсутствующие значения принимаются по значениям противоположной стороны.
Поверхность отступа определяется с помощью свойства "фон" ('background'):
H1 {
background: white;
padding: 1em 2em;
}
В вышеприведенном примере устанавливается горизонтальный отступ величиной '1em' (правый и
левый) и вертикальный отступ величиной '2em' (верхний и нижний). Величина 'em' определяется
относительно размера шрифта элемента: 1em соответствует размеру применяемого шрифта.
Отрицательные значения для отступа не допускаются.
5.5.11 Установка ширины верхней рамки ('border-top-width').
Значение: thin | medium | thick | <length>
По умолчанию: 'medium'
Область применения: all элементы
Наследование: нет
Процентное выражение: неопр.
Это свойство определяет ширину верхней рамки элемента. Ширина, определяемая зарезервированным
словом, зависит от UA, но при этом выдерживается зависимость: 'thin' меньше, чем 'medium', а
последнее меньше, чем 'thick'.
Ширина рамки, определенная с помощью зарезервированного слова, является для документа
величиной постоянной:
H1 { border: solid thick red }
P { border: solid thick blue }
В вышеуказанном примере у элементов 'H1' и 'P' будет та же самая рамка независимо от размера
шрифта. Чтобы установить относительную ширину, можно использовать единицы 'em':
H1 { border: solid 0.5em }
Величина рамки не может быть отрицательной.
5.5.12 Установка ширины правой рамки('border-right-width').
Значение: thin | medium | thick | <length>
По умолчанию: 'medium'
Область применения: все элементы
fuckit@km.ru
скачано с http://bizkit.land.ru
Наследование: нет
Процентное выражение: неопр.
Это свойство определяет ширину правой рамки элемента. Остальное эквивалентно установке ширины
верхней рамки('border-top-width').
5.5.13 Установка ширины нижней рамки('border-bottom-width')
Значение: thin | medium | thick | <length>
По умолчанию: 'medium'
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.
Это свойство определяет ширину нижней рамки элемента. Остальное эквивалентно установке ширины
верхней рамки('border-top-width').
5.5.14 Установка ширины левой рамки 'border-left-width'
Значение: thin | medium | thick | <length>
По умолчанию: 'medium'
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.
Это свойство определяет ширину левой рамки элемента. Остальное эквивалентно установке ширины
верхней рамки ('border-top-width').
5.5.15 Установка обобщающего свойства "ширина рамки" ('border-width')
Значение: thin | medium | thick | <length>
По умолчанию: 'medium'
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.
Это свойство является обобщающим для установки верхней, правой, нижней и левой ширины рамки в
одном правиле таблицы стилей.
Может быть указано от одного до четырех значений, обрабатываемых следующим образом:


одно значение: используется для установки ширины всех четырех рамок
два значения: ширина верхней и нижней рамок устанавливаются по первому значению, правое
и левое - по второму
три значения: ширина верхней рамки устанавливается по первому значению, правого и левого
по второму, а нижнего по третьему
четыре значения: соответственно ширина верхней, правой, нижней и левой рамок.


В нижеследующем примере комментарии указывают на получившуюся величину ширины верхней,
правой и левой рамок:
H1
H1
H1
H1
{
{
{
{
border-width:
border-width:
border-width:
border-width:
thin
thin
thin
thin
}
thick }
thick medium }
thick medium none }
/*
/*
/*
/*
thin
thin
thin
thin
thin thin thin */
thick thin thick */
thick medium thin */
thick medium none */
Величина рамки не может быть отрицательной.
5.5.16 Установка цвета рамки ('border-color').
Значение: <color>{1,4}
По умолчанию: значение свойства 'color'
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.
Свойство "цвет рамки" ('border-color') определяет цвет четырех сторон рамки. "Цвет рамки" может
иметь от одного до четырех значений, которые устанавливают цвета сторон рамки аналогично
вышеописанному для толщины рамки.
fuckit@km.ru
скачано с http://bizkit.land.ru
Если не задано ни одного значения цвета, по умолчанию присваивается значение свойства "цвет"
самого элемента:
P {
color: black;
background: white;
border: solid;
}
В вышеуказанном примере рамка представляет собой сплошную черную линию.
5.5.17 Установка стиля рамки ('border-style')
Значение: none | dotted | dashed | solid | double | groove | ridge | inset |
outset
По умолчанию: none
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.
Свойство "стиль рамки" устанавливает стиль четырех сторон рамки. Оно может иметь от одного до
четырех значений для разных сторон, устанавливаемых аналогично вышеописанному для ширины
рамки.
#xy34 { border-style: solid dotted }
В вышеприведенном примере горизонтальные стороны рамки будут сплошными, а вертикальные пунктирными.
Так как значение стиля рамки по умолчанию - 'none', то в случае, если стиль рамки явно не задан,
видимой рамки не будет.
Возможны следующие стили рамки:
none
рамка не изображается (независимо от значения ширины рамки)
dotted
рамка - пунктирная линия поверх обоев элемента
dashed
рамка - штриховая линия поверх обоев элемента
solid
рамка - сплошная линия
double
рамка - двойная линия поверх обоев элемента. Сумма толщин двух линий и промежутка между
ними соответствует толщине рамки.
groove
объемная канавка, цвета на основе значения свойства "цвет".
ridge
объемный гребень, цвета на основе значения свойства "цвет".
inset
объемная складка внутрь, цвета на основе значения свойства "цвет".
outset
объемная складка наружу, цвета на основе значения свойства "цвет".
Ядро CSS: UA может обрабатывать 'dotted', 'dashed', 'double', 'groove', 'ridge', 'inset' и 'outset' как
сплошную линию ('solid').
5.5.18 Установка обобщающего свойства "верхняя рамка" ('border-top')
Значение: <border-top-width> || <border-style> || <color>
По умолчанию: для обобщающего свойства не определено
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.
Данное свойство является обобщающим для установки ширины, стиля и цвета для верхней рамка
элемента.
H1 { border-bottom: thick solid red }
В вышеуказанном примере установлены ширина, стиль и цвет для рамки элемента H1. Отсутствующим
значениям присваиваются значения по умолчанию:
H1 { border-bottom: thick solid }
fuckit@km.ru
скачано с http://bizkit.land.ru
В вышеуказанном примере значение цвета опущено и цвет рамки будет установлен по значению
свойства "цвет" самого элемента.
Обратите внимание, что в отличие от свойства "стиль рамки ", для обобщающего свойства "верхняя
рамка" задается только одно значение стиля.
5.5.19 Установка обобщающего свойства "правая рамка" ('border-right')
Значение: <border-right-width> || <border-style> || <color>
По умолчанию: для обобщающего свойства не определено
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.
Данное свойство является обобщающим для установки ширины, стиля и цвета для правой рамки
элемента. Остальное аналогично обобщающему свойству "верхняя рамка".
5.5.20 Установка обобщающего свойства "нижняя рамка" ('border-bottom')
Значение: <border-bottom-width> || <border-style> || <color>
По умолчанию: для обобщающего свойства не определено
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.
Данное свойство является обобщающим для установки ширины, стиля и цвета для нижней рамки
элемента. Остальное аналогично обобщающему свойству "верхняя рамка".
5.5.21 Установка обобщающего свойства "левая рамка" 'border-left'
Значение: <border-left-width> || <border-style> || <color>
По умолчанию: для обобщающего свойства не определено
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.
Данное свойство является обобщающим для установки ширины, стиля и цвета для левой рамки
элемента. Остальное аналогично обобщающему свойству "верхняя рамка".
5.5.22 Установка обобщающего свойства " рамка" 'border'
Значение: <border-width> || <border-style> || <color>
По умолчанию: для обобщающего свойства не определено
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.
Данное свойство является обобщающим для установки ширины, стиля и цвета для всех четырех сторон
рамки элемента. В нижеследующем примере первая строка равнозначна четырем последующим:
P { border: solid red }
P {
border-top: solid red;
border-right: solid red;
border-bottom: solid red;
border-left: solid red
}
В отличие от обобщающих свойств "граница" и "заполнение", для обобщающего свойства "рамка"
нельзя задать разные значения четырех сторон рамки. Чтобы так сделать, необходимо использовать
одно или более из других вышеприведенных свойств рамки.
Поскольку свойства в известной мере функционально перекрываются, при их обработке важен также
порядок, в соответствии с которым они были назначены. Рассмотрим следующий Пример:
BLOCKQUOTE {
border-color: red;
border-left: double
color: black;
}
fuckit@km.ru
скачано с http://bizkit.land.ru
В вышеприведенном примере цвет левого края рамки будет черным, в то время как для остальных красным. Это является результатом установки ширины, стиля и цвета для свойства "левая рамка".
Поскольку значение цвета не было явно задано для свойства "левая рамка", будет использовано
значение, заданное для свойства "цвет". То, что свойство "цвет" определено позже свойства "левая
рамка", не играет роли.
Обратите внимание, что если для свойства "ширина рамки" устанавливается до четырех значений, то
для рассматриваемого - только одно.
5.5.23 Установка свойства "ширина" ('width')
Значение: <length> | <percentage> | auto
По умолчанию: auto
Область применения: блочные и замещаемые элементы
Наследование: нет
Процентное выражение: по отношению к ширине родительского элемента
Это свойство может быть использовано для текстовых элементов, но чаще - для замещаемых, таких как
изображения. Если необходимо, ширина изображения может быть изменена масштабированием. При
этом отношение ширины изображения к высоте будет сохранена, если для свойства "высота" указано
значение 'auto'.
Пример:
IMG.icon { width: 100px }
Если для свойств "ширина" и "высота" замещаемого элемента использовано значение 'auto', то
обрабатываются значения, соответствующие собственным размерам элемента.
Отрицательные значения для свойства "ширина" не допускаются.
См. также модель форматирования глава 4, описание зависимости между настоящим свойством,
границей и заполнением.
5.5.24 Установка свойства "высота" 'height'
Значение: <length> | auto
По умолчанию: auto
Область применения: блочные и замещаемые элементы
Наследование: нет
Процентное выражение: неопр.
Это свойство может быть использовано для текстовых элементов, но чаще - для замещаемых, таких как
изображения. Если необходимо, высота изображения может быть изменена масштабированием. При
этом отношение ширины изображения к высоте будет сохранена, если для свойства "ширина" указано
значение 'auto'.
Пример:
IMG.icon { height: 100px }
Если для свойств "ширина" и "высота" замещаемого элемента использовано значение 'auto', то
обрабатываются значения, соответствующие собственным размерам элемента.
При использовании применительно к текстовым элементам, реализация заданной высоты может быть
осуществлена, например, с помощью скроллинга.
Отрицательные значения свойства "высота" не допускаются.
Ядро CSS1: UA могут игнорировать свойство "высота" (т.е. присваивать ему значение 'auto'), если
элемент не является замещаемым.
5.5.25 Установка свойства "плавающий" ('float')
Значение: left | right | none
По умолчанию: none
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.
При установке значения 'none', элемент отображается там, где он присутствует в тексте. При значении
'left' ('right'), элемент смещается влево (вправо), а перенос текста производится по правой (левой)
стороне элемента. При значении 'left' ('right'), элемент будет отображаться как блочный (в том смысле,
что свойство "выделение" - 'display' - игнорируется). См. полную спецификацию раздел 4.1.4.
IMG.icon {
float: left;
margin-left: 0;
fuckit@km.ru
скачано с http://bizkit.land.ru
}
В вышеприведенном примере все элементы IMG, имеющие класс icon, будут установлены вдоль левой
стороны родительского элемента.
Это свойство чаще всего используется для позиционирования обтекаемых текстом изображений, но
также может применяться для текстовых элементов.
5.5.26 Установка свойства "чисто" ('clear')
Значение: none | left | right | both
По умолчанию: none
Область применения: все элементы
Наследование: нет
Процентное выражение: нет
Это свойство устанавливается, если элемент допускает размещение на своих сторонах плавающих
элементов. Если точнее, то значение данного свойства указывает стороны, где плавающие элементы не
ставятся. Если для свойства элемента "чисто" указать значение 'left', то для такого элемента все
плавающие элементы на левой стороне будут опущены вниз. Если указано значение 'none', то
плавающие элементы устанавливаются на всех сторонах. Пример:
H1 { clear: left }
5.6 Свойства - классификации
Эти свойства классифицируют элементы по категориям, большим, чем при установке специфических
визуальных параметров.
Перечень стилей свойств описывает, каким образом сформатированы элементы перечня (т.е.
элементы, у которых свойство "показ" ('display') имеет значение 'list-item'). Свойства перечня стилей
могут быть установлены для любого элемента, и будут наследоваться в порядке, определенном древом
этого перечня. Однако этот эффект будет распространяться только на элементы, у которых свойство
"показ" ('display') имеет значение 'list-item'. Для языка
5.6.1 Установка свойства "показ" ('display')
Значение: block | inline | list-item | none
По умолчанию: block
Область применения: все элементы
Наследование: нет
Процентное выражение: неопр.
Это свойство описывает, показывается ли элемент на холсте (печатная страница, экран и т.п.) и каким
образом.
Элемент со значением 'block' свойства "показ" открывает новое поле. Поле устанавливается
относительно смежных полей в соответствии с принципами форматирования CSS. Обычно такие
элементы как 'H1' и 'P' относятся к типу "блочные". Значение 'list-item' будет здесь аналогично
значению 'block', с той лишь разницей, что добавляется маркер элемента списка. Для HTML это
значение обычно имеет элемент 'LI'.
Элемент со значением 'inline' свойства "показ" открывает новое строчное поле в той же самой строке,
что и предыдущее содержание. Размеры поля согласуются с размером отформатированного
содержания. Если содержание - текст, он может быть разделен на несколько строк, на каждой из
которых будет поле. Свойства границы, бордюра и заполнения применяются к строчным ('inline')
элементам, но их эффект не будет проявляться в местах переноса строк.
Значение 'none' отменяет показ элемента, включая дочерние элементы и окружающее поле.
P { display: block }
EM { display: inline }
LI { display: list-item }
IMG { display: none }
Последняя строка отключает показ картинок.
По умолчанию свойству "показ" ('display') присваивается значение 'block', но UA обычно присваивает
всем элементам HTML значения по умолчанию в соответствии с предлагаемыми спецификацией HTML
для соответствующих элементов [2].
fuckit@km.ru
скачано с http://bizkit.land.ru
Ядро CSS1: UA может игнорировать свойство "показ" и использовать собственные установки по
умолчанию. (См. раздел 7).
5.6.2 Установка пробелов ('white-space')
Значение: normal | pre | nowrap
По умолчанию: normal
Область: блочный элементы
Наследование: есть
Процентное выражение: неопр.
Это свойство описывает, каким образом внутри элемента поддерживаются пробелы: при значении
'normal' пробелы сжимаются, значение 'pre' действует подобно элементу PRE для HTML, а при значении
'nowrap' перенос производится только с помощью элементов BR:
PRE { white-space: pre }
P
{ white-space: normal }
По умолчанию свойству "пробелы" присваивается значение 'normal', однако UA обычно ставит
значения по умолчанию для всех элементов HTML в соответствии с указанным для этих элементов в
спецификации HTML [2].
Ядро CSS1: UA может игнорировать свойство "пробелы" в таблице стилей автора или читателя, и
использовать взамен собственные значения по умолчанию. (См. раздел 7).
5.6.3 Установка типа маркера перечня ('list-style-type')
Значение: disc | circle | square | decimal | lower-roman | upper-roman |
lower-alpha | upper-alpha | none
По умолчанию: disc
Область применения: элементы со значением 'list-item' для свойства 'display'
Наследование: есть
Процентное выражение: неопр.
Это свойство служит для установки появления маркера перечня, если свойству "рисунок маркера
перечня" ('list-style-image') присвоено значение 'none', либо, если изображение, указанное в URL, не
может быть отображено.
OL { list-style-type: decimal }
OL { list-style-type: lower-alpha }
OL { list-style-type: lower-roman }
/* 1 2 3 4 5 etc. */
/* a b c d e etc. */
/* i ii iii iv v etc. */
5.6.4 Установка рисунка маркера перечня ('list-style-image').
Значение: <url> | none
По умолчанию: none
Область применения: элементы со значением 'list-item' для свойства 'display'
Наследование: есть
Процентное выражение: неопр.
Это свойство определяет изображение, которое должно быть использовано в качестве маркера
перечня. В случае недоступности изображения последнее будет заменено маркером, определенным по
свойству "тип маркера перечня".
UL { list-style-image: url(http://png.com/ellipse.png) }
5.6.5 Установка отступа маркера перечня 'list-style-position'
Значение: inside | outside
По умолчанию: outside
Область применения: элементы со значением 'list-item' для свойства 'display'
Наследование: есть
Процентное выражение: неопр.
Значение свойства "отступ маркера перечня" определяет, каким образом маркер перечня будет
расположен относительно содержания. Примеры форматирования см. в разделе 4.1.3.
5.6.6 Установка обобщающего свойства "перечень" ('list-style')
Значение: <keyword> || <position> || <url>
fuckit@km.ru
скачано с http://bizkit.land.ru
По умолчанию: не определено для обобщающих свойств
Область применения: элементы со значением '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
UL
{ list-style: lower-alpha }
{ list-style: disc }
В вышеуказанных примерах свойства "перечень" будут унаследованы элементами 'LI' от элементов 'OL'
и 'UL'.
Значение URL можно сочетать с любыми другими значениями:
UL { list-style: url(http://png.com/ellipse.png) disc }
В вышеуказанном примере значение 'disc' будет использоваться в случае недоступности изображения.
6 Единицы измерения значений.
6.1 Установка единиц длины
Формат значения длины состоит из необязательного знака ("+" или "-", по умолчанию "+"),
обязательного числа (с десятичной частью, отделяемой десятичной точкой, или без), и обязательного
идентификатора размерности в виде двухбуквенной аббревиатуры, указываемых в последовательности
перечисления в настоящем абзаце. После числа "0" идентификатор размерности не обязателен.
Некоторые свойства используют отрицательные единицы длины, однако это может усложнить способ
форматирования и могут возникнуть ограничения, диктуемые особенностями отработки. Если
отрицательная длина не поддерживается, то она должна быть замещена ближайшим поддерживаемым
значением.
Существуют два типа единиц длины: относительные и абсолютные. Относительные единицы
определяют длину относительно другой длины свойства. Если таблица стилей использует
относительные единицы, то это более удобно для масштабирования страницы на разных
периферийных устройствах (напр. при выводе с экрана на печать). Такого эффекта позволяют достичь
и процентные выражения (как показано ниже), а также зарезервированные слова (напр. 'x-large').
Поддерживаются следующие относительные единицы:
H1 {
H1 {
P {
холста
margin: 0.5em }
margin: 1ex }
font-size: 12px }
*/
/* ems, высота шрифта элемента */
/* x-height, ~ по высоте буквы 'x' */
/* pixels, в пикселах относительно
Относительные единицы 'em' и 'ex' определяются относительно размера шрифта самого элемента.
Единственное исключение из этого правила делается для свойства "размер шрифта" ('font-size'), для
которого 'em' и 'ex' определяются по размеру шрифта родительского элемента.
fuckit@km.ru
скачано с http://bizkit.land.ru
Пиксели, указанные в последнем примере, определяются относительно разрешения холста, чаще всего
- экранного разрешения. Если разрешающая способность устройства вывода отличается от
характерной для экрана, 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
H2
H3
H4
H5
{
{
{
{
{
margin: 0.5in }
line-height: 3cm }
word-spacing: 4mm }
font-size: 12pt }
font-size: 1pc }
/*
/*
/*
/*
/*
inches, 1in = 2.54cm */
centimeters */
millimeters */
points, 1pt = 1/72 in */
picas, 1pc = 12pt */
В случаях, когда заданная длина не может быть отработана, UA должны аппроксимировать ее.
Дальнейший пересчет и наследование для всех свойств CSS1 должен уже основываться на результатах
аппроксимации.
6.2 Процентное выражение
Формат процентного выражения состоит из необязательного знака ("+" или "-", по умолчанию "+"),
обязательного числа (с десятичной частью, отделяемой десятичной точкой, или без), и обязательного
знака "%", указываемых в последовательности перечисления в настоящем абзаце.
Процентное значение всегда является относительным к другому, например, к значению длины. При
назначении процентного выражения для каждого случая предполагается наличие базы отсчета - чаще
всего это размер шрифта данного элемента:
P { line-height: 120% }
/* 120% размера шрифта элемента */
Для всех наследованных свойств CSS1 считается, что если значение было указано в виде процентного
выражение, то дочерние элементы наследуют результирующее значение, а не величину процентовки.
6.3 Обозначение цвета
Цвет обозначатся либо зарезервированным словом, либо численно по спецификации 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
EM
EM
EM
{
{
{
{
color:
color:
color:
color:
#f00 }
#ff0000 }
rgb(255,0,0) }
rgb(100%, 0%, 0%) }
/*
/*
/*
/*
#rgb */
#rrggbb */
integer range 0 - 255 */
float range 0.0% - 100.0% */
Значения в формате RGB указываются в шестнадцатеричной системе счисления в виде знака #, за
которым без пробелов указываются три или шесть шестнадцатеричных символа. Трехсимвольная
запись RGB (#rgb) преобразовывается в шестисимвольную путем дублирования цифр, а не
добавлением нулей. Например, #fb0 расширяется до #ffbb00. Поэтому понятно, что белый цвет (#ffffff)
fuckit@km.ru
скачано с http://bizkit.land.ru
может быть кратко записан как (#fff), и это устранит любые зависимости от специфики отображения
цвета на экране.
Формат значения RGB в функциональной записи следующий: 'rgb(' далее разделенный точками список
из трех численных значений (либо три целочисленных значения в интервале 0-255б либо три
процентных значения в диапазоне от 0.0% до 100.0%), далее ')'.
Значения за пределами числовых интервалов должны отсекаться. Ниже приводятся три эквивалентных
примера:
EM { color: rgb(255,0,0) }
255 */
EM { color: rgb(300,0,0) }
EM { color: rgb(110%, 0%, 0%) }
/* значения в диапазоне 0 /* замена на 255 */
/* замена на 100% */
Цвета RGB определяются для цветового поля sRGB [9]. UA может варьировать результаты обработки в
пределах точности, с которой они могут отображать цвета, однако применение sRGB обеспечивает
однозначное и объективно измеримое определение цвета в соответствии с международными
стандартами[10].
UA может накладывать ограничения на указанные условия для отображаемых цветов, производя
коррекцию их гаммы. В определенных условиях просмотра sRGB определяет гамму 2.2. UA регулирует
заданные CSS цвета таким образом, чтобы применительно к устройству вывода получить
"естественную" гамму цветов, гамму 2.2. В приложении D это рассматривается более подробно.
Обратите внимание, что речь идет только о цветах, определенных через CSS, а, к примеру, для
графических изображений будет использоваться их собственная цветовая информация.
6.4 URL
Универсальный локатор ресурса (URL) определяется в функциональной записи:
BODY { background: url(http://www.bg.com/pinkish.gif) }
Формат значения URL представляет собой 'url(', далее необязательный пробел, далее необязательная
одинарная (') или двойная кавычка ("), далее сам URL (как определено в [11]), далее необязательная
одинарная (') или двойная кавычка ("), далее необязательный пробел, далее ')'. Знаки кавычек, если
они не являются частью URL, должны быть парными.
Круглые скобки, запятые, пробелы, одинарные и двойные кавычки, присутствующие в URL, должны
отделяться обратным слешем: '\(', '\)', '\,'.
Неполные URL отрабатываются относительно исходника таблицы стилей, а не относительно самого
документа:
BODY { background: url(yellow) }
7 Совместимость с CSS1
UA, поддерживающий СSS, обрабатывает документы в соответствии со стандартом CSS1 в следующей
последовательности:




делается попытка выбрать все, что указано в таблице стилей и разобрать в соответствии со
спецификацией;
рассортировать определения в соответствии с каскадированием установок;
реализовать функции CSS1 в пределах ограничений, накладываемых устройствами вывода (см.
пояснение ниже). UA, производит вывод таблицы стилей CSS, если она соответствует
стандарту CSS;
выводится соответствующая CSS таблица стилей.
UA, использующий CSS1 для показа и вывода документов, отрабатывает таблицу стилей CSS1 в
соответствии со спецификацией, если в наличии имеются обе установки согласования.
UA не отрабатывает все функции CSS1: он может лишь согласовать результаты отработки с CSS1,
реализуя функциональное ядро (сore functionality) последнего. В функциональное ядро входит вся
спецификация CSS за исключением частей, изъятых явным образом. В тексте, помеченном как "ядро
CSS1" следует разъяснение функций, находящихся за пределами ядра. Установки свойств,
исключенные из функционального ядра, называются "расширенные свойства CSS1".
fuckit@km.ru
скачано с http://bizkit.land.ru
Данный раздел определяет только согласование CSS1. В будущем появятся другие уровни CSS,
которые могут потребовать UA для реализации различных установок свойств в порядке согласования.
Примеры ограничений, накладываемых средством вывода, следующие: ограничение ресурсов
(шрифты, цвет) и ограничение разрешения (вследствие чего границы могут быть неточными). В этих
случаях UA должен аппроксимировать значения таблицы стилей. Кроме того, различные особенности
пользовательских интерфейсов могут накладывать свои ограничения: например, браузер VR может
масштабировать документ , основываясь на текущем "расстоянии" от пользователя.
UA может предусматривать дополнительные пользовательские установки для отображения
информации. Например, UA может обеспечивать дополнительные настройки для пользователя с
ухудшенным зрением или давать возможность отключать мерцающий текст.
Обратите внимание, что CSS1 не определяет всех аспектов форматирования. Например, UA вправе
произвольно выбирать алгоритм определения межсимвольного расстояния.
Данная спецификация рекомендует (но не предписывает), чтобы UA:


допускал определение пользовательской таблицы стилей читателем;
допускал возможность включения и выключения индивидуальной таблицы стилей.
Оба правила согласования описывают лишь функциональный, но не пользовательский интерфейс.
7.1 Последовательно-совместимый синтаксический анализ
Данная спецификация определяет CSS первого уровня. В перспективе ожидается появление более
высоких уровней CSS с дополнительными свойствами. Чтобы обеспечить совместимость UA,
поддерживающих только CSS1, с более поздними версиями языка, в данном разделе описываются
процедуры действий UA в случае обнаружения несоответствия требованиям CSS первого уровня.


установка неизвестного свойства игнорируется. К примеру, таблицу стилей
H1 { color: red; rotation: 70deg }
UA будет обрабатывать, как если бы она имела вид
H1 { color: red; }

недопустимые значения, либо значения с недопустимыми частями, обрабатываются, как если
бы определение отсутствовало:


IMG { float: left }
IMG { float: left top }
/* верно для CSS1 */
/* "top" недопустимое значение для 'float'
*/

IMG { background: "red" } /* в CSS1 ключевые слова не закавычиваются
*/

IMG { border-width: 3 }
/* должна быть указана размерность числа,
*/

/* выражающего значение длины */
В вышеприведенном примере анализатор CSS1 должен принять к исполнению первую строку и
игнорировать последующие, в результате чего таблица стилей примет вид:
IMG
IMG
IMG
IMG
{
{
{
{
float: left }
}
}
}
UA, совместимый с будущей спецификацией CSS, может отработать какую - либо из остальных
строк надлежащим образом.






неправильная приставка к зарезервированному слову игнорируется вместе со всем
последующим, вплоть до первой следующей точки с запятой (;) либо парных фигурных скобок
({}) включительно. Например, пусть мы имеем таблицу стилей:
@three-dee {
@background-lighting {
azimuth: 30deg;
elevation: 190deg;
}
fuckit@km.ru
скачано с http://bizkit.land.ru



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 встретил следующую таблицу стилей:
fuckit@km.ru
скачано с http://bizkit.land.ru
H1 { color: red; font-style: 12pt }
P { color: blue; font-vendor: any;
EM EM { font-style: normal }
font-variant: small-caps }
Второе определение в первой линии имеет недопустимое значение '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.
8 Литература
[1] W3C resource page on web style sheets (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 "HTML3 and Style Sheets"
(http://www.w3.org/pub/WWW/TR/WD-style) and the "Cougar DTD"
(http://www.w3.org/pub/WWW/MarkUp/Cougar/HTML.dtd).
[3] T Berners-Lee, D Connolly: "Hypertext Markup Language - 2.0", RFC 1866, MIT/W3C, November 1995.
The specification is also available in hypertext form (http://www.w3.org/pub/WWW/MarkUp/html-spec/htmlspec_toc.htm)
[4] F Yergeau, G Nicol, G Adams, M Durst: "Internationalization of the Hypertext Markup Language"
(ftp://ietf.org/internet-drafts/draft-ietf-html-i18n-05.txt).
[5] ISO 8879:1986. Information Processing - Text and Office Systems - Standard Generalized Markup
Language (SGML)
[6] ISO/IEC 10179:1996 Information technology -- Processing languages -- Document Style Semantics and
Specification Language (DSSSL). The specification is also available in hypertext form
(http://occam.sjf.novell.com:8080/dsssl/dsssl96).
[7] ISO/IEC 9899:1990 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: "Proposal for a Standard Color Space for the Internet sRGB" (http://www.hpl.hp.com/personal/Michael_Stokes/srgb.htm)
[10] CIE Publication 15.2-1986, "Colorimetry, Second Edition", ISBN 3-900-734-00-3
(http://www.hike.te.chiba-u.ac.jp/ikeda/CIE/publ/abst/15-2-86.htm)
fuckit@km.ru
скачано с http://bizkit.land.ru
[11] T Berners-Lee, L Masinter, M McCahill: "Uniform Resource Locators (URL)", RFC 1738, CERN, Xerox
Corporation, University of Minnesota, December 1994
[12] "PNG (Portable Network Graphics) Specification, Version 1.0 specification"
(http://www.w3.org/pub/WWW/TR/REC-png-multi.htm)
[13] Charles A. Poynton: "Gamma correction on the Macintosh Platform"
(ftp://ftp.inforamp.net/pub/users/poynton/doc/Mac/Mac_gamma.pdf)
[14] International Color Consortium: "ICC Profile Format Specification, version 3.2", 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
9 Благодарности
В течение короткой жизни 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 (за его
организационные и созидательные способности).
Приложение A: Пример таблицы стилей для HTML 2.0
(Это приложение является информативным, а не формальным)
Предлагаемая таблица стилей написана в соответствии с предлагавшимся форматированием
документов в спецификации 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 }
fuckit@km.ru
скачано с http://bizkit.land.ru
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 }
LI { margin-left: 3em }
/* tight formatting */
DT { margin-bottom: 0 }
DD { margin-top: 0; margin-left: 3em }
HR { border-top: solid }
have been used */
A:link { color: blue }
A:visited { color: red }
A:active { color: lime }
/* 'border-bottom' could also
/* unvisited link */
/* visited links */
/* 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 }
Приложение B: Грамматика CSS1
(Это приложение является формальным)
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
fuckit@km.ru
скачано с http://bizkit.land.ru
: '/' | ',' | /* 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?
fuckit@km.ru
скачано с http://bizkit.land.ru
| /* 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
latin1
escape
stringchar
nmstrt
nmchar
ident
name
d
notnm
w
num
string
\\[0-9a-f]{1,4}
[?-y]
{unicode}|\\[ -~?-y]
{escape}|{latin1}|[ !#$%&(-~]
[a-z]|{latin1}|{escape}
[-a-z0-9]|{latin1}|{escape}
{nmstrt}{nmchar}*
{nmchar}+
[0-9]
[^-a-z0-9\\]|{latin1}
[ \t\n]*
{d}+|{d}*\.{d}+
\"({stringchar}|\')*\"|\'({stringchar}|\")*\'
%x COMMENT
%s AFTER_IDENT
%%
"/*"
<COMMENT>"*/"
<COMMENT>\n
<COMMENT>.
@import
"!"{w}important
{ident}
{string}
{BEGIN(COMMENT);}
{BEGIN(0);}
{/* ignore */}
{/* ignore */}
{BEGIN(0); return IMPORT_SYM;}
{BEGIN(0); return IMPORTANT_SYM;}
{BEGIN(AFTER_IDENT); return IDENT;}
{BEGIN(0); return STRING;}
{num}
{num}"%"
{num}pt/{notnm}
{num}mm/{notnm}
{num}cm/{notnm}
{num}pc/{notnm}
{num}in/{notnm}
{num}px/{notnm}
{num}em/{notnm}
{num}ex/{notnm}
{BEGIN(0);
{BEGIN(0);
{BEGIN(0);
{BEGIN(0);
{BEGIN(0);
{BEGIN(0);
{BEGIN(0);
{BEGIN(0);
{BEGIN(0);
{BEGIN(0);
<AFTER_IDENT>":"link
<AFTER_IDENT>":"visited
<AFTER_IDENT>":"active
return
return
return
return
return
return
return
return
return
return
NUMBER;}
PERCENTAGE;}
LENGTH;}
LENGTH;}
LENGTH;}
LENGTH;}
LENGTH;}
LENGTH;}
EMS;}
EXS;}
{return LINK_PSCLASS_AFTER_IDENT;}
{return VISITED_PSCLASS_AFTER_IDENT;}
{return ACTIVE_PSCLASS_AFTER_IDENT;}
fuckit@km.ru
скачано с http://bizkit.land.ru
<AFTER_IDENT>":"first-line
<AFTER_IDENT>":"first-letter
<AFTER_IDENT>"#"{name}
<AFTER_IDENT>"."{name}
":"link
":"visited
":"active
":"first-line
":"first-letter
"#"{name}
"."{name}
{return
{return
{return
{return
FIRST_LINE_AFTER_IDENT;}
FIRST_LETTER_AFTER_IDENT;}
HASH_AFTER_IDENT;}
CLASS_AFTER_IDENT;}
{BEGIN(AFTER_IDENT);
{BEGIN(AFTER_IDENT);
{BEGIN(AFTER_IDENT);
{BEGIN(AFTER_IDENT);
{BEGIN(AFTER_IDENT);
{BEGIN(AFTER_IDENT);
{BEGIN(AFTER_IDENT);
url\({w}{string}{w}\)
url\({w}([^ \n\'\")]|\\\ |\\\'|\\\"|\\\))+{w}\)
URL;}
rgb\({w}{num}%?{w}\,{w}{num}%?{w}\,{w}{num}%?{w}\)
RGB;}
[-/+{};,#:]
[ \t]+
\n
\<\!\-\\-\-\>
.
(%d)\n",
return
return
return
return
return
return
return
LINK_PSCLASS;}
VISITED_PSCLASS;}
ACTIVE_PSCLASS;}
FIRST_LINE;}
FIRST_LETTER;}
HASH;}
CLASS;}
|
{BEGIN(0); return
{BEGIN(0); return
{BEGIN(0); return *yytext;}
{BEGIN(0); /* ignore whitespace */}
{BEGIN(0); /* ignore whitespace */}
{BEGIN(0); return CDO;}
{BEGIN(0); return CDC;}
{fprintf(stderr, "%d: Illegal character
lineno, *yytext);}
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.
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 awith-grave-accent (a), 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.
fuckit@km.ru
скачано с http://bizkit.land.ru
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.
Appendix D: Gamma correction
(This appendix is informative, not normative)
See the Gamma Tutorial 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.
Appendix E: The applicability and extensibility of CSS1
(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.
fuckit@km.ru
скачано с http://bizkit.land.ru


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
Copyright љїљ 1996 W3C (MIT, INRIA, Keio ), All Rights Reserved. W3C liability, trademark, document use
and software licensing rules apply.
Приложение C: Кодирование
(Это приложение является информативным, а не формальным)
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.
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
fuckit@km.ru
скачано с http://bizkit.land.ru
decoded to find the characters. For example, in Western Europe it is customary to use the byte 224 for an awith-grave-accent (a), 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.
Приложение D: Gamma correction
(Это приложение является информативным, а не формальным)
See the Gamma Tutorial 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
fuckit@km.ru
скачано с http://bizkit.land.ru
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.
Приложение E: Применимость и расширяемость CSS1
(Это приложение является информативным, а не формальным)
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.
fuckit@km.ru
скачано с http://bizkit.land.ru
We do not expect CSS to evolve into:

a programming language
Copyright љїљ 1996 W3C (MIT, INRIA, Keio ), All Rights Reserved. W3C liability, trademark, document use
and software licensing rules apply.
fuckit@km.ru