Брошюры онлайн урок.


# Кросс-браузерный способ (дополнительная разметка)

Just завершает первый символ абзаца в промежутке, а затем нацеливает диапазон с CSS и стилем.

<p>
<span class="firstcharacter">L</span> orem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Aliquam pharetra libero enim. Donec et suscipit massa. Donec dui odio, dignissim non sodales et, tincidunt a sapien. Phasellus elit nibh, adipiscing sed blandit vel, interdum et arcu.
</p>

.firstcharacter {
color: #903;
float: left;
font-family: Georgia;
font-size: 75px;
line-height: 60px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
}

# путь CSS3 (без дополнительной разметки)

Перенесите первый символ первого абзаца с помощью селекторов псевдокласса. Никакой дополнительной разметки не требуется, но не IE & lt; 9.

<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tristique lobortis orci ac lacinia. Fusce eu purus eget diam vehicula auctor nec eu elit. Morbi consequat facilisis orci vel malesuada. Donec ultrices molestie sollicitudin. Aliquam pharetra libero enim. Donec et suscipit massa. Donec dui odio, dignissim non sodales et, tincidunt a sapien. Phasellus elit nibh, adipiscing sed blandit vel, interdum et arcu.
</p>

p:first-child:first-letter {
color: #903;
float: left;
font-family: Georgia;
font-size: 75px;
line-height: 60px;
padding-top: 4px;
padding-right: 8px;
padding-left: 3px;
}

# начальная буквапуть

Использование начальной буквы для создания обводки

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

p:first-child:first-letter {
color: #903;
font-family: Georgia;
initial-letter: 2;
}

Эти данные поддержки браузера от Caniuse , который имеет более подробную информацию. Число указывает, что браузер поддерживает эту функцию в этой версии и выше.

НетiOS Safari
НетНетНет