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

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

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

Я предлагаю сделать намеченное двумя способами: при помощи 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 взять с двух сторон любую выбранную вами букву в следующую конструкцию:

<span class="bigletter">О</span>знакомившись с данной статьей Вы сможете сделать на своем сайте автоматическое...

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

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

Привет. Меня зовут Виталик и я автор этого блога, а так же Магазина WordPress https://wp-r.ru/.

Отблагодарить Z888279575784 R109400923968 или ЯД 41001651742138

Оказываю услуги по созданию и настройке сайтов на WordPress (верстка, натяжка).

Мои Контакты. Я в Twitter @mojWP. Смотри на Youtube. Читай RSS блога.

Опубликовано 11 комментариев
  1. Марат (5 комм.):
    http://102news.ru

    Попробовал первым способом - не работает что-то.

    • Виталий (1674 комм.):

      1. какой браузер и версия?
      2. установлен плагин на подобие New Adman или WhyDoWork AdSense?

      • Марат (5 комм.):
        http://102news.ru

        мозилла 13.0.1
        не установлено.

        • Виталий (1674 комм.):

          если действительно нужна такая штука, то стукни в личку

        • Марат (5 комм.):
          http://102news.ru

          теперь уже 14.0.1 )

  2. seogrot (68 комм.):
    http://seogrot.com/

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

  3. Марат (5 комм.):
    http://102news.ru

    Спасибо большое за помощь:) mojwp.ru отличный помощник 🙂

  4. Женя (58 комм.):
    http://tut-blog.ru

    Когда изучал CSS практиковал немножко. Иногда очень необходимо даже.

  5. Александр (1 комм.):
    http://koptelovy.ru/

    Пробовал, не выходит, можете помочь?

  6. Антон (1 комм.):

    Здравствуйте!Помогите,пожалуйста,сделать красную строку в теме вордпресса UU2014.Если не затруднит,максимально подробно,т.к. первый раз сталкиваюсь с ведением блога :)Спасибо.

    • Виталий (1674 комм.):
      http://mojWP.ru/

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

Не держи в себе. Выскажись.

Ваш e-mail не будет опубликован. Обязательные поля помечены *

© 2011-2016 | mojwp.ru | Копирование материала разрешено только с письменного согласия
WordPress: 13.3MB | MySQL:74 | 0,342sec
Премиальные плагины для CMS WordPress
Магазин WordPress WP-R.ru
Спасибо, не показывайте мне эту штуку больше!
Смотри мои обучающие видео на YouTube
Иван только что купил плагин ELT
https://wp-r.ru/plaginy/elt.html