Заглавная буква в html и css

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

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

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

(<) style(>)

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

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

(<)/style(>)

Красивые заглавные буквы можно получить, если создать собственный шрифт в виде картинок – на каждую букву отдельная картинка, например, в древнерусском или готическом стиле. Их можно нарисовать в графическом редакторе. Тогда в требуемых местах на место заглавной буквы можно вставлять код без круглых скобок (<) img src=”ссылка на место, где лежит картинка”(>). Дополнительными атрибутами тега Img будут 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(>)

А в тег «head» добавить ссылку без круглых скобок для «подключения», где после family указывается выбранное семейство шрифтов, подставляемое, кроме того, также в p: first-letter.

(<)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 сделает так, что в начале каждого слова будет заглавная буква.