Umožňuje zmeniť veľkosť písmen v texte.

Štandardne je hodnota nastavená na hodnotu none, čo nemá žiadny vplyv na text. Prípad textu zostáva rovnaký. Hodnoty veľkých a malých písmen prevádzajú znaky na veľké a malé písmená. Ak zadáte hodnotu veľkých písmen, budú veľké písmená iba prvé znaky každého slova. Dedičnosť dedí hodnotu po rodičovi.

Príklad

Toto je názov. Má vlastnosť transformácie textu nastavenú na veľké písmená. Všetky znaky budú napísané veľkými písmenami.

Vlastnosť transformácie textu bola na tento odsek použitá s malou hodnotou, čo znamená, že všetky písmená budú malé.

A tento posledný odsek má vlastnosť transformácie textu s použitou vlastnosťou CAPITALIZE. Prvé písmená každého slova budú veľké a iba to.

Výsledok

Nie všetko je však také jednoduché. Existujú určité nuansy. Ak venujete pozornosť druhému odseku vyššie uvedeného príkladu, všimnete si, že slovo veľké písmena je napriek vlastnosti transformácie textu použitej na odsek s hodnotou veľkých písmen zobrazené úplne veľkými písmenami, čo zodpovedá pôvodnému textu. Vysvetľuje to skutočnosť, že pri zadanej hodnote veľkých písmen sa kontrolujú iba prvé písmená slov a ostatné zostávajú nezmenené bez ohľadu na ich počiatočný stav.
Napriek svojej zdanlivej jednoduchosti môže byť vlastnosť transformácie textu veľmi užitočná. Ak napríklad chcete, aby bol text všetkých nadpisov H1 na vašom webe veľkým písmom, stačí, ak do hárka štýlov pridáte jednu vlastnosť.

H1 (transformácia textu: veľké písmená;)

a problém bude vyriešený. A nie je potrebné ručne meniť všetky hlavičky, ktorých môže byť veľmi, veľmi veľa.

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

Skôr a teraz kvapky

Kronikári používali veľké písmená v rukopisných rukopisoch, z ktorých niektoré pochádzajú z 5. storočia. Veľké písmená sa naďalej používali od 8. do 15. storočia, keď tlačiareň umožnila industrializáciu tlače. Ručne písané aj tlačené veľké písmena boli umiestnené na začiatok textu. Často boli zdobené ozdobným vzorom, ktorý bol umiestnený okolo písmena.

Zvýšené a znížené písmena sa používajú dodnes. Nájdete ich v novinách, časopisoch a knihách, ako aj v digitálnej typografii. Zvýšené písmená sa niekedy nazývajú predĺžené. Sú umiestnené v jednej rovine so spodnou časťou textu, ktorý nasleduje za nimi. Vynechané písmená sú v jednej rovine s vrchnou časťou textu, niekedy vo vrstve za hlavným textovým obsahom, alebo okolo nich preteká zvyšok textu.

Vyvýšené písmená je oveľa jednoduchšie definovať, pretože sú v jednej rovine so zvyškom textu a zvyčajne na to nepotrebujete meniť tok okolo vonkajších okrajov. Vynechané písmená vyžadujú viac doladenia. Bude to pre vás jednoduchšie vyriešiť, ak najskôr porozumiete tomu, ako sa zaobchádza s vyvýšenými postavami.

Použitie tried

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

CSS pre prvok odseku a triedu, ktorá vytvára písmeno, bude vyzerať takto:

p (veľkosť písma: 20 pixelov; rodina písem: Georgia, "Times New Roman", Times, serif;) .myinitialcaps (veľkosť písma: 48 pixelov; rodina písem: Didot;)

A HTML kód bude vyzerať takto:

Čo nám dáva:

Zdá sa to príliš ľahké? V skutočnosti budete musieť vykonať úpravy na základe konkrétnych zvýšených písmen, pretože každé veľké písmeno vyžaduje špeciálne vyvažovanie. Po výbere písma pre vyvýšené písmená a pre základný text musíte pre každé zvýšené písmeno vytvoriť samostatné triedy. V nižšie uvedenom CSS trieda. Myinitialcapsi pole vpravo je záporné, aby sa zmenšila vzdialenosť medzi I a n.

Myinitialcapsi (veľkosť písma: 48 pixelov; rodina písem: Didot; pravý okraj: -1 pix.)

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

Ja nc zahrnutím novej triedy so záporným okrajom ju pritiahne bližšie.

V závislosti od rozlíšenia obrazovky môžu vo vyššie uvedenom príklade I a n vyzerať, ako keby sa zlúčili. Môžu za to pätky na koncoch písmen. Pred rozhodnutím o konečných štýloch CSS preto otestujte web na rôznych zariadeniach, aby ste zistili, ako na nich vyzerá text vo všetkých veľkých písmenách CSS.

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

Môžete zväčšiť nielen písmena na začiatku textu. Môžete implementovať inú triedu a vytvoriť tak nadrozmernú verziu úvodzoviek, ktoré sa zobrazujú vedľa písmena. V našom prípade nie je pre úvodzovky vhodná ani 48-pixelová trieda, ani 20-pixelová trieda textu. Skôr to bude niečo medzi - 30 pixelov. Citáty posunieme o 4 pixely nadol, aby ich opticky zarovnal s I:

Myinitialcapsq (veľkosť písma: 30 pixelov; rodina písem: Didot; float: vľavo; horný okraj: 4 pixelov;)

“Ja„vrátane“, nová trieda so záporným okrajom ju ťahá bližšie.

Musíte byť veľmi opatrní pri špecifikovaní každého z vrcholov CSS spolu s úvodzovkami, aby ich párovanie a zarovnanie zodpovedalo okolitým značkám. Písmeno T bude napríklad 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ípade sú použité veľkosti písma 20, 30 a 48. Veľkosti však budete musieť vybrať na základe špecifík písem, ktoré ste vybrali. Rovnako ako veľkosti a rozlíšenia obrazoviek, na ktorých sa bude stránka zobrazovať.

Pseudoelementy a pseudotriedy

S pseudoprvkom CSS môžete ľahko vytvoriť vyvýšené písmeno pridaním :: prvého písmena do prvku odseku. Použitie: prvé písmeno ( s jedným dvojbodkou) pre zastarané prehliadače:

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

HTML kód, ktorý obsahuje triedy CSS, ktoré zohľadňujú párovanie písmen N a B, bude vyzerať takto ...

Počiatočné písmeno, pričom prvé písmeno je veľké písmeno.
Keď je riadok zalomený, nasledujúci riadok nemá počiatočné obmedzenie.

n v zdroji HTML, ako sa zmení prvé písmeno, nie veľké písmeno v HTML, na počiatočnú veľkosť písmena 3,6 em. Úhľadné, čo?

B ut s ťažkou návratnosťou a keď sa začne nový odsek, vždy sa vytvorí ďalší počiatočný strop. Možno sa pýtaš sám seba, Ako to mám zaúčtovať? Mám mať počiatočné obmedzenie na začiatku úplne nového odseku? No mohol by si. Chcete však, aby to tak vyzeralo a musí to tak aj vyzerať?

Prvé veľké písmeno odseku sa prevedie na písmeno.
Prvé písmeno za zalomením riadka nebude veľké.

O Všimnite si toho, že v zdroji HTML prvé písmeno nie je veľké, ale je prevedené na znak 3,6em.

O Avšak aj po vynútenom zalomení riadka a na začiatku každého nového odseku sa vždy vytvorí písmeno. Možno sa pýtate: Ako to vezmem do úvahy? Musím pre všetky tieto prípady pridať písmená? No môžeš. Je to však nevyhnutné?

Aj napriek výhodám, ktoré pseudoelementy poskytujú, sme museli pridať veľa kódu na definovanie oddelených tried, aby sme zvládli problémy s vyvažovaním a odsadením. Táto metóda však prevedie prvé písmeno každého nového odseku na CSS na veľké písmeno. U niektorých to nemusí fungovať, pretože nemusíte transformovať prvé písmeno každého odseku.

Kombináciou pseudotried a pseudoprvkov vytvorte inteligentné rozloženie

Pridanie: pseudo triedy prvého dieťaťa pomôže vyriešiť problém so zbytočnou konverziou prvých písmen:

p (veľkosť písma: 1,2em; rodina písem: Georgia, "Times New Roman", Times, serif; výška riadka: 2em; spodné čalúnenie: 0,5em;) p: prvé dieťa :: prvé písmeno ( veľkosť písma: 3,6em; transformácia textu: veľké písmená; rodina fontov: "Monotype Bernard Condensed", pätkové; pravý okraj: 0,03em;)

Kombinácia tohto kódu s HTML:

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

Pretože sa prevádza iba písmeno definované ako prvé dieťa, upozorňujeme, že tento príklad sa líši od predchádzajúceho, bez prvého dieťaťa. Prvé písmená navyše nekonvertujeme po začiatku odseku a po vynútenom zalomení riadka. V porovnaní s tým, ako vyzeralo rozloženie, keď sme skonvertovali všetky prvé písmena odsekov, to vyzerá elegantnejšie.

Výhodou použitia pseudotried je schopnosť zvládnuť rôzne špeciálne prípady. Čo s tienistými stránkami? Existuje mnoho rôznych pseudotried, ktoré je možné kombinovať tak mnohými spôsobmi, že sa vám z toho zatočí hlava. Napríklad pseudotriedy: prvé dieťa a: prvý typ môžu poskytnúť rovnaké výsledky. Pseudotriedu môžete použiť aj na odsek, ale aj na prvky

alebo

... Napríklad, ako je uvedené v nasledujúcom príklade, so zdvihnutými písmenami vo formáte Didot. Všimnite si, ako bol atribút margin pridaný napravo od A. V opačnom prípade by bolo „prilepené“ k písmenu s na začiatku sekcie:

sekcia (veľkosť písma: 1.2em; rodina písem: Georgia, "Times New Roman", Times, serif; výška riadka: 3em;) sekcia> p: prvé dieťa: prvé písmeno (veľkosť písma: 4em; transformácia textu: veľké písmená; rodina písem: Didot, serif; pravý okraj: 5 pixelov;)

A spolu s HTML:

Na začiatku sekcie je prvé písmeno nastavené na zdvihnutú čiapočku.

A nový odsek ...

Ak máte chuť experimentovať, môžete preskúmať okrem: prvého dieťaťa a: prvého typu aj rôzne metódy. Napríklad ako: n-tý-typ alebo: n-ty-dieťa, aby ste zistili, ako sa dajú určité typy pseudotried použiť na text vo veľkých CSS. Či už budete postupovať podľa zásad uvedených v tomto článku, alebo sa pustíte do hĺbky, akonáhle sa naučíte pracovať s pseudotriedami CSS prvé dieťa,: prvého typu a: prvé písmeno, môžete ich správne použiť na prvky HTML .

Kreslenie čiary

Použitie oddelených tried spolu s pseudotriedami na spracovanie rôznych písmen je proces pokusov a omylov a vypočítava sa kladný a záporný okraj. A to chce veľa trpezlivosti. Písmená ako F, ​​G, O, P, Q, T, W, V a Y budú tiež vyžadovať samostatné triedy párovania.

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

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

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

V PHP existuje funkcia s názvom „ najskôr", Ktorý iba skonvertuje prvý znak reťazca na veľké písmená, ale jeho mínusom je, že nepracuje správne s azbukou.

Za týmto účelom napíšeme vlastnú malú funkciu. Implementácia bude vyzerať 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 v zdrojovom kóde stránky budú ponuky vyzerať tak, ako sú) tiež prevádza prvý znak na veľké písmená.

Použitie je nasledovné:

prvá veta

druhá veta

tretia veta

štvrtá veta

Použitie pseudoprvku " prvé písmeno"A vlastnosti" transformácia textu»Nastavili sme vzhľad pre každé prvé písmeno odseku.

JQuery veľké prvé písmeno reťazca

Ako som už povedal, táto metóda prevodu je najvhodnejšia pre materiály, ktoré ešte nebudú publikované.

Vezmeme napríklad textové pole (bude to slúžiť ako pole pre zadanie názvu pre nás) a napíšeme preň malý skript, ktorý keď zadáte vetu s malým písmenom, zmení ho na veľké písmena:

Skript sa spustí pri písaní textu aj pri jeho jednoduchom vkladaní. Nezabudnite, že na to, aby skripty fungovali na vašom webe, musíte mať pripojenú knižnicu jQuery.

Dobrý deň, geekovia pri stavaní stránok. V dnešnej publikácii sa budeme zaoberať témou súvisiacou s návrhom textového obsahu. Preto sa naučíte, ako nastaviť veľké písmená v css - pomocou, zoznámite sa s niekoľkými možnosťami vytvorenia kvapky a samozrejme si môžete všetko vyskúšať v praxi. Prejdime teraz k zábavnej časti!

Transformujme text

Kaskádovými štýlmi môžete zmeniť prvý znak bloku aj celý text. Ukážem vám, ako môžete robiť oboje. Všetky nástroje uvedené v tomto článku sú navyše podporované v troch úrovniach jazyka: css1, css2, css2.1 a css3.

Začnem zaujímavou vlastnosťou, ktorá upravuje celý textový obsah vo výbere. to transformácia textu.

Pomenovaný prvok môže prevádzať znaky na veľké, malé písmená a taktiež používať veľké písmená na každom prvom znake slova. O hodnotách v tabuľke som napísal viac.

Teraz, aby ste konsolidovali teoretický materiál, vezmite si príklad.

Pozor!

! Zajtra je zľava na všetky kozmetické výrobky!

Akcia platí vo všetkých pobočkách nachádzajúcich sa vo vašom meste.

Vytvorenie kapucne

Ak neviete, čo znamená výraz „cap cap“, potom je načase to zistiť, pretože to priamo súvisí s aktuálnou témou.

Drop cap (alebo niekedy iniciála) je prvé písmeno kapitoly, ktoré sa od ostatných líši veľkou veľkosťou, farbou a v niektorých prípadoch dokonca aj dizajnom písma. V skutočnom živote možno nájsť príklad takéhoto listu v starých rukopisoch a knihách.

Existuje niekoľko spôsobov, ako vytvoriť iniciálu. Znak je často zvýraznený značkou značkovacieho jazyka a potom sú v štýloch, ktoré ho upravujú, predpísané určité vlastnosti. Je to dobrý spôsob, ale táto publikácia hovorí o mechanizmoch css (ktoré sú podľa mňa v tomto prípade oveľa logickejšie a pohodlnejšie na použitie).

Na vyriešenie problému môžete použiť nástroj ako napr.

V tomto prípade sa teda používa prvé písmeno. Rovnako ako všetky pseudoelementy je priradený k selektoru oddelenému dvojbodkami. Potom, podľa všetkých pravidiel štýlov, sú špecifikované vlastnosti. Môžete však použiť iba vlastnosti súvisiace s úpravou písem, výplne, farby, pozadia, okrajov a okrajov.

Navrhujem zvážiť konkrétny príklad. Pri implementácii prezentovaného malého programu som sa rozhodol urobiť nielen farebnú čiapočku, ale naplniť ju kvetmi. Na to musíte použiť niekoľko záludných trikov s nastavením priehľadnej farby písma a vyplnením písmena vybraným obrázkom.

Tento odsek obsahuje vetu s veľmi zaujímavým obsahom.

Pokračujme v zaujímavom príbehu v nasledujúcom odseku.

Výsledok vyzerá veľmi atraktívne a neobvykle, čo je perfektné riešenie pre.

Ako vidíte, táto téma je veľmi jednoduchá. Mne poskytnutý kód môžete bezpečne použiť pre svoje webové zdroje, pričom ich môžete upravovať a prispôsobovať svojmu štýlu.

Ak bol pre vás vyššie uvedený materiál užitočný, prihláste sa k odberu aktualizácií na mojom blogu a nezabudnite zdieľať získané znalosti (a samozrejme odkaz na môj blog) so svojimi priateľmi. Veľa štastia!

Zbohom!

S pozdravom Roman Chueshov

Čítať: 236 krát

Súvisiace články

AST Sberbank: elektronická platforma Ako nájsť požadovanú aukciu pre Sberbank ast

EDS a registrácia na AST GOZ „Na kľúč Automatizovaný systém poriadku obrany štátu

Výhody a nevýhody vytvorenia „elektronického rozpočtu“ Inštalácia „klienta Continent TLS“ na prácu s elektronickým rozpočtom

Pokyny na získanie akreditácie na tender rts

Automatizovaný systém na generovanie konsolidovanej prognózy objemu nákupov ako poz

Verejné obstarávanie pre začiatočníkov: pravidlá správania sa a účasti