|
Здравствуйте! Записался на ваш курс, но не понимаю как произвести оплату. Надо ли писать заявление и, если да, то куда отправлять? как я получу диплом о профессиональной переподготовке? |
Инспектор
Вы можете этот курс.
Опубликован: 31.10.2006 | Уровень: для всех | Доступ: платный
Лекция 14:
Псевдо-элементы CSS
< Лекция 13 || Лекция 14 || Лекция 15 >
Аннотация: Рассматриваются методы создания специальных эффектов для селекторов.
Эти псевдо-элементы используются для добавления специальных эффектов в некоторые селекторы.
Примеры:
- В примере показано, как добавить специальные эффекты к первой букве текста.
<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 |
< Лекция 13 || Лекция 14 || Лекция 15 >
