Пример 1
Как стилизовать первую букву всех элементов <p>:
<html>
<head>
<meta charset="utf-8" />
<style>
p:first-letter { background-color:yellow; }
</style>
</head>
<body>
<h1>Добро пожаловать на мою домашнюю страницу</h1>
<div class="intro">
<h2 id="firstname">Меня зовут Дональд</h2>
<p id="hometown">Я живу в Дакбурге</p>
</div>
<p>Мой лучший друг Микки</p>
</body>
</html>
Определение и использование
Псевдо-элемент :first-letter добавляет стиль к первой букве определенного селектора.
Примечание: Следующие свойства применяются к псевдо-элементу :first-letter:
- свойства font
- свойства color
- свойства background
- word-spacing
- letter-spacing
- text-decoration
- vertical-align
- text-transform
- line-height
- clear
Поддержка браузеров
Селектор :first-letter поддерживается во всех ведущих браузерах.
Версия CSS
Селектор :first-letter впервые представлен в: CSS 1
Связанные страницы
Пособие по CSS: CSS Псевдо-элементы
Еще примеры
Псевдо-элементы можно комбинировать с другими селекторами CSS и/или свойствами:
Пример 2
Как стилизовать первую букву всех элементов <p> с id="hometown":<html>
<head>
<meta charset="utf-8" />
<style>
p#hometown:first-letter { background-color:yellow; }
</style>
</head>
<body>
<h1>Добро пожаловать на мою домашнюю страницу</h1>
<div class="intro">
<h2 id="firstname">Меня зовут Дональд</h2>
<p id="hometown">Я живу в Дакбурге</p>
</div>
<p>Мой лучший друг Микки</p>
</body>
</html>
Пример 3
:first-letter часто используется в колонках газет для отображения БОЛЬШОЙ первой буквы:<html>
<head>
<meta charset="utf-8" />
<style>
p:first-letter { font-size:40px; float:left; }
</style>
</head>
<body>
<h1>Ученые: слоны, живущие в саванне и лесах Африки - два разных вида</h1>
<p>Ученые установили, что африканские слоны на самом деле являются двумя разными видами, один из которых населяет саванны, а второй - леса, что предъявляет различные требования к мерам по их сохранению. Об этом сообщается в статье исследователей, опубликованной в журнале Current Biology.</p>
</body>
</html>
Была ли эта информация полезной?
