Какое свойство позволит сделать все символы в тексте заглавными
ÐÑоÑмлÑÑ ÑÑÑаниÑÑ ÑайÑа, нам не Ñедко пÑÐ¸Ñ Ð¾Ð´Ð¸ÑÑÑ Ð²ÑделÑÑÑ Ð·Ð°Ð³Ð¾Ð»Ð¾Ð²ÐºÐ¸ или какие-Ñо ÑÑагменÑÑ ÑекÑÑа заглавнÑми бÑквами. ÐонеÑно, в ÑлÑÑае еÑли ÑÑо нÑжно ÑделаÑÑ Ð¾Ð´Ð¸Ð½ Ñаз, Ñо пÑоÑе вÑего не замоÑаÑиваÑÑÑÑ Ð¸ набÑаÑÑ Ð½ÑжнÑй ÑекÑÑ Ñ Ð¿Ð¾Ð¼Ð¾ÑÑÑ ÐºÐ»Ð°Ð²Ð¸Ñи Caps Lock. Ð ÑÑо еÑли Ð¼Ñ Ð´ÐµÐ»Ð°ÐµÐ¼ какÑÑ-Ñо ÑиповÑÑ ÑÑÑаниÑÑ, и вÑе поÑледÑÑÑие бÑдÑÑ Ð½Ð° нее Ð¿Ð¾Ñ Ð¾Ð¶Ð¸, и ÑекÑÑ Ð½Ñжно бÑÐ´ÐµÑ Ð²ÑделÑÑÑ Ð² Ð¾Ð´Ð½Ð¸Ñ Ð¸ ÑÐµÑ Ð¶Ðµ Ð±Ð»Ð¾ÐºÐ°Ñ Ð½Ð° ÑÑÑаниÑе?
Ð ÑлÑÑае еÑли Ñ Ð½Ð°Ñ ÐµÑÑÑ Ð±Ð»Ð¾ÐºÐ¸, в коÑоÑÑÑ ÑекÑÑ Ð¾Ð±ÑзаÑелÑно должен бÑÑÑ Ð²Ñделен, Ð¼Ñ Ð¼Ð¾Ð¶ÐµÐ¼ Ð´Ð»Ñ Ð½Ð¸Ñ Ð·Ð°Ð´Ð°ÑÑ Ð¾ÑобÑажение ÑекÑÑа, Ñ Ð¿Ð¾Ð¼Ð¾ÑÑÑ ÑвойÑÑва CSS, заглавнÑми бÑквами.
Ðак ÑделаÑÑ Ð² CSS заглавнÑе бÑквÑ?
ЧÑÐ¾Ð±Ñ ÑделаÑÑ Ð² CSS заглавнÑе бÑÐºÐ²Ñ Ð¼Ð¾Ð¶Ð½Ð¾ воÑполÑзоваÑÑÑÑ ÑвойÑÑва text-transform, иÑполÑзÑÑ Ð¾Ð´Ð½Ð¾ из его знаÑений uppercase. ÐапÑимеÑ:
Ðелаем блок Ñ Ð·Ð°Ð³Ð¾Ð»Ð¾Ð²ÐºÐ¾Ð¼ в html:
<div class=»text-transformation»> <h3>ÐадаÑм в CSS заглавнÑе бÑквÑ</h3> </div> |
Ðадаем ÑвойÑÑво text-transform: uppercase; Ð´Ð»Ñ Ñега h3:
.text-transformation h3{ text-transform: uppercase; } |
ÐадаÑм в CSS заглавнÑе бÑквÑ
ТекÑÑ Ð±Ð»Ð¾ÐºÐ°
ÐÑоме uppercase данное CSS ÑвойÑÑво Ð¼Ð¾Ð¶ÐµÑ Ð¿ÑинимаÑÑ Ð¸ дÑÑгие знаÑениÑ:
capitalize -каждое новое Ñлово бÑÐ´ÐµÑ Ð¸Ð´Ñи Ñ Ð·Ð°Ð³Ð»Ð°Ð²Ð½Ð¾Ð¹ бÑквÑ
lowercase — вÑе бÑÐºÐ²Ñ ÑÑановÑÑÑÑ ÑÑÑоÑнÑми (маленÑкими)
none — знаÑение по ÑмолÑаниÑ
inherit — знаÑение наÑледÑеÑÑÑ
ÐонеÑно же, Ð²Ñ Ð¼Ð¾Ð¶ÐµÑе пÑимениÑÑ Ð´Ð°Ð½Ð½Ð¾Ðµ ÑвойÑÑво и Ð´Ð»Ñ Ñже ÑÑÑеÑÑвÑÑÑÐ¸Ñ ÑлеменÑов на ÑайÑе. ÐапÑимеÑ, Ð²Ñ ÑеÑили измениÑÑ Ð¾ÑобÑажение заголовков ÑÑаÑей, но пеÑебиÑаÑÑ Ð²Ñе ÑÑаÑÑи на ÑайÑе и иÑпÑавлÑÑÑ Ð²Ñе вÑÑÑнÑÑ Ð·Ð°Ð¹Ð¼ÐµÑ Ð¼Ð½Ð¾Ð³Ð¾ вÑемени.
Ð ÑÑом ÑлÑÑае намного Ñдобнее бÑÐ´ÐµÑ Ð¿ÑеобÑазоваÑÑ Ñже ÑÑÑеÑÑвÑÑÑий ÑекÑÑ Ñ Ð¿Ð¾Ð¼Ð¾ÑÑÑ ÑвойÑÑва CSS в заглавнÑе бÑквÑ.
ÐÐ»Ñ ÑÑого вÑего лиÑÑ Ð½Ñжно вÑÑиÑлиÑÑ ÐºÐ»Ð°ÑÑ, коÑоÑÑй оÑвеÑÐ°ÐµÑ Ð·Ð° оÑобÑÐ°Ð¶ÐµÐ½Ð¸Ñ Ð·Ð°Ð³Ð¾Ð»Ð¾Ð²ÐºÐ° ÑÑаÑÑи, и задаÑÑ ÐµÐ¼Ñ Ð½Ñжное ÑвойÑÑво.
ÐнÑеÑеÑное ÑвойÑÑво font-variant
ÐÐ»Ñ Ð²ÑÐ´ÐµÐ»ÐµÐ½Ð¸Ñ ÑекÑÑа в CSS заглавнÑми бÑквами ÑÑÑеÑÑвÑÐµÑ ÐµÑе одно ÑвойÑÑво font-variant, коÑоÑое Ð´Ð°ÐµÑ Ð´Ð¾ÑÑаÑоÑно необÑÑнÑй и инÑеÑеÑнÑй ÑÑÑекÑ.
font-variant Ð¼Ð¾Ð¶ÐµÑ Ð¿ÑинимаÑÑ ÑÑи знаÑениÑ:
small-caps â оÑобÑÐ°Ð¶Ð°ÐµÑ Ð²Ñе ÑÐ¸Ð¼Ð²Ð¾Ð»Ñ Ñлова, коÑоÑÑе ÑледÑÑÑ Ð¿Ð¾Ñле заглавной бÑквÑ, капиÑелÑнÑми Ñимволами. СÑÑоÑнÑе ÑÐ¸Ð¼Ð²Ð¾Ð»Ñ Ð¿ÑеобÑазÑÑÑÑÑ Ð² заглавнÑе, но ÑменÑÑенного ÑазмеÑа.
normal â вид ÑÑиÑÑа по ÑмолÑаниÑ
inherit â наÑледÑÐµÑ ÑÑÐ¸Ð»Ñ Ð¾ÑобÑÐ°Ð¶ÐµÐ½Ð¸Ñ ÑÑиÑÑа Ñ ÑодиÑелÑÑкого ÑлеменÑа.
ÐÐ¾Ñ Ð¿ÑÐ¸Ð¼ÐµÑ Ð¸ÑполÑÐ·Ð¾Ð²Ð°Ð½Ð¸Ñ Ð´Ð°Ð½Ð½Ð¾Ð³Ð¾ ÑвойÑÑва:
<div class=»text-kapitel»> <h2 class=»kapitel»>ÐапиÑелÑнÑе ÑÐ¸Ð¼Ð²Ð¾Ð»Ñ Ð² заголовке</h2> <h2>СÑандаÑÑнÑй заголовок H2</h2> </div> |
CSS:
.kapitel{ font-variant:small-caps!important; } |
ÐапиÑелÑнÑе ÑÐ¸Ð¼Ð²Ð¾Ð»Ñ Ð² заголовке
СÑандаÑÑнÑй заголовок H2
ÐадеÑÑÑ, ÑÑо ÑепеÑÑ Ñ Ð²Ð°Ñ Ð½Ðµ Ð²Ð¾Ð·Ð½Ð¸ÐºÐ½ÐµÑ Ð¿Ñоблем Ñ Ñозданием заглавнÑÑ Ð±Ñкв! ÐÑли вам понÑавилаÑÑ ÑÑаÑÑÑ, обÑзаÑелÑно поделиÑеÑÑ ÐµÑ Ð² ÑоÑиалÑнÑÑ ÑеÑÑÑ , и подпиÑиÑеÑÑ Ð½Ð° Ð¼Ð¾Ñ ÑаÑÑÑлкÑ.
Рна ÑÐµÐ³Ð¾Ð´Ð½Ñ Ñ Ð¼ÐµÐ½Ñ Ð²Ñе. Ðо вÑÑÑеÑи в ÑледÑÑÑÐ¸Ñ ÑÑаÑÑÑÑ !
С Ñважением Ð®Ð»Ð¸Ñ ÐÑÑаÑÑ
Доброго времени суток, гики сайтостроения. В сегодняшней публикации будет рассмотрена тема, касающаяся оформления текстового контента. Именно поэтому вы узнаете, как задаются заглавные буквы css — средствами, ознакомитесь с несколькими вариантами создания буквицы и конечно же сможете все опробовать на практике. Ну а теперь давайте переходить к самому интересному!
Займемся трансформацией текста
Благодаря каскадным стилевым таблицам можно изменять как первый символ блока, так и весь текст. Я расскажу вам, как можно сделать оба варианта. При этом все названные в данной статье инструменты поддерживаются в трех уровнях языка: css1, css2, css2.1 и css3.
Начну с интересного свойства, которое видоизменяет весь текстовый контент в выбранном блоке. Это text-transform.
Названный элемент может преобразовывать символы к прописным, строчным, а также задавать каждый первый символ слова в виде заглавной буквы. Подробнее о значениях я написал в таблице.
| Ключевое слово | Предназначение |
| none | Указывает, что регистр изменяться не будет. |
| Capitalize | Изменяет первый символ каждого слова на заглавную букву, при этом остальные остаются неизменными. |
| Uppercase | Контент трансформируется в верхний регистр, т.е. все буквы становятся большими. |
| Lowercase | Контент трансформируется в нижний регистр, т.е. все символы становятся строчными. |
| inherit | Наследуются характеристики предка. |
Вот теперь для закрепления теоретического материала разберите пример.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Трансформация текста</title> <style> body { text-align: center; } h1 { text-transform: uppercase; } h3 { text-transform: capitalize; } </style> </head> <body> <h1>Внимание!</h1> <h3>!Завтра на все косметические товары скидка!</h3> <p>Акция действует во всех филиалах, расположенных в Вашем городе.</p> </body> </html> |
Создание буквицы
Если вы не знаете, что подразумевает под собой термин «буквица», то как раз настало время узнать, так как это напрямую связано с текущей темой.
Буквица (или еще иногда говорят инициал) – это первая буква главы, которая отличается от остальных своим крупным размером, цветом и в некоторых случаях даже дизайном шрифта. В жизни пример такой буквы можно встретить в старых рукописях и книгах.
Существует несколько способов создания инициала. Часто символ выделяют тегом языка разметки <span> и после в стилях прописывают определенные свойства, которые его видоизменяют. Это неплохой способ, однако данная публикация рассказывает про механизмы css (которые, по моему мнению, в данном случае использовать намного логичнее и удобнее).
Для решения поставленной задачи можно воспользоваться таким инструментом, как псевдоэлемент.
Так, в данном случае используется :first-letter. Как и все псевдоэлементы, он приписывается к селектору через двоеточие. После по всем правилам таблиц стилей указываются свойства. Однако применить можно только те свойства, которые относятся к редактированию шрифтов, отступов, цвета, заднего фона, полей и границ.
Предлагаю рассмотреть конкретный пример. Реализуя представленную небольшую программу, я решил сделать не просто цветную буквицу, а заполнить ее цветами. Для этого нужно использовать несколько хитрых приемов с установкой прозрачного цвета шрифта и заливкой буквы выбранным изображением.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Выступающий инициал</title> <style> p { font-size: 26px; font-family: fantasy; } P:first-letter { /*прописываю стилевые правила для первой буквы абзаца*/ font-family: sant-serif; font-weight: 900; color: transparent; background: url(https://dreempics.com/img/picture/Mar/26/51a6ff79968c93a6542e88e464368bce/1.jpg); background-size: 99%; font-size: 119px; -webkit-background-clip: text; } </style> </head> <body> <p>В этом абзаце написано предложение с очень интересным содержанием.</p> <p>Продолжим интересный рассказ и в следующем абзаце.</p> </body> </html> |
Полученный результат выглядит очень привлекательно и необычно, что является идеальным решением для сайта.
Как видите данная тема очень простая. Приведенный мною программный код вы спокойно можете использовать для своих веб-ресурсов, модифицируя и подгоняя под свой стиль.
Если изложенный материал был вам полезен, то подписывайтесь на обновления моего блога и не забывайте делиться полученными знаниями (и конечно же ссылкой на мой блог) с друзьями. Желаю удачи!
Пока-пока!
С уважением, Роман Чуешов
Загрузка…
CSS заглавные буквы помогают разбить монотонность однотипного дизайна, тексты которого выглядят одинаково от начала до конца.
Летописцы использовали заглавные буквы в рукописях, которые писались от руки, некоторые из них относятся еще к V веку. Прописные буквы продолжали использоваться с VIII по XV век, когда типографские станки позволили вывести печать на промышленный уровень. И рукописные, и печатные буквицы размещались в начале текста. Часто их украшали декоративным рисунком, который располагался вокруг буквы.
Поднятые и опущенные буквы все еще используются в наши дни. Их можно встретить в газетах, журналах и книгах, а также в цифровой типографии. Поднятые литеры иногда называются вытянутыми. Они размещаются на одном уровне с нижней частью текста, который следует за ними. Опущенные буквы размещаются на одном уровне с верхней частью текста, иногда в слое позади основной части текстового контента, или остальной текст обтекает их.
Поднятые буквы задаются намного проще, так они находятся на одном уровне с остальным текстом, и обычно для этого не нужно менять обтекание внешних полей. Опущенные буквы требуют более тонкой настройки. Вам будет проще разобраться с этим, если сначала вы поймете, как обрабатываются поднятые литеры.
Дизайнеры, которые уже имеют представление о CSS, знают, что нужно создать отдельный класс CSS для первой буквы заглавной.
Код CSS для элемента абзаца и класса, создающего букву, будет выглядеть следующим образом:
.myinitialcaps {font-size:48px; font-family: Didot;}
А HTML-код будет выглядеть так:
Что дает нам:
Кажется, слишком просто? На самом деле вам придется вносить коррективы в зависимости от конкретных поднятых букв, так как каждая заглавная литера требует специального кернинга. После выбора шрифта для поднятых букв и для основного текста, нужно создавать отдельные классы для каждой поднятой литеры. В приведенном ниже CSS-классе .myinitialcapsi поле справа имеет отрицательное значение, чтобы уменьшить расстояние между I и n.
<p><span class=»myinitialcaps»>I</span>n this case, there’s some extra space between the “I” and “n.”</p> <p><span class=»myinitialcapsi»>I</span>ncluding a new class with a negative margin pulls it closer.</p>
В зависимости от разрешения экрана в приведенном выше примере I и n могут выглядеть так, будто они слились вместе. Это происходит из-за засечек на концах букв. Поэтому, прежде чем выбирать окончательный вариант стилей CSS, протестируйте сайт на различных устройствах, чтобы посмотреть, как на них выглядит текст заглавными буквами CSS.
Можно увеличить не только буквы в начале текста. Вы можете реализовать еще один класс, чтобы создать увеличенную версию кавычек, которые будут выводиться рядом с буквой. В нашем случае для кавычек не подходит ни класс буквы с размером 48, ни класс текста в 20 пикселей. Скорее, это будет что-то среднее — 30 пикселей. Кавычки мы подвинем вниз на 4 пикселя, чтобы оптически выровнять их с I:
<p><span class=»myinitialcapsq»>“</span><span class=»myinitialcapsi»>I</span>ncluding” a new class with a negative margin pulls it closer.</p>
Нужно очень внимательно задавать каждую из CSS заглавных букв вместе с кавычками, чтобы их кернинг и выравнивание соответствовали окружающей разметке. Например, букву Т нужно будет сместить влево, немного за край абзаца, чтобы ее поперечная линия визуально вписывалась в макет. Аналогично нужно будет поступить и с круглыми буквами, такими как C, G, O и Q. В этом примере использованы размеры шрифтов 20, 30 и 48. Но вам нужно будет подобрать размеры, исходя из специфики шрифтов, которые вы выбрали. А также размеров и разрешений экранов, на которых будет просматриваться сайт.
С помощью псевдоэлемента CSS можно легко создать поднятую букву, добавив ::first-letter к элементу абзаца. Используйте :first-letter (с одним двоеточием) для устаревших браузеров:
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, будет выглядеть следующим образом…
With a line break, the next line has no initial cap.</p>
<p><span class=»initialn»>n</span>otice 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?</p>
<p><span class=»initialb»>B</span>ut with a hard return, and a new paragraph started, another initial cap always gets created. You might be asking yourself, <em>How am I going to account for this? Am I supposed to have an initial cap at the beginning of very new paragraph?</em> Well, you could. But, do you want it to look that way, and does it absolutely have to look that way?</p>
<p>В букву преобразовывается первая заглавная буква абзаца.<br>
Первая буква после разрыва строки не будет преобразовываться в заглавную.</p>
<p><span class=»initialn»>о</span>Обратите внимание, что в исходном коде HTML первая буква не является заглавной, но она преобразуется в литеру с размером 3.6em.</p>
<p><span class=»initialb»>О</span>Однако и после принудительного разрыва строки, ив начале каждого нового абзаца всегда создается буква. Вы можете спросить себя: <em>Как мне учитывать это? Нужно ли мне добавлять буквы для всех этих случаев?</em> Что ж, вы можете. Но необходимо ли это?</p>
Даже с учетом преимуществ, которые предоставляют псевдоэлементы, нам пришлось добавить много кода, чтобы определить отдельные классы для обработки проблем, связанных с кернингом и отступами. Но этот метод преобразует первую букву каждого нового абзаца в CSS заглавную букву. Для кого-то он может не подойти, потому что не нужно преобразовать первую букву каждого абзаца.
Добавление псевдокласса :first-child помогает решить проблему ненужного преобразования первых букв:
p:first-child::first-letter { font-size: 3.6em; text-transform: uppercase; font-family: «Monotype Bernard Condensed», serif; margin-right:0.03em;}
Объединив этот код с HTML:
<p>Так как преобразовывается только буква, определенная как first-child, обратите внимание, что этот пример отличается от предыдущего, без first-child. Кроме этого мы не преобразуем первые буквы после начала абзаца и после принудительного разрыва строки. Это выглядит более элегантно, по сравнению с тем, как выглядел макет, когда мы преобразовали все первые буквы абзацев.</p>
Преимущество использования псевдоклассов заключается в возможности обрабатывать различные частные случаи. А что насчет недостатков? Существует много различных псевдоклассов, и их можно объединить таким количеством способов, что от этого может пойти кругом голова. Например, псевдоклассы :first-child и :first-of-type могут давать одинаковые результаты. Также можно применить псевдокласс не только к абзацу, но и к элементам <section> или <div>. Например, как показано в приведенном ниже примере с поднятым буквами в шрифте Didot. Обратите внимание, как атрибут margin был добавлен справа от буквы А. Иначе она «склеилась» бы с буквой s в начале раздела:
section>p:first-child:first-letter { font-size: 4em; text-transform: uppercase; font-family:Didot, serif; margin-right:5px;}
И вместе с HTML:
<p>В начале раздела для первой буквы задается поднятая буквица.</p>
<p>И новый абзац…</p>
</section>
Если вы чувствуете тягу к экспериментам, то можете исследовать различные методы в дополнение к :first-child и :first-of-type. Например, такие как :nth-of-type или :nth-of-child, чтобы посмотреть, как те или другие типы псевдоклассов можно использовать для текста заглавными буквами CSS. Независимо от того, будете ли вы следовать изложенным в этой статье принципам или начнете копать глубже, когда вы научитесь работать с псевдоклассами CSS first-child, :first-of-type и :first-letter, вы сможете правильно применять их к элементам HTML.
Использование отдельных классов вместе с псевдоклассами для обработки различных букв — это процесс проб и ошибок, вычислений положительных и отрицательных отступов. И это требует большого терпения. Для таких букв, как F, G, O, P, Q, T, W, V и Y также потребуются отдельные классы кернинга.
Но самое интересное начинается тогда, когда вы на практике начинаете тестировать различные сочетания шрифтов и создавать поднятые буквы, которые будут привлекать внимание ваших читателей и выделять ваш сайт из общей массы.
Данная публикация представляет собой перевод статьи «Making Initial Letters Part I: Raised Initials» , подготовленной дружной командой проекта Интернет-технологии.ру
Заглавные HTML буквы
CSS расстояние между буквами
или подробно про буквы и HTML CSS форматирование
Глава содержит примеры форматирования букв из области Гипертекстовой разметки.
В меню слева вы найдете современные и очень подробные уроки по HTML.
Они позволят вам создать свой сайт с чистого листа, а пока смотрим немного ниже.
Основное содержание этой главы
- HTML буквы и CSS расстояние между буквами: предисловие и очень полезная информация
- Сначала эпоха информационного общества, а вслед за ней пройдемся по HTML буквам
- HTML буквы: большие и заглавные: способы форматирования
- HTML буквы и CSS расстояние между ними: еще несколько примеров
Прежде, чем перейти к HTML и CSS буквам, предлагаю ознакомиться с некоторой информацией.
Это может быть интересно.
Эпоха информационного общества
Человечество вошло в новый период своего развития, в котором информационные и сетевые технологии играют исключительно важную роль. Мы живем в эпоху информационного общества, которое характеризуется стремительным развитием информационных и телекоммуникационных технологий. С появлением компьютера и интернета начались колоссальные перемены. Компьютер и интернет подталкивают общество к оформлению новых норм поведения, правил и идеалов. Интернет для нового поколения является тем, чем было телевидение для предыдущего. Но Глобальная сеть намного функциональнее телевидения, потому как предоставляет возможность осуществлять покупки, продажи, предлагает общение и различные способы самовыражения, как, например, создание персональных интернет-страниц и сайтов.
HTML буквы: большие и заглавные
Пример форматирования букв:
<p><big>Пример произвольного текста, написанного большими буквами</big></p>
<p style=»text-transform:uppercase»>Пример произвольного текста, написанного заглавными буквами</p>
Результат форматирования:
Пример произвольного текста, написанного большими буквами
Пример произвольного текста, написанного заглавными буквами
Описание атрибутов и значений:
Теги <big> </big> – определяют большие буквы (эти теги не поддерживаются в HTML 5).
CSS код style=»text-transform:uppercase» – определяет заглавные буквы.
Выражаясь другими словами, заглавные буквы определяются с помощью CSS атрибутов.
Подробности ищите в самоучителе по HTML и CSS
HTML буквы и CSS расстояние между ними
Пример форматирования букв:
<p style=»letter-spacing:2px»>Произвольный HTML текст и CSS расстояние между буквами в 2 пикселя</p>
Результат форматирования:
Произвольный HTML текст и CSS расстояние между буквами в 2 пикселя
Описание атрибутов и значений:
CSS код style=»letter-spacing:2px» – определяет CSS расстояние между буквами.
Подобные примеры форматирования ищите в меню слева. Спасибо за ваше внимание.
1 3 4 5 6 7 8 9 10 11 12
Дата публикации: Июль 2011 | Обновление: Ноябрь 2018
HTML и CSS коды 
Заглавные HTML буквы и CSS расстояние