Site icon Vavik96

Выступающий инициал

Справочник свойств CSS

Справочник свойств CSS

Выступающим инициалом называется увеличенная первая буква предложения, базовая линия которой совпадает с базовой линией основного текста. В отличие от буквицы выступающий инициал располагается на одной линии с текстом, как показано на рис. 1.

Рис. 1. Вид выступающего инициала

Выделение буквы цветом и размером применяется для визуального отделения одного абзаца от другого и для привлечения внимания к тексту.

Для изменения вида первой буквы применяется псевдоэлемент first-letter, который через двоеточие добавляется к абзацу (пример 1).

Пример 1. Создание выступающего инициала

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Выступающий инициал</title>
  <style type="text/css">
   P.initial:first-letter {
    font-size: 20pt; /* Размер шрифта */
    color: #d3222a; /* Цвет буквы */
   }
  </style>
 </head>
 <body>
   <p class="initial">Одна дама как-то спросила Бернарда Шоу:</p>
   <p>— Скажите, сэр, как лучше писать, чтобы стать известным писателем, 
   хотя бы таким, как вы?</p>
   <p>— Писать надо слева направо, — ответил Шоу.</p>
 </body>
</html>

Результат данного примера показан на рис. 2.

Рис. 2. Использование выступающего инициала в тексте

Чтобы стиль применялся не ко всем абзацам, а только к определенным, в данном примере вводится класс initial, который с помощью параметра class добавляется к нужному тегу <P>.

webimg.ru

Exit mobile version