| Каталог документации / Раздел "Web мастеру, CGI, Perl, PHP, Apache" / Оглавление документа |
| |
|
Содержание
Существующие в CSS принципы сопоставления шаблонов определяют применение правил, задающих стиль, к элементам в дереве документа. Эти шаблоны, называемые селекторами, могут изменяться в диапазоне от простых имен элементов до сложных текстовых структур. Если определенный элемент удовлетворяет всем критериям, устанавливаемым шаблоном, то соответствующий селектор сопоставляется данному элементу.
Чувствительность имен элементов языка документа к регистру определяется языком документа. Например, в HTML-документах имена элементов не зависят от регистра, а в XML-документах - зависят.
В следующей таблице приводятся краткие сведения о синтаксисе селекторов в CSS2:
| Шаблон | Значение | Описано в разделе |
|---|---|---|
| * | Сопоставляется любому элементу. | Универсальный селектор |
| E | Сопоставляется любому элементу E (т.е. элементу типа E. | Селекторы типа |
| E F | Сопоставляется любому элементу F, который является потомком элемента E. | Селекторы потомков |
| E > F | Сопоставляется любому элементу F, который является дочерним элементом элемента E. | Селекторы дочерних элементов |
| E:first-child | Сопоставляется элементу E, если он является первым дочерним элементом своего родительского элемента. | Псевдокласс :first-child |
| E:link E:visited | Сопоставляется элементу E, если он является привязкой гиперссылки, направляющей к документу, которой еще не был просмотрен (:link) или уже был просмотрен (:visited). | Псевдоклассы ссылок |
| E:active E:hover E:focus | Сопоставляется элементу E во время определенных действий пользователя. | Динамические псевдоклассы |
| E:lang(c) | Сопоставляется элементу E, если он присутствует в разговорном языке (язык документа указывает, каким образом определяется разговорный язык). | Псевдокласс :lang |
| E + F | Сопоставляется любому элементу F, которому непосредственно предшествует элемент E. | Селекторы сестринских элементов |
| E[foo] | Сопоставляется любому элементу E с набором атрибутов "foo" (независимо от значения). | Селекторы атрибутов |
| E[foo="warning"] | Сопоставляется любому элементу E, у которого значение атрибута "foo" в точности равно "warning". | Селекторы атрибутов |
| E[foo~="warning"] | Сопоставляется любому элементу E, у которого значением атрибута "foo" является список значений, разделенных пробелами, и одно из этих значений в точности равно "warning". | Селекторы атрибутов |
| E[lang|="en"] | Сопоставляется любому элементу E, атрибут "lang" которого имеет список значений, разделенных знаками дефиса, начинающийся (слева) со значения "en". | Селекторы атрибутов |
| DIV.warning | Только в HTML. Значение аналогично значению DIV[class~="warning"]. | Селекторы классов |
| E#myid | Сопоставляется любому элементу E, атрибут ID которого равен "myid". | ID-селекторы |
Простой селектор - это либо селектор типа, либо универсальный селектор, непосредственно за которым в произвольном порядке может следовать несколько селекторов атрибутов, ID-селекторов или псевдоклассов. Простой селектор сопоставим, если сопоставимы все его компоненты.
Селектор представляет собой последовательность из одного или нескольких простых селекторов, между которыми расположены комбинаторы. Комбинаторами могут служить пробелы, символы ">" и "+". Между комбинатором и простыми селекторами может находиться произвольное количество пробелов.
Элементы дерева документа, которые сопоставляются селектору, называются его областями применения. Селектор, состоящий из одного простого селектора, сопоставляется любому элементу, удовлетворяющему требованиям данного селектора. Если к последовательности дополнительно приписать селектор и комбинатор, то это наложит дополнительные требования соответствия. Поэтому областью применения селектора всегда следует считать подмножество элементов, сопоставляемых крайнему справа простому селектору.
К последнему в последовательности простому селектору может быть добавлен один псевдоэлемент. В этом случае информация о стиле будет применяться только к части каждой области применения.
Если в нескольких селекторах используются одни и те же объявления, их можно сгруппировать в список, разделив запятыми.
В данном примере собраны три правила с одинаковыми объявлениями. Таким образом, запись
H1 { font-family: sans-serif }
H2 { font-family: sans-serif }
H3 { font-family: sans-serif }
эквивалентна следующей:
H1, H2, H3 { font-family: sans-serif }
Наряду с такой возможностью в CSS предлагаются другие алгоритмы сокращения, включая множественные объявления и свойства стенографического типа.
Универсальный селектор, при написании обозначаемый символом "*", сопоставляется имени элемента любого типа. Он сопоставляется любому одиночному элементу в дереве документа.
Если универсальный селектор является не единственным компонентом простого селектора, то символ "*" может быть опущен. Например, записи:
*[LANG=fr] и [LANG=fr] эквивалентны.
*.warning и .warning эквивалентны.
*#myid и #myid эквивалентны.
Селектор типа сопоставляется названию типа элемента языка документа. Селектор типа сопоставляется каждому экземпляру данного типа в дереве документа.
Следующее правило сопоставляется всем элементам H1 в дереве документа:
H1 { font-family: sans-serif }
Иногда бывает необходимо, чтобы селекторы сопоставлялись элементу,
который является потомком некоторого другого элемента в дереве документа
(например, элементам EM, содержащимся в элементе H1). Селекторы потомков
позволяют устанавливать такие ассоциации в шаблоне. Селектор потомков состоит из
двух и более селекторов, разделенных пробелом. Селектор потомков вида "A B" сопоставим, если элемент B является произвольным потомком
некоторого своего предка A.
Например, рассмотрим следующие правила:
H1 { color: red }
EM { color: red }
Несмотря на то, что целью данных правил является акцентирование внимания на некотором фрагменте текста путем изменения его цвета, данный эффект не будет достигнут, если имеет место следующее:
<H1>Данный заголовок <EM>очень</EM> важен</H1>
Приведем тот же пример, дополнив предыдущие правила еще одним, устанавливающим синий цвет текста всякий раз, когда элемент EM находится внутри элемента H1:
H1 { color: red }
EM { color: red }
H1 EM { color: blue }
Третье правило в следующем фрагменте будет сопоставляться элементу EM:
<H1>This <SPAN class="myclass">headline is <EM>very</EM> important</SPAN></H1>
Следующий селектор:
DIV * P
сопоставляется элементу P, который является потомком второго и более старшего поколения элемента DIV. Обратите внимание на пробелы с обеих сторон звездочки "*".
Селектор, который фигурирует в следующем правиле, объединяющем селекторы потомков и селекторы атрибутов, сопоставляется любому элементу, который, во-первых, имеет заданный атрибут "href" и, во-вторых, находится внутри элемента P, который, в свою очередь, находится внутри элемента DIV:
DIV P *[href]
Селектор дочерних элементов сопоставим, если элемент является дочерним по отношению к некоторому другому элементу. Данный тип селекторов состоит из двух и более селекторов, разделенных символом ">".
Следующее правило задает стиль всех элементов P, являющихся дочерними элементами элемента BODY:
BODY > P { line-height: 1.3 }
В приведенном ниже примере осуществляется объединяются селекторы потомков и селекторы дочерних элементов:
DIV OL>LI P
Селектор, построенный в этом примере, сопоставляется элементу P, являющемуся потомком элемента LI, который должен быть дочерним элементом элемента OL. Последний, в свою очередь, должен быть потомком элемента DIV. Обратите внимание, что необязательные пробелы вокруг комбинатора ">" опущены.
Информацию о выборе первого дочернего элемента см. ниже в раздел о псевдоклассах first-child.
Селекторы сестринских элементов имеют следующий синтаксис: E1 + E2, где E2 - область применения данного селектора. Он сопоставим, если E1 и E2 являются дочерними элементами одного и того же родительского элемента в дереве документа, и E1 непосредственно предшествует E2.
В определенных случаях сестринские элементы генерируют объекты форматирования, отображение которых осуществляется автоматически (например, уменьшение вертикальных полей между смежными блоками). Селектор "+" позволяет разработчикам определять дополнительные стили для сестринских элементов.
Таким образом, следующее правило утверждает, что если элемент P следует непосредственно за элементом MATH, то между ними не должно быть отступа:
MATH + P { text-indent: 0 }
В приведенном ниже примере уменьшается размер вертикального пространства между элементом H1 и непосредственно следующим за ним элементом H2:
H1 + H2 { margin-top: -5mm }
Следующее правило аналогично правилу из предыдущего примера, за исключением того, что в нем добавлен атрибут селектора. Таким образом, специальное форматирование выполняется, если для элемента H1 установлен класс class="opener":
H1.opener + H2 { margin-top: -5mm }
CSS2 позволяет разработчикам создавать правила, сопоставляемые атрибутам, определенным в исходном документе.
Селекторы атрибутов могут сопоставляться в следующих четырех случаях:
[att]
[att=val]
[att~=val]
[att|=val]
Значениями атрибутов должны быть идентификаторы или строки. Зависимость значений и имен атрибутов от регистра определяется языком документа.
Например, следующий селектор атрибута сопоставляется всем элементам H1, которые описывают атрибут "title", независимо от его значения:
H1[title] { color: blue; }
В следующем примере селектор сопоставляется всем элементам SPAN, у которых значение атрибута "class" в точности равно "example":
SPAN[class=example] { color: blue; }
Для обращения к нескольким атрибутам элемента или многократного обращения к одному и тому же атрибуту можно использовать несколько селекторов атрибутов.
В этом примере селектор сопоставляется всем элементам SPAN, у которых значение атрибута "hello" в точности равно "Cleveland", а значение атрибута "goodbye" в точности равно "Columbus":
SPAN[hello="Cleveland"][goodbye="Columbus"] { color: blue; }
Следующие селекторы иллюстрируют различия между "=" и "~=". Первый селектор будет сопоставляться, например, значению "copyright copyleft copyeditor" атрибута "rel". Второй селектор будет сопоставляться только в том случае, если значение атрибута "href" равно "http://www.w3.org/".
A[rel~="copyright"] A[href="http://www.w3.org/"]
Следующее правило скрывает все элементы, атрибут "lang" которых имеет значение "fr" (т.е. документ на французском языке).
*[LANG=fr] { display : none }
Следующее правило будет сопоставляться тем значениям атрибута "lang", которые начинается с "en", включая "en", "en-US" и "en-cockney":
*[LANG|="en"] { color : red }
Аналогично, следующие правила звуковой таблицы стилей позволяют осуществлять звуковое воспроизведение сценария по ролям:
DIALOGUE[character=romeo]
{ voice-family: "Lawrence Olivier", charles, male }
DIALOGUE[character=juliet]
{ voice-family: "Vivien Leigh", victoria, female }
Сопоставление осуществляется со значениями атрибутов в дереве документа. Если язык документа отличен от HTML, значения, принимаемые атрибутами по умолчанию, можно установить различными способами, в частности, с помощью DTD. Таблицы стилей должны разрабатываться таким образом, чтобы они работали даже в том случае, если информация о значениях, принимаемых по умолчанию, не включена в дерево документа.
Например, рассмотрим элемент EXAMPLE с атрибутом "notation", который по умолчанию принимает значение "decimal". Фрагмент DTD может выглядеть следующим образом:
<!ATTLIST EXAMPLE notation (decimal,octal) "decimal">
Если таблица стилей содержит правила
EXAMPLE[notation=decimal] { /*... установки по умолчанию ...*/ }
EXAMPLE[notation=octal] { /*... прочие установки...*/ }
то для отслеживания случаев, в которых для данного атрибута значение устанавливается по умолчанию, а не явно, необходимо добавить следующее правило:
EXAMPLE { /*... установки, используемые по умолчанию ...*/ }
Т.к. этот селектор является менее специфичным, чем селектор атрибутов, то он будет использоваться только в тех случаях, когда обрабатываются значения, принимаемые по умолчанию. Необходимо позаботиться о том, чтобы все другие значения атрибутов, которые не устанавливаются по умолчанию, были обработаны явно.
В таблицах стилей, используемых с HTML-документами, при сопоставлении атрибуту "class" разработчики могут использовать точку (".") как альтернативу условному обозначению "~=". Таким образом, два выражения HTML "DIV.value" и "DIV[class~=value]" имеют одинаковый смысл. Значение атрибута должно находиться непосредственно после точки (".").
Например, для всех элементов с class~="pastoral" информацию о стиле можно определить следующим образом:
*.pastoral { color: green } /* все элементы с class~=pastoral */
или просто
.pastoral { color: green } /* все элементы с class~=pastoral */
Следующее правило назначает стиль только элементу H1 с class~="pastoral":
H1.pastoral { color: green } /* элемент H1 с class~=pastoral */
Благодаря этим правилам в следующем примере при первом появлении элементы H1 не будут отображаться зеленым цветом, а при втором появлении будут:
<H1>Не зеленый цвет</H1> <H1 class="pastoral">Настоящий зеленый цвет</H1>
Для сопоставления подмножеству значений атрибута "class" перед каждым из них, записанных в произвольном порядке, должна следует поставить точку (".").
Например, следующее правило сопоставляется любому элементу P, атрибуту "class" которого в качестве значения назначен список разделенных пробелами значений, включающий слова "pastoral" и "marine":
P.pastoral.marine { color: green }
Это правило сопоставляется, если, например, class="pastoral blue aqua marine" и не сопоставляется, если class="pastoral blue".
Примечание. В языке CSS атрибут "class" наделен большими описательными возможностями, позволяющими разработчикам создавать свои собственные "языки написания документов" с использованием элементов, с которыми не связана никакая информация о представлении (например, элементы DIV и SPAN в HTML) и назначать информацию о стиле посредством атрибута "class". Разработчикам следует избегать использования таких возможностей на практике, т.к. структурные элементы языка документа в основном имеют общепринятые значения, а определяемые разработчиком классы чаще всего их не имеют.
Язык документа может содержать атрибуты типа ID. Их отличие от других атрибутов заключается в том, что любые два из них обязательно имеют различные значения. Независимо от языка документа атрибут ID может использоваться для уникальной идентификации элементов. В HTML-документах все атрибуты ID обозначаются "id", а в XML-документах атрибуты ID могут обозначаться по-другому, но для них справедливо то же самое ограничение.
Атрибут ID языка документа позволяет разработчикам назначать идентификатор одному экземпляру элемента в дереве документа. В CSS ID-селекторы сопоставляются экземпляру элемента в зависимости от его идентификатора. В CSS ID-селектор содержит символ "#", непосредственно за которым следует значение атрибута ID.
Следующий ID-селектор сопоставляется элементу H1, значение атрибута ID которого равно "chapter1":
H1#chapter1 { text-align: center }
В следующем примере правило стиля сопоставляется элементу, у которого значение атрибута ID равно "z98y". Т.е. это правило будет сопоставляться элементу P:
<HEAD>
<TITLE>Match P</TITLE>
<STYLE type="text/css">
*#z98y { letter-spacing: 0.3em }
</STYLE>
</HEAD>
<BODY>
<P id=z98y>Разреженный текст</P>
</BODY>
Однако в следующем примере это правило стиля будет сопоставляться только элементу H1, значение атрибута ID которого равно "z98y". В этом примере данное правило не сопоставляется элементу P:
<HEAD>
<TITLE>Match H1 only</TITLE>
<STYLE type="text/css">
H1#z98y { letter-spacing: 0.5em }
</STYLE>
</HEAD>
<BODY>
<P id=z98y>Разреженный текст</P>
</BODY>
ID-селекторы имеют более высокий приоритет, чем селекторы атрибутов. Например, в HTML-документе, в терминах каскада селектор #p123 более специфичен, чем [ID=p123].
Примечание. В XML 1.0 [XML10]
информация о том, в каком атрибуте содержатся ID элементов, располагается в DTD. Во время синтаксического анализа XML-документа агенты пользователей не всегда
просматривают DTD и поэтому не всегда могут иметь информацию об идентификаторе
элемента. Если разработчик таблицы стилей знает или предполагает, что подобное
может случиться, то он должен использовать обычные селекторы атрибутов вместо ID-селекторов: [name=p371] вместо #p371. Порядок
каскадирования обычных селекторов атрибутов отличается от порядка каскадирования
ID-селекторов. Возможно, при этом понадобится добавить в объявления приоритет
"!important": [name=p371] {color: red ! important}. Естественно,
что элементы в документах XML 1.0, не использующих DTD, вообще не имеют атрибута ID.
В языке CSS2 стиль обычно прикрепляется к элементу в зависимости от его местонахождения в дереве документа. В большинстве случаев эта простая модель оказывается приемлемой, но все же иногда из-за структуры дерева документа она не позволяет реализовать некоторые устоявшиеся сценарии построения публикации. Например, в HTML 4.0 (см. [HTML40]) нет элемента, который бы указывал на первую строку абзаца, и поэтому нет простого селектора CSS, который бы мог указывать на нее.
В CSS вводится представление о псевдоэлементах и псевдоклассах, позволяющих осуществлять форматирование на основании информации, не включенной в дерево документа.
Ни псевдоэлементы, ни псевдоклассы не отображаются в исходном документе или дереве документа.
Псевдоклассы могут располагаться в любом месте селекторов, а псевдоэлементы могут находиться только после области применения некоторого селектора.
Имена псевдокласов и псевдоэлементов учитывают регистр.
Некоторые псевдоклассы являются взаимоисключающими, а другие можно применять одновременно к одному и тому же элементу. В случае конфликта правил результат определяется принятым порядком каскадирования.
Конформные агенты пользователей HTML могут либо игнорировать все правила, которые определяют селекторы, содержащие :first-line или :first-letter, либо поддержать только некоторую часть свойств, обусловленных использованием псевдоэлементов.
Псевдокласс :first-child сопоставляется элементу, который является первым дочерним элементом некоторого другого элемента.
В следующем примере селектор сопоставляется каждому элементу P, который является первым дочерним элементом элемента DIV. Это правило запрещает отступ для первого абзаца элемента DIV:
DIV > P:first-child { text-indent: 0 }
Данный селектор сопоставляется элементу P внутри DIV в следующем фрагменте:
<P>Последний P перед примечанием. <DIV class="note"> <P>Первый P внутри примечания. </DIV>но не сопоставляется второму элементу P в следующем фрагменте:
<P>Последний P перед примечанием. <DIV class="note"> <H2>Примечание</H2> <P>Первый P внутри примечания. </DIV>
В следующем примере устанавливается вес шрифта 'bold' для каждого элемента EM, являющегося одним из потомков первого дочернего элемента P:
P:first-child EM { font-weight : bold }
Обратите внимание, что, поскольку безымянные блоки не являются частью дерева документа, то они не учитываются во время определения первого дочернего элемента.
Например, EM в:
<P>abc <EM>default</EM>является первым дочерним элементом элемента P.
Следующие два селектора эквивалентны:
* > A:first-child /* A - первый дочерний элемент любого элемента */ A:first-child /* Аналогично */
Обычно агенты пользователей по-разному отображают просмотренные и непросмотренные ссылки. В CSS предусмотрены псевдоклассы ':link' и ':visited' для различения этих типов ссылок:
Примечание. По истечении определенного времени агенты пользователей могут вернуть просмотренную ссылку в состояние ':link' (непросмотренная).
Эти два состояния являются взаимоисключающими.
Язык документа определяет элементы, служащие точками привязки гиперссылки. Например, в HTML 4.0 псевдоклассы ссылок применяются к элементам A с атрибутом "href". Таким образом, следующие два объявления CSS2 эквивалентны:
A:link { color: red }
:link { color: red }
Если следующая ссылка:
<A class="external" href="http://out.side/">external link</A>была просмотрена, то, согласно правилу:
A.external:visited { color: blue }
она будет представляться синим цветом.
Иногда интерактивные агенты пользователей изменяют представление документа после выполнения пользователем некоторых действий. В CSS предусмотрены три псевдокласса для наиболее часто встречающихся случаев:
Эти псевдоклассы не являются взаимоисключающими. Элемент может сопоставляться одновременно нескольким псевдоклассам.
В CSS не определяется, какие элементы могут находится в описанных выше состояниях, как они попадают в эти состояния и их покидают. Сценарий отображения документа зависит от того, реагируют ли элементы на действия пользователей или нет, а также различных способов, используемых устройствами и пользовательскими агентами для выделения и активизации элементов.
Пользовательские агенты не обязаны осуществлять повторное форматирование отображаемого документа из-за переходов, индуцируемых псевдоклассами. Например, в таблице стилей может быть указано, что 'font-size' у активной ссылки больше, чем у неактивной. Поскольку это может привести к изменению положения букв во время выбора пользователем данной ссылки, то агент пользователя может проигнорировать соответствующее правило стиля.
A:link { color: red } /* непросмотренные ссылки */
A:visited { color: blue } /* просмотренные ссылки */
A:hover { color: yellow } /* выбранный, но не активизированный */
/* пользователем элемент */
A:active { color: white } /* активные ссылки */
Обратите внимание, что правило A:hover должно располагаться после правил A:link и A:visited, так как в противном случае правила каскадирования скроют свойство 'color' правила A:hover. Аналогичным образом, благодаря тому, что A:active находится после A:hover, активная ссылка отображается белым цветом, когда пользователь устанавливает указатель поверх элемента А и одновременно активизирует его.
Пример сочетания динамических псевдоклассов:
A:focus { background: yellow }
A:focus:hover { background: white }
Последний селектор сопоставляется элементам A, которые находятся в псевдоклассах :focus и :hover.
Информацию об отображении области активизации (фокуса) можно найти в разделе о динамических областях активизации.
Примечание. В CSS1 псевдокласс ':active' и группа псевдоклассов ':link' и ':visited' были взаимоисключающим. Теперь это не так. Элемент может одновременно принадлежать псевдоклссам ':visited' и ':active' (или ':link' и ':active'), а применяемые правила будут определяться принципами нормального каскадирования.
Если в языке документа предусмотрен способ определения разговорного языка элемента, то в CSS можно создавать селекторы, сопоставляемые элементу, использующему данный разговорный язык. Например, в HTML [HTML40] язык определяется сочетанием атрибута "lang", элемента META и, возможно, информацией из протокола (такой как заголовки HTTP). С другой стороны, в XML-приложениях используется атрибут XML:LANG и, возможно, существуют другие методы, позволяющие в языке документа определять разговорный язык.
Псевдокласс ':lang(C)' сопоставляется элементу, использующему язык C. Здесь C - код языка в соответствии с определением HTML 4.0 [HTML40] и RFC 1766 [RFC1766]. Он сопоставляется аналогично оператору '|='.
Следующие правила расставляют кавычки в документе HTML, написанном либо на французском, либо на немецком языке:
HTML:lang(fr) { quotes: '" ' ' "' }
HTML:lang(de) { quotes: '"' '"' '\2039' '\203A' }
:lang(fr) > Q { quotes: '" ' ' "' }
:lang(de) > Q { quotes: '"' '"' '\2039' '\203A' }
Вторая пара правил фактически задает свойство 'quotes' для элементов Q в соответствии с языком их родительских элементов. Это сделано, потому что выбор кавычек обычно зависит от языка элементов вокруг кавычек, а не от самих кавычек, как это имеет место во фрагменте французского текста “à l'improviste”, расположенного в английском тексте и использующего английские кавычки.
Псевдоэлемент :first-line используется для применения специальных стилей к первой форматируемой строке абзаца. Например:
P:first-line { text-transform: uppercase }
Представленное выше правило означает "сделать буквы первой строки каждого абзаца заглавными". Однако селектор "P:first-line" не соответствует ни одному реальному элементу HTML. Он сопоставляется псевдоэлементу, который конформные агенты пользователей будут помещать в начало каждого абзаца.
Обратите внимание, что длина первой строки зависит от множества факторов, таких как ширина страницы, размер шрифта и др. Поэтому типичный абзац HTML-документа, такой как
<P>Это довольно длинный абзац HTML-документа, который будет разбит на несколько строк. Первая строка будет отмечена последовательностью функциональных тегов. Другие строки будут обрабатываться как обычные строки абзаца.</P>претерпит следующую реорганизацию строк:
ЭТО ДОВОЛЬНО ДЛИННЫЙ АБЗАЦ HTML-ДОКУМЕНТА, который будет разбит на несколько строк. Первая строка будет отмечена последовательностью функциональных тегов. Другие строки будут обрабатываться как обычные строки абзаца.и будет "переписан" агентами пользователей так, чтобы включить последовательность функциональных тегов для :first-line. Эта фиктивная последовательность помогает показать, как наследуются свойства.
<P><P:first-line> Это довольно длинный абзац HTML-документа, </P:first-line> который будет разбит на несколько строк. Первая строка будет отмечена последовательностью функциональных тегов. Другие строки будут обрабатываться как обычные строки абзаца. </P>
Если псевдоэлемент разрывает реальный элемент, то желаемый эффект зачастую может быть достигнут с помощью последовательности функциональных тегов, которая закрывает и повторно открывает этот элемент. Таким образом, если мы используем в предыдущем абзаце элемент SPAN, то получим:
<P><SPAN class="test"> Это довольно длинный абзац HTML-документа, который будет разбит на несколько строк.</SPAN> Первая строка будет отмечена последовательностью функциональных тегов. Другие строки будут обрабатываться как обычные строки абзаца.</P>и пользовательский агент сможет сгенерировать соответствующие начальные и конечные теги для SPAN во время вставки последовательности функциональных тэгов для :first-line.
<P><P:first-line><SPAN class="test"> Это довольно длинный абзац HTML-документа, </SPAN></P:first-line><SPAN class="test"> который будет разбит на несколько строк. </SPAN> Первая строка будет отмечена последовательностью функциональных тегов. Другие строки будут обрабатываться как обычные строки абзаца. </P>
Псевдоэлемент :first-line может прикрепляться только к элементам уровня блока.
Псевдоэлемент :first-line подобен строковому элементу только с некоторыми ограничениями. К псевдоэлементу :first-line применяются следующие свойства: свойства шрифтов, цветов, фона, 'word-spacing', 'letter-spacing', 'text-decoration', 'vertical-align', 'text-transform', 'line-height', 'text-shadow' и 'clear'.
Псевдоэлемент :first-letter может использоваться для создания таких простых типографических эффектов, как заглавные буквы и буквицы. Тип начальной буквы аналогичен строковому элементу, если его свойству 'float' присвоено значение 'none', в противном случае он аналогичен перемещаемому объекту.
К псевдоэлементам :first-letter применяются следующие свойства: свойства шрифтов, цветов, фона, 'text-decoration', 'vertical-align' (только если для свойства 'float' установлено значение 'none'), 'text-transform', 'line-height', свойства полей, полей в ячейке таблицы, рамок, 'float', 'text-shadow' и 'clear'.
В следующем примере высота буквицы устанавливается равной высоте двух строк:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN">
<HTML>
<HEAD>
<TITLE>Начальная буква</TITLE>
<STYLE type="text/css">
P { font-size: 12pt; line-height: 12pt }
P:first-letter { font-size: 200%; font-style: italic;
font-weight: bold; float: left }
SPAN { text-transform: uppercase }
</STYLE>
</HEAD>
<BODY>
<P><SPAN>Первые</SPAN> несколько слов из статьи
в журнале "Экономист".</P>
</BODY>
</HTML>
Данный пример может быть отформатирован следующим образом:
Последовательность функциональных тегов:
<P> <SPAN> <P:first-letter> П </P:first-letter>ервые </SPAN> несколько слов из статьи в журнале "Экономист". </P>
Обратите внимание, что теги псевдоэлементов :first-letter примыкают к содержимому (например, к начальному символу), а начальный тег псевдоэлемента :first-line вставляется сразу после начального тега элемента, к которому он прикрепляется.
Чтобы добиться традиционного оформления буквиц, агенты пользователей могут устанавливать примерные значения размеров шрифтов, например, для выравнивания базовых строк. Кроме того, во время форматирования можно учитывать контур глифа.
Перед первой буквой должны быть включены имеющиеся знаки пунктуации (т.е. символы, определенные в классах пунктуации "open" (Ps), "close" (Pe) и "other" (Po) Unicode [UNICODE]), как это сделано в следующем примере:
Псевдоэлемент :first-letter сопоставляется только некоторым частям элементов уровня блока.
В некоторых языках могут существовать специальные правила обращения с определенными комбинациями букв. Например, в голландском языке, если сочетание букв "ij" находится в начале слова, то они обе должны находиться в псевдоэлементе :first-letter.
В следующем примере показано, как могут повлиять друг на друга налагающиеся псевдоэлементы. Первая буква каждого элемента P выделяется зеленым цветом, а размер шрифта установлен в '24pt'. Остальные буквы первой форматируемой строки будут представлены синим цветом, а все оставшиеся буквы абзаца - красным.
P { color: red; font-size: 12pt }
P:first-letter { color: green; font-size: 200% }
P:first-line { color: blue }
<P>Некоторый текст, разделенный на две строки</P>
Допустим, что разрыв строки произойдет до того, как слово "закончится", тогда последовательность функциональных тегов для данного фрагмента может быть следующей:
<P> <P:first-line> <P:first-letter> Не </P:first-letter>который текст, </P:first-line> разделенный на две строки </P>
Обратите внимание, что элемент :first-letter находится внутри элемента :first-line. Свойства, установленные для элемента :first-line, наследуются элементом :first-letter, но могут быть переназначены, если в элементе :first-letter этому же свойству присваивается значение.
Псевдоэлементы ':before' и ':after' можно использовать для вставки генерируемого содержимого до или после содержимого элемента. Подробнее о них рассказывается в разделе о генерируемом тексте.
H1:before {content: counter(chapno, upper-roman) ". "}
Когда псевдоэлементы :first-letter и :first-line сочетаются с псевдоэлементами :before и :after, они применяются к первой букве или строке элемента, включая вставляемый текст.
P.special:before {content: "Special! "}
P.special:first-letter {color: #ffd800}
Буква "S" слова "Special!" будет представлена золотистым цветом.
|
Закладки на сайте Проследить за страницей |
Created 1996-2024 by Maxim Chirkov Добавить, Поддержать, Вебмастеру |