Основы работы с CSS
         

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


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

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

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



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


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

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

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



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


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

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

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



В примере показано, как добавить


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


    </html>


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


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

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

Примечания:

    Псевдо-элемент "first-letter" может использоваться только с элементами блочного уровня. Следующие параметры применимы в псевдо-элементе "first-letter": параметры шрифтапараметры цвета параметры фона параметры отступовпараметры полей параметры границ text-decorationvertical-align (только если 'float' определен как 'none')text-transformline-heightfloatclear



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


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

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

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

Примечания:

    Псевдо-элемент "first-line" можно использовать только с элементами уровня блока. Следующие параметры применимы в псевдо-элементе "first-line": параметры шрифтапараметры цвета параметры фона word-spacingletter-spacingtext-decorationvertical-aligntext-transformline-heightclear



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


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

Псевдо-элементНазначениеIEFNW3C
:first-letterДобавляет специальный стиль к первой букве текста5181
:first-lineДобавляет специальный стиль к первой строке текста5181
:beforeВставляет некоторое содержимое перед элементом 1.582
:afterВставляет некоторое содержимое после элемента 1.582



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


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

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

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



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


selector:pseudo-element {property: value}

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

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