Css first letter: ::first-letter — CSS: Cascading Style Sheets

Leave a Comment / Css / By /

::first-letter ⚡️ HTML и CSS с примерами кода

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

Псевдо-элементы
  • ::after
  • ::backdrop
  • ::before
  • ::cue
  • ::first-letter
  • ::first-line
  • ::grammar-error
  • ::marker
  • ::part()
  • ::placeholder
  • ::selection
  • ::slotted()
  • ::spelling-error

Синтаксис

/* Selects the first letter of a <p> */
p::first-letter {
  font-size: 130%;
}

Значения

Первая буква элемента не всегда тривиальна для идентификации:

  • Пунктуация, которая предшествует или сразу следует за первой буквой, включается в псевдоэлемент. Пунктуация включает любой символ Юникода, определенный в открытии (Ps), закрытии (Pe), начальной кавычки (Pi), финальной кавычки (Pf) и других классах пунктуации (Po).
  • На некоторых языках есть орграфы, которые всегда капитализируются вместе, как IJ на голландском языке. В этих случаях обе буквы орграфа должны быть сопоставлены псевдоэлементом ::first-letter (это плохо поддерживается браузерами).
  • Комбинация псевдо-элемента ::before и свойства content может вводить некоторый текст в начале элемента. В этом случае ::first-letter будет соответствовать первой букве этого сгенерированного контента.

Только малый поднабор свойств CSS можно использовать с псевдоэлементом ::first-letter:

  • Свойства шрифта: font, font-style, font-feature-settings, font-kerning, font-language-override, font-stretch, font-synthesis, font-variant,
    font-variant-alternates    , font-variant-caps, font-variant-east-asian, font-variant-ligatures, font-variant-numeric, font-variant-position, font-weight, font-size, font-size-adjust, line-height и font-family
  • Свойства фона: background, background-color, background-image, background-clip, background-origin, background-position, background-repeat, background-size, background-attachment и background-blend-mode
  • Свойства отступов: margin, margin-top, margin-right, margin-bottom, margin-left
  • Свойства полей: padding, padding-top, padding-right, padding-bottom, padding-left
  • Свойства рамок: border, border-style, border-color, border-width, border-radius, border-image
  • Цвет 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

Спецификации

  • CSS Pseudo-Elements Level 4
  • CSS Text Decoration Module Level 3
  • Selectors Level 3
  • CSS Level 2 (Revision 1)
  • CSS Level 1

Поддержка браузерами

Can I Use css-first-letter? Data on support for the css-first-letter feature across the major browsers from caniuse.

com.

Пример

HTMLCSSРезультат

<p>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
  eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
  voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita
  kasd gubergren, no sea takimata sanctus est.
</p>
<p>
  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
  consequat.
</p>
<p>
  Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
  lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure
  dolor in hendrerit in vulputate velit esse molestie consequat.
</p>
<p>-The beginning of a special punctuation mark.</p>
<p>_The beginning of a special punctuation mark.</p>
<p>"The beginning of a special punctuation mark.</p>
<p>'The beginning of a special punctuation mark.</p>
<p>*The beginning of a special punctuation mark.
 
 </p>
<p>#The beginning of a special punctuation mark.</p>
<p>「特殊的汉字标点符号开头。</p>
<p>《特殊的汉字标点符号开头。</p>
<p>“特殊的汉字标点符号开头。</p>

p::first-letter {
  color: red;
  font-size: 130%;
}

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

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

Синтаксис

Селектор::first-letter { ... }
Синтаксис
ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>first-letter</title> <style> p { font-family: Arial, Helvetica, sans-serif; /* Гарнитура шрифта основного текста */ font-size: 0. 9em; /* Размер шрифта */ } p::first-letter { font-family: «Times New Roman», Times, serif; /* Гарнитура шрифта первой буквы */ font-size: 2em; /* Размер шрифта первого символа */ color: red; /* Красный цвет текста */ } </style> </head> <body> <p>Луч фонарика высветил старые скрипучие ступени, по которым не далее как пять минут назад в дом поднялся Паша. Оля осторожно приоткрыла дверь и посветила внутрь дома. Луч света, словно нехотя, пробивался сквозь тугую завесу из мрака и пыли. </p> <p>Взгляд Оли опустился на пол, и она вскрикнула. В пустом помещении никого не было, и лишь на полу валялась порванная туфля Паши.</p> </body> </html>

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

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

Примечание

В CSS3 псевдоэлементы стали обозначаться двумя двоеточиями, чтобы синтаксис отличался от псевдоклассов. В CSS2 они обозначаются одним двоеточием. Браузеры, как правило, понимают оба синтаксиса.

Спецификация

СпецификацияСтатус
CSS Pseudo-Elements Level 4Рабочий проект
CSS Text Decoration Level 3Возможная рекомендация
Selectors Level 3Рекомендация
CSS Level 2 (Revision 1)Рекомендация
CSS Level 1Рекомендация
Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

 
:first-letter5.51213.511
::first-letter9121711
 
:first-letter1141
::first-letter1171
Браузеры

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

Псевдоэлементы Текст и шрифт

См. также

  • Буквица
  • Псевдоэлементы

Практика

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

::first-letter — CSS: каскадные таблицы стилей

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

Первую букву элемента не всегда легко идентифицировать:

  • Пунктуация, которая предшествует первой букве или непосредственно следует за ней, включается в соответствие. Пунктуация включает в себя любой символ Unicode, определенный в открыть (Ps), закрыть (Pe), начальную кавычку (Pi), окончательную кавычку (Pf) и другие классы пунктуации (Po).
  • В некоторых языках диграфы всегда пишутся с заглавной буквы, например IJ в голландском языке. В этих случаях обе буквы орграфа должны соответствовать псевдоэлементу ::first-letter .
  • Комбинация псевдоэлемента ::before и свойства content может вставить некоторый текст в начало элемента. В таком случае ::first-letter будет соответствовать первой букве этого сгенерированного содержимого.

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

Браузер не поддерживает такие диграфы, как IJ на голландском языке. Проверьте таблицу совместимости ниже, чтобы увидеть текущее состояние поддержки.

С псевдоэлементом ::first-letter можно использовать только небольшое подмножество свойств CSS:

  • Все свойства шрифта: font , font-style , font-feature-settings , шрифт-кернинг , шрифт-язык-переопределение , шрифт-растяжение , шрифт-синтез , шрифт-вариант , шрифт-вариант-альтернативы , шрифт-вариант -caps , шрифт -вариант восточноазиатский , font-variant-ligatures , font-variant-numeric , font-variant-position , font-weight , font-size , font-size-adjust , line-he номер и семейство шрифтов
  • Все свойства фона: background , background-color , background-image , background-clip , background-origin , background-position , background-rep съесть , background-size , background-attachment и background-blend-mode
  • Все свойства поля: поле , поле-верх , поле-право , поле-нижний , поле-лево
  • Все свойства заполнения: padding , padding-top , padding-right , padding-bottom , padding-left
  • Все свойства границы: сокращение border , border-style , border-color , border-width , border-radius , border-image и свойства longhands
  • Цвет свойство
  • text-decoration , text-shadow , text-transform , letter-spacing , word-spacing (при необходимости), line-height , 9 0004 цвет текста-декорации , строка оформления текста , text-decoration-style , box-shadow , float , vertical-align (только если float равно none ) Свойства CSS
 :: первая буква {
  /* . .. */
}

Простая буквица

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

.

HTML 
 
Мой заголовок
 


  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
  eirmod tempor invidunt ut Labore et dolore magna aliquyam erat, sed diam
  сладострастие. At vero eos et accusam et justo duo dolores et ea rebum. клитор
  kasd gubergren, no sea takimata Santus est.




  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
  вытекать
УСБ 
 р {
  ширина: 500 пикселей;
  высота строки: 1,5;
}
h3 + p:: первая буква {
  белый цвет;
  цвет фона: черный;
  радиус границы: 2px;
  box-shadow: 3px 3px 0 красный;
  размер шрифта: 250%;
  отступ: 6px 3px;
  поле справа: 6px;
  плыть налево;
}
Результат

Влияние на специальные знаки препинания и нелатинские символы

Этот пример иллюстрирует влияние ::first-letter на специальные знаки препинания и нелатинские символы.

HTML 
 

  Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
  вытекать



-Начало специального знака препинания.


_Начало специального знака препинания.


"Начало специального знака препинания.


'Начало специального знака препинания.


*Начало специального знака препинания.


#Начало специального знака препинания.


「特殊的汉字标点符号开头。


《特殊的汉字标点符号开头。


"特殊的汉字标点符号开头。
CSS 
 p::first-letter {
  красный цвет;
  размер шрифта: 150%;
}
Результат
Спецификация
Модуль псевдоэлементов CSS, уровень 4
# first-letter-pseudo

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

  • :: первая линия

Обнаружили проблему с содержанием этой страницы?

  • Отредактируйте страницу на GitHub.
  • Сообщить о проблеме с содержимым.
  • Посмотреть исходный код на GitHub.

Хотите принять участие?

Узнайте, как внести свой вклад.

Последний раз эта страница была изменена участниками MDN.

CSS ::Селектор по первой букве

❮ Предыдущий Справочник по селекторам CSS Далее ❯


Пример

Выберите и настройте стиль первой буквы каждого элемента

:

p::первая буква {
  размер шрифта: 200 %;
цвет: #8A2BE2;
}

Попробуйте сами »

Определение и использование

Селектор ::first-letter используется для добавления стиля к первой букве указанного селектора.

Примечание: Следующие свойства могут использоваться с ::first-letter: 

  • свойства шрифта
  • свойства цвета
  • свойства фона
  • маржинальные свойства
  • свойства заполнения
  • пограничные свойства
  • текстовое украшение
  • вертикальное выравнивание (только если float равно ‘none’)
  • преобразование текста
  • высота строки
  • поплавок
  • прозрачный

Примечание: Селектор ::first-letter можно использовать только с блочными элементами.

Версия: CSS1

Поддержка браузера

Числа в таблице указывают первую версию браузера, которая полностью поддерживает селектор.

Селектор
:: первая буква 1,0 9,0 1,0 1,0 7,0

Синтаксис CSS

:: first-letter {
  объявления css ;
} Демо

Связанные страницы

Учебник по CSS: Псевдоэлементы CSS

❮ Предыдущий Справочник по селекторам CSS Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебник по HTML
Учебник по CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3. CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery
9000 7

Лучшие ссылки
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Лучшие примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

ФОРУМ | О

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *