/css/pseudo-element_first-letter:> Псевдоэлемент первого символа_
Псевдоэлемент :first-letter (::first-letter)
Синтаксис
CSS 1‒2.2
CSS 3
[селектор]:first-letter { свойства }
Описание
Псевдоэлемент :first-letter
используется для создания «начальных заглавных» символов (букв, чисел) и «буквиц» в блочных элементах. Для форматирования первого символа блока браузер должен выбрать первый символ первой строки блока (даже если первый символ текста находится в дочернем элементе), если ему не предшествует любое другое содержимое (например, изображения или встроенные таблицы) в этой строке и отформатировать его в соответствии с указанными свойствами.
Примечания
- Символы пунктуации (то есть символы, определённые в Unicode в «открывающих» (Ps), «закрывающих» (Pe), «начальных» (Pi), «конечных» (Pf) и «других» (Po) классах пунктуации), находящиеся рядом с первой буквой блока также должны быть включены веб-браузером в пседоэлемент.
- В некоторых языках могут присутствовать специальные правила обращения с определёнными комбинациями букв. Например, в голландском если в начале слова встречается сочетание букв «ij», то это сочетание должно рассматриваться веб-браузером как одна первая буква.
- Если элемент имеет элементы «
:before
» или «:after
», то действие «::first-letter
» распространяется на первую букву этих элементов. - Псевдоэлемент ведёт себя как встроенный элемент, если ему задано свойство «
float: none
», в противном случае он ведёт себя как плавающий элемент.
Условия использования
«:first-letter
» может применяться к следующим блочным контейнерам:
block
;list-item
;table-cell
;table-caption
;inline-block
.
При этом первая буква ячейки таблицы или встроенного блока не может быть первой буквой родительского элемента.
Свойства, применяемые к псевдоэлементу «:first-letter
»:
- свойства «
font
»; - свойства «
margin
»; - свойства «
padding
»; - свойства «
border
»; - свойства «
color
»; - свойства «
background
». - «
text-decoration
»; - «
text-transform
»; - «
letter-spacing
» (начиная с CSS 2); - «
word-spacing
» (начиная с CSS 2); - «
line-height
»; - «
float
»; - «
clear
» (в CSS1); - «
vertical-align
» (только если «float
» имеет значение «none
»);
Поддержка браузерами
Chrome
Поддерж.
Firefox
Поддерж.
Opera
Поддерж.
Maxthon
Поддерж.
IExplorer
Поддерж.
Safari
Поддерж.
iOS
Поддерж.
Android
Поддерж.
Спецификация
Пример использования
Листинг кода
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Псевдоэлемент :first-letter</title>
<style type="text/css">
txtBox {
font-size: 12pt;
line-height: 1.2;
}
.txtBox:first-letter {
margin-top: -15px;
background-color: #ffeeaa;
color: red;
font-size: 320%;
font-weight: bold;
float: left;
}
</style>
</head>
<body>
<h1>Отрывок из сказки «Теремок»</h1>
<div class="txtBox"><p>Стоит в поле теремок. Бежит мимо мышка-норушка. Увидела теремок, остановилась и спрашивает:</p>
<p>— Терем-теремок! Кто в тереме живет? Никто не отзывается. Вошла мышка в теремок и стала там жить.</p>
</div>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Псевдоэлемент :first-letter</title>
<style type="text/css">
txtBox {
font-size: 12pt;
line-height: 1.2;
}
.txtBox:first-letter {
margin-top: -15px;
background-color: #ffeeaa;
color: red;
font-size: 320%;
font-weight: bold;
float: left;
}
</style>
</head>
<body>
<h1>Отрывок из сказки «Теремок»</h1>
<div class="txtBox"><p>Стоит в поле теремок. Бежит мимо мышка-норушка. Увидела теремок, остановилась и спрашивает:</p>
<p>— Терем-теремок! Кто в тереме живет? Никто не отзывается. Вошла мышка в теремок и стала там жить.</p>
</div>
</body>
</html>
Псевдоэлемент :first-letter