Начало параграфа с большой буквы CSS

На сегодняшний день существует много псевдоселекторов, которые редко используются при разработке дизайна. Понятно что без псевдоселекторов ссылок не обойтись(состоянии при наведении, нажатии и так далее). Но существует псевдоселектор, который позволяет задать первую букву параграфа произвольной величины и с другими пользовательскими настройками. Возможно вы уже видели буквицу на блогах. И в этом уроке мы рассмотрим как создать буквицу с помощью CSS.

Как создать начало параграфа с большой буквы?

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

1
2
3

    p:first-letter {  
        font-size: 50px;  
    }

В итоге у нас получится:

Также кроме одной буквы, можно выделить всю первую строку. Для этого необходимо использовать псевдоселектор :first-line.

В CSS это выглядит следующим образом:

1
2
3

    p:first-line {  
	font-weight: bold;  
    }

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

Буквица на реальном примере

Ниже вы можете увидеть и скачать реальный пример:

Посмотреть примерСкачать

Вывод

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

Успехов!

Источник: www.hongkiat.com