Обратите внимание, что
Содержимое
* * *
* * *
Агенты пользователй иногда изменяют внешний вид документа в ответ на действия пользователя. В CSS предусмотрены три псевдокласса для наиболее распространённых случаев:
Элемент одновременно может соответствовать сразу нескольким псевдоклассам.
В CSS не определяется, к каким элементам могут быть применены вышеописанные псевдоклассы, или как они работают. Принципы работы могут меняться независимо от того реагируют ли элементы на события создаваемые пользователем или нет, помимо этого различные устройства и агенты пользователей могут иметь разные способы указания и активации элементов.
CSS 2.1 не определяет случай, когда родительский элемент также как и дочерний имеет :active или :hover.
Агентам пользователей не обязательно переформатировать отображаемый в данный момент документ из-за изменения псевдокласса. Например, в таблицах стилей может быть указано, что 'font-size' для :active ссылки должен быть больше, чем для неактивной ссылки, но так как это может привести к изменению положения букв в тексте, когда читатель активирует ссылку, то агент пользователя может проигнорировать соответствующее правило стиля.
a:link { color: red } /* не посещённая ссылка */
a:visited { color: blue } /* посещённая ссылка */
a:hover { color: yellow } /* пользователь указывает на элемент */
a:active { color: lime } /* активировання ссылка */
Обратите внимание, что A:hover должен быть помещён после A:link и A:visited свойств, поскольку в противном случае каскадные параметры скроют свойство 'color' заданное в A:hover. Точно так же, A:active с параметром color (lime) будет применено, когда пользователь активирует и указывает A элемент.
Пример сочетания динамических псевдоклассов:
a:focus { background: yellow }
a:focus:hover { background: white }
Последний селектор соответствует элементам A к которым применяется псевдокласс :focus и псевдокласс :hover.
Для получения информации об основных принципах фокусировки, пожалуйста, обратитесь к разделу об основных принципах динамической фокусировки.
Примечание. В CSS1 псевдокласс ':active' был взаимоисключающим по отношению к ':link' и ':visited'. Это уже не так. Элемент может быть и ':visited' и ':active' (или ':link' и ':active'), а нормальные каскадные правила определяют применение объявленных стилей.
Примечание. Так же обратите внимание, что в CSS1, псевдокласс ':active' применяется только к ссылкам.
* * *
* * *
Псевдоэлемент :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 может быть применён только к блочному элементу.
«Первая отформатированная строка»
элемента может возникнуть внутри дочернего элемента блока в том же
потоке (т.е. в на уровне блока-потомка, который не располагается и не
обтекает). Например, первая строка DIV расположенная в
<DIV><P>Эта строка...</P></DIV>
является первой строкой P (при условии, что P и DIV оба являются блок
уровнями).
Первая строка
ячейки таблицы или
встроенного блока
не может быть первой отформатированной строкой родительского элемента.
Таким образом, в
<DIV><P STYLE="display: inline-block">Привет<BR>До
свидания</P> и так далее</DIV> первая отформатированная
строка DIV это не строка «Привет».
Обратите внимание, что в первой строке P в этом
фрагменте: <p><br>Первый... вообще не содержится
букв (при условии, что по умолчанию стиль используется в HTML 4 для BR).
При этом слово «Первый» находиться не на первой форматируемой строке.
АП должен действовать так, как будто псевдотеги первой строки были вложены только внутрь самого первого блочного элемента охватывающего остальные элементы с текстом. (В CSS1 и CSS2 не было информации по этому поводу, поэтому разработчики не должны полагаться на такое поведение.) Вот пример. Последовательность псевдотегов для
<DIV> <P>Первый абзац</P> <P>Второй абзац</P> </DIV>
получается
<DIV> <P><DIV:first-line><P:first-line>Первый абзац</P:first-line></DIV:first-line></P> <P><P:first-line>Второй абзац</P:first-line></P> </DIV>
Псевдоэлемент :first-line похож на встроенные элементы, но тем не менее имеет ряд отличий. К псевдоэлементу :first-line могут применяться следующие свойства: свойства font, свойства color, свойства background, 'word-spacing', 'letter-spacing', 'text-decoration', 'text-transform' и 'line-height'. АП-ей могут также применять и другие свойства.
Псевдоэлемент 'first-letter' должен выбрать первую букву первой строки блока, если ей не предшествует любое другое содержимое (например, изображения или встроенные таблицы) в этой строке. Псевдоэлемент 'first-letter' может быть использован для создания «начальных заглавных» букв и «буквиц» , которые являются распространёнными типографскими эффектами. Этот тип первой буквы похож на элемент встроенного уровня, если его свойство 'float' имеет значение 'none', в противном случае он похож на плавающий элемент.
Свойства применяемые к псевдоэлементу :first-letter: font свойства, 'text-decoration', 'text-transform', 'letter-spacing', 'word-spacing' (при необходимости), 'line-height', 'float', 'vertical-align' (только если 'float' имеет значение 'none'), margin свойства, padding свойства, border свойства, color свойства, background свойства. Агенты пользователей также могут применять и другие свойства. Чтобы позволить агентам пользователей типографским способом выводить буквицы и начальные заглавные буквы, агентам пользователй позволяется использовать line-height, width и height в соответствии с формой письма отличной от нормальных элементов. В CSS3 данный псевдоэлемент, как ожидается, будет обладать особыми свойствами, которые будут применяться к первой букве.
В представленном ниже примере показано возможное воздействие на первую заглавную букву. Обратите внимание, что 'line-height', который наследуется от псевдоэлемента first-letter составляет 1.1, но агент пользователя в этом примере вычисляет высоту первой буквы по-другому, так чтобы она не вызывала никаких ненужных пробелов между двумя первыми строками. Также обратите внимание, что фиктивный открывающий тег первой буквы находится внутри элемента SPAN, и следовательно, ширина шрифта первой буквы является нормальной, не жирной как SPAN:
p { line-height: 1.1 }
p:first-letter { font-size: 3em; font-weight: normal }
span { font-weight: bold }
...
<p><span>Het hemelsche</span> gerecht heeft zich ten lange lesten<br>
Erbarremt over my en mijn benaeuwde vesten<br>
En arme burgery, en op mijn volcx gebed<br>
En dagelix geschrey de bange stad ontzet.
В следующем примере с помощью CSS 2.1 будет ссоздана буквица первой сроки размером с две строки:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>
<HEAD>
<TITLE>Буквица</TITLE>
<STYLE type="text/css">
P { font-size: 12pt; line-height: 1.2 }
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 вставляется сразу после открывающего тега блочного элемента.
Чтобы добиться традиционного оформления буквиц, агенты пользователей могут устанавливать примерные значения размеров шрифтов, например, для выравнивания базовых линий. Кроме того, контур глифа может быть принят во внимание при форматировании.
Символы пунктуации (т.е. символы, определённые в Unicode [UNICODE] в "открывающих" (Ps), "закрывающих" (Pe), "начальных" (Pi), "конечных" (Pf) и "других" (Po) классах пунктуации), которые предшествует или следуют за первой буквой, должны быть включены в форматирование, например:
':first-letter' также применяется, если первая буква в действительности является цифрой, например "6" в "67 миллионов долларов это много денег".
Псевдоэлемент :first-letter применяется к блочным элементам.
Псевдоэлемент :first-letter может быть использован со всеми такими элементами, содержащими текст, или которые имеют дочерний элемент в одном потоке элементов, который содержит текст. Агент пользователя должен действовать так, как будто существует фиктивный открывающий тег псевдоэлемента first-letter расположенный перед первым текстовым символом элемента, даже если первый текстовой символ находится в дочернем элементе.
Вот пример. Последовательность фиктивных тегов для данного фрагмента HTML:
<div> <p>Первый текст.
с фиктивными тегами
<div> <p><div:first-letter><p:first-letter>П</...></...>ервый текст.
Первая буква ячейки таблицы
или встроенного блока
не может быть первой буквой родительского элемента. Таким образом, в
<DIV><P STYLE="display: inline-block">Здравствуйте<BR>До
свидания</P>и так далее</DIV> первая буква DIV это не буква
"З". В самом деле, у DIV нет первой буквы.
Первая буква должна быть выведена на
первую отформатированную строку.
Например, в данном фрагменте: <p><br>Первый...
первая строка не содержит никаких букв и псевдоэлементу ':first-letter'
ни чего не соответствует (при условии, что по умолчанию используется
стиль для BR в HTML 4). В частности, ему не соответствует буква «П» из
«Первый».
Если элемент является элементом списка ('display: list-item'), то ':first-letter' относится к первой букве основной коробки после маркера. Агенты пользователей могут игнорировать ':first-letter' используемый для элементов списка с 'list-style-position: inside'. Если элемент имеет ':before' или ':after', то действие ':first-letter' распространяется на первую букву элемента, включая подобное содержимое.
Например, при 'p:before {content: "Примечание:"}', селектору 'p:first-letter' соответствует буква "П" в "Примечание:".
Некоторые языки могут иметь специальные правила обращения с определёнными комбинациями букв. В голландском, например, если в начале слова присутствует сочетание букв "ij", то обе буквы должны быть рассмотрены в рамках псевдоэлемента 'first-letter'.
Если символы, которые образуют первую букву, находятся не в одном
элементе, например, как " 'Т " в <p>'<em>Т...,
то агент пользователя может создать псевдоэлемент 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.
* * *