Опубликован: 31.10.2006 | Уровень: для всех | Доступ: платный
Лекция 14:

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

< Лекция 13 || Лекция 14 || Лекция 15 >
Аннотация: Рассматриваются методы создания специальных эффектов для селекторов.
Ключевые слова: 'letter-spacing', 'text-transform'

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

Примеры:

  1. В примере показано, как добавить специальные эффекты к первой букве текста.
    <html>
    <head>
    <style type="text/css">
    h1:first-letter 
    {
    color: #008080;
    font-size: xx-large
    }
    </style>
    </head>
    
    <body>
    <h1>Заголовок</h1>
    </body>
    
    </html>
  2. В примере показано, как добавить специальные эффекты к первой строке текста.
    <html>
    <head>
    <style type="text/css">
    p:first-line 
    {
    color: #808000;
    font-variant: normal
    }
    </style>
    </head>
    
    <body>
    <p>
    Пример использования псевдо-элемента :first-line.<br>
    Следующая строка в параграфе.
    </p>
    </body>
    
    </html>

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

selector:pseudo-element {property: value}

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

selector.class:pseudo-element {property: value}

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

Данный псевдо-элемент используется для добавления специальных стилей к первой строке текста в селекторе:

div {font-size: 5pt}
div:first-line {color: #808000; font-variant: normal}
<div>Текст, продолжающийся на две или большее количество строк </div>

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

Примечания:

  1. Псевдо-элемент "first-line" можно использовать только с элементами уровня блока.
  2. Следующие параметры применимы в псевдо-элементе "first-line":
    • параметры шрифта
    • параметры цвета
    • параметры фона
    • word-spacing
    • letter-spacing
    • text-decoration
    • vertical-align
    • text-transform
    • line-height
    • clear

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

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

div {font-size: 20pt}
div:first-letter {font-size: 150%; float: right}
<div>Первое слово имеет специальный стиль</div>

Примечания:

  1. Псевдо-элемент "first-letter" может использоваться только с элементами блочного уровня.
  2. Следующие параметры применимы в псевдо-элементе "first-letter":
    • параметры шрифта
    • параметры цвета
    • параметры фона
    • параметры отступов
    • параметры полей
    • параметры границ
    • text-decoration
    • vertical-align (только если 'float' определен как 'none')
    • text-transform
    • line-height
    • float
    • clear

Псевдо-элементы и классы CSS

Псевдо-элементы можно объединять с классами CSS:

div.first:first-letter {color: #800000 }
<div class="first">Параграф статьи</div>

В примере выше первая буква всех элементов div, где class="first", будет красной.

Несколько псевдо-элементов

Несколько псевдо-элементов можно объединять:

div {font-size: 20pt}
div:first-letter {color: #808000; font-size: 150%}
div:first-line {color: #808080 }
<div>Текст текст текст</div>

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

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

Данный псевдо-элемент можно использовать для вставки некоторого содержимого перед элементом.

Следующий стиль будет воспроизводить некоторый звук перед каждым появлением элемента заголовка h5.

h5:before
{
content: url(song.wav)
}

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

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

Следующий стиль будет воспроизводить некоторый звук после каждого появления элемента заголовка h5.

h5:after
{
content: url(song.wav)
}

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

Данные параметры поддерживаются следующими браузерами: Internet Explorer, Firefox, Netscape.

Псевдо-элемент Назначение IE F N W3C
:first-letter Добавляет специальный стиль к первой букве текста 5 1 8 1
:first-line Добавляет специальный стиль к первой строке текста 5 1 8 1
:before Вставляет некоторое содержимое перед элементом 1.5 8 2
:after Вставляет некоторое содержимое после элемента 1.5 8 2
< Лекция 13 || Лекция 14 || Лекция 15 >
Федор Антонов
Федор Антонов

Здравствуйте!

Записался на ваш курс, но не понимаю как произвести оплату.

Надо ли писать заявление и, если да, то куда отправлять?

как я получу диплом о профессиональной переподготовке?

Илья Ардов
Илья Ардов

Добрый день!

Я записан на программу. Куда высылать договор и диплом?

Зарина Каримова
Зарина Каримова
Казахстан, Алматы, Гимназия им. Ахмета Байтурсынова №139, 2008
Akiyev Begench
Akiyev Begench
Беларусь, Полоцк, полоцкий государственный университет