css первая буква другим цветом

Свойства первой заглавной буквы в CSS → Буквица

Продолжаем изучать часто используемые свойства Каскадных стилей. Начнем сразу с примера. Вот пример оформления первой буквы с помощью CSS параметра first letter :

С развитием интернета и компьютерных технологий находить одноклассников стало проще!

Ниже можно посмотреть CSS код подобного форматирования.

First letter в css

>С развитием интернета и компьютерных технологий находить одноклассников стало проще!

Таким образом данный CSS код и селектор first letter работают, в чем мы убедились на простеньком примере выше, сделав первую букву параграфа с классом розовой, жирной, установили для нее шрифт и увеличили его размер. CSS доставляет удовольствие, согласитесь! Параметры: font-family, color, font-size, font-weight подробно рассмотрены в CSS уроках в меню слева. Приятного вам изучения материала.

Содержание

Синтаксис ?
Обозначения
Пример
Примечание
Спецификация ?
Спецификация
Браузеры ?
Браузеры

Дата публикации: Январь 2013 | Обновление: Ноябрь 2018

Первая заглавная буква посредством CSS first letter CSS справочник

Довольно часто возникает необходимость изменить цвет или размер первой буквы в слове или блоке текста т.е. сделать буквицу. Есть несколько способов сделать буквицу.

1. Самый простой, но не самый верный.

Для изменения размера или цвета первого символа можно обернуть необходимый символ тегами

Например: у нас есть слово Книга, мы хотим изменить цвет и шрифт первой буквы К. Для этого обернем ее в тег span и добавим соответствующие CSS правила.

Стили для класса book

В данном случае первая буква стала красного цвета, а ее шрифт изменится на шрифт с засечками. Цель достигнута.

Это довольно простой, но не самый верный и удобный способ. Тем более он не подходит к некоторым ситуациям.

Например, злой сеошник просит изменить цвет первый буквы в заголовке H1, по его словам более красивая буква в заголовке скажется на поведении людей и все они ринутся покупать или что-то заказывать с сайта. Так-же, при реализации данной задачи сеошник просил не использовать никаких других тегов внутри тега H1, с его же слов поисковики это не любят.

Что же делать? Неужели придется прибегнуть к javascript?

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

2. Простой и более правильный способ.

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

В наличии имеем заголовок

Изменим цвет первой буквы в заголовке h1 без разбиения слова тегами. Применим следующие CSS стили

Все готово. Задача злого сеошника выполнена, поисковики довольны. Цвет и размер первой буквы изменен. Если вам нужно изменить цвет в каком то другом теге, то просто замените в коде h1 на нужный вам тег, p, span или какой-то другой.

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

Синтаксис ?

Обозначения

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

Пример

Результат примера показан на рис. 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 и рекомендована как стандарт.
Cand >Возможная рекомендация ) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
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

Браузеры

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

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

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