Зачастую в спешке при добавлении материалов на сайт или, например, создании новой темы на форуме пользователь может начать писать предложение (название) с маленькой (строчной) буквы. Это в какой-то степени является ошибкой.
Я покажу несколько вариантов решения этой задачи: PHP и CSS подойдут больше для уже опубликованных материалов, когда как jQuery сможет исправить положение еще до публикации.
Это свойство используется для изменения текстовых атрибутов в трех аспектах: прописная, строчная, первая заглавная буква. Это свойство используется для управления пробелом в элементе. Если белые страницы остались в коде страницы, они автоматически преобразуются в одно место, когда страница отображается в браузере. В этом случае белые и тонкие линии будут соблюдены и сохранят внешний вид, который они имеют в коде. Увеличивает пространство между буквами слова.
Для значений вы можете выбрать. Вы также можете установить отрицательные значения. Это заставит буквы появляться все больше и больше таблеток. Дополнительное свойство пробела. Он должен увеличивать пространство между словами, содержащимися в элементе.
Первая буква строки в верхнем регистре на PHPНа PHP существует функция под названием «ucfirst », которая как раз преобразует первый символ строки в верхний регистр, но минус ее в том, что она не совсем корректно работает с кириллицей.
Для этого мы напишем свою небольшую функцию. Реализация будет выглядеть следующим образом:
Кто бы ни был первым оружием с этими языками, может загрузить мою бесплатную книгу, чтобы получить представление по этой теме, обязательно предваряя. Тег, который нужно использовать, - текстовое преобразование: верхний регистр; с кодом, подобным этому.
Верхний и нижний регистры должны отображаться в верхнем регистре. Тег, который будет использоваться на этот раз, - текстовое преобразование: строчный; с кодом, например, абзаца. Верхний и нижний регистр текста отображаются в нижнем регистре. Общее правило заключается в том, что первое слово после одной точки имеет первую заглавную букву. Однако вы можете загладить первую букву каждого слова в тексте.
В таком варианте мы получим предложение, которое начинается с большой буквы, что, собственно говоря, нам и необходимо.
Весь крошечный текст, который будет отображаться с первой буквой каждого слова в верхнем регистре. Весь крошечный текст, который будет отображаться в столицах. Чтобы завершить обсуждение, посмотрите, как вы можете выделить текст, даже если эта функция маловероятна, потому что у всех редакторов есть кнопка для выделения выделенного текста. Примерный код, который вы можете использовать, следующий.
Эти теги также можно использовать, как мы увидим в ближайшее время. В предыдущем уроке мы уже видели «важное свойство текста», то есть свойство цвета, с помощью которого можно определить цвет текстовых элементов. Во-первых, мы видим свойства семейства шрифтов, с помощью которых вы можете установить тип шрифта для использования, размер шрифта, курсив и полужирный.
Этот метод визуально (то есть в исходном коде сайта предложения будут выглядеть как есть) также преобразует первый символ в верхний регистр.
Использование следующее:
первое предложение
второе предложение
третье предложение
четвертое предложение
Это позволяет веб-дизайнеру указать, какие шрифты использовать для определенных блоков текста; Например, вы можете установить другой шрифт для заголовков и для текста. Но почему мы указали на несколько персонажей? Просто потому, что есть механизм, чтобы, если первый символ не присутствует на клиентском компьютере, который будет отображать страницу, вы используете вторую, в противном случае третью и так далее.
Обычно последняя позиция используется для указания «семейства шрифтов» общим способом, чтобы предложить клиенту, при отсутствии всех указанных шрифтов, использовать значение по умолчанию для этого семейства. Типографические семейства шрифтов. Также обратите внимание, что типографские символы, имена которых состоят из более чем одного слова, должны быть написаны между одинарными кавычками, такими как.
#content p:first-letter {text-transform: uppercase;}С помощью псевдоэлемента «first-letter » и свойства «text-transform » мы задали оформление для каждой первой буквы параграфа.
Первая буква строки в верхнем регистре на jQueryКак я уже говорил ранее, этот способ преобразования лучше всего подойдет для материалов, которые еще только будут публиковаться.
Для примера мы возьмем текстовое поле (оно будет выступать у нас в качестве поля для ввода заголовка) и напишем для него небольшой скрипт, который при вводе предложения с маленькой буквы делает его с большой:
Шрифт-семья: «раз новый роман». Хорошо отметить, что для правильного отображения наших веб-страниц лучше ограничиться использованием наиболее часто используемых символов, таких как. Это можно использовать, указав процентное или числовое значение, за которым следует единица измерения. Свойства стиля шрифта и шрифта преобразуют символ, используемый настройкой стиля и жирным шрифтом соответственно. Значение по умолчанию для обоих - «нормальное».
Рассмотрим некоторые примеры использования. Обратите внимание, что благодаря этим свойствам вы также можете подорвать набор стилей по умолчанию для определенных тегов и так. Также для этого семейства существует компактная версия свойства шрифта. Единственными обязательными значениями являются размер шрифта и семейство шрифтов; все остальные являются необязательными.
$(document).ready(function() { $(".content").on("keyup", function () { var text = $(this).val(); var new_text = text.charAt(0).toUpperCase() + text.substr(1); $(this).val(new_text); }); });
Скрипт срабатывает как при написании текста, так и простой его вставке. Не забывайте, что для работы скриптов на вашем сайте необходимо наличие подключенной библиотеки jQuery.
CSS заглавные буквы помогают разбить монотонность однотипного дизайна, тексты которого выглядят одинаково от начала до конца.
Свойства семейства текстаВажное уточнение: в первом примере этого свойства мы определили размер шрифта следующим образом. В самом деле, с этим синтаксисом мы определили не только размер шрифта, но и значение высоты строки. Посмотрим, что будет дальше: «Последнее свойство». Это свойства текстового семейства, а именно.
Это свойство допускает следующие значения. Выравнивание по левому краю, выравнивание по правому краю, выравнивание по центру, выравнивание по выравниванию по выравниванию. Это свойство используется для указания возврата слева от первой строки блока текста. Он принимает процентные или числовые значения, сопровождаемые единицей измерения.
Буквицы раньше и сейчасЛетописцы использовали заглавные буквы в рукописях, которые писались от руки, некоторые из них относятся еще к V веку. Прописные буквы продолжали использоваться с VIII по XV век, когда типографские станки позволили вывести печать на промышленный уровень. И рукописные, и печатные буквицы размещались в начале текста. Часто их украшали декоративным рисунком, который располагался вокруг буквы.
Вы можете применить стиль символа к одному или нескольким абзацам абзаца. Например, если вы хотите приписать цвет и шрифт, отличный от остальной части абзаца, вы можете определить стиль шрифта с этими атрибутами. Затем вы можете применить его непосредственно к абзацу или вы можете вложить его в стиле абзаца.
Если каплет выровнен слишком далеко от левого края, выберите «Выровнять левую границу». Это особенно полезно для шрифтов, отформатированных без шрифтов. Если символ наложения перекрывается с текстом ниже, выберите Масштаб для потомков. Вы можете указать форматирование символов для одного или нескольких диапазонов текста в абзаце или строке. Вы также можете установить два или более вложенных стилей, чтобы они начинались в точке, где заканчивается другой. Для абзацев с повторяющимся и предсказуемым форматированием вы также можете отложить первый стиль последовательности.
Поднятые и опущенные буквы все еще используются в наши дни. Их можно встретить в газетах, журналах и книгах, а также в цифровой типографии. Поднятые литеры иногда называются вытянутыми. Они размещаются на одном уровне с нижней частью текста, который следует за ними. Опущенные буквы размещаются на одном уровне с верхней частью текста, иногда в слое позади основной части текстового контента, или остальной текст обтекает их.
Вложенные стили особенно полезны для встроенных заголовков в начале предложения. Например, вы можете применить стиль символа к первой букве абзаца и другому символьному стилю, который действует до первых двух точек. Для каждого вложенного стиля вы можете определить символ, который заканчивает стиль, например вкладку или конец слова.
Создайте один или несколько вложенных стилейСуществует также серия видеоуроков, которые начинаются со следующего видео: Вложенные таблицы стилей. Создание вложенных стилей строк Вы можете применить стиль символа к нескольким строкам абзаца. Как и вложенные стили, вы можете установить два или более вложенных стилей строк для совместного использования и создать повторяющуюся последовательность.
Поднятые буквы задаются намного проще, так они находятся на одном уровне с остальным текстом, и обычно для этого не нужно менять обтекание внешних полей. Опущенные буквы требуют более тонкой настройки. Вам будет проще разобраться с этим, если сначала вы поймете, как обрабатываются поднятые литеры.
Использование классовДизайнеры, которые уже имеют представление о CSS , знают, что нужно создать отдельный класс CSS для первой буквы заглавной.
Атрибуты, применяемые к вложенным стилям строк, могут сосуществовать с атрибутами, применяемыми вложенными стилями. Например, стиль вложенной строки может применять цвет, тогда как другой вложенный стиль может применяться курсивом. Если наборы имеют разные настройки для одного и того же атрибута, например красного и синего, вложенный стиль имеет приоритет над вложенным стилем строки.
Создайте цикл повторений вложенных стилейВы можете повторить серию из двух или более вложенных стилей в абзаце. Например, вы можете просто чередовать красные и зеленые слова в абзаце. Или во вложенных стилях строк вы можете чередовать строки абзаца с красным или зеленым текстом. Повторный шаблон сохраняется, даже если вы добавляете или удаляете слова из параграфа.
Код CSS для элемента абзаца и класса, создающего букву, будет выглядеть следующим образом:
P { font-size:20px; font-family: Georgia, "Times New Roman", Times, serif;} .myinitialcaps {font-size:48px; font-family: Didot;}
А HTML-код будет выглядеть так:
My initial cap is much bigger here and set in the Didot typeface.
Что дает нам:
Кажется, слишком просто? На самом деле вам придется вносить коррективы в зависимости от конкретных поднятых букв, так как каждая заглавная литера требует специального кернинга. После выбора шрифта для поднятых букв и для основного текста, нужно создавать отдельные классы для каждой поднятой литеры. В приведенном ниже CSS-классе.myinitialcapsi поле справа имеет отрицательное значение, чтобы уменьшить расстояние между I и n .
Опции вложенных стилей шрифтовЧтобы определить, как завершить вложенный стиль символа, выберите один из следующих вариантов. Если вы не хотите, чтобы шрифт был включен в форматирование вложенного стиля, выберите «до» вместо «включено», когда вы определяете вложенный стиль. Конец предложения обозначается точкой, вопросительным знаком или восклицательным знаком. Если за этой меткой препинания следуют кавычки, они считаются частью предложения.
Конец слова представлен любым пространством или символом пустого пространства. Включает любой символ, кроме маркеров нулевой ширины. Если вы выберете Символы, вы также можете ввести символ, который завершит вложенный стиль, например точку с запятой или точку. Если вы наберете больше символов, любой из них закончит стиль. Например, если встроенные заголовки в начале предложения заканчиваются дефисом, двумя точками или вопросительным знаком, вы можете ввести -:? так что вложенный стиль заканчивается одним из этих символов.
Myinitialcapsi {font-size:48px; font-family: Didot; margin-right:-1px;}
In this case, there’s some extra space between the “I” and “n.”
Including a new class with a negative margin pulls it closer.
В зависимости от разрешения экрана в приведенном выше примере I и n могут выглядеть так, будто они слились вместе. Это происходит из-за засечек на концах букв. Поэтому, прежде чем выбирать окончательный вариант стилей CSS , протестируйте сайт на различных устройствах, чтобы посмотреть, как на них выглядит текст заглавными буквами CSS .
Включает любой символ, кроме знаков препинания, пробелов, цифр и символов. Финиш вложенного стиля. Расширяет вложенный стиль до вложенного символа стиля, который вы вставляете, включаете или исключаете. Расширяет вложенный стиль до символа табуляции, включенный или исключенный.
Расширяет вложенный стиль до принудительного разрыва строки, независимо от того, включен или нет. Расширяет вложенный стиль до символа Назад сюда, включен или исключен. Длинные пространства, короткие пространства или унифицирующие пространства. Он расширяет вложенный стиль до символа пробела, будь он включен или исключен.
Цитаты и другие частные случаиМожно увеличить не только буквы в начале текста. Вы можете реализовать еще один класс, чтобы создать увеличенную версию кавычек, которые будут выводиться рядом с буквой. В нашем случае для кавычек не подходит ни класс буквы с размером 48, ни класс текста в 20 пикселей. Скорее, это будет что-то среднее - 30 пикселей. Кавычки мы подвинем вниз на 4 пикселя, чтобы оптически выровнять их с I :
Индикатор привязанного объекта. Расширяет вложенный стиль до указателя, который появляется в точке, где вставлен подключенный, включая или исключенный графический элемент. Расширяет вложенный стиль до автоматического номера страницы или маркера раздела, включенных или исключенных.
Закончить вложенный стильВ большинстве случаев вложенный стиль заканчивается, когда возникает определенное условие стиля, например, после трех слов или когда появляется точка. Тем не менее, вы также можете закончить вложенный стиль до того, как это условие произойдет с вложенным стилем конца стиля.
Myinitialcapsq {font-size:30px; font-family: Didot; float:left; margin-top:4px;}
“Including” a new class with a negative margin pulls it closer.
Нужно очень внимательно задавать каждую из CSS заглавных букв вместе с кавычками, чтобы их кернинг и выравнивание соответствовали окружающей разметке. Например, букву Т нужно будет сместить влево, немного за край абзаца, чтобы ее поперечная линия визуально вписывалась в макет. Аналогично нужно будет поступить и с круглыми буквами, такими как C , G , O и Q . В этом примере использованы размеры шрифтов 20, 30 и 48. Но вам нужно будет подобрать размеры, исходя из специфики шрифтов, которые вы выбрали. А также размеров и разрешений экранов, на которых будет просматриваться сайт.
Поместите курсор, где вы хотите закончить вложенный стиль. . Этот символ немедленно завершает вложенный стиль, независимо от определения стиля. Форматирование и добавление стиля в текст является одной из основных прерогатив для каждого веб-дизайнера. Опишем следующие свойства.
Текст можно выровнять влево, вправо или по центру. Вы уже знаете этот тип выравнивания из примеров в газетах или журналах. В приведенном ниже примере текст в заголовке таблицы будет выровнен правильно, в то время как данные в таблице будут центрированы. Кроме того, нормальные текстовые абзацы будут оправданы.
Псевдоэлементы и псевдоклассыС помощью псевдоэлемента CSS можно легко создать поднятую букву, добавив ::first-letter к элементу абзаца. Используйте :first-letter (с одним двоеточием ) для устаревших браузеров:
P { font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height:2em;padding-bottom:1.2em;} p::first-letter { font-size: 3.6em; text-transform: uppercase; font-family: "Monotype Bernard Condensed", serif; margin-right:0.03em;} .initialb {margin-right:-0.1em;} .initialn {margin-right:-0.15em;}
Например, вы можете выделить текст, вставить строку в текст или текст, и так далее. В следующем примере заголовки выделяются строкой над текстом и заголовками с удержанием текста. Значение свойства - это просто желаемое расстояние. Использовать заглавные буквы Использовать прописные буквы для первого символа каждого слова.
Предположим, нам нужны имена в заглавных и нижних регистрах. Это одно из самых важных и используемых свойств на веб-странице в целом, поскольку оно позволяет нам отрегулировать расстояние между строками. Это означает, что мы можем заставить наших посетителей оставаться или ужасно трудно или ненавязчиво приятно.
HTML-код , который содержит классы CSS , учитывающие кернинг букв N и B , будет выглядеть следующим образом...
An inital letter, with the first letter being a capital letter.
With a line break, the next line has no initial cap.
notice in the HTML source how the first letter, not a capital letter in the HTML, gets sized to the initial cap size of 3.6em. Neat, huh?
But with a hard return, and a new paragraph started, another initial cap always gets created. You might be asking yourself, How am I going to account for this? Am I supposed to have an initial cap at the beginning of very new paragraph? Well, you could. But, do you want it to look that way, and does it absolutely have to look that way?
В букву преобразовывается первая заглавная буква абзаца.
Первая буква после разрыва строки не будет преобразовываться в заглавную.
оОбратите внимание, что в исходном коде HTML первая буква не является заглавной, но она преобразуется в литеру с размером 3.6em.
ООднако и после принудительного разрыва строки, ив начале каждого нового абзаца всегда создается буква. Вы можете спросить себя: Как мне учитывать это? Нужно ли мне добавлять буквы для всех этих случаев? Что ж, вы можете. Но необходимо ли это?
Даже с учетом преимуществ, которые предоставляют псевдоэлементы, нам пришлось добавить много кода, чтобы определить отдельные классы для обработки проблем, связанных с кернингом и отступами. Но этот метод преобразует первую букву каждого нового абзаца в CSS заглавную букву. Для кого-то он может не подойти, потому что не нужно преобразовать первую букву каждого абзаца.
Объединение псевдоклассов и псевдоэлементов для создания смарт-макетаДобавление псевдокласса :first-child помогает решить проблему ненужного преобразования первых букв:
P { font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height:2em;padding-bottom:0.5em;} p:first-child::first-letter { font-size: 3.6em; text-transform: uppercase; font-family: "Monotype Bernard Condensed", serif; margin-right:0.03em;}
Объединив этот код с HTML :
Первая буква, которая определена, как first-child - это единственная буква которая преобразуется в поднятую буквицу при этом методе.
Так как преобразовывается только буква, определенная как first-child, обратите внимание, что этот пример отличается от предыдущего, без first-child. Кроме этого мы не преобразуем первые буквы после начала абзаца и после принудительного разрыва строки. Это выглядит более элегантно, по сравнению с тем, как выглядел макет, когда мы преобразовали все первые буквы абзацев.
Преимущество использования псевдоклассов заключается в возможности обрабатывать различные частные случаи. А что насчет недостатков? Существует много различных псевдоклассов, и их можно объединить таким количеством способов, что от этого может пойти кругом голова. Например, псевдоклассы :first-child и :first-of-type могут давать одинаковые результаты. Также можно применить псевдокласс не только к абзацу, но и к элементам или . Например, как показано в приведенном ниже примере с поднятым буквами в шрифте Didot . Обратите внимание, как атрибут margin был добавлен справа от буквы А . Иначе она "склеилась " бы с буквой s в начале раздела:
Section { font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height:3em;} section>p:first-child:first-letter { font-size: 4em; text-transform: uppercase; font-family:Didot, serif; margin-right:5px;}
И вместе с HTML :
В начале раздела для первой буквы задается поднятая буквица.
И новый абзац…
Если вы чувствуете тягу к экспериментам, то можете исследовать различные методы в дополнение к :first-child и :first-of-type . Например, такие как :nth-of-type или :nth-of-child , чтобы посмотреть, как те или другие типы псевдоклассов можно использовать для текста заглавными буквами CSS . Независимо от того, будете ли вы следовать изложенным в этой статье принципам или начнете копать глубже, когда вы научитесь работать с псевдоклассами CSS first-child , :first-of-type и :first-letter , вы сможете правильно применять их к элементам HTML .
Подводя чертуИспользование отдельных классов вместе с псевдоклассами для обработки различных букв - это процесс проб и ошибок, вычислений положительных и отрицательных отступов. И это требует большого терпения. Для таких букв, как F