Iniciálka (iniciálka vložená do textu) je prvé písmeno odseku, väčšie ako ostatné a umiestnené tak, aby jeho horná časť bola na úrovni prvého riadku odseku. Na obrázku vidíte príklad inštalačného uzáveru vloženého do textu.

Mimochodom, WordPress má špeciálny doplnok (wordpress.org/extend/plugins/drop-caps), ktorý vám umožňuje automaticky vytvárať vložený text (a posunutý nadol) veľké písmená. Úžasný! Čo však v prípade, ak nechcete použiť doplnok (som si istý, že nie) a potrebujete iba vytvoriť obmedzujúci kryt na viacerých príspevkoch a možno na konkrétnom mieste?

Dobrou správou je, že na vytváranie veľkých písmen nepotrebujete plugin, stačí vám malý css a span tag. Otvorte svoj súbor css a pridajte nasledujúci kód:

Span.dropcaps ( font-family:Georgia, serif; farba: #ccc; font-size: 46px; float: left; font-weight: 400; line-height: 1em; margin-bottom: -0.4em; margin-right : 0,09 em; poloha: relatívna; )

Niečo také. Samozrejme, budete potrebovať štýl, ktorý zodpovedá vášmu dizajnu a textu. Napríklad hodnoty vlastností: veľkosť písma , okraje a výška riadku bude potrebné vybrať na základe vášho návrhu a textu.

Rozpätie značky

Aby sa štýl použil na veľké písmeno textu, musíte veľké písmeno „zabaliť“ do značky span a určiť príslušnú triedu.

A

Pseudoprvok:prvé písmeno

Prvý znak v texte môžete upraviť aj pomocou pseudoprvku: prvé písmeno . Na pseudoprvok:first-letter však možno použiť obmedzený počet vlastností: ide o vlastnosti súvisiace s písmom, farbou, pozadím, okrajmi, okrajmi a výplňou. Ďalšia vec, ktorú treba poznamenať, je, že pseudoprvok:prvé písmeno nebude fungovať v starších prehliadačoch.

P:first-letter ( font-family:Georgia, serif; color: #ccc; font-size: 46px; float: left; font-weight: 400; line-height: 1em; margin-bottom: -0.4em; margin -vpravo: 0,09 em; poloha: relatívna; )

Tu je v skutočnosti niekoľko metód na úpravu veľkých písmen pomocou CSS.

Používateľ môže často v zhone pri pridávaní materiálov na stránku alebo napríklad pri vytváraní novej témy na fóre začať písať vetu (názov) s malým (malým) písmenom. To je do istej miery chyba.

Ukážem niekoľko možností riešenia tohto problému: PHP a CSS sú vhodnejšie pre už publikované materiály, kedy jQuery dokáže napraviť situáciu pred zverejnením.

Prvé písmeno reťazca veľké v PHP

V PHP existuje funkcia s názvom „ucfirst“, ktorá len prevádza prvý znak riadku na veľké písmená, ale jej nevýhodou je, že nefunguje celkom korektne s azbukou.

Na to si napíšeme vlastnú malú funkciu. Implementácia by vyzerala takto:

V tejto verzii dostaneme vetu, ktorá začína veľkým písmenom, čo v skutočnosti potrebujeme.

Veľké prvé písmeno reťazca v CSS

Táto metóda vizuálne (to znamená, že návrhy sa zobrazia tak, ako sú v zdrojovom kóde lokality) tiež prevedie prvý znak na veľké písmená.

Použitie je nasledovné:

prvá veta

druhá veta

tretia veta

štvrtá veta

#content p:prvé písmeno ( transformácia textu: veľké písmená; )

Pomocou pseudoprvku „first-letter“ a vlastnosti „text-transform“ nastavíme dizajn pre každé prvé písmeno odseku.

Prvé písmeno reťazca veľké v jQuery

Ako som už povedal, táto metóda prevodu je najvhodnejšia pre materiály, ktoré sa ešte len majú publikovať.

Zoberieme si napríklad textové pole (bude fungovať ako pole na zadanie nadpisu) a napíšeme doň malý skript, ktorý pri zadávaní vety s malým písmenom urobí vetu veľké:

$(document).ready(function() ( $(.content“).on("keyup", function() ( var text = $(this).val(); var new_text = text.charAt(0) .toUpperCase() + text.substr(1); $(this).val(new_text); )); ));

Skript funguje ako pri písaní textu, tak aj pri jednoduchom vkladaní. Nezabudnite, že aby skripty na vašom webe fungovali, musíte mať povolenú knižnicu jQuery.

Obmedzenia CSS pomáhajú prelomiť monotónnosť všeobecného dizajnu, kde text vyzerá rovnako od začiatku do konca.

Začiatočné písmená vtedy a dnes

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

Zdvihnuté a spustené 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. Zvýšený typ sa niekedy nazýva predĺžený typ. 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 telom textového obsahu, alebo sa okolo nich obtáča zvyšok textu.

Vyvýšené písmená sa definujú oveľa jednoduchšie, pretože sú zarovnané so zvyškom textu a zvyčajne nie je potrebné meniť zalomenie okolo vonkajších okrajov. Vynechané písmená vyžadujú viac dolaďovania. Ľahšie to pochopíte, ak najprv pochopíte, ako sa zaobchádza s vyvýšenými postavami.

Používanie tried

Dizajnéri, ktorí už rozumejú CSS, vedia, že musia 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 triede CSS pod.myinitialcapsi je okraj vpravo nastavený na zápornú hodnotu, aby sa zmenšila vzdialenosť medzi I a n.

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

V tomto prípade je medzi „I“ a „n“ určitý priestor navyše.

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ť ako rozmazané. Môžu za to pätky na koncoch písmen. Takže predtým, ako sa rozhodnete pre svoje konečné štýly CSS, otestujte svoj web na rôznych zariadeniach, aby ste videli, ako na nich vyzerá text veľkých písmen CSS.

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

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

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

„Vrátane“ novej triedy so zápornou maržou ju približuje.

Musíte byť veľmi opatrní pri nastavovaní každého z veľkých písmen CSS spolu s úvodzovkami tak, 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 sú C, G, O a Q. V tomto príklade sú použité veľkosti písma 20, 30 a 48. Budete však musieť vybrať veľkosti na základe konkrétnych typov písma, ktoré si vyberiete. 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 :first-letter (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; odsadenie-dole: 1,2 em;) p:: prvé písmeno ( veľkosť písma: 3,6 em; transformácia textu: veľké písmená; skupina 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é zohľadňujú kerning písmen N a B, by vyzeral 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.

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,6 em. Pekné, čo?

Ale s tvrdým návratom a novým odsekom sa vždy vytvorí ďalší počiatočný strop. Možno sa sami seba pýtate: Ako si to mám vysvetliť? 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 prevedie na písmeno.
Prvé písmeno za zlomom riadka sa neprevedie na veľké.

oVšimnite si, že v zdrojovom kóde HTML nie je prvé písmeno veľké, ale je skonvertované na 3,6em znak.

Aj po vynútenom zalomení riadku sa však na začiatku každého nového odseku vždy vytvorí písmeno. Možno sa sami seba pýtate: Ako to beriem 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 konvertuje prvé písmeno každého nového odseku na veľké písmeno CSS. Pre niekoho to nemusí byť vhodné, pretože nepotrebuje transformovať 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:

( 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é písmeno, ktoré sa touto metódou 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 mínusy? 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 použiť nielen na odsek, ale aj na prvky alebo . Napríklad, ako je znázornené na príklade vyvýšeného písma nižšie v písme Didot. Všimnite si, ako bol atribút margin pridaný napravo od A. V opačnom prípade by sa to „zlepilo“ s písmenom s na začiatku sekcie:

sekcia ( font-size: 1.2em; font-family: Georgia, "Times New Roman", Times, serif; line-height:3em;) section>p:first-child:first-letter ( font-size: 4em; text-transform: veľké písmená; font-family:Didot, serif; margin-right:5px;)

A spolu s HTML:

Na začiatku sekcie je pre prvé písmeno špecifikovaná vyvýšená spúšť.

A nový odstavec...

Ak máte chuť experimentovať, môžete okrem metód :first-child a :first-of-type preskúmať aj iné metódy. Napríklad :nth-of-type alebo :nth-of-child, aby ste videli, ako možno tieto alebo iné typy pseudotried použiť pre text s veľkými písmenami CSS. Či už sa budete riadiť princípmi načrtnutými v tomto článku alebo začnete pátrať hlbšie, akonáhle sa naučíte pracovať s CSS pseudotriedami first-child , :first-of-type a :first-letter , budete môcť použiť ich správne na prvky HTML.

V html hrá veľkosť písma dôležitú úlohu. Umožňuje vám upozorniť používateľa na dôležité informácie zverejnené na stránke lokality. Aj keď nie je dôležitá len veľkosť písmen, ale aj ich farba, hrúbka a dokonca aj rodina.

Tagy a atribúty pri práci s html fontami

Hypertextový jazyk má širokú škálu nástrojov na prácu s fontmi. Koniec koncov, formátovanie textu je hlavnou úlohou html.

Dôvodom vzniku jazyka HTML bol problém zobrazovania pravidiel formátovania textu v prehliadačoch.

Pozrime sa na značky, ktoré sa používajú na prácu s písmami v HTML a ich atribúty. Hlavným je tag. Pomocou hodnôt jeho atribútov môžete nastaviť niekoľko charakteristík písma:

• farba – nastavuje farbu textu;
• veľkosť – veľkosť písma v konvenčných jednotkách.

Podporované sú kladné hodnoty atribútov od 1 do 7.

• face – používa sa na nastavenie rodiny textových písiem, ktoré sa budú používať vo vnútri . Podporovaných je niekoľko hodnôt oddelených čiarkami.

Formátuje sa iba text, ktorý sa nachádza medzi časťami značky párového písma. Zvyšok textu sa zobrazí štandardným predvoleným písmom.

Aj v html existuje množstvo párových značiek, ktoré určujú iba jedno pravidlo formátovania. Tie obsahujú:

• — nastaví tučné písmo v html. Značka akcie je podobná predchádzajúcej;
• — veľkosť je väčšia ako predvolená;
• — menšia veľkosť písma;
• — kurzíva (kurzíva). Podobná značka ;
• — text s podčiarknutím;
• - prečiarknutý;
• — zobrazovať text iba malými písmenami;
• - veľkými písmenami.

Obyčajný text

Miniatúra

Miniatúra

Viac ako zvyčajne

Menej ako zvyčajne

Kurzíva

Kurzíva

S podčiarkovníkom

Prečiarknutý

Možnosti atribútov štýlu

Okrem popísaných značiek existuje niekoľko ďalších spôsobov, ako zmeniť písmo v html. Jedným z nich je použitie atribútu generic style. Pomocou hodnôt jeho vlastností môžete nastaviť štýl zobrazenia písiem:

1) font-family – vlastnosť nastavuje rodinu fontov. Je možné uviesť viacero hodnôt.
Zmena písma v html na nasledujúcu hodnotu nastane, ak predchádzajúca rodina nie je nainštalovaná v operačnom systéme používateľa.

Syntax zápisu:

font-family: font-name [, font-name[, ...]]

2) font-size – veľkosť sa nastavuje od 1 do 7. Toto je jeden z hlavných spôsobov, ako môžete zväčšiť písmo v HTML.
Syntax zápisu:

font-size: absolútna veľkosť | relatívna veľkosť | význam | úrok | dediť

Môžete tiež nastaviť veľkosť písma:

• V pixeloch;
• V absolútnej hodnote (xx-small, x-small, small, medium, large);
• V percentách;
• V bodoch (pt).

Veľkosť písma: 7

Veľkosť písma: 24px

Veľkosť písma: x-veľké

Veľkosť písma: 200 %

Veľkosť písma: 24pt

3) font-style – nastavuje štýl písania písma. Syntax:

štýl písma: normal | kurzíva | šikmé | dediť

Hodnoty:

• normálny – normálny pravopis;
• kurzíva – kurzíva;
• šikmé – písmo skosené doprava;
• zdediť – zdedí pravopis nadradeného prvku.

Príklad, ako zmeniť písmo v html pomocou tejto vlastnosti:

štýl písma: zdediť

štýl písma: kurzíva

štýl písma:normálny

štýl písma:šikmý

4) font-variant – prevedie všetky veľké písmená na veľké písmená. Syntax:

font-variant: normal | malé čiapky | dediť

Príklad, ako zmeniť písmo v html pomocou tejto vlastnosti:

font-variant:dedit

font-variant:normal

font-variant:malé veľké písmená

5) font-weight – umožňuje nastaviť hrúbku textu (sýtosť). Syntax:

váha písma: tučné|tučné|svetlejšie|normálne|100|200|300|400|500|600|700|800|900

Hodnoty:

• tučné – nastaví písmo html na tučné;
• tučnejšie – tučnejšie v porovnaní s normálom;
• svetlejšie – menej nasýtené v porovnaní s normálom;
• normálny – normálny pravopis;
• 100-900 – nastavuje hrúbku písma v číselnom ekvivalente.

font-weight:bold

font-weight:bolder

váha písma:ľahšia

font-weight:normal

váha písma: 900

váha písma: 100

Vlastnosť písma HTML a farba písma

Písmo je ďalšou vlastnosťou kontajnera. V sebe spájal hodnoty niekoľkých vlastností určených na zmenu fontov. syntax písma:

font: font-size font-family | dediť

Hodnotu je možné nastaviť aj na fonty používané systémom v štítkoch na rôznych ovládacích prvkoch:

• popis – pre tlačidlá;
• ikona – pre ikony;
• menu - menu;
• message-box – pre dialógové okná;
• malé titulky – pre malé ovládacie prvky;
• stavový riadok – písmo stavového riadku.

font:ikona

font: titulok

font:menu

font:správa-box

malý titulok

font:stavový riadok

font:italic 50px bold "Times New Roman", Times, pätka

Ak chcete nastaviť farbu písma v HTML, môžete použiť vlastnosť color. Umožňuje nastaviť farbu, či už pomocou kľúčového slova alebo vo formáte rgb. A tiež v hexadecimálnom kóde.

Ahojte čitatelia tohto blogu. Dnes budem hovoriť o tom, ako môžete urobiť všetky veľké písmená pomocou CSS. Samozrejme, môžete zapnúť Caps Lock a napísať požadovaný text, ale je to dosť primitívna metóda. Čo ak však potrebujete zvýrazniť samostatný odsek v hotovom článku?

Všetky písmená sú veľké v css

Existuje na to vlastnosť text-transform, ktorá, ako už asi tušíte, transformuje text. Má nasledujúce hodnoty:

• malé písmená – celý text sa zobrazuje malými písmenami
• veľké písmená – všetky slová sú zobrazené veľkými písmenami (čo potrebujeme)
• veľké – prvé písmeno každého slova je veľké

To je v podstate všetko, čo potrebujete vedieť. Zostáva len zistiť, ako sa dostať k požadovanému prvku. Predstavme si tento príklad: musíte urobiť piaty odsek v článku veľkými písmenami. A ako sa to dá implementovať?

Ako dosiahnuť požadovaný prvok?

Ako viete, odsek sa vytvára pomocou spárovaného html tagu, ktorého celý obsah sa stáva odsekom. Zostáva len definovať preň novú triedu štýlu:

Teraz máme možnosť pristupovať k tomuto konkrétnemu odseku prostredníctvom jazyka CSS bez ovplyvnenia zvyšku. Môžete to urobiť takto:

Veľké písmeno(
Transformácia textu: veľké písmená;
}

Táto metóda je vhodná, keď potrebujete zvýrazniť fragment v konkrétnom článku. Čo keby všetky strany museli mať určitý text veľkými písmenami. V tomto prípade je lepšie umiestniť blok do súboru šablóny, aby ste ho nepísali zakaždým.

Alebo možno budete musieť zvýrazniť druhý odsek v každom článku pomocou CSS veľkými písmenami. Potom vám bude vyhovovať iná možnosť. Nájdite blok, v ktorom sa nachádza článok, a prejdite k druhému odseku pomocou pseudotriedy n-tého dieťaťa. V tomto príklade má náš blok s článkom triedu článku.

Článok p:n-té dieťa(2)(
Transformácia textu: veľké písmená
}

Ako vidíte, pre každý konkrétny prípad existuje iné riešenie. Najdôležitejšie je pamätať na vlastnosť text-transform, ktorá mení veľkosť písmen.

Vo všeobecnosti sa neodporúča zobrazovať text týmto spôsobom, pretože to značne zhoršuje jeho vnímanie, ale niektoré obzvlášť dôležité fragmenty môžu byť zvýraznené.

Dnes sme sa pozreli na vlastnosť text-transform. Prihláste sa na odber blogu a získajte nové články.