Загалоўная літара ў 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 = http: // site / article / 74218 /% E2% 80% 9D% D1% 81% D1% 81% D1% 8B% D0 % BB% D0% BA% D0% B0 на месца, дзе ляжыць карцінка "(>). Дадатковымі атрыбутамі тэга Img будуць heigh і width - шырыня і вышыня малюнка, якую можна ўсталяваць у пікселях для гарманічнага спалучэння з астатнім тэкстам. Прыклад: (<) img src = http: // site / article / 74218 /% E2% 80% 9D% D1% 81% D1% 81% D1% 8B% D0% BB% D0% BA% D0% B0 на месца , дзе ляжыць карцінка "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 зробіць так, што ў пачатку кожнага слова будзе загалоўная літара.