Как изменить цвет первой буквы с помощью CSS

Количество просмотров: 877

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

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

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

<span></span>.

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

<span class=”book”>K</span>нига.

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


.book{
color:red;
font-family:serif;
} 
//или просто применем стили к тегу span
span{
color:red;
font-family:serif;
}

Пример -Книга

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

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

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

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

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

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

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

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

<h1>Супер оптимизированный продающий заголовок</h1>

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


h1::first-letter{
color:red;
font-family:serif;
}

Супер заголовок

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

© 2015-2018 Goodweb.me --- Карта сайта --- info@goodweb.me

Наверх