УРОКИ CSS CSS3 ПРИМЕРЫ CSS СПРАВОЧНИК CSS

CSS Урок 23 Псевдо Элементы

« Назад Далее »

CSS псевдо-элементы используются, чтобы добавить специальные эффекты к некоторым селекторам.

Синтаксис

Синтаксис псевдо-элементов:

Селектор:псевдо-элемент {свойство:значение;}

CSS классы также могут использоваться с псевдо-элементами:

селектор.класс:псевдо-элемент {свойство:значение;}

Псевдо-элемент :first-line

Псевдо-элемент "first-line" используется для добавления специального стиля к первой строке текста.

В следующем примере браузер форматирует первую линию текста в элементе p в соответствии со стилем в псевдо-элементе "first-line" (место, где браузер делает перенос строки, зависит от размера окна браузера):

Пример

p:first-line
{
color:#ff0000;
font-variant:small-caps;
}

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает

Замечание: Псевдо-элемент "first-line" может использоваться только с элементами блочного уровня.

Замечание: Следующие свойства применяются к псевдо-элементу "first-line":

  • свойства шрифта
  • свойства цвета
  • свойства фона
  • расстояние между словами (word-spacing)
  • расстояние между буквами (letter-spacing)
  • декорация текста (text-decoration)
  • вертикальное выравнивание (vertical-align)
  • трансформация текста (text-transform)
  • высота строки (line-height)
  • очистить (clear)

Псевдо-элемент :first-letter

Псевдо элемент "first-letter" используется для добавления специального стиля к первой букве текста:

Пример

p:first-letter
{
color:#ff0000;
font-size:xx-large;
}

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает

Замечание: Псевдо-элемент "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>

Пример выше отобразит первую букву во всех параграфах с классом class="article", красным цветом.

Комбинирование Псевдо-элементов

Несколько псевдо-элементов также могут комбинироваться.

В следующем примере, первая буква параграфа будет красной, с размером шрифта xx-large. Оставшаяся часть первой строки будет голубой, с видом шрифта small-caps. Остаток параграфа будет с шрифтом и цветом по умочанию:

Пример

p:first-letter
{
color:#ff0000;
font-size:xx-large;
}
p:first-line
{
color:#0000ff;
font-variant:small-caps;
}

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает

CSS Псевдо-элемент :before

Псевдо элемент ":before" может использоваться для вставки некоторого контента перед основным содержанием элемента.

Следующий пример вставляет изображение перед каждым элементом <h1>:

Пример

h1:before {content:url(smiley.gif);}

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает

CSS Псевдо-элемент :after

Псевдо-элемент ":after" может использоваться для вставки некоторого контента после основного содержания элемента.

Следующий пример вставляет изображение после каждого элемента <h1>:

Пример

h1:after {content:url(smiley.gif);}

Попробуйте сами »
Щелкните на кнопке "Попробуйте сами" чтобы увидеть как это работает

Все CSS Псевдо-Классы/Элементы

Селектор Пример Описание примера
:link a:link Выбирает все непосещенные ссылки
:visited a:visited Выбирает все посещенные ссылки
:active a:active Активная ссылка (на которой нажата кнопка мыши)
:hover a:hover Ссылка, над которой находится указатель мыши
:focus input:focus Выбирает элемент input, который имеет фокус ввода
:first-letter p:first-letter Выбирает первую букву каждого элемента <p>
:first-line p:first-line Выбирает первую строку каждого элемента <p>
:first-child p:first-child Выбирает каждый элемент <p>, который является первым дочерним по отношению к своему родительскому элементу
:before p:before Вставить содержимое до каждого элемента <p>
:after p:after Вставить содержимое после каждого элемента <p>
:lang(language) p:lang(it) Выбирает каждый элемент <p> со значением атрибута lang, начинающимся с "it"



« Назад Далее »



© 2011 - 2022 Уроки CSS