Главната буква по дефиниция е елемент от текста, който е сравнително увеличен по размер.Почти всички езици започват изречение с главна буква. А дизайнът на началото на абзаца с изпъкнала главна буква ви позволява да структурирате текста и улеснява възприемането му. Когато се проектира уеб страница, текстът може да бъде написан в съответствие с предпочитанията на автора и правилата на руския език. Освен това неговият дизайн може да бъде "автоматизиран" чрез въвеждане на определени "команди" във файл с разширение css - лист със стилове - или допълване на вашия html файлраздел стил. CSS обикновено се изучава допълнително с html, за да се променят бързо някои дизайнерски елементи наведнъж в целия текст.

Това е особено вярно, ако сайтът има стотици страници и извършването на промени във всяка от тях е много времеемък процес.

Ако използвате css, главните букви в началото на всеки параграф могат да изглеждат специално. Например, въведен в html без скоби, следният код позволява на текста, форматиран с тага "p", да направи главната буква - първата буква - по-голяма - 220% от стандартния размер, жълт цвят - стойността на цвета е жълта, и го напишете с шрифт, различен от останалия текст - Грузия срещу батангче.

(<) style(>)

p: първа буква (семейство шрифтове: Georgia; размер на шрифта: 220%; цвят: жълт;)

(<)/style(>)

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

Ако нямате възможност сами да нарисувате азбуката, тогава главната буква може да бъде проектирана с помощта на шрифтове, които са свободно достъпни в Google (раздел Шрифтове) или други търсачки и ресурси. За да направите това, горният код трябва да бъде форматиран, както следва:

(<) style(>)

p (семейство шрифтове: batangche; размер на шрифта: 93%;)

p: първа буква (семейство шрифтове: Kelly+Slab; размер на шрифта: 220%; цвят: син;)

(<)/style(>)

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

Услугата на Google ви позволява да изберете едно или друго и предоставя готови връзки за вмъкване в html или css. Обръщаме внимание, че е необходимо да изберете група шрифтове – латински или кирилски, т.к. почти всички латински шрифтове не работят при форматиране на текст на руски език. На този моментТърсачката предоставя около 40 вида безплатно.

Може да се стилизира главна или малка буква css свойстватрансформиране на текст. Ако зададете стойността на text transform: none в листа със стилове, тогава текстът ще изглежда така, както го пишете. За да преобразувате всички букви в малки букви, трябва да зададете трансформацията на текста на стойността: малки букви през двоеточие и главни букви за главни букви. Настройката е същата за собственост текстови стойности transform: капитализиране ще направи всяка дума да започва с главна буква.

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

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

В менюто отляво ще намерите модерни и много подробни HTML уроци.

Те ще ви позволят да създадете вашия уебсайт с на чисто докато гледате малко по-надолу.

Може да е интересно.

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

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

HTML букви: главни и малки букви

Пример за форматиране на букви:

Форматиране на резултат:

Пример за свободен текст, написан с главни букви

Пример за свободен текст, написан с главни букви

етикети - дефинирам главни букви(Тези тагове не се поддържат в HTML 5).

cssкод style="text-transform:uppercase" - определя главни букви.

С други думи, главните букви се дефинират с CSSатрибути.

HTML букви и CSS разстояние между тях

Пример за форматиране на букви:

Форматиране на резултат:

Произволно HTML тексти CSS разстояниемежду буквите през 2 пиксела

Описание на атрибути и стойности:

cssкод style="letter-spacing:2px" - определя CSS разстояние между буквите.

Потърсете подобни примери за форматиране в менюто отляво. Благодаря за вниманието.

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

Писмата някога и сега

Хронистите са използвали главни букви в ръкописни ръкописи, някои от които датират от 5 век. Главните букви продължават да се използват от 8-ми до 15-ти век, когато печатарските преси правят възможно печатането да достигне индустриално ниво. В началото на текста бяха поставени както ръкописни, така и печатни главни букви. Често те бяха украсени с декоративен модел, който беше разположен около буквата.

Повдигнатите и спуснати букви се използват и днес. Те могат да бъдат намерени във вестници, списания и книги, както и в дигитален печат. Повдигнатите букви понякога се наричат ​​удължени. Те са разположени на същото ниво като отдолутекстът, който ги следва. Изпуснатите букви се поставят наравно с горната част на текста, понякога в слой зад тялото текстово съдържание, или останалата част от текста се увива около тях.

Изпъкналите букви са много по-лесни за дефиниране, тъй като се изравняват с останалата част от текста и обикновено не е необходимо да се променя обвивката на външните полета. Пропуснатите букви изискват повече фина настройка. Ще ви бъде по-лесно да се справите с това, ако първо разберете как се обработват повдигнатите знаци.

Използване на класове

Дизайнерите, които вече разбират CSS, знаят как да създадат отделен CSS клас за първата главна буква.

CSS кодът за елемента абзац и класа, който създава буквата, ще изглежда така:

p (размер на шрифта:20px; семейство шрифтове: Georgia, "Times New Roman", Times, сериф;) .myinitialcaps (размер на шрифта:48px; семейство шрифтове: Didot;)

И HTML кодът ще изглежда така:

Какво ни дава:

Изглежда твърде лесно? Всъщност ще трябва да правите корекции в зависимост от конкретните релефни букви, тъй като всяка главна буква изисква специален кернинг. След като изберете шрифт за релефните букви и за основния текст, трябва да създадете отделни класове за всяка релефна буква. По-долу CSS class.myinitialcapsiполето отдясно е отрицателно, за да се намали разстоянието между I и n.

Myiniitialcapsi(font-size:48px; font-family: Didot; margin-right:-1px;)

азВ този случай има допълнително разстояние между „I“ и „n“.

азвключването на нов клас с отрицателен марж го приближава.

В зависимост от разделителната способност на екрана в примера по-горе, I и n може да изглеждат така, сякаш са се слели. Това се дължи на серифите в края на буквите. Ето защо, преди да изберете окончателните CSS стилове, тествайте сайта на различни устройстваза да видите как CSS текстът изглежда върху тях.

Цитати и други специални случаи

Можете да увеличите не само буквите в началото на текста. Можете да внедрите друг клас, за да създадете по-голяма версия на кавичките, които ще се показват до буквата. В нашия случай нито класът букви с размер 48, нито класът текст 20 пиксела са подходящи за котировки. По-скоро ще е нещо средно - 30 пиксела. Преместваме кавичките надолу с 4 пиксела, за да ги подравним оптически с I:

Myinitialcapsq (font-size:30px; font-family: Didot; float:left; margin-top:4px;)

“азвключително” нов клас с отрицателен марж го приближава.

Трябва да бъдете много внимателни, когато указвате всяка от CSS главните букви заедно с кавичките, така че тяхното кернинг и подравняване да съответства на заобикалящото маркиране. Например, буквата T ще трябва да се премести наляво, малко отвъд ръба на абзаца, така че нейната напречна линия визуално да се вписва в оформлението. Ще трябва да направите същото с кръгли букви като C, G, O и Q. Този пример използва размери на шрифта 20, 30 и 48. Но ще трябва да коригирате размерите въз основа на конкретните шрифтове, които сте избрали. Както и размерите и резолюциите на екраните, на които ще се гледа сайта.

Псевдоелементи и псевдокласове

Използвайки CSS псевдоелемента, можете лесно да създадете релефна буква, като добавите ::first-letter към елемента абзац. Използвайте :първа буква ( с едно двоеточие) за наследени браузъри:

p ( размер на шрифта: 1,2 em; семейство шрифтове: Georgia, "Times New Roman", Times, сериф; височина на реда: 2 em; подложка-отдолу: 1,2 em;) p:: първа буква ( размер на шрифта: 3.6em; преобразуване на текст: главни букви; семейство шрифтове: "Monotype Bernard Condensed", serif; margin-right:0.03em;) .initialb (margin-right:-0.1em;) .initialn (margin-right:-0.15 ем ;)

HTML код, който съдържа CSS класове, които вземат предвид кернинга на буквите N и B, ще изглежда така...

Начална буква, като първата буква е главна.
При прекъсване на ред следващият ред няма начална горна граница.

нзабележете в източника на HTML как първата буква, а не главна буква в HTML, се оразмерява до първоначалния размер на капачката от 3,6 em. Чисто, а?

бно с твърдо връщане и започване на нов параграф, винаги се създава друга начална капачка. Може би се питате Как ще отчитам това? Трябва ли да имам начална шапка в началото на много нов параграф?Е, можеше. Но искате ли да изглежда по този начин и задължително ли трябва да изглежда по този начин?

Първата главна буква на параграф се преобразува в буква.
Първата буква след нов ред няма да бъде главна.

относноМоля, имайте предвид, че в програмен кодВ HTML първата буква не е главна, но се преобразува в знак 3.6em.

ОВъпреки това, дори след принудително прекъсване на реда, винаги се създава буква в началото на всеки нов параграф. Може да се запитате: Как мога да взема това предвид? Трябва ли да добавя букви за всички тези случаи?Е, можете. Но нужно ли е?

Дори с предимствата, които предоставят псевдоелементите, трябваше да добавим много код, за да дефинираме отделни класове, за да се справим с проблемите с кернинга и подплънките. Но този метод ще преобразува първата буква на всеки нов параграф в главни букви в CSS. За някои може да не е подходящо, защото не е необходимо да преобразувате първата буква на всеки параграф.

Комбиниране на псевдо-класове и псевдо-елементи за създаване на интелигентно оформление

Добавянето на псевдокласа :first-child помага за решаването на проблема с ненужното преобразуване на първите букви:

p ( размер на шрифта: 1,2 em; семейство шрифтове: Georgia, "Times New Roman", Times, сериф; височина на реда: 2 em; подложка-отдолу: 0,5 em;) p: first-child:: first-letter ( размер на шрифта: 3,6 em; преобразуване на текста: главни букви; семейство шрифтове: "Monotype Bernard Condensed", serif; margin-right: 0,03 em;)

Комбиниране на този код с HTML:

Първата буква, която е дефинирана като първо дете, е единствената буква, която се преобразува в повдигната капачка при този метод.

Тъй като се преобразува само буквата, дефинирана като първо дете, имайте предвид, че този пример се различава от предишния без първо дете. Освен това не преобразуваме първите букви след началото на абзаца и след принудително прекъсване на реда. Това изглежда по-елегантно от начина, по който изглеждаше оформлението, когато преобразувахме всички първи букви на абзаците.

Предимството на използването на псевдо-класове е способността да се обработват различни специални случаи. Какво ще кажете за недостатъците? Има много различни псевдо-класове и те могат да се комбинират по толкова много начини, че може да ви замае главата. Например, псевдо-класовете :first-child и :first-of-type могат да дадат същите резултати. Можете също така да приложите псевдоклас не само към параграф, но и към елементи