Большая первая буква абзаца автоматически и вручную

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

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

Я предлагаю сделать намеченное двумя способами: при помощи CSS3 и классической связкой CSS+HTML (кроссбраузерно).

Для начала обещанный пример:

Вот нечто подобную букву сейчас попробуем сделать. Для начала автоматически при помощи CSS3.

Как сделать большую букву автоматически

В данном методе при помощи некоторых параметров CSS3 мы автоматизируем процесс выделения заглавной первой буквы статьи. Все, что нам необходимо, это добавить в файл стилей (style.css) следующую строку:

p:first-child:first-letter { float: left; color: #0078BF; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }

Немного поясню: английская буква p (самая первая) - это тег <p>,обозначающий абзац (аналогично нажатие клавиши Enter во время набора статьи). Структура вашей статьи содержит именно такие теги, когда вы начинаете новый абзац. Вот для него мы и задаем необходимые параметры.

То, что стоит в представленном коде после этой буквы p, а именно first-child:first-letter, позволяет автоматически вычислить первую букву в статье.

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

Обещанная ссылка на дополнение FireBug (для FireFox).
И ссылка на дополнение для Chrome - FireBug.

Далее нам нужно настроить индивидуальный внешний вид заглавной буквы, который будет подходить дизайну вашего сайта. Как сделать это "на лету" показано в следующем видео-подкасте:

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

Делаем большую букву кроссбраузерной вручную

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

Чтобы подобное реализовать, необходимо будет в файле стилей style.css прописать любое название класса с атрибутами из примера выше. Выглядеть это будет примерно так (класс bigletter я придумал):

.bigletter { float: left; color: #0078BF; font-size: 75px; line-height: 60px; padding-top: 4px; padding-right: 8px; padding-left: 3px; font-family: Georgia; }

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

Набирать статью в WordPress можно как в Визуальном режиме, так и в режиме HTML. Для этого в админке есть одноименные переключатели. Чтобы воспользоваться вторым кроссбраузерным способом, необходимо в режиме HTML взять с двух сторон любую выбранную вами букву в следующую конструкцию:

Ознакомившись с данной статьей Вы сможете сделать на своем сайте автоматическое...

Как раз первая буква О будет у меня большего размера. При этом я только прописал название класса в стандартном теге HTML. Аналогичную конструкцию можете применять сколько угодно раз по статье/сайту.

Надеюсь материал преподнесен понятно. Если же есть вопросы или не понятные моменты, то пишите в комментариях, чтобы другие читатели сайта так же могли найти ответы. Со своей стороны готов дописать статью в "узких" моментах.