Разделение абзацев отступом первой строки

Разделение абзацев отступом первой строки

Буквица - ещё один эффект, применяемый для визуального выделения начала абзаца. В CSS он может быть достигнут путём применения специфического стиля к первой букве абзаца.

Первой букве абзаца соответствует селектор псевдоэлемента p:first-letter. Для этого псевдоэлемента в данном примере назначена высота 2em и красный полужирный шрифт.

Листинг 1.2. Каскадный стиль Упражнение. Замените цвет текста (color) на чёрный (black) в стиле абзаца. Сравните трудоёмкость этого изменения с предыдущим упражнением.

Листинг 1.2. Каскадный стиль Упражнение. Замените цвет текста (color) на чёрный (black) в стиле абзаца. Сравните трудоёмкость этого изменения с предыдущим упражнением. <!--DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"--> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <style type="text/css"> p { color: Blue; font-family: Verdana; font-size: 14pt; background: #B9FFCF; } </style> </head> <body> <p> Ещё несколько абзацев текста синего цвета, написанный шрифтом гарнитуры Verdana кеглем 14 пунктов на светло-зелёном фоне. </p> <p> На этот раз стиль абзацев определён при помощи правила CSS, применённого к элементу p. </p> <p> Поэтому все абзацы выглядят одинаково - при существенно меньшем количестве работы по написанию и, главное, переделке стилей.</p> </body> </html>

Упражнение. Замените цвет текста (color) на чёрный (black) в каждом абзаце примера.

 

<!--DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"--> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> </head> <body> <p style="black: Blue; font-family: Verdana; font-size: 14pt; background: #00000;"> Несколько абзацев текста синего цвета, написанный шрифтом гарнитуры Verdana кеглем 14 пунктов на светло-зелёном фоне. </p> <p style="black: Blue; font-family: Verdana; font-size: 14pt; background: #00000; "> Стиль всех абзацев одинаковый. </p> <p style="black: Blue; font-family: Verdana; font-size: 14pt; background: #00000;"> Однако встроенные стили приходится повторять для каждого из них. </p> </body> </html>