Veľké písmeno je podľa definície prvok textu, ktorého veľkosť je relatívne zväčšená. Takmer všetky jazyky začínajú vetu veľkým písmenom. A dizajn začiatku odseku s výrazným veľkým písmenom umožňuje štruktúrovať text a uľahčuje jeho vnímanie. Keď je webová stránka navrhnutá, text môže byť napísaný v súlade s preferenciami autora a pravidlami ruského jazyka. Jeho dizajn je tiež možné „zautomatizovať“ zadaním určitých „príkazov“ do súboru s príponou css – šablóny štýlov – alebo doplniť váš html súborštýlová sekcia. CSS sa zvyčajne študuje dodatočne s html, aby sa rýchlo zmenili niektoré prvky dizajnu naraz v celom texte.

To platí najmä vtedy, ak má stránka stovky stránok a vykonávanie zmien na každej z nich je časovo veľmi náročný proces.

Ak používate css, veľké písmená na začiatku každého odseku môžu vyzerať zvláštne. Napríklad, ak je zadaný v html bez zátvoriek, nasledujúci kód umožňuje, aby text naformátovaný značkou "p" bol veľký - prvé písmeno - väčšie - 220 % štandardnej veľkosti, žltá farba - hodnota farby je žltá, a napíšte to písmom, ktoré sa líši od zvyšku textu – Georgia verzus batangche.

(<) style(>)

p: prvé písmeno (skupina písma: Georgia; veľkosť písma: 220 %; farba: žltá;)

(<)/style(>)

Krásne veľké písmená môžete získať, ak si vytvoríte vlastné písmo vo forme obrázkov - pre každé písmeno je samostatný obrázok, napríklad v starom ruskom alebo gotickom štýle. Môžu byť nakreslené v Potom na požadované miesta namiesto veľkého písmena môžete vložiť kód bez zátvoriek (<) img src=”ссылка на место, где лежит картинка”(>). Ďalšími atribútmi budú výška a šírka – šírka a výška obrázka, ktoré sa dajú nastaviť v pixeloch, aby ladili so zvyškom textu. Príklad: (<) img src=”ссылка на место, где лежит картинка” heigh=12 px width=6px(>). Zátvorky okolo< и >odstrániť.

Ak nemáte možnosť nakresliť si abecedu sami, potom je možné veľké písmeno navrhnúť pomocou fontov, ktoré sú voľne dostupné na Google (sekcia Písma) alebo iných vyhľadávačoch a zdrojoch. Aby ste to dosiahli, vyššie uvedený kód by mal byť naformátovaný takto:

(<) style(>)

p (rodina písma: batangche; veľkosť písma: 93%;)

p: prvé písmeno (rodina písma: Kelly+Slab; veľkosť písma: 220%; farba: modrá;)

(<)/style(>)

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

Služba Google vám umožňuje vybrať si jedno alebo druhé a poskytuje hotové odkazy na vloženie do html alebo css. Upozorňujeme na skutočnosť, že je potrebné vybrať skupinu písiem - latinku alebo azbuku, pretože. takmer všetky latinské písma nefungujú pri formátovaní textu v ruskom jazyku. Na tento moment Vyhľadávač poskytuje asi 40 typov zadarmo.

Veľké písmeno alebo jeho malý náprotivok môže byť štylizovaný vlastnosti css transformácia textu. Ak v šablóne štýlov nastavíte hodnotu transformácie textu: none, text bude vyzerať tak, ako ho napíšete. Ak chcete previesť všetky písmená na malé, musíte nastaviť hodnotu transformácie textu: malé písmená cez dvojbodku a veľké písmená na veľké. Nastavenie rovnaké pre nehnuteľnosť textové hodnoty transformácia: veľké písmeno spôsobí, že každé slovo bude začínať veľkým písmenom.

alebo viac o písmenách a HTML CSS formátovaní

Kapitola obsahuje príklady formátovanie písmen z oblasti Hypertext Markup.

V menu vľavo nájdete moderné a veľmi podrobné HTML návody.

Umožnia vám vytvoriť si webovú stránku pomocou čistá bridlica pri pohľade trochu nižšie.

Môže to byť zaujímavé.

Epocha informačnej spoločnosti

Ľudstvo vstúpilo do nového obdobia svojho rozvoja, v ktorom mimoriadne dôležitú úlohu zohrávajú informačné a sieťové technológie. Žijeme v dobe informačnej spoločnosti, ktorá je charakteristická prudkým rozvojom informačných a telekomunikačných technológií. S príchodom počítača a internetu sa začali obrovské zmeny. Počítač a internet tlačia spoločnosť k formulovaniu nových noriem správania, pravidiel a ideálov. Internet je pre novú generáciu tým, čím bola televízia pre predchádzajúcu generáciu. Globálna sieť je však oveľa funkčnejšia ako televízia, pretože poskytuje príležitosť na nákupy, predaje, ponúka komunikáciu a rôznymi spôsobmi sebavyjadrenie, napríklad tvorenie osobné webové stránky a lokality.

HTML písmená: veľké a malé písmená

Príklad formátovania písmen:

Formátovať výsledok:

Príklad voľného textu napísaného veľkými písmenami

Príklad voľného textu napísaného veľkými písmenami

značky - definovať veľké písmená(Tieto značky nie sú podporované v HTML 5).

css code style="text-transform:uppercase" - definuje veľké písmená.

Inými slovami, veľké písmená sú definované pomocou CSS atribúty.

Písmená HTML a medzery medzi nimi

Príklad formátovania písmen:

Formátovať výsledok:

Svojvoľný HTML text a CSS medzery medzi písmenami v 2 pixeloch

Popis atribútov a hodnôt:

css code style="letter-spacing:2px" - definuje medzery medzi písmenami CSS.

Vyhľadajte podobné príklady formátovania v ponuke vľavo. Ďakujem za tvoju pozornosť.

CSS veľké písmená pomáhajú rozbiť monotónnosť rovnakého typu dizajnu, ktorého texty vyzerajú rovnako od začiatku do konca.

Listy vtedy a dnes

Kronikári používali veľké písmená v rukopisných rukopisoch, z ktorých niektoré pochádzajú už z 5. storočia. Veľké písmená sa naďalej používali od 8. do 15. storočia, keď tlačiarenské stroje umožnili posunúť tlač na priemyselnú úroveň. Ručne písané aj tlačené veľké písmená boli umiestnené na začiatku textu. Často boli zdobené dekoratívnym vzorom, ktorý sa nachádzal okolo písmena.

Vyvýšené a znížené písmená sa používajú dodnes. Možno ich nájsť v novinách, časopisoch a knihách, ako aj v digitálnej tlači. Vyvýšené písmená sa niekedy nazývajú predĺžené. Sú umiestnené v jednej rovine so spodnou časťou textu, ktorý za nimi nasleduje. Vynechané písmená sú umiestnené v jednej rovine s hornou časťou textu, niekedy vo vrstve za hlavnou časťou textového obsahu, alebo sa okolo nich zalamuje zvyšok textu.

Vyvýšené písmená sa definujú oveľa jednoduchšie, pretože sú v jednej rovine so zvyškom textu a zvyčajne nie je potrebné meniť zalomenie vonkajších okrajov. Vynechané písmená vyžadujú viac jemné ladenie. Bude pre vás jednoduchšie sa s tým vyrovnať, ak najprv pochopíte, ako sa zaobchádza so zdvihnutými postavami.

Používanie tried

Dizajnéri, ktorí už rozumejú CSS, vedia vytvoriť samostatnú triedu CSS pre prvé veľké písmeno.

Kód CSS pre prvok odseku a triedu, ktorá vytvára písmeno, by vyzeral takto:

p ( font-size:20px; font-family: Georgia, "Times New Roman", Times, serif;) .myinitialcaps (font-size:48px; font-family: Didot;)

A HTML kód bude vyzerať takto:

Čo nám dáva:

Zdá sa vám to príliš jednoduché? V skutočnosti budete musieť vykonať úpravy v závislosti od konkrétnych vyvýšených písmen, pretože každé veľké písmeno vyžaduje špeciálne prekladanie. Po výbere písma pre vyvýšené písmená a pre hlavný text musíte vytvoriť samostatné triedy pre každé vyvýšené písmeno. V nižšie uvedenom CSS class.myinitialcapsi okraj napravo je záporný, aby sa zmenšila vzdialenosť medzi I a n .

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

ja V tomto prípade je medzi „I“ a „n“ medzera navyše.

ja zahrnutie novej triedy so zápornou maržou ju približuje.

V závislosti od rozlíšenia obrazovky vo vyššie uvedenom príklade môžu I a n vyzerať, akoby sa zlúčili. Môžu za to pätky na koncoch písmen. Pred výberom finálnych CSS štýlov preto web otestujte rôzne zariadenia aby ste videli, ako na nich vyzerá text CSS.

Citácie a iné špeciálne prípady

Môžete zväčšiť nielen písmená na začiatku textu. Môžete implementovať inú triedu na vytvorenie väčšej verzie úvodzoviek, ktoré sa objavia vedľa písmena. V našom prípade nie je vhodná pre úvodzovky ani trieda písmen s veľkosťou 48, ani trieda textu 20 pixelov. Skôr to bude niečo medzi – 30 pixelov. Posúvame úvodzovky nadol o 4 pixely, aby sme ich opticky zarovnali s I :

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

“ja zahrnutie“ novej triedy so zápornou maržou ju pritiahne bližšie.

Pri zadávaní každého z veľkých písmen CSS spolu s úvodzovkami musíte byť veľmi opatrní, aby sa ich kerning a zarovnanie zhodovali s okolitým označením. Napríklad písmeno T bude potrebné posunúť doľava, mierne za okraj odseku, aby jeho priečna čiara vizuálne zapadla do rozloženia. To isté budete musieť urobiť s okrúhlymi písmenami ako C , G , O a Q . V tomto príklade sú použité veľkosti písma 20, 30 a 48. Veľkosti však budete musieť upraviť na základe konkrétnych typov písma, ktoré ste si vybrali. Rovnako ako veľkosti a rozlíšenia obrazoviek, na ktorých sa bude stránka zobrazovať.

Pseudoprvky a pseudotriedy

Pomocou pseudoprvku CSS môžete jednoducho vytvoriť vyvýšené písmeno pridaním ::first-letter do prvku odseku. Použite: prvé písmeno ( s jednou dvojbodkou) pre staršie prehliadače:

p ( veľkosť písma: 1,2 em; rodina fontov: Georgia, "Times New Roman", Times, pätka; výška riadku: 2 em; padding-bottom: 1,2 em;) p:: prvé písmeno ( veľkosť písma: 3,6 em; transformácia textu: veľké písmená; rodina fontov: "Monotype Bernard Condensed", pätka; pravý okraj: 0,03 em;) .initialb (pravý okraj:-0,1 em;) .initialn (pravý okraj:-0,15 em ;)

HTML kód, ktorý obsahuje CSS triedy, ktoré berú do úvahy kerning písmen N a B, bude vyzerať takto…

Začiatočné písmeno, pričom prvé písmeno je veľké.
Pri zalomení riadku nemá nasledujúci riadok počiatočné obmedzenie.

n Všimnite si v zdrojovom kóde HTML, ako sa prvé písmeno, nie veľké písmeno v HTML, zmení na počiatočnú veľkosť 3,6em. Pekné, čo?

B s tvrdým návratom a začínajúcim novým odsekom sa vždy vytvorí ďalší počiatočný strop. Možno sa pýtate sami seba Ako to zaúčtujem? Mám mať na začiatku úplne nového odseku počiatočnú hornú hranicu? No mohol by si. Ale chcete, aby to tak vyzeralo a musí to tak absolútne vyzerať?

Prvé veľké písmeno odseku sa zmení na písmeno.
Prvé písmeno za zlomom riadka nebude veľké.

o Upozorňujeme, že v zdrojový kód V HTML nie je prvé písmeno veľké, ale je prevedené na znak 3,6em.

O Aj po vynútenom zalomení riadku sa však na začiatku každého nového odseku vždy vytvorí písmeno. Môžete si položiť otázku: Ako to môžem vziať do úvahy? Musím pridať písmená pre všetky tieto prípady? No, môžeš. Ale je to potrebné?

Aj s výhodami, ktoré poskytujú pseudoprvky, sme museli pridať veľa kódu na definovanie samostatných tried, aby sme zvládli problémy s kerningom a výplňou. Táto metóda však prevedie prvé písmeno každého nového odseku na veľké písmená CSS. Niekomu to nemusí vyhovovať, pretože netreba konvertovať prvé písmeno každého odseku.

Kombinácia pseudotried a pseudoprvkov na vytvorenie inteligentného rozloženia

Pridanie pseudotriedy :first-child pomáha vyriešiť problém zbytočnej konverzie prvých písmen:

p ( veľkosť písma: 1,2 em; rodina písma: Georgia, "Times New Roman", Times, pätka; výška riadku: 2 em; výplň dole: 0,5 em;) p: prvé dieťa:: prvé písmeno ( veľkosť písma: 3,6 em; transformácia textu: veľké písmená; rodina fontov: "Monotype Bernard Condensed", pätka; pravý okraj: 0,03 em;)

Kombinácia tohto kódu s HTML:

Prvé písmeno, ktoré je definované ako prvé dieťa, je jediným písmenom, ktoré sa pri tejto metóde prevedie na vyvýšenú čiapočku.

Keďže sa skonvertuje iba písmeno definované ako prvé dieťa, všimnite si, že tento príklad sa líši od predchádzajúceho bez prvého potomka. Okrem toho nekonvertujeme prvé písmená po začiatku odseku a po vynútenom zalomení riadku. Vyzerá to elegantnejšie, než ako vyzeralo rozloženie, keď sme skonvertovali všetky prvé písmená odsekov.

Výhodou použitia pseudotried je schopnosť zvládnuť rôzne špeciálne prípady. A čo nevýhody? Existuje mnoho rôznych pseudotried a dajú sa kombinovať toľkými spôsobmi, až sa vám z toho zatočí hlava. Napríklad pseudotriedy :first-child a :first-of-type môžu priniesť rovnaké výsledky. Pseudotriedu môžete aplikovať nielen na odsek, ale aj na prvky