Здравствуйте! Записался на ваш курс, но не понимаю как произвести оплату. Надо ли писать заявление и, если да, то куда отправлять? как я получу диплом о профессиональной переподготовке? |
Псевдо-элементы CSS
Эти псевдо-элементы используются для добавления специальных эффектов в некоторые селекторы.
Примеры:
- В примере показано, как добавить специальные эффекты к первой букве текста.
<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>
Синтаксис псевдо-элементов:
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".
Примечания:
- Псевдо-элемент "first-line" можно использовать только с элементами уровня блока.
- Следующие параметры применимы в псевдо-элементе "first-line":
Псевдо-элемент :first-letter
Данный псевдо-элемент используется для добавления специального стиля первой букве текста в селекторе :
div {font-size: 20pt} div:first-letter {font-size: 150%; float: right} <div>Первое слово имеет специальный стиль</div>
Примечания:
- Псевдо-элемент "first-letter" может использоваться только с элементами блочного уровня.
- Следующие параметры применимы в псевдо-элементе "first-letter":
Псевдо-элементы и классы 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 |