H1 B, H2 B, H1 EM, H2 EM { color: red }
что эквивалентно:
H1 B { color: red }
H2 B { color: red }
H1 EM { color: red }
H2 EM { color: red }
1.7 Комментарии
Текстовые комментарии в таблицах стилей оформляются так же как и в языке Си [7]:
EM { color: red } /* red, really red!! */
Комментарии не могут вкладываться друг в друга. Для обработчика CSS1 комментарий эквивалентен пробелу.
2. Псевдо-классы и псевдо-элементы
В CSS1 стиль обычно применяется к элементу в соответствии с его позицией в структуре документа. Эта простая модель достаточна для широкого спектра стилей, но она не покрывает несколько типичных эффектов. Концепция псевдо-классов и псевдо-элементов расширяет механизм адресации в CSS1, чтобы позволить информации, внешней по отношению к документу, оказывать влияние на процесс форматирования.
Псевдо-классы и псевдо-элементы могут использоваться в селекторах CSS, но они не существуют в исходном тексте HTML. Напротив, они "вставляются" UA в соответствии с некоторыми условиями. Их поведение можно описать с помощью фиктивной последовательности тэгов.
Псевдо-элементы используются для адресации подчастей элементов, в то время как псевдо-классы позволяют различать различные типы элементов.
2.1 Псевдо-классы ссылок
UA часто отображают недавно посещенные ссылки не так как не посещенные или посещенные давно.. В CSS1 эти ситуации обрабатываются с помощью псевдо-классов элемента 'A':
A:link { color: red } /* unvisited link */
A:visited { color: blue } /* visited links */
A:active { color: lime } /* active links */
Все элементы 'A' с атрибутом 'HREF' будут помещены в одну и только одну из этих групп (т. е. псевдо-классы не влияют на ссылки-якоря). UA могут по собственному усмотрению перемещать элемент из 'visited' в 'link' после некоторого периода времени. Ссылка типа 'active' - это ссылка, которая в данный момент выбрана (например нажатием на кнопку мыши) читателем.
Форматирование псевдо-класса ссылки происходит также, как если бы класс был указан вручную. UA не обязан переформатировать уже отображаемый документ при переходе ссылки из одного псевдо-класса в другой. Например таблица стилей может законно указывать, что 'font-size' ссылки типа 'active' должен быть больше, чем у ссылки типа 'visited', но UA не обязан динамически переформатировать документ, когда читатель выбирает ссылку типа 'visited'.
Селекторы псевдо-класса не соответствуют обычным классам и наоборот. Правило в следующем примере не будет оказывать никакого влияния:
A:link { color: red }
<A CLASS=link NAME=target5> ... </A>
В CSS1 псевдо-классы ссылок не оказывают влияния ни на один элемент, кроме 'A'. Поэтому тип элемента в селекторе можно опускать:
A:link { color: red }
:link { color: red }
Эти два селектора будут идентичны в CSS1.
Имена псевдо-классов не зависят от регистра.
Псевдо-классы могут использоваться в контекстных селекторах:
A:link IMG { border: solid blue }
Псевдо-классы также могут комбинироваться с простыми классами:
A. external:visited { color: blue }
<A CLASS=external HREF="http://out. side/">external link</A>
Если ссылка в этом примере была посещена, то она будет синей. Обратите внимание, что имя обычного класса предшествует имени псевдо-класса в селекторе.
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' (5.4.3), 'vertical-align (только если 'float' равно 'none', 5.4.4), 'text-transform' (5.4.5), 'line-height' (5.4.8), свойства границ (5.5.1-5.5.5), свойства отступов (5.5.6-5.5.10), свойства рамки (5.5.11-5.5.22), 'float' (5.5.25), 'clear' (5.5.26).
Следующий пример позволяет создать эффект буквицы, когда высота первой буквы равна высоте двух строк:
<HTML>
<HEAD>
<TITLE>Title</TITLE>
<STYLE TYPE="text/css">
P { font-size: 12pt; line-height: 12pt }
P:first-letter { font-size: 200%; float: left }
SPAN { text-transform: uppercase }
</STYLE>
</HEAD>
<BODY>
<P><SPAN>The first</SPAN> few words of an article in The Economist.</P>
</BODY>
</HTML>
Если некий текстовый UA поддерживает псевдо-элемент 'first-letter' (что скорее всего не так), предыдущий пример мог бы быть отформатирован следующим образом:
___
| HE FIRST few
| words of an
article in the
Economist.
Фиктивная последовательность тэгов в этом случае выглядит так:
<P>
<SPAN>
<P:first-letter>
T
</P:first-letter>he first
</SPAN>
few words of an article in the Economist.
</P>
Обратите внимание, что тэг псевдо-элемента 'first-letter' заключает контент (т. е. первую букву), в то время как начальный тэг псевдо-элемента 'first-line' вставляется сразу после тэга элемента, к которому он применяется.
UA сам определяет, какие символы включаются в элемент 'first-letter'. Обычно кавычки, предшествующие первой букве, должны включаться:
|| /\ bird in
/ \ the hand
/----\ is worth
/ \ two in
the bush," says an
old proverb.
Когда параграф начинается с другого знака пунктуации (например скобка) или других символов, которые не являются буквами (например цифры или математические знаки), псевдо-элементы 'first-letter' обычно игнорируются.
Некоторые языки могут иметь специфические правила, как обрабатывать определенные комбинации букв. В голландском, например, если слово начинается с "ij", то обе буквы считаются принадлежащими псевдо-элементу 'first-letter'.
Псевдо-элемент 'first-letter' может применяться только к блочным элементам.
2.5 Псевдо-элементы в селекторах
В контекстных селекторах псевдо-элементы допускаются только в конце селектора:
BODY P:first-letter { color: purple }
Псевдо-элементы могут в селекторах комбинироваться с классами:
P. initial:first-letter { color: red }
<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 имеет право самостоятельно вырабатывать механизм обращения к персональной таблице стилей.
Иногда могут возникать конфликты между таблицами стилей, которые влияют на документ. Разрешение конфликтов основывается на том, что каждое правило имеет вес. По умолчанию веса читательских правил меньше, чем веса правил, определенных автором. Т. е., если есть конфликт между правилом автора и правилом читателя, будет использовано правило автора. Как читательское, так и авторское правила переопределяют значения по умолчанию 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 */
|
Из за большого объема этот материал размещен на нескольких страницах:
1 2 3 4 5 6 7 8 9 10 |
