Зачастую в спешке при добавлении материалов на сайт или, например, создании новой темы на форуме пользователь может начать писать предложение (название) с маленькой (строчной) буквы. Это в какой-то степени является ошибкой.
Я покажу несколько вариантов решения этой задачи: PHP и CSS подойдут больше для уже опубликованных материалов, когда как jQuery сможет исправить положение еще до публикации.
Первая буква строки в верхнем регистре на PHP
На PHP существует функция под названием «ucfirst», которая как раз преобразует первый символ строки в верхний регистр, но минус ее в том, что она не совсем корректно работает с кириллицей.
Для этого мы напишем свою небольшую функцию. Реализация будет выглядеть следующим образом:
В таком варианте мы получим предложение, которое начинается с большой буквы, что, собственно говоря, нам и необходимо.
Первая буква строки в верхнем регистре на CSS
Этот метод визуально (то есть в исходном коде сайта предложения будут выглядеть как есть) также преобразует первый символ в верхний регистр.
С помощью псевдоэлемента «first-letter» и свойства «text-transform» мы задали оформление для каждой первой буквы параграфа.
Первая буква строки в верхнем регистре на jQuery
Как я уже говорил ранее, этот способ преобразования лучше всего подойдет для материалов, которые еще только будут публиковаться.
Для примера мы возьмем текстовое поле (оно будет выступать у нас в качестве поля для ввода заголовка) и напишем для него небольшой скрипт, который при вводе предложения с маленькой буквы делает его с большой:
Скрипт срабатывает как при написании текста, так и простой его вставке. Не забывайте, что для работы скриптов на вашем сайте необходимо наличие подключенной библиотеки jQuery.
Свойства первой заглавной буквы в CSS → Буквица
Продолжаем изучать часто используемые свойства Каскадных стилей. Начнем сразу с примера. Вот пример оформления первой буквы с помощью CSS параметра first letter :
С развитием интернета и компьютерных технологий находить одноклассников стало проще!
Ниже можно посмотреть CSS код подобного форматирования.
| First letter в css
>С развитием интернета и компьютерных технологий находить одноклассников стало проще! Таким образом данный CSS код и селектор first letter работают, в чем мы убедились на простеньком примере выше, сделав первую букву параграфа с классом розовой, жирной, установили для нее шрифт и увеличили его размер. CSS доставляет удовольствие, согласитесь! Параметры: font-family, color, font-size, font-weight подробно рассмотрены в CSS уроках в меню слева. Приятного вам изучения материала.
Дата публикации: Январь 2013 | Обновление: Ноябрь 2018Первая заглавная буква посредством CSS first letter Если по какой-либо причине вам необходимо изменить регистр букв в тексте веб-страницы, на помощь придет свойство CSS text-transform. Какие значения можно устанавливать для данного свойства, смотрите в таблице ниже.
Пример записи стиля: Используйте значение uppercase , если вам нужно сделать все буквы большими в заголовке или абзаце текста, словно текст набран в режиме Caps Lock. В случае, когда вам требуется убрать все заглавные буквы, оставив только строчные, воспользуйтесь значением lowercase . Значение capitalize может пригодиться, к примеру, в веб-форме для поля «ФИО», чтобы каждое новое слово автоматически начиналось с прописной буквы. Обратите внимание: применение text-transform в CSS никак не влияет на исходное содержимое веб-страницы. Регистр букв изменяется лишь во время отображения страницы в окне браузера, а сам текст HTML-документа остается неизменным. Примеры отображения стилей можно увидеть на скриншоте:
Далее в учебнике: подчеркивание и зачеркивание текста с помощью свойства CSS text-decoration. |
CSS справочник
Скриншот: использование свойства text-transform