Css первая буква большая: Как сделать первую букву заглавной css

Буквицы – отличный способ красиво начать абзац. Они помогают привлечь внимание читателя и заинтересовать его чтением вашего контента.

Из этой статьи вы узнаете, как добавлять буквицы в записи WordPress без написания кода CSS.

Что такое буквица

Буквица – это метод укладки, обычно используемый в печатных книгах и журналах с длинным текстом. Первая буква начального абзаца в каждой главе написана крупным шрифтом.

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

Добавление заглавной буквы помогает контенту выделиться и привлечь внимание посетителей. Такое оформление добавляет формальности и традиционности дизайну вашего сайта.

Есть несколько способов добавить буквицы на сайт WordPress. Можно воспользоваться встроенной опцией в редакторе блоков WordPress или использовать плагин.

Рассмотрим, как использовать добавление в редакторе блоков WordPress (Gutenberg) и в классическом редакторе.

Добавление буквиц в редакторе блоков WordPress (Гутенберг)

Редактор WordPress блок имеет встроенный вариант для начальной буквы в абзаце.

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

Создайте новую запись или откройте для редактирования существующую. После этого нажмите знак плюса (+), чтобы добавить в статью блок абзаца.

Затем в меню справа включить опцию буквицы. Просто нажмите переключатель Буквица (drop cap) в разделе «Настройки текста», чтобы отобразить начальную букву большего размера.

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

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

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

Поскольку для написания кода CSS требуются технические знания, можете использовать плагин WordPress Initial Letter для редактирования стиля буквицы в редакторе блоков.

Смотрите также:

Как исправить ошибку: в теме отсутствует таблица стилей style.css

Добавить буквицы в классическом редакторе WordPress

Самый простой способ добавить буквицы в классический редактор – использовать плагин WordPress.

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

В этом уроке мы будем использовать плагин Initial Letter, поскольку он прост в использовании и абсолютно бесплатный. Плагин предлагает несколько вариантов настройки, а также работает с редактором блоков WordPress.

Сначала установите и активируйте плагин Initial Letter на своем сайте.

После того, как плагин станет активным, перейдите в Настройки » Начальная буква (Initial Letter) на панели инструментов WordPress и измените настройки буквиц.

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

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

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

Просто отредактируйте существующий пост, прокрутите вниз до метабокса Initial Letter и измените значение параметра с Да на Нет.

Опубликовав свою статью, вы увидите буквицы в действии.

Мы надеемся, что эта статья помогла вам добавить буквицы в записи WordPress.

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

Смотрите также:

Изучает сайтостроение с 2008 года. Практикующий вебмастер, специализирующий на создание сайтов на WordPress. Задать вопрос Алексею можно на https://profiles.wordpress.org/wpthemeus/

Измените элементы меню с прописных на заглавные в Hestia

В этом руководстве вы узнаете, как изменить свойство по умолчанию

Имейте в виду, что Hestia поддерживает 3 области меню. В этом руководстве будет рассмотрен каждый из них.

• Основное меню
• Меню нижнего колонтитула
• Верхнее меню

Прежде всего, давайте узнаем, что такое

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

Главное меню

По умолчанию для элементов меню Hestia установлено значение в верхнем регистре  :

Чтобы изменить это поведение, мы можем изменить это свойство, добавив короткий фрагмент CSS в Внешний вид -> Настройка -> Дополнительный CSS

 .navbar .navbar-nav>li>a {
   преобразование текста: использовать заглавные буквы;
}
 

Этот код будет использовать заглавную только первую букву каждого пункта меню, а остальные буквы будут строчными:

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

 .navbar .navbar-nav>li>a {
   преобразование текста: нижний регистр;
}
 

Меню нижнего колонтитула

Это похоже на то, что мы уже рассмотрели для основного меню . Процесс в основном тот же, и таковы свойства. Единственное отличие состоит в том, что нам нужно убедиться, что на этот раз код CSS будет обращаться к области меню нижнего колонтитула. Код для изменения пунктов меню нижнего колонтитула:

 .footer .footer-menu > li > a {
    преобразование текста: использовать заглавные буквы;
}
 

Результат:

Верхнее меню бара

Процесс изменения текста для меню «Верхняя панель» аналогичен тому, что мы рассмотрели до сих пор для основного меню и нижнего колонтитула . Опять же, разница заключается в том, что мы выбираем только текст Верхнего меню Very , поэтому код здесь:

 . hestia-top-bar ul li a {
   преобразование текста: использовать заглавные буквы;
}
 

 
 Это пример строчных букв css. 

 

 
p {
  text-transform: нижний регистр;
 }
 

 
p {
  text-transform: uppercase;
 }
 

 
p {
  text-transform: capitalize;
 }
 

 
p {
  text-transform: none;
 }