Заголовні букви css

Врізана в текст буквица

Drop cap (врізана в текст буквица) - це перша буква абзацу, що має більший розмір ніж інші, і розміщена так, що її верх знаходиться на рівні першого рядка абзацу. На зображенні ви можете побачити приклад врізаної в текст літери.

До речі, у WordPress є спеціальний плагін (wordpress.org/extend/plugins/drop-caps), який дозволяє автоматично створювати врізані в текст (і зміщені вниз) великі літери. Чудово! Однак, що якщо ви не хочете використовувати плагін (я впевнений, що не хочете), і вам всього лише необхідно створити drop cap до декількох постах, і, можливо, в якомусь певному місці?

Хороша новина: для того щоб створити великі літери не потрібно застосовувати плагін, все що необхідно це трохи css і тег span. Відкрийте свій css-файл і додайте наступний код:

Якось так. Звичайно, вам знадобиться стиль, який би підходив до вашого дизайну і тексту. Наприклад, значення властивостей: font-size. margins і line-height буде необхідно підібрати виходячи з вашого дизайну і тексту.

Для того щоб стиль застосовувався до великої букви тексту, необхідно «звернути» велику літеру в тег span і прописати відповідний клас.

Псевдоелемент: first-letter

Також задати стиль першого символу в тексті можна і за допомогою псевдоелемента: first-letter. Однак до псевдоелементу: first-letter можна застосовувати обмежена кількість властивостей: це властивості пов'язані зі шрифтом, кольором, фоном, кордонами, полями і відступами. Ще слід зазначити, що псевдоелемент: first-letter не працюватиме в старих браузерах.

Ось, власне, пара методів редагування заголовних букв за допомогою CSS.

Схожі статті