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

Как сделать первую букву в статье большой автоматически. Полезный CSS3

Опубликовано: 11.08.2012

1571

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

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

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

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

3 способа добавления заглавной буквы в абзац

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Теперь опубликуйте запись в блоге WordPress, чтобы увидеть результат в действии.

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

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

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

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

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

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

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

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

Это может быть непросто для новичков, а допущенная ошибка – сломать ваш сайт WordPress.

В этом уроке мы будем использовать плагин 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

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

text-transform элементов меню в Hestia.

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

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

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

text-transform делает. text-transform — это свойство CSS, которое преобразует текст в:

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

Главное меню

По умолчанию для элементов меню 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 — Elite Corner

8 июля 2022 г. 22 августа 2018 г. от Elite Corner

В этом уроке мы узнаем, как изменить текст элемента на верхний регистр , нижний регистр и заголовок , используя свойство text-transform .

CSS имеет свойство text-transform для управления регистром текста.

Firefox учитывает язык. Вы можете узнать больше здесь: CSS Text Transform

В этой статье мы увидим, как мы можем использовать значение свойства css text-transform

в заглавную первую букву слова, в преобразовать все буквы в верхний регистр (все заглавные) , в преобразовать все буквы в нижний регистр.

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

Table of Contents

text-transform

text-transform свойство может иметь следующие 6 значений для управления текстом:

нижний регистр : Преобразует все буквы в нижний регистр .

 

прописные : заменяет все буквы на прописные .

заглавная : первая буква каждого слова заменяется заглавной.

нет : Это значение по умолчанию , и оно сохраняет введенное значение.

наследовать : Наследовать это свойство от родительского элемента.

 

 

Во всех следующих примерах мы будем учитывать следующую HTML-разметку.

 

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

 

 

 

нижний регистр — как сделать все буквы строчными.

Ввод: Это пример нижнего регистра css.

 

Код :

 

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

 

Вывод: это пример нижнего регистра css.

прописные – Как сделать все буквы прописными.

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

 

Код :

 

 
p {
  text-transform: uppercase;
 }
 

 

Вывод: ЭТО ПРИМЕР ПРОПИСНОГО РЕГИСТРА CSS.

Capitalize – Как сделать первую букву каждого слова заглавной.

Ввод: Это пример css capitalize

 

Код :

 

 
p {
  text-transform: capitalize;
 }
 

 

Вывод:  Это пример Css Capitalize.

нет — не меняет никакого значения.

Ввод : Это элитный уголок АРТИКУЛ

 

Код :

 

 
p {
  text-transform: none;
 }
 

 

Вывод : Это элитный уголок СТАТЬЯ

 

сделать первую букву предложения заглавной.

Если вы хотите сделать заглавной только первую букву предложения, а не первую букву всех слов предложения, вам нужно использовать псевдоселектор css с именем :first-letter

 

Ввод : это статья о свойстве CSS text-transform делать заглавными только первую букву предложения.