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

Leave a Comment / Css / By /

::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 by MDN contributors.

Как сделать первую букву в статье большой автоматически. Полезный CSS3

Опубликовано: 11.08.2012