Категория > Введение в CSS > Псевдоэлементы - «CSS»

Псевдоэлементы - «CSS»


17-03-2016, 18:13. Автор: Jones

Псевдоэлементы позволяют задать стиль элементов не определённых в дереве элементов документа, а также генерировать содержимое, которого нет
в исходном коде текста.


Синтаксис использования псевдоэлементов следующий.


Селектор:Псевдоэлемент { Описание правил стиля }


Вначале следует имя селектора, затем пишется двоеточие, после которого идёт
имя псевдоэлемента. Каждый псевдоэлемент может применяться только к одному селектору,
если требуется установить сразу несколько псевдоэлементов для одного селектора,
правила стиля должны добавляться к ним по отдельности, как показано ниже.


.foo:first-letter { color: red }

.foo:first-line {font-style: italic}


Псевдоэлементы не могут применяться к внутренним стилям, только к таблице связанных
или глобальных стилей.


Далее перечислены все псевдоэлементы, их описание и свойства.


:after


Применяется для вставки назначенного контента после содержимого элемента. Этот псевдоэлемент
работает совместно со стилевым свойством content,
которое определяет содержимое для вставки. В примере 16.1 показано использование
псевдоэлемента :after для добавления текста в конец
абзаца.


Пример 16.1. Применение :after


HTML5CSS 2.1IE 7IE 8+CrOpSaFx


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Псевдоэлементы</title>
<style>
P.new:after {
content: " - Новьё!"; /* Добавляем после текста абзаца */
}
</style>
</head>
<body>
<p class="new">Ловля льва в пустыне с помощью метода золотого сечения.</p>
<p>Метод ловли льва простым перебором.</p>
</body>
</html>


Результат примера показан на рис. 16.1.



Рис. 16.1. Добавление текста к абзацу с помощью :after


В данном примере к содержимому абзаца с классом new добавляется дополнительное слово, которое выступает значением свойства content.


Псевдоэлементы :after и :before,
а также стилевое свойство content не поддерживаются
браузером Internet Explorer до седьмой версии включительно.


:before


По своему действию :before аналогичен псевдоэлементу :after, но вставляет контент до содержимого элемента. В примере 16.2
показано добавление маркеров своего типа к элементам списка посредством скрытия
стандартных маркеров и применения псевдоэлемента :before.


Пример 16.2. Использование :before


HTML5CSS 2.1IE 7IE 8+CrOpSaFx 4


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Псевдоэлементы</title>
<style>
UL {
padding-left: 0; /* Убираем отступ слева */
list-style-type: none; /* Прячем маркеры списка */
}
LI:before {
content: "20aa "; /* Добавляем перед элементом списка символ в юникоде */
}
</style>
</head>
<body>
<ul>
<li>Чебурашка</li>
<li>Крокодил Гена</li>
<li>Шапокляк</li>
<li>Крыса Лариса</li>
</ul>
</body>
</html>

Результат примера показан ниже (рис. 16.2).



Рис. 16.2. Изменение вида маркеров с помощью :before


В данном примере псевдоэлемент :before устанавливается
для селектора LI, определяющего элементы списка. Добавление
желаемых символов происходит путём задания значения свойства content.
Обратите внимание, что в качестве аргумента не обязательно выступает текст,
могут применяться также символы юникода.


И :after и :before дают результат только для тех элементов, у которых имеется содержимое, поэтому добавление к селектору thumb или input ничего не выведет.


:first-letter


Определяет стиль первого символа в тексте элемента, к которому добавляется.
Это позволяет создавать в тексте буквицу и выступающий инициал.


Буквица представляет собой увеличенную первую букву, базовая линия которой
ниже на одну или несколько строк базовой линии основного текста.

Выступающий инициал — увеличенная прописная буква, базовая линия которой совпадает
с базовой линией основного текста.


Рассмотрим пример создания выступающего инициала. Для этого требуется добавить
к селектору P псевдоэлемент :first-letter и установить желаемый стиль инициала. В частности, увеличить размер текста и
поменять цвет текста (пример 16.3).


Пример 16.3. Использование :first-letter


HTML5CSS 2.1IECrOpSaFx


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Псевдоэлементы</title>
<style>
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>

Результат примера показан ниже (рис. 16.3).



Рис. 16.3. Создание выступающего инициала


В данном примере изменяется шрифт, размер и цвет первой буквы каждого абзаца
текста.


:first-line


Определяет стиль первой строки блочного текста. Длина этой строки зависит от
многих факторов, таких как используемый шрифт, размер окна браузера, ширина
блока, языка и т.д.


К псевдоэлементу :first-line могут
применяться не все стилевые свойства. Допустимо использовать свойства, относящиеся
к шрифту, изменению цвет текста и фона, а также: clear, line-height, letter-spacing, text-decoration, text-transform, vertical-align и word-spacing.


В примере 16.4 показано использование псевдоэлемента :first-line применительно к абзацу текста.


Пример 16.4. Выделение первой строки текста


HTML5CSS 2.1IECrOpSaFx


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Псевдоэлементы</title>
<style>
P:first-line {
color: red; /* Красный цвет текста */
font-style: italic; /* Курсивное начертание */
}
</style>
</head>
<body>
<p>Интересно, а существует ли способ действительно практичного применения
свойства first-line? Нет, не такого, чтобы можно было бы показать, что это
возможно, а чтобы воистину захватило дух от красоты решения, загорелись глаза от
скрытых перспектив, после чего остается только сказать себе, что вот это вот, это
самое сделать по-другому, также изящно и эффектно просто невозможно.</p>
</body>
</html>

Результат примера показан на рис. 16.4.



Рис. 16.4. Результат применения псевдоэлемента :first-line


В данном примере первая строка выделяется красным цветом и курсивным начертанием.
Обратите внимание, что при изменении ширины окна браузера, стиль первой строки
остается постоянным, независимо от числа входящих в нее слов.



Вопросы для проверки


1. Какой псевдоэлемент позволяет добавить текст в начало предложения?



  1. :after

  2. :before

  3. :first-line

  4. :first-text

  5. :first-letter


2. Что делает следующий стиль?


OL LI:first-letter {

color: red;

}



  1. Изменяет цвет первой буквы элемента маркированного списка.

  2. Изменяет цвет первой буквы элемента нумерованного списка.

  3. Изменяет цвет первой строки в маркированном списке.

  4. Изменяет цвет первой строки в нумерованном списке.

  5. Изменяет цвет текста всего списка.


3. Какой селектор написан с ошибкой?



  1. p.new:before

  2. abbr:first-line

  3. p.new.back:after

  4. div:before:first-letter

  5. a:hover:before



Ответы


1. :before


2. Изменяет цвет первой буквы элемента нумерованного списка.


3. div:before:first-letter


Перейти обратно к новости