Css первая буква: Как сделать первую букву заглавной css

Содержание

::first-letter (:first-letter) — CSS | MDN

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

/* Стили для первой буквы элемента <p> */
p::first-letter {
  font-size: 130%;
}

Может быть непросто определить первую букву элемента:

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

Примечание: В CSS3 появилась запись ::first-letter (с двумя двоеточиями) для различения псевдоклассов и псевдоэлементов. Браузеры также поддерживают запись :first-letter, введённую в CSS2.

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

Все свойства, связанные с шрифтами: font, font-style, font-feature-settings (en-US), font-kerning (en-US), font-language-override (en-US), font-stretch (en-US), font-synthesis (en-US), font-variant (en-US), font-variant-alternates (en-US), font-variant-caps (en-US), font-variant-east-asian (en-US), font-variant-ligatures, font-variant-numeric, font-variant-position (en-US), font-weight, font-size , font-size-adjust (en-US), 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 (en-US), padding-right, padding-bottom (en-US), padding-left
Все свойства, связанные с рамкой: сокращения border, border-style (en-US), border-color (en-US), border-width, border-radius, border-image (en-US) и полные записи свойств
Свойства color (en-US)
Свойства text-decoration (en-US), text-shadow, text-transform (en-US), letter-spacing , word-spacing (when appropriate), line-height, text-decoration-color (en-US), text-decoration-line (en-US), text-decoration-style (en-US), box-shadow, float, vertical-align (только если float равен none)

Error: could not find syntax for this item

Сделаем первую букву каждого абзаца красной и большой.

HTML

<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>-Начало специального знака препинания.</p>
<p>_Начало специального знака препинания.</p>
<p>"Начало специального знака препинания.</p>
<p>'Начало специального знака препинания.</p>
<p>*Начало специального знака препинания.</p>
<p>#Начало специального знака препинания.</p>
<p>「特殊的汉字标点符号开头。</p>
<p>《特殊的汉字标点符号开头。</p>
<p>“特殊的汉字标点符号开头。</p>

CSS

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

Результат

Specification
CSS Pseudo-Elements Module Level 4 # first-letter-pseudo

BCD tables only load in the browser with JavaScript enabled.

Enable JavaScript to view data.

::first-line

Found a content problem with this page?

Edit the page on GitHub.
Report the content issue.
View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on 7 нояб. 2022 г. by MDN contributors.

Псевдоэлемент ::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-letter	5. 5	12	1	3.5	1	1
::first-letter	9	12	1	7	1	1


:first-letter	1	1	4	1
::first-letter	1	1	7	1

Браузеры

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

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

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

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

См. также

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

Практика

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

::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.

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

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

Последний раз эта страница была изменена 21 февраля 2023 г. участниками 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 оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.

Css первая буква: Как сделать первую букву заглавной css

::first-letter (:first-letter) — CSS | MDN

HTML

CSS

Результат

Found a content problem with this page?

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

Синтаксис

Пример

Примечание

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

Браузеры

См. также

Практика

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

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

HTML

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

УСБ

Результат

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

HTML

CSS

Результат

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

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

Пример

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

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

Синтаксис CSS

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

ВЫБОР ЦВЕТА

Лучшие учебники

Лучшие ссылки

Лучшие примеры

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

Рубрики

Рубрики