First letter css: Псевдоэлемент :first-letter | htmlbook.ru
Псевдоэлемент :first-letter | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | ||
| 6.0+ | 8.0+ | 1.0+ | 3.5+ | 1.0+ | 1.0+ | 3.0+ | 1.0+ | 1.0+ |
Краткая информация
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Псевдоэлемент :first-letter определяет стиль первого символа в тексте элемента, к которому добавляется. К этому псевдоэлементу могут применяться только стилевые свойства, связанные со свойствами шрифта, полями, отступами, границами, цветом и фоном.
Синтаксис
элемент:first-letter { … }
Значения
Нет.
Пример
HTML5CSS2.1CSS3IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>first-letter</title> <style> p { font-family: Arial, Helvetica, sans-serif; /* Гарнитура шрифта основного текста */ font-size: 90%; /* Размер шрифта */ } P:first-letter { font-family: "Times New Roman", Times, serif; /* Гарнитура шрифта первой буквы */ font-size: 200%; /* Размер шрифта первого символа */ color: red; /* Красный цвет текста */ } </style> </head> <body> <p>Луч фонарика высветил старые скрипучие ступени, по которым не далее как пять минут назад в дом поднялся Паша. Оля осторожно приоткрыла дверь и посветила внутрь дома. Луч света, словно нехотя, пробивался сквозь тугую завесу из мрака и пыли. </p> <p>Взгляд Оли опустился на пол, и она вскрикнула. В пустом помещении никого не было, и лишь на полу валялась порванная туфля Паши.</p> </body> </html>
Результат примера показан на рис. 1. В данном примере изменяется шрифт, размер и цвет первой буквы каждого абзаца текста.
Рис. 1. Результат использования псевдоэлемента :first-letter
Браузеры
Internet Explorer до версии 7 включительно, Firefox до версии 2.0 включительно игнорируют свойство letter-spacing, когда оно применяется к псевдоэлементу :first-letter.
::first-letter (:first-letter) — Веб-технологии для разработчиков
CSS псевдоэлемент ::first-letter применяет стили к первой букве первой строки блочного элемента, но только если нету другого предшествующего содержимого (такого как изображения или инлайн таблицы).
/* Стили для первой буквы элемента <p> */
p::first-letter {
font-size: 130%;
}Может быть непросто определить первую букву элемента:
- Пунктуация, которая предшествует или следует сразу за первой буквой, включается в селектор. Пунктуация включает любой символ Юникода, определённый в классах open (Ps), close (Pe), initial quote (Pi), final quote (Pf), and other punctuation (Po).
- В некоторых языках существуют диграфы, которые должны преобразовываться в верхний регистр вместе, например
::first-letter(это слабо поддерживается браузерами, смотрите таблицу совместимости ниже). - Комбинация псевдоэлемента
::beforeи свойстваcontentможет привести к добавлению некоторого текста в начало элемента. В этом случае псевдоэлементу::first-letterбудет соответствовать первая буква добавленного содержимого.
В CSS3 появилась запись ::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-weightfont-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-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(when appropriate),line-height,text-decoration-color,text-decoration-line,text-decoration-style,box-shadow,float,floatравенnone)
Синтаксис
/* CSS3 syntax */ ::first-letter /* CSS2 syntax */ :first-letter
Пример
Сделаем первую букву каждого абзаца красной и большой.
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%; }
Результат
Спецификации
Поддержка браузерами
Update compatibility data on GitHub| Компьютеры | Мобильные | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview | Chrome для Android | Firefox для Android | Opera для Android | Safari on iOS | Samsung Internet | |
::first-letter | Chrome Полная поддержка 1
| Edge Полная поддержка 12
| Firefox Полная поддержка 1
| IE Полная поддержка 9
| Opera Полная поддержка 7
| Safari Полная поддержка 1
| WebView Android Полная поддержка 37
| Chrome Android Полная поддержка 18
| Firefox Android Полная поддержка 4
| Opera Android Полная поддержка 10.1
| Safari iOS Полная поддержка 1
| Samsung Internet Android Полная поддержка 1.0
|
Support for the Dutch digraph IJ | Chrome Нет поддержки Нет | Edge Нет поддержки Нет | Firefox Нет поддержки Нет
| IE Нет поддержки Нет | Opera Нет поддержки Нет | Safari Нет поддержки Нет | WebView Android Нет поддержки Нет | Chrome Android Нет поддержки Нет | Firefox Android Нет поддержки Нет
| Opera Android Нет поддержки Нет | Safari iOS Нет поддержки Нет | Samsung Internet Android Нет поддержки Нет |
Легенда
- Полная поддержка
- Полная поддержка
- Нет поддержки
- Нет поддержки
- Смотрите замечания реализации.
- Смотрите замечания реализации.
- Использует нестандартное имя.
- Использует нестандартное имя.
См. также
Псевдоэлемент ::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 они обозначаются одним двоеточием. Браузеры, как правило, понимают оба синтаксиса.
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- 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 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — свойство полностью поддерживается браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 30.08.2017
Редакторы: Влад Мержевич
Псевдоэлемент ::first-letter | htmlbook.ru
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 7.0+ | 1.0+ | 1.5+ | 1.0+ | 1.0+ |
Краткая информация
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Псевдоэлемент ::first-letter определяет стиль первого символа в тексте элемента, к которому добавляется. К этому псевдоэлементу могут применяться только стилевые свойства, связанные со свойствами шрифта, полями, отступами, границами, цветом и фоном.
Синтаксис
элемент::first-letter { … }
Значения
Нет.
Пример
HTML5CSS2.1CSS3IECrOpSaFx
<!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
Браузеры
Браузер Internet Explorer до версии 9.0 работает только с нотацией :first-letter, описанной в спецификации CSS 2.1.
CSS ::first-letter | TuHub
Общие сведения
Псевдоэлемент ::first-letter не выберет первую букву у строчных элементов: то есть у тех элементов, у которых свойство display установлено в значение inline. Он работает только с элементами у которых свойство display установлено в значения block, inline-block, table-cell, table-caption, или list-item.
Если в элементе есть некоторое текстовое содержимое, добавленное в начало элемента с помощью псевдоэлемента :before и свойства content, то первая буква этого содержимого станет целевой буквой для псевдоэлемента ::first-letter.
Например, если в цитате есть содержимое добавленное с помощью следующего правила:
blockquote:before {
content: "Цитата: ";
}из селектора blockquote:before выберется буква «Ц» от слова «Цитата:», даже если внутри самой цитаты есть другой текст.
Знаки пунктуации, которые предшествуют или следуют за первой буквой, будут включены в ::first-letter.
Синтаксис псевдоэлемента
/* Старый синтаксис CSS2 */
p:first-letter {
/* Здесь содержимое и стили */
}
/* Новый синтаксис CSS3 */
p::first-letter {
/* Здесь содержимое и стили */
}Свойства используемые :first-letter для стилизации
Псевдоэлемент :first-letter может использовать для стилизации только определённые свойства:
- Свойства шрифтов: font, font-style, font-variant, font-weight, font-size, line-height, и font-family.
- text-decoration, text-transform, letter-spacing, word-spacing (при необходимости), float, vertical-align (только если у float значение
none), и color. - Свойства внешних отступов: margin, margin-top, margin-right, margin-bottom, и margin-left.
- Свойства внутренних отступов: padding, padding-top, padding-right, padding-bottom, и padding-left.
- Свойства границ: border, border-width, border-style, border-color, и соответствующие им свойства.
- Свойства фона: background, background-color, background-image, background-position, background-repeat, background-size, и background-attachment.
Поддержка браузерами
::first-letter CSS pseudo-element selector
Примечание
Наследование и специфика
Если элемент к которому применяется псевдоэлемент :first-letter является элементом списка (display: list-item), то оно применяется к первой букве после маркера. Браузеры могут игнорировать :first-letter применяемое на элементах списка со свойством list-style-position: inside.
В некоторых языках могут присутствовать определённые правила касающиеся обработки определённых комбинаций букв. В голландском, например, если комбинация букв «ij» находится в начале слова, то псевдоэлемент :first-letter будет рассматривать их как одну букву.
Псевдоэлемент ::first-line можно использовать для стилизации первой строки элемента. ::first-letter будет наследовать стили применяемые с помощью ::first-line. Если используются оба псевдоэлемента ::first-line и ::first-letter, то стили указанные в ::first-letter будут переопределять стили из ::first-line.
Разница между нотациями: (:) и (::)
Скорее всего вы встретите (или уже встречали) нотацию :first-letter, которая использует одно двоеточие вместо двух.
В CSS1 и CSS2 псевдоэлементы определялись с помощью одного двоеточия (:), также как и псевдоклассы (например :hover). В CSS3 для псевдоэлементов была добавлена нотация с двумя двоеточиями чтобы отличать их от псевдоклассов.
Все браузеры, которые поддерживают нотацию с двумя двоеточиями также поддерживают и нотацию с одним двоеточием. Однако, Internet Explorer 8 не поддерживает нотацию с двойным двоеточием. Поэтому если вам не нужна поддержка Internet Explorer 8, то можете использовать вариант с двумя двоеточиями и не беспокоится за поддержку браузерами.
Пример
Псевдоэлемент :first-letter | CSS справочник
CSS селекторыЗначение и применение
Псевдоэлемент ::first-letter позволяет создавать инициал (буквицу) — стилизовать начальный символ текстового блока. Такой метод часто можно встретить в печатных изданиях, например, в сказках.
Допустимые свойства, которые применяются с псевдоэлементом:
Обратите внимание, что в настоящее время используется синтаксис, который предусматривает двойное двоеточие перед псевдоэлементом. Не смотря на то, что браузеры поддерживают оба варианта, рекомендуется использовать синтаксис CSS 3:
/* синтаксис CSS 3 */
селектор::псевдоэлемент { /* двойное двоеточие */
CSS свойство: значение;
}
/* синтаксис CSS 2 */
селектор:псевдоэлемент { /* одинарное двоеточие */
CSS свойство: значение;
}
Поддержка браузерами
CSS синтаксис:
::first-letter {
блок объявлений;
}
Версия CSS
CSS1Пример использования
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<title>Псевдоэлементы ::first-letter и ::first-line</title>
<style>
::first-letter { /* изменяем начальный символ текстового блока */
color: red; /* устанавливаем цвет шрифта красный */
font-size: 24px; /* задаем размер для первого символа */
}
.test::first-line{ /* изменяем первую строку элемента с классом test */
color: green; /* устанавливаем цвет шрифта первой строки зелёный */
font-family: Arial; /* устанавливаем шрифт Arial для первой строки */
}
</style>
</head>
<body>
<p>Яндекс. Найдется, всё.</p>
<pre class = "test">У лукоморья дуб зелёный;
Златая цепь на дубе том:
И днём и ночью кот учёный
Всё ходит по цепи кругом;
Идёт направо - песнь заводит,
Налево - сказку говорит.</pre>
</body>
</html>
В этом примере с помощью псевдоэлемента ::first-letter мы установили, что первая буква каждого текстового блока (в нашем случае абзаца — элемент <p>) будет красного цвета и размером 24 пикселя. Кроме того, с использованием псевдоэлемента ::first-line, мы указали, что первая строка в элементе с классом test (элемент <pre>) будет шрифтом Arial зеленого цвета.
Результат нашего примера:
Пример использования псевдоэлементов :first-letter и :first-line.CSS селекторыСоздание заглавных букв с помощью CSS
CSS заглавные буквы помогают разбить монотонность однотипного дизайна, тексты которого выглядят одинаково от начала до конца.
Летописцы использовали заглавные буквы в рукописях, которые писались от руки, некоторые из них относятся еще к V веку. Прописные буквы продолжали использоваться с VIII по XV век, когда типографские станки позволили вывести печать на промышленный уровень. И рукописные, и печатные буквицы размещались в начале текста. Часто их украшали декоративным рисунком, который располагался вокруг буквы.
Поднятые и опущенные буквы все еще используются в наши дни. Их можно встретить в газетах, журналах и книгах, а также в цифровой типографии. Поднятые литеры иногда называются вытянутыми. Они размещаются на одном уровне с нижней частью текста, который следует за ними. Опущенные буквы размещаются на одном уровне с верхней частью текста, иногда в слое позади основной части текстового контента, или остальной текст обтекает их.
Поднятые буквы задаются намного проще, так они находятся на одном уровне с остальным текстом, и обычно для этого не нужно менять обтекание внешних полей. Опущенные буквы требуют более тонкой настройки. Вам будет проще разобраться с этим, если сначала вы поймете, как обрабатываются поднятые литеры.
Дизайнеры, которые уже имеют представление о CSS, знают, что нужно создать отдельный класс CSS для первой буквы заглавной.
Код CSS для элемента абзаца и класса, создающего букву, будет выглядеть следующим образом:
p { font-size:20px; font-family: Georgia, "Times New Roman", Times, serif;}
.myinitialcaps {font-size:48px; font-family: Didot;}А HTML-код будет выглядеть так:
<p><span>M</span>y initial cap is much bigger here and set in the Didot typeface.</p>
Что дает нам:
Кажется, слишком просто? На самом деле вам придется вносить коррективы в зависимости от конкретных поднятых букв, так как каждая заглавная литера требует специального кернинга. После выбора шрифта для поднятых букв и для основного текста, нужно создавать отдельные классы для каждой поднятой литеры. В приведенном ниже CSS-классе .myinitialcapsi поле справа имеет отрицательное значение, чтобы уменьшить расстояние между I и n.
.myinitialcapsi {font-size:48px; font-family: Didot; margin-right:-1px;}
<p><span>I</span>n this case, there’s some extra space between the “I” and “n.”</p> <p><span>I</span>ncluding a new class with a negative margin pulls it closer.</p>
В зависимости от разрешения экрана в приведенном выше примере I и n могут выглядеть так, будто они слились вместе. Это происходит из-за засечек на концах букв. Поэтому, прежде чем выбирать окончательный вариант стилей CSS, протестируйте сайт на различных устройствах, чтобы посмотреть, как на них выглядит текст заглавными буквами CSS.
Можно увеличить не только буквы в начале текста. Вы можете реализовать еще один класс, чтобы создать увеличенную версию кавычек, которые будут выводиться рядом с буквой. В нашем случае для кавычек не подходит ни класс буквы с размером 48, ни класс текста в 20 пикселей. Скорее, это будет что-то среднее — 30 пикселей. Кавычки мы подвинем вниз на 4 пикселя, чтобы оптически выровнять их с I:
.myinitialcapsq {font-size:30px; font-family: Didot; float:left; margin-top:4px;}
<p><span>“</span><span>I</span>ncluding” a new class with a negative margin pulls it closer.</p>
Нужно очень внимательно задавать каждую из CSS заглавных букв вместе с кавычками, чтобы их кернинг и выравнивание соответствовали окружающей разметке. Например, букву Т нужно будет сместить влево, немного за край абзаца, чтобы ее поперечная линия визуально вписывалась в макет. Аналогично нужно будет поступить и с круглыми буквами, такими как C, G, O и Q. В этом примере использованы размеры шрифтов 20, 30 и 48. Но вам нужно будет подобрать размеры, исходя из специфики шрифтов, которые вы выбрали. А также размеров и разрешений экранов, на которых будет просматриваться сайт.
С помощью псевдоэлемента CSS можно легко создать поднятую букву, добавив ::first-letter к элементу абзаца. Используйте :first-letter (с одним двоеточием) для устаревших браузеров:
p { font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height:2em;padding-bottom:1.2em;}
p::first-letter { font-size: 3.6em; text-transform: uppercase; font-family: "Monotype Bernard Condensed", serif; margin-right:0.03em;}
.initialb {margin-right:-0.1em;}
.initialn {margin-right:-0.15em;}HTML-код, который содержит классы CSS, учитывающие кернинг букв N и B, будет выглядеть следующим образом…
<p>An inital letter, with the first letter being a capital letter.<br> With a line break, the next line has no initial cap.</p> <p><span>n</span>otice in the HTML source how the first letter, not a capital letter in the HTML, gets sized to the initial cap size of 3.6em. Neat, huh?</p> <p><span>B</span>ut with a hard return, and a new paragraph started, another initial cap always gets created. You might be asking yourself, <em>How am I going to account for this? Am I supposed to have an initial cap at the beginning of very new paragraph?</em> Well, you could. But, do you want it to look that way, and does it absolutely have to look that way?</p> <p>В букву преобразовывается первая заглавная буква абзаца.<br> Первая буква после разрыва строки не будет преобразовываться в заглавную.</p> <p><span>о</span>Обратите внимание, что в исходном коде HTML первая буква не является заглавной, но она преобразуется в литеру с размером 3.6em.</p> <p><span>О</span>Однако и после принудительного разрыва строки, ив начале каждого нового абзаца всегда создается буква. Вы можете спросить себя: <em>Как мне учитывать это? Нужно ли мне добавлять буквы для всех этих случаев?</em> Что ж, вы можете. Но необходимо ли это?</p>
Даже с учетом преимуществ, которые предоставляют псевдоэлементы, нам пришлось добавить много кода, чтобы определить отдельные классы для обработки проблем, связанных с кернингом и отступами. Но этот метод преобразует первую букву каждого нового абзаца в CSS заглавную букву. Для кого-то он может не подойти, потому что не нужно преобразовать первую букву каждого абзаца.
Добавление псевдокласса :first-child помогает решить проблему ненужного преобразования первых букв:
p { font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height:2em;padding-bottom:0.5em;}
p:first-child::first-letter { font-size: 3.6em; text-transform: uppercase; font-family: "Monotype Bernard Condensed", serif; margin-right:0.03em;}Объединив этот код с HTML:
<p>Первая буква, которая определена, как first-child - это единственная буква которая преобразуется в поднятую буквицу при этом методе.</p> <p>Так как преобразовывается только буква, определенная как first-child, обратите внимание, что этот пример отличается от предыдущего, без first-child. Кроме этого мы не преобразуем первые буквы после начала абзаца и после принудительного разрыва строки. Это выглядит более элегантно, по сравнению с тем, как выглядел макет, когда мы преобразовали все первые буквы абзацев.</p>
Преимущество использования псевдоклассов заключается в возможности обрабатывать различные частные случаи. А что насчет недостатков? Существует много различных псевдоклассов, и их можно объединить таким количеством способов, что от этого может пойти кругом голова. Например, псевдоклассы :first-child и :first-of-type могут давать одинаковые результаты. Также можно применить псевдокласс не только к абзацу, но и к элементам <section> или <div>. Например, как показано в приведенном ниже примере с поднятым буквами в шрифте Didot. Обратите внимание, как атрибут margin был добавлен справа от буквы А. Иначе она «склеилась» бы с буквой s в начале раздела:
section { font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height:3em;}
section>p:first-child:first-letter { font-size: 4em; text-transform: uppercase; font-family:Didot, serif; margin-right:5px;}И вместе с HTML:
<section> <p>В начале раздела для первой буквы задается поднятая буквица.</p> <p>И новый абзац…</p> </section>
Если вы чувствуете тягу к экспериментам, то можете исследовать различные методы в дополнение к :first-child и :first-of-type. Например, такие как :nth-of-type или :nth-of-child, чтобы посмотреть, как те или другие типы псевдоклассов можно использовать для текста заглавными буквами CSS. Независимо от того, будете ли вы следовать изложенным в этой статье принципам или начнете копать глубже, когда вы научитесь работать с псевдоклассами CSS first-child, :first-of-type и :first-letter, вы сможете правильно применять их к элементам HTML.
Использование отдельных классов вместе с псевдоклассами для обработки различных букв — это процесс проб и ошибок, вычислений положительных и отрицательных отступов. И это требует большого терпения. Для таких букв, как F, G, O, P, Q, T, W, V и Y также потребуются отдельные классы кернинга.
Но самое интересное начинается тогда, когда вы на практике начинаете тестировать различные сочетания шрифтов и создавать поднятые буквы, которые будут привлекать внимание ваших читателей и выделять ваш сайт из общей массы.
Данная публикация представляет собой перевод статьи «Making Initial Letters Part I: Raised Initials» , подготовленной дружной командой проекта Интернет-технологии.ру
телеграм канал. Подпишись, будет полезно!
Псевдоэлемент: первая буква | htmlbook.ru
Псевдоэлемент: первое письмо | htmlbook.ru-
Основное -
HTML -
CSS -
Сайт
- Статьи
- Блог
- Практикум
- Форум
- Самоучитель HTML
- Справочник по HTML
- XHTML
- HTML5
- Самоучитель CSS
- Справочник по CSS
- Рецепты CSS
- CSS3
- Вёрстка веб-страниц
- Макеты
- Веб-сервер
Справочник CSS
- Как пользоваться справочником
- ! Важно
- -moz-border-bottom-colors
- -moz-border-left-colors
- -moz-граница-правая-цвета
- -moz-border-top-colors
- -moz-linear-gradient
- -моз-ориент
- -моз-радиальный-градиент
- -moz-выбор пользователя
- -ms-режим интерполяции
- -ms-радиальный градиент
- -o-линейный градиент
- -о-объект-подходит
- -о-радиальный градиент
- -webkit-linear-gradient
- -webkit-radial-gradient
- -webkit-user-select
- :: — moz-заполнитель
- :: — moz-selection
- :: — ms-браузер
- :: — ms-check
- :: — ms-clear
- :: — ms-expand
- :: — ms-fill
- :: — ms-раскрыть
- :: — значение ms
- :: — ввод-заполнитель webkit
- :: после
- :: до
- :: первая буква
- :: первая линия
- :: выбор
- : активный
- : после
- : до
- : проверено
- : по умолчанию
- : отключено
- : пусто
- : включен
- : первенец
- : первая буква
- : первая линия
- : первый в своем классе
- : фокус
- : парение
- : неопределенный
- : неверный
- : язык
- : последний ребенок
- : последний тип
- : ссылка
- : не
- : nth-ребенок
- : энный-последний-ребенок
- : n-ый-последний-тип
- : nth-of-type
- : единственный ребенок
- : только тип
- : опционально
- : только для чтения
- : чтение-запись
- : требуется
- : корень
- : цель
- : действует
- : посетил
- @charset
- @ font-face
- @import
- @media
- @ стр.
- задержка анимации
- attr ()
- фон
- фон-приставка
- фон-клип
- цвет фона
- фоновое изображение
- фон происхождения
- фон-позиция
- background-position-x
- background-position-y
- фон-повтор
- размер фона
- граница
- нижняя граница
- цвет нижней границы
- граница-нижний-левый-радиус
- граница-нижний-правый-радиус
- с окантовкой снизу
- ширина-нижняя граница
- пограничный обвал
- цвет рамки
- изображение границы
- граница слева
- левая рамка, цвет
- с рамкой слева
- ширина рамки слева
- граница-радиус
- граница правая
- цвет границы справа
- с окантовкой справа
- ширина рамки справа
- интервал границы
- с бордюром
- кайма
- цвет верхней границы
- граница-верх-левый-радиус
- граница-верх-правый-радиус
- с бордюром
- ширина по верху границы
- ширина границы
- низ
- тень коробки
- размер коробки
- со стороны подписи
- прозрачный
- зажим
- цвет
- количество столбцов
- колонна-зазор
- столбец-линейка
- ширина столбца
- столбцов
- содержание
- счетчик
- сброс счетчика
- курсор
- направление
- дисплей
- пустых ячеек
- фильтр
- поплавок
- шрифт
- семейство шрифтов
- размер шрифта
- растяжка шрифта
- стиль шрифта
- вариант шрифта
- font-weight
- hasLayout
- высота
- дефисов
- рендеринг изображений
- осталось
- межбуквенный интервал
- высота строки
- в виде списка
- изображение в стиле списка
- позиция в стиле списка
- тип списка
- маржа
- нижнее поле
- левое поле
- поле справа
- верхняя маржа
- макс. Высота
- макс. Ширина
- мин-высота
- мин. Ширина
- непрозрачность
- детей-сирот
- наброски
- контурный цвет
- контур-офсет
- наброски
- ширина контура
- перелив
- переполнение-x
- переполнение
- набивка
- обивка нижняя
- отступ слева
- обивка правая
- утеплитель
- разрыв страницы после
- разрыв страницы до
- разрыв страницы внутри
- позиция
- цитат
- изменить размер
- правый
- полоса прокрутки-3dlight-цвет
- цвет стрелки полосы прокрутки
- основной цвет полосы прокрутки
- полоса прокрутки, темные тени, цвет
- полоса прокрутки, цвет лица
- цвет выделения полосы прокрутки
- полоса прокрутки, цвет тени
- цвет полосы прокрутки
- размер табулятора
- стол-сервиз
- выравнивание текста
- выравнивание текста последнее
- оформление текста
- текст-украшение-цвет
- строка оформления текста
- стиль оформления текста
- отступ текста
- переполнение текста
- тень текста
- преобразование текста
- верх
- преобразование
- преобразование происхождения
- в стиле трансформации
- переход
- задержка перехода
- переходная собственность
- функция времени перехода
- юникод-биди
- с выравниванием по вертикали
- видимость
- белое пространство
- вдов
- ширина
- разрыв слова
- межсловный интервал
- перенос слов
- режим записи
- z-индекс
- зум
Значения свойств
- Строки
- Числа
- Проценты
- Размер
- Адрес
- Цвет
- Угол
- Время
- Медиа-запросы
- наследовать
- начальный
- расч. ()
КСС по категориям
@ -правила Анимация Градиент Границы Изображения Интерфейс Контент Отступы Печать Позиционирование Поля Псевдоклассы Псевдоэлементы .:: first-letter (: first-letter) — Веб-технологии для разработчиков
CSS псевдоэлемент :: first-letter применяет стили к первой букве первой строки блочного элемента, но только если нет другого предшествующего содержимого (такого как изображения или инлайн таблицы).
/ * Стили для первой буквы элемента* / p :: first-letter { размер шрифта: 130%; }
Может быть непросто определить первую букву элемента:
900 IJ в Нидерландском. В этих случаях обе буквы диграфа должны соответствовать псевдоэлементу :: первая буква (это слабо поддерживается браузерами, смотрите таблицу совместимости ниже). :: before и свойства content может привести к добавлению некоторого текста в начало элемента. В этом случае псевдоэлементу :: первая буква будет соответствовать первой буква добавленного содержимого. В CSS3 появилась запись :: первая буква (с двумя двоеточиями) для различения псевдоклассов и псевдоэлементов. Браузеры также запись : первая буква , введённая в CSS2.
Разрешённые свойства
Только небольшое подмножество CSS-свойство может быть использовано с псевдоэлементом :: первая буква :
- Все свойства, связанные с шрифтами:
font,font-style,font-feature-settings,font-kerning,font-language-override,font-stretch,font- синтез,вариант-шрифта,вариант-шрифта-альтернативы,вариант-шрифта-заглавные буквы,вариант-шрифта-восточноазиатский,лигатуры-вариант-шрифта,вариант-шрифта-числовой,font-option-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 -размер,фон-прикреплениеифон-режим смешивания - Все свойства для внешних отступов:
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и полные записи Свойства - Свойства
цвет - Свойства
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(только еслиfloatравенnone)
Синтаксис
/ * синтаксис CSS3 * / ::первое письмо / * Синтаксис CSS2 * / : первая буква
Пример
Сделаем первую букву каждого абзаца красной и большой.
HTML
Lorem ipsum dolor sit amet, constetur 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.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie conquat.
Ut wisi enim ad minim veniam, quis nostrud упражнения ullamcorper Suscipit lobortis nisl ut аликвип экс еа коммодо конскват.Duis autem vel eum iriure dolor в hendrerit в vulputate velit esse molestie conquat.
-Начало специального знака препинания.
_Начало специального знака препинания.
«Начало специального знака препинания.
'Начало специального знака препинания.
* Начало специального знака препинания.
# Начало специального знака препинания.
「特殊 的 汉字 标点符号 开头。
《特殊 的 汉字 标点符号 开头。
«特殊 的 汉字 标点符号 开头。
CSS
р :: первая буква {
красный цвет;
размер шрифта: 130%;
} Результат
Спецификации
браузеров Поддержка
Обновите данные о совместимости на GitHub| Компьютеры | Мобильные | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | Android webview 902 Android для Chrome 902 Chrome для Android 902 Chrome для Android 902 Chrome для Android 902 | Opera для Android | Safari на iOS | Samsung Internet | |||
:: первая буква | Chrome Полная поддержка 1
| Edge Полная поддержка 12
| Firefox Полная поддержка 1
| IE Полная поддержка 9
| Opera Полная поддержка 7
| Safari Полная поддержка 1
| WebView Android Полная поддержка 37
| Chrome Android Полная поддержка 18
| Firefox Android Полная поддержка 4
| Opera Android Полная поддержка 10.1
| Safari iOS Полная поддержка 1
| Samsung Internet Android Полная поддержка 1.0
|
Поддержка голландского диграфа IJ | Chrome Нет поддержки Нет | Кромка Нет поддержки Нет | Firefox Нет поддержки Нет
| IE Нет поддержки Нет | Opera Нет поддержки Нет | Safari Нет поддержки Нет | WebView Android Нет поддержки Нет | Chrome Android Нет поддержки Нет | Firefox Android Нет поддержки Нет
| Opera Android Нет поддержки Нет | Safari iOS Нет поддержки Нет | Samsung Internet Android Нет поддержки Нет |
Легенда
- Полная поддержка
- Полная поддержка
- Нет поддержки
- Нет поддержки
- Смотрите меры реализации.
- Смотрите замечания реализации.
- Использует нестандартное имя.
- Использует нестандартное имя.
См. также
.Псевдоэлемент :: первая буква | CSS | WebReference
Псевэлемент :: первая буква определяет стиль первого символа в тексте элемента, к которому добавляется. К этому псевдо псевдоэлементу правила только стилевые свойства, связанные со свойствами шрифта, полями, отступами, границами, цветом и фоном.
Синтаксис
Селектор :: first-letter {...} Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | нормальный | капсюли |
| A || B | Каждое Сообщение заведомо самостоятельно или с другими в произвольном порядке. | ширина || count |
| [] | Группирует значения. | [урожай || крест] |
| * | Повторять ноль или больше раз. | [, <время>] * |
| + | Повторять один или больше раз. | <число> + |
| ? | Указанный тип, слово или группа не является обязательным. | вставка? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус> {1,4} |
| # | Повторять один или больше раз через запятую. | <время> # |
Пример
Луч фонарика высветил старые скрипучие ступени, по которому не далее как пять минут назад в дом поднялся Паша.Оля осторожно приоткрыла дверь и посветила внутрь дома. Луч света, словно нехотя, пробивался сквозь тугую завесу из мрака и пыли.
Взгляд Оли опустился на пол, и она вскрикнула. В пустом помещении никого не было, и лишь на полу валялась порванная туфля Паши.
Результат примера на рис. 1. В данном примере используется шрифт, размер и цвет первой буквы каждого абзаца текста.
Рис. 1. Результат использования псевдоэлемента :: первая буква
В CSS3 псевдоэлементы стали обозначаться двумя двоеточиями, чтобы синтаксис отличался от псевдоклассов.В CSS2 они обозначаются одним двоеточием. Браузеры, как правило, понимают оба синтаксиса.
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Рекомендация (Рекомендация) — спецификация W3C и одобана как стандарт.
- Кандидат в рекомендации (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Предлагаемая рекомендация (Предлагаемая рекомендация) — на этом этапе представлен на рассмотрении Консультативного совета W3C для окончательного утверждения.
- Рабочий проект (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Черновик редакции (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Проект (Черновик спецификации) — первая черновая версия стандарта.
Браузеры
| : первая буква | 5.5 | 12 | 1 | 3.5 | 1 | 1 |
| :: первая буква | 9 | 12 | 1 | 7 | 1 | 1 |
| : первая буква | 1 | 1 | 4 | 1 |
| :: первая буква | 1 | 1 | 7 | 1 |
Браузеры
В таблице браузеров используются следующие обозначения.
- — свойство полностью предоставленным браузером со всеми допустимыми значениями;
- — свойство браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо свойство имеется лишь частично, например, не все допустимые значения имеют свойство не ко всем элементам, которые указаны в спецификации.
Число указывает версию, начиная с свойства, имеющего свойство.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 30.08.2017
Редакторы: Влад Мержевич
.Псевдоэлемент :: первая буква | htmlbook.ru
| Internet Explorer | Хром | Opera | Safari | Firefox | Android | iOS |
| 9.0+ | 1.0+ | 7.0+ | 1.0+ | 1,5+ | 1.0+ | 1.0+ |
Краткая информация
Версии CSS
| CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
|---|---|---|---|
Описание
Псевдоэлемент :: первая буква определяет стиль первого символа в тексте элемента, к которому добавляется. К этому псевдо псевдоэлементу правила только стилевые свойства, связанные со свойствами шрифта, полями, отступами, границами, цветом и фоном.
Синтаксис
элемент :: первая буква {…}
Значения
Нет.
Пример
HTML5CSS2.1CSS3IECrOpSaFx
первая буква
<стиль>
п {
семейство шрифтов: Arial, Helvetica, sans-serif; / * Гарнитура шрифта основного текста * /
размер шрифта: 0.9em; / * Размер шрифта * /
}
p :: first-letter {
семейство шрифтов: "Times New Roman", Times, serif; / * Гарнитура шрифта первой буквы * /
размер шрифта: 2em; / * Размер шрифта первого символа * /
красный цвет; / * Красный цвет текста * /
}
Луч фонарика высветил старые скрипучие ступени, по которому не далее
как пять минут назад в дом поднялся Паша.Оля осторожно приоткрыла дверь и
посветила внутрь дома. Луч света, словно нехотя, пробивался сквозь тугую
завесу из мрака и пыли.
Взгляд Оли опустился на пол, и она вскрикнула. В пустом помещении никого
не было, и лишь на полу валялась порванная туфля Паши.
Результат показан на рис. 1. В данном примере используется шрифт, размер и цвет первой буквы каждого абзаца текста.
Рис.1. Результат использования псевдоэлемента :: первая буква
.Браузеры
Браузер Internet Explorer до версии 9.0 работает только с нотацией: первая буква, описанная в спецификации CSS 2.1.
.