CSS по шагам

Использование псевдоэлемента first-letter


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<style type="text/css">

P {

 font-family: Arial, Helvetica, sans-serif; /* Гарнитура шрифта основного текста */

 font-size: 90%; /* Размер шрифта */

 color: black /* Черный цвет текста */

}

P:first-letter {

 font-family: 'Times New Roman', Times, serif; /* Гарнитура шрифта первой буквы */

 font-size: 200%; /* Размер шрифта первого символа */

 color: red /* Красный цвет текста */

}

</style>

</head>

<body>

<p>Луч фонарика высветил старые скрипучие ступени, по которым не далее как пять минут назад в дом поднялся Паша. Оля осторожно приоткрыла дверь и посветила внутрь дома. Луч света, словно нехотя, пробивался сквозь тугую завесу из мрака и пыли. </p>

<p>Взгляд Оли опустился на пол, и она вскрикнула. В пустом помещении никого не было, и лишь на полу валялась порванная туфля Паши.</p>

</body>

</html>

Результат примера показан ниже.

DIV#ex4 P { font-family: Arial, Helvetica, sans-serif; font-size: 90% } DIV#ex4 P:first-letter { font-family: 'Times New Roman', Times, serif; font-size: 200%; color: red }

Луч фонарика высветил старые скрипучие ступени, по которым не далее как пять минут назад в дом поднялся Паша. Оля осторожно приоткрыла дверь и посветила внутрь дома. Луч света, словно нехотя, пробивался сквозь тугую завесу из мрака и пыли.

Взгляд Оли опустился на пол, и она вскрикнула. В пустом помещении никого не было, и лишь на полу валялась порванная туфля Паши.

В данном примере изменяется шрифт, размер и цвет первой буквы каждого абзаца текста.



Содержание раздела