Заглавная буква, в соответствии с определением, - это элемент текста, который увеличен в размере относительно Практически во всех языках с заглавной буквы начинается предложение. А оформление начала абзаца выделяющейся заглавной буквой позволяет структурировать текст и облегчает его восприятие. Когда оформляется интернет-страница, текст может быть написан в соответствии с предпочтениями автора и правилами русского языка. Также его оформление можно «автоматизировать» путем внесения определенных «команд» в файл с расширением css - таблицу стилей - или дополнить Ваш html файл разделом style. CSS обычно изучают дополнительно с html, чтобы быстро менять какие-то элементы оформления сразу во всем тексте.

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

Если вы примените css, заглавные буквы в начале каждого абзаца могут выглядеть особенным образом. К примеру, введенный в html без круглых скобок нижеприведенный код позволяет для текста, оформляемого тегом «р», сделать заглавную букву - first letter - более крупной - 220% от стандартного размера, желтого цвета - значение color равно yellow, и написать ее шрифтом, отличным от остального текста - Georgia против batangche.

(<) style(>)

p: first-letter {font-family: Georgia; font-size:220%; color: yellow;}

(<)/style(>)

Красивые заглавные буквы можно получить, если создать собственный шрифт в виде картинок - на каждую букву отдельная картинка, например, в древнерусском или готическом стиле. Их можно нарисовать в Тогда в требуемых местах на место заглавной буквы можно вставлять код без круглых скобок (<) img src=”ссылка на место, где лежит картинка”(>). Дополнительными атрибутами будут heigh и width - ширина и высота изображения, которую можно установить в пикселях для гармоничного сочетания с остальным текстом. Пример: (<) img src=”ссылка на место, где лежит картинка” heigh=12 px width=6px(>). Круглые скобки вокруг < и > убираем.

Если у вас нет возможности самостоятельно нарисовать алфавит, то заглавная буква может быть оформлена с помощью шрифтов, выложенных в свободном доступе на "Гугле" (раздел Fonts) или других поисковиках и ресурсах. Для этого вышеприведенный код нужно оформить следующим образом:

(<) style(>)

p {font-family: batangche; font-size:93%;}

p: first-letter {font-family: Kelly+Slab; font-size:220%; color: blue;}

(<)/style(>)

(<)link href="http://fonts.googleapis.com/css?family=Kelly+Slab&subset=latin,cyrillic" rel="stylesheet" type="text/css" (>).

Сервис "Гугла" позволяет выбрать тот или иной и предоставляет готовые ссылки для вставки в html или css. Обращаем ваше внимание на то, что необходимо обязательно выбрать группу шрифтов - латиницу или кириллицу, т.к. почти все латинские шрифты не работают при оформлении русскоязычного текста. На данный момент поисковик предоставляет около 40 видов на бесплатной основе.

Заглавная буква или ее прописной антипод могут быть оформлены с помощью свойства CSS text transform. Если в таблице стилей установить значение text transform: none, то текст будет выглядеть так, как вы его напишете. Для перевода всех букв в строчный регистр нужно через двоеточие установить значение text transform: lowercase, а для прописного регистра - uppercase. Установка же для свойства значения text transform: capitalize сделает так, что в начале каждого слова будет заглавная буква.

Управляет преобразованием текста элемента в заглавные или прописные символы. Когда значение отлично от none , регистр исходного текста будет изменён.

Краткая информация

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Значения

capitalize Первый символ каждого слова в предложении будет заглавным. Остальные символы свой вид не меняют. lowercase Все символы текста становятся строчными (нижний регистр). uppercase Все символы текста становятся прописными (верхний регистр). none Не меняет регистр символов.

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

div { text-transform: capitalize ; }

Пример

text-transform

Культурный памятник Средневековья

Амазонская низменность неумеренно берёт небольшой провоз кошек и собак, а Хайош-Байа славится красными винами.

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства text-transform

Объектная модель

Объект .style.textTransform

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации ) - первая черновая версия стандарта.

Доброго времени суток, гики сайтостроения. В сегодняшней публикации будет рассмотрена тема, касающаяся оформления текстового контента. Именно поэтому вы узнаете, как задаются заглавные буквы css — средствами, ознакомитесь с несколькими вариантами создания буквицы и конечно же сможете все опробовать на практике. Ну а теперь давайте переходить к самому интересному!

Займемся трансформацией текста

Благодаря каскадным стилевым таблицам можно изменять как первый символ блока, так и весь текст. Я расскажу вам, как можно сделать оба варианта. При этом все названные в данной статье инструменты поддерживаются в трех уровнях языка: css1, css2, css2.1 и css3.

Начну с интересного свойства, которое видоизменяет весь текстовый контент в выбранном . Это text-transform .

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

Вот теперь для закрепления теоретического материала разберите пример.

Трансформация текста

Внимание!

!Завтра на все косметические товары скидка!

Акция действует во всех филиалах, расположенных в Вашем городе.

Создание буквицы

Если вы не знаете, что подразумевает под собой термин «буквица», то как раз настало время узнать, так как это напрямую связано с текущей темой.

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

Существует несколько способов создания инициала. Часто символ выделяют тегом языка разметки и после в стилях прописывают определенные свойства, которые его видоизменяют. Это неплохой способ, однако данная публикация рассказывает про механизмы css (которые, по моему мнению, в данном случае использовать намного логичнее и удобнее).

Для решения поставленной задачи можно воспользоваться таким инструментом, как .

Так, в данном случае используется:first-letter. Как и все псевдоэлементы, он приписывается к селектору через двоеточие. После по всем правилам таблиц стилей указываются свойства. Однако применить можно только те свойства, которые относятся к редактированию шрифтов, отступов, цвета, заднего фона, полей и границ.

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

Выступающий инициал

В этом абзаце написано предложение с очень интересным содержанием.

Продолжим интересный рассказ и в следующем абзаце.

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

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

Если изложенный материал был вам полезен, то подписывайтесь на обновления моего блога и не забывайте делиться полученными знаниями (и конечно же ссылкой на мой блог) с друзьями. Желаю удачи!

Пока-пока!

С уважением, Роман Чуешов

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-код будет выглядеть так:

Что дает нам:

Кажется, слишком просто? На самом деле вам придется вносить коррективы в зависимости от конкретных поднятых букв, так как каждая заглавная литера требует специального кернинга. После выбора шрифта для поднятых букв и для основного текста, нужно создавать отдельные классы для каждой поднятой литеры. В приведенном ниже 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 .

или подробно про буквы и HTML CSS форматирование

Глава содержит примеры форматирования букв из области Гипертекстовой разметки.

В меню слева вы найдете современные и очень подробные уроки по HTML.

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

Это может быть интересно.

Эпоха информационного общества

Человечество вошло в новый период своего развития, в котором информационные и сетевые технологии играют исключительно важную роль. Мы живем в эпоху информационного общества, которое характеризуется стремительным развитием информационных и телекоммуникационных технологий. С появлением компьютера и интернета начались колоссальные перемены. Компьютер и интернет подталкивают общество к оформлению новых норм поведения, правил и идеалов. Интернет для нового поколения является тем, чем было телевидение для предыдущего. Но Глобальная сеть намного функциональнее телевидения, потому как предоставляет возможность осуществлять покупки, продажи, предлагает общение и различные способы самовыражения, как, например, создание персональных интернет-страниц и сайтов.