Обратите внимание, что
* * *
* * *
* * *
* * *
Интерактивные агенты пользователей иногда изменяют внешний вид документа в ответ на действия пользователя. Селекторы предусматривают использование трёх псевдоклассов учитывающих действия пользователя над элементом.
:hover
применяется, когда пользователь указывает
на элемент с помощью указательного устройства, но необязательно активирует его.
Например, визуальный агент пользователя может применять данный псевдокласс,
когда курсор (указатель мыши) находится над полем к которому применяется данный
элемент. Агенты пользователей не поддерживающие
интерактивные типы устройств,
не поддерживают данный псевдокласс. Некоторые соответствующие агенты
пользователей, поддерживающие
интерактивные типы устройств,
не смогут поддерживать этот псевдокласс (например, устройства с
ручным/клавиатурным управлением).:active
применяется, когда элемент активизируется
пользователем. Например, в отрывке времени между нажатием кнопки мыши
пользователем и её отпусканием. В системах с более чем одной кнопкой мыши,
:active
применяется только к первой кнопке или одному нажатию
кнопки (обычно «левой» кнопки мыши), а так же ко всем имитациям
активации.:focus
применяется, когда элемент получает фокус
(событие создаваемое при помощи клавиатуры или другими формами ввода
текста).Так же может быть язык документа или реализация определённых ограничений
на то, какие элементы могут стать :active
или получить
:focus
.
Эти псевдоклассы не являются взаимоисключающими. Элемент может сочетать несколько псевдоклассов, в одно и то же время.
Для селектора не определён случай, когда родительский элемент также как
и дочерний имеет ‘:active
’ или ‘:hover
’.
Примечание: Если псевдокласс
‘:hover
’ применяется к элементу, потому что его дочерний
элемент был обозначен с помощью указательного устройства, то можно
‘:hover
’ применять к элементу который не был указан.
Примеры:
a:link /* не посещённая ссылка */ a:visited /* посещённая ссылка */ a:hover /* пользователь указывает на элемент */ a:active /* активировання ссылка */
Пример сочетания динамических псевдоклассов:
a:focus a:focus:hover
Последний селектор соответствует элементам a
к
которым применяется псевдокласс :focus и псевдокласс :hover.
Примечание: Элемент может
быть и ‘:visited
’ и
‘:active
’ (или ‘:link
’
и ‘:active
’).
* * *
CSS пример:
p::first-line { text-transform: uppercase }
Вышеуказанное правило приводит к «переводу букв первой строки каждого элемента р
в верхний регистр».
Селектор p::first-line
не соответствует ни одному существующему элементу документа. Он соответствуют псевдоэлементу, который агенты пользователей будут вставлять в начале каждого элемента p
.
Обратите внимание, что длина первой строки зависит от ряда факторов, в том числе от ширины страницы, размера шрифта и так далее. Таким образом, обычный абзац 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>
В CSS псевдоэлемент ::first-line
может создавать стилевой эффект только при подключении к блочным элементам, таким как block, inline-block, table-caption или table-cell.
Первая отформатированная строка элемента может возникнуть внутри дочернего элемента блока в том же потоке (то есть на уровне блока-потомка, который не является обтекаемым или позиционируемым). Например, первая строка DIV
располагается в <DIV><P>Эта строка...</P></DIV>
является первой строкой P
(при условии, что и P
и DIV
являются элементами блок-уровня).
В первой строке элемента со значением table-cell или inline-block первая строка не может быть отформатирована. Таким образом, в <DIV><P STYLE="display: inline-block">Привет<BR>Пока</P> и так далее</DIV>
первая отформатированная строка DIV
это не строка «Привет».
Примечание: Обратите внимание, что в первой строке p
в этом фрагменте: <p><br>Первый...
вообще не содержится букв (при условии, что по умолчанию стиль используется в HTML 4 для br
). При этом слово «Первый» находиться не на первой форматируемой строке.
Агент пользователя должен действовать так, как будто псевдотеги ::first-line
были вложены только внутрь самого первого блочного элемента охватывающего остальные элементы с текстом. (В 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
могут применяться следующие свойства CSS: свойства font, свойства color, свойства background, ‘word-spacing
’, ‘letter-spacing
’, ‘text-decoration
’, ‘text-transform
’ и ‘line-height
’. Агенты пользователей можнут также применять и другие свойства.
Во время наследования свойств CSS, часть дочернего элемента являющаяся первой строкой, наследует только свойства, применяемые к дочернему псевдоэлементу ::first-line
от родительского псевдоэлемента ::first-line
. Все остальные свойства наследуются псевдоэлементом первой строкой от не псевдоэлемента родителя. (Часть дочернего элемента, которая не является первой строкой, всегда наследует свойства от родительских элементов этого дочернего элемента.)
Псевдоэлемент ::first-letter
изменяет первую букву элемента, если ей не предшествует любое другое содержимое (например, изображения или встроенные таблицы) находящееся в первой строке. Псевдоэлемент ::first-letter может быть использован для создания «начальных заглавных» символов и «буквиц» являющихся распространёнными типографскими эффектами.
Символы пунктуации (то есть символы, определённые в Unicode в «открывающих» (Ps), «закрывающих» (Pe), «начальных» (Pi), «конечных» (Pf) и «других» (Po) классах пунктуации), которые предшествует или следуют за первой буквой, должны быть включены в форматирование. [UNICODE]
::first-letter
также применяется, если первая буква в действительности является цифрой, например цифра «6» в предложении «67 миллионов долларов это много денег».
Примечание: В некоторых случаях псевдоэлемент ::first-letter
должен включать в себя больше, чем просто первый символ строки не являющийся знаком препинания. Например, вспомогательные символы, которые должны находиться рядом со своим базовым символом. Кроме того, некоторые языки могут иметь специальные правила обращения с определёнными комбинациями букв. Агент пользователя определяет должен ли ::first-letter
включать графему кластера по умолчанию, как это определено UAX29 и может ли он включать в себя больше чем положено в случае необходимости. В голландском, например, если в начале элемента присутствует сочетание букв «ij», то обе буквы должны быть рассмотрены в рамках псевдоэлемента ::first-letter
. [UAX29]
Если символы, которые образуют ::first-letter
, находятся не в одном элементе, например, как «‘Т» в <p>‘<em>Т...
, то агент пользователя может создать псевдоэлемент ::first-letter
с одним из элементов, с обеими элементами или просто не создавать псевдоэлемент.
Аналогично, если первый символ(-ы) блока находится не в начале строки (например, из-за двунаправленного изменения порядка), то агент пользователя не должен создавать псевдоэлемент(-ы).
Пример:
В следующем примере с использованием CSS и HTML показано, как перекрывающие друг друга псевдоэлементы могут взаимодействовать. Первая буква каждого элемента 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-letter
элемента. Набор свойств ::first-letter
наследуется псевдоэлементом ::first-letter
, но свойства можно переопределить, если подобные свойства указать для ::first-letter
.
Первая буква должна быть выведена на первую отформатированную строку. Например, в данном фрагменте: <p><br>Первый...
первая строка не содержит никаких букв и псевдоэлементу ::first-letter
ни чего не соответствует (при условии, что по умолчанию используется стиль для br
в HTML 4). В частности, ему не соответствует буква «П» из слова «Первый».
В CSS псевдоэлемент ::first-letter
применяется к таким блок-контейнерам как block, list-item, table-cell, table-caption и inline-block элементам. Примечание: Будущая версия этой спецификации может позволить этому псевдоэлементу распространяться на ещё большее число типов свойства display.
Псевдоэлемент ::first-letter
может быть использован во всех подобных элементах содержащих текст, или в потомках данных элементов находящихся в одном потоке и содержащих текст. Агент пользователя должен действовать так как будто фиктивный открывающий тег псевдоэлемента ::first-letter расположен до первого текстового содержимого элемента, даже если этот текст расположен в дочернем элементе.
Пример:
Фиктивная последовательность тегов для данного фрагмента HTML:
<div> <p>Первый текст.
с фиктивными тегами
<div> <p><div::first-letter><p::first-letter>П</...></...>ервый текст.
В CSS первая буква, находящаяся в ячейке таблицы или во встраиваемом блоке не может быть первой буквой родительского элемента. Таким образом, в <DIV><P STYLE="display: inline-block">Привет<BR>Пока</P>и так далее</DIV>
первая буква DIV
это не буква «П». В самом деле, у DIV
нет первой буквы.
Если элемент является элементом списка (‘display: list-item
’), то ::first-letter
применяется к первому символу основного контейнера после маркера. Агенты пользователей могут игнорировать ::first-letter
, используемый для элементов списка с ‘list-style-position: inside
’. Если элемент имеет ::before
или ::after
, то действие ::first-letter
распространяется на первый символ элемента, включая подобное содержимое.
Пример:
При p::before {content: "Примечание:"}
, селектору p::first-letter
соответствует буква «П» в «Примечание:».
В CSS псевдоэлемент ::first-line аналогичен элементу строчного уровня, если его свойство ‘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 свойства. Агенты пользователей также могут применять и другие свойства. Чтобы позволить агентам пользователей типографским способом выводить буквицы и начальные заглавные буквы, агенту пользователя позволяется изменять высоту строки, ширину и высоту в соответствии с формой письма отличной от нормальных элементов.
Пример:
В представленном ниже примере с использованием CSS и HTML показано возможное воздействие на первую заглавную букву. Обратите внимание, что ‘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 будет создана буквица первой сроки размером с две строки:
<!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-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 вставляется сразу после
открывающего тега блочного элемента.
Чтобы добиться традиционного оформления буквиц, агенты пользователей могут устанавливать примерные значения размеров шрифтов, например, для выравнивания базовых линий. Кроме того, контур глифа может быть принят во внимание при форматировании.