Как выделить первую букву в css

Буквица

Буквица является художественным приемом оформления текста и представляет собой увеличенную первую букву, базовая линия которой ниже на одну или несколько строк базовой линии основного текста. Заметьте, что это не просто увеличенный символ, буквица не выступает над блоком текста, а является его частью. Чтобы выделить первую букву воспользуемся псевдоэлементом ::first-letter , он устанавливает стиль первого символа текста. Для этого добавим его к селектору p , как это показано в примере 1.

Пример 1. Создание буквицы

Результат данного примера показан на рис. 1. Для начала увеличиваем размер буквицы через свойство font-size и устанавливаем желаемые поля вокруг буквы. Чтобы происходило обтекание используем свойство float со значением left . Тогда первые буквы будут выравниваться по левому краю, а остальной текст обтекать их справа и снизу. Свойство float может затронуть и нижние абзацы текста и получится некрасиво, поэтому для каждого абзаца отменяем его действие через clear . Положение буквы по вертикали относительно остального текста можно регулировать с помощью line-height . Экспериментируйте со значениями и получите разные варианты буквиц.

Если убрать свойство float и margin-right в примере, то мы получим выступающий инициал (рис. 2) — так называется увеличенная первая буква предложения, базовая линия которой совпадает с базовой линией основного текста. В отличие от буквицы выступающий инициал располагается на одной линии с текстом.

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

См. также

• float
• float в CSS
• Влияние float
• Выравнивание картинок
• Описание float
• Подробнее о позиционировании
• Поток
• Примеры использования float
• Псевдоэлемент ::first-letter
• Псевдоэлементы

Псевдоэлемент :first-letter

Псевдоэлемент :first-letter определяет стиль первого символа в тексте элемента, к которому добавляется. К этому псевдоэлементу могут применяться только стилевые свойства, связанные со свойствами шрифта, полями, отступами, границами, цветом и фоном.

Синтаксис

Значения

HTML5 CSS2.1 CSS3 IE Cr Op Sa Fx

       
Луч фонарика высветил старые скрипучие ступени, по которым не далее как пять минут назад в дом поднялся Паша. Оля осторожно приоткрыла дверь и посветила внутрь дома. Луч света, словно нехотя, пробивался сквозь тугую завесу из мрака и пыли.
 
Взгляд Оли опустился на пол, и она вскрикнула. В пустом помещении никого не было, и лишь на полу валялась порванная туфля Паши.
  

Результат примера показан на рис. 1. В данном примере изменяется шрифт, размер и цвет первой буквы каждого абзаца текста.

Рис. 1. Результат использования псевдоэлемента :first-letter

Браузеры

Internet Explorer до версии 7 включительно, Firefox до версии 2.0 включительно игнорируют свойство letter-spacing , когда оно применяется к псевдоэлементу :first-letter .

CSS по теме

: : first — letter

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

Пример

Скопировать ссылку «Пример» Скопировано

Напишем код, выделяющий первую букву в цитате:

 blockquote::first-letter  font-size: 1.86rem; font-weight: 700; font-style: italic; letter-spacing: 0.12rem;> blockquote::first-letter  font-size: 1.86rem; font-weight: 700; font-style: italic; letter-spacing: 0.12rem; >    Скопировать Скопировано Не удалось скопировать   

Как пишется

Скопировать ссылку «Как пишется» Скопировано

Для псевдоэлемента сработает лишь небольшой набор CSS-свойств:

• Шорткат font и шрифтовые свойства, начинающиеся на font — ;
• Шорткат background и свойства фона, начинающиеся на background — ;
• Шорткат margin и внешние отступы, начинающиеся на margin — ;
• Шорткат padding и внутренние отступы, начинающиеся на padding — ;
• Шорткат border и свойства рамок, начинающиеся на border — ;
• цвет текста color ;
• текстовые свойства text — decoration , text — shadow , text — transform , letter — spacing , word — spacing , line — height , text — decoration — color , text — decoration — line , text — decoration — style , box — shadow , float , vertical — align .

Подсказки

Скопировать ссылку «Подсказки» Скопировано

�� Знаки препинания, которые предшествуют первой букве или непосредственно следуют за ней, попадают под : : first — letter . Как в примере выше, знак кавычки также имеет стили, заданные для первой буквы.

�� Если вы создаёте содержимое с помощью : : before и content , стили указанные в : : first — letter всё равно будут распространяться на первую букву.

text-transform

Управляет преобразованием текста элемента в заглавные или прописные символы. Когда значение отлично от none , регистр исходного текста будет изменен.

Синтаксис

text-transform: capitalize | lowercase | uppercase | none | inherit

Значения

capitalize Первый символ каждого слова в предложении будет заглавным. Остальные символы свой вид не меняют. lowercase Все символы текста становятся строчными (нижний регистр). uppercase Все символы текста становятся прописными (верхний регистр). none Не меняет регистр символов. inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

       
Lorem ipsum dolor sit amet
 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat. Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
  

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

Рис. 1. Применение свойства text-transform

Объектная модель

[window.]document.getElementById(» elementID «).style.textTransform

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .