Псевдоэлементы позволяют
задать стиль логических элементов, не определенных в дереве
элементов документа, а также генерировать содержимое, которого
нет в исходном коде текста. Например, объектная модель документа
не предлагает удобного механизма для доступа к первому символу
текста, поэтому псевдоэлементы позволяют изменить стиль недоступного
иным образом элемента.
Синтаксис использования псевдоэлементов следующий.
Селектор:Псевдоэлемент { Описание правил стиля }
Вначале следует имя селектора, затем
пишется двоеточие, после которого идет имя псевдоэлемента.
Каждый псевдоэлемент может применяться только к одному селектору,
если требуется установить сразу несколько псевдоэлементов
для одного селектора, правила стиля должны добавляться к ним
по отдельности, как показано ниже.
.foo:first-letter { color: red }
.foo:first-line {font-style: italic}
Псевдоэлементы не могут применяться
к внутренним стилям, только к таблице связанных или глобальных
стилей.
Далее перечислены все псевдоэлементы,
их описание и свойства.
after
Применяется для вставки назначенного
контента после элемента. Этот псевдоэлемент работает совместно
со стилевым свойством content, который определяет содержимое
для вставки. В примере показано использование псевдокласса
after для добавления текста в конец абзаца.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1251">
<title>Псевдоэлементы</title>
<style type="text/css">
P.new:after {
content: " - Новьё!"; /* Добавляем после текста
параграфа */
}
</style>
</head>
<body>
<p class="new">Ловля льва в пустыне с помощью
метода золотого сечения.</p>
<p>Метод ловли льва простым перебором.</p>
</body>
</html>
В данном примере к содержимому абзаца
с классом new добавляется дополнительное слово, которое выступает
значением параметра content.
Псевдоэлементы after и before, а
также стилевое свойство content не поддерживаются браузером
Internet Explorer ни в одной его версии.
before
По своему действию before аналогичен
псевдоэлементу after, но вставляет контент до элемента. В
примере показано добавление маркеров своего типа к элементам
списка посредством скрытия стандартных маркеров и применения
псевдокласса before.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1251">
<title>Псевдоэлементы</title>
<style type="text/css">
UL {
padding-left: 0px; /* Убираем отступ слева */
list-style-type: none; /* Прячем маркеры списка */
}
LI:before {
content: "\20aa "; /* Добавляем перед элементом
списка символ в юникоде */
}
</style>
</head>
<body>
<ul>
<li>Чебурашка</li>
<li>Крокодил Гена</li>
<li>Шапокляк</li>
<li>Крыса Лариса</li>
</ul>
</body>
</html>
В данном примере псевдокласс before
устанавливается для селектора LI определяющего элементы списка.
Добавление желаемых символов происходит путем задания значения
свойства content. Обратите внимание, что в качестве аргумента
не обязательно выступает текст, могут применяться также символы
юникода.
first-letter
Определяет стиль первого символа
в тексте элемента, к которому добавляется. Это позволяет создавать
в тексте буквицу и выступающий инициал.
Буквица представляет собой увеличенную
первую букву, базовая линия которой ниже на одну или несколько
строк базовой линии основного текста.
Выступающий инициал — увеличенная
прописная буква, базовая линия которой совпадает с базовой
линией основного текста.
Рассмотрим пример создания выступающего
инициала. Для этого требуется добавить к селектору P псевдоэлемент
first-letter и установить желаемый стиль инициала. В частности,
увеличить размер текста и поменять цвет текста (пример ниже).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1251">
<title>Псевдоэлементы</title>
<style type="text/css">
P {
font-family: Arial, Helvetica, sans-serif; /* Гарнитура шрифта
основного текста */
font-size: 90%; /* Размер шрифта */
color: black; /* Черный цвет текста */
}
P:first-letter {
font-family: 'Times New Roman', Times, serif; /* Гарнитура
шрифта первой буквы */
font-size: 200%; /* Размер шрифта первого символа */
color: red; /* Красный цвет текста */
}
</style>
</head>
<body>
<p>Луч фонарика высветил старые скрипучие ступени,
по которым не далее как пять минут назад в дом поднялся Паша.
Оля осторожно приоткрыла дверь и посветила внутрь дома. Луч
света, словно нехотя, пробивался сквозь тугую завесу из мрака
и пыли. </p>
<p>Взгляд Оли опустился на пол, и она вскрикнула. В
пустом помещении никого не было, и лишь на полу валялась порванная
туфля Паши.</p>
</body>
</html>
В данном примере изменяется шрифт,
размер и цвет первой буквы каждого абзаца текста.
first-line
Определяет стиль первой строки блочного
текста. Длина этой строки зависит от многих факторов, таких
как используемый шрифт, размер окна браузера, ширина блока,
языка и т.д.
К псевдоэлементу first-line могут
применяться не все стилевые свойства. Допустимо использовать
параметры, относящиеся к шрифту, изменению цвет текста и фона,
а также: clear, line-height, letter-spacing, text-decoration,
text-transform, vertical-align и word-spacing.
В примере показано использование
псевдоэлемента first-line применительно к абзацу текста.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=windows-1251">
<title>Псевдоэлементы</title>
<style type="text/css">
P:first-line {
color: red; /* Красный цвет текста */
font-style: italic; /* Курсивное начертание */
}
</style>
</head>
<body>
<p>Интересно, а существует ли способ действительно
практичного применения свойства first-line? Нет, не такого,
чтобы можно было бы показать, что это возможно, а чтобы воистину
захватило дух от красоты решения, загорелись глаза от скрытых
перспектив, после чего остается только сказать себе, что вот
это вот, это самое сделать по-другому, также изящно и эффектно
просто невозможно.</p>
</body>
</html>
В данном примере первая строка выделяется
красным цветом и курсивным начертанием. Обратите внимание,
что при изменении ширины окна браузера, стиль первой строки
остается постоянным, независимо от числа входящих в нее слов.
|
