|
Plati.ru - Магазин цифровых товаров: пин-коды для игр, интернета и IP-телефонии, электронные книги, программное обеспечение, красивые номера ICQ и многое другое. Зайди и убедись сам! |
Псевдо-элементы
Псевдо-элементы используются для добавления особых эффектов некоторым селекторам.
Синтаксис
Синтаксис псевдо-элементов выглядит так:
селектор:псевдо-элемент {свойство:значение;}
Кроме того, вы можете использовать CSS классы вместе с псевдо-элементами:
селектор.элемент:псевдо-класс {свойство:значение;}
Псевдо-элемент :first-line
Псевдо-элемент first-line используется для применения стилей к первой строке текста.
В следующем примере вы сами убедитесь в том, что браузер отформатирует первую строку параграфа в соотвествии со стилем псевдо-элемента first-line (окрасит текст первой строки в красный цвет и преобразует буквы в уменьшенные заглавные):
Заметка: псевдо-элемент first-line можно применять только к блочным элементам.
Заметка: псевдо-элемент first-line может воздействовать на следующие свойства:
- свойства шрифта
- цвет
- цвет фона
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
Псевдо-элемент :first-letter
Псевдо-элемент :first-letter применяется к первой букве элемента:
Заметка: псевдо-элемент "first-letter" действует только на блочные элементы.
Заметка: с помощью псевдо-элемента "first-letter" можно воздействовать на следующие свойства:
- шрифт
- цвет
- цвет фона
- margin
- padding
- border
- text-decoration
- vertical-align (только если значение "float" равно "none")
- text-transform
- line-height
- float
- clear
Псевдо-элементы и классы CSS
Псевдо-элементы можно комбинировать с классами CSS:
p.article:first-letter {color:#ff0000;}
<p class="article">Параграф в статье</p>
В результате данного примера, во всех параграфах с классом "article", первая буква будет красной.
Комбинирование псевдо-элементов
Несколько псевдо-элементов можно комбинировать.
В следующем примере первая буква параграфа будет красного цвета и увеличенного размера. Кроме того, первая строка текста будет синего цвета, буквы трансформированы в уменьшенные заглавные:
Пример
p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}
Псевдо-элемент :before
Псевдо-элемент ":before" используется для вставки какого-либо содержимого перед содержимым элемента.
В примере ниже мы покажем вставку изображения перед каждым элементом <h1>:
Псевдо-элемент :after
В противоположность псевдо-элементу ":before" псевдо-элемент ":after" используется для вставки какого-либо содержимого после содержимого элемента.
Давайте посмотрим, как можно вставить изображение после содержимого элемента <h1>:
Псевдо-элементы — справка CSS
Число в столбце "CSS" указывает на то, в какой версии CSS появилось соответствующее свойство (CSS1 или CSS2).
| Название | Описание | CSS |
|---|---|---|
| :after | Добавление содержимого после элемента | 2 |
| :before | Добавление содержимого до элемента | 2 |
| :first-letter | Стилизация первой буквы | 1 |
| :first-line | Стилизация первой строки | 1 |
