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

Predvolená hodnota je none , ktorá nemá žiadny vplyv na text. Prípad textu zostáva rovnaký. Hodnoty veľké a malé písmená konvertujú znaky na veľké a malé písmená. Ak zadáte veľké písmená , budú veľké iba prvé znaky každého slova. Zdediť zdedí hodnotu rodiča.

Príklad

h3 ( text-transform: veľké písmená; ) .malé písmená ( text-transform: malé písmená; ) .capitalize ( text-transform: veľké písmená; )

Toto je názov. Má vlastnosť transformácie textu aplikovanú s hodnotou veľkých písmen. Všetky znaky budú veľké.

Tento odsek má vlastnosť transformácie textu nastavenú na malé písmená, čo znamená, že všetky písmená budú malé.

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

Výsledok

Nie všetko je však také jednoduché. Existujú určité nuansy. Ak budete venovať pozornosť druhému odseku vyššie uvedeného príkladu, všimnete si, že slovo capitalize , napriek vlastnosti text-transform aplikovanej na odsek s hodnotou capitalize , je zobrazené celé z veľkých písmen, čo zodpovedá zdrojové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 zjavnej jednoduchosti môže byť vlastnosť transformácie textu veľmi užitočná. Napríklad, ak chcete, aby bol text všetkých nadpisov H1 na vašom webe kapitalizovaný, stačí pridať jednu vlastnosť do šablóny štýlov

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

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

Dobrý deň, milovníci tvorby stránok. Dnešná publikácia sa bude venovať téme dizajnu textového obsahu. Preto sa dozviete, ako sa pomocou prostriedkov nastavujú css veľké písmená, zoznámite sa s viacerými možnosťami tvorby veľkého písmena a všetko si samozrejme môžete vyskúšať v praxi. No a teraz prejdime k tomu najzaujímavejšiemu!

Poďme transformovať text

Vďaka kaskádovým štýlom môžete zmeniť prvý znak bloku aj celý text. Poviem vám, ako môžete urobiť obe možnosti. Všetky nástroje uvedené v tomto článku sú navyše podporované v troch jazykových úrovniach: css1, css2, css2.1 a css3.

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

Pomenovaný prvok dokáže konvertovať znaky na veľké a malé písmená a tiež nastaviť každý prvý znak slova ako veľké písmeno. Viac o hodnotách som napísal v tabuľke.

Teraz, na konsolidáciu teoretického materiálu, zvážte príklad.

Pozor!

!Zajtra sú všetky kozmetické produkty zľavnené!

Akcia platí vo všetkých pobočkách vo vašom meste.

Vytvorenie ochranného uzáveru

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

Začiatočné písmeno (alebo niekedy hovoria iniciála) je prvým písmenom kapitoly, ktorá sa od ostatných líši vo svojom veľká veľkosť, farbu a v niektorých prípadoch aj dizajn písma. V ž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ály. Znak je často zvýraznený značkou značkovacieho jazyka a po v štýloch predpísať určité vlastnosti ktoré ho upravujú. To je dobrý spôsob, ale táto publikácia hovorí o css mechanizmoch (ktoré sú podľa môjho názoru v tomto prípade oveľa logickejšie a pohodlnejšie).

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

Takže v tomto prípade: používa sa prvé písmeno. Rovnako ako všetky pseudoprvky sa k selektoru pripája dvojbodkou. Po všetkých pravidlách štýlov sú špecifikované vlastnosti. Môžete však použiť iba tie vlastnosti, ktoré súvisia s úpravou písma, zarážok, farieb, pozadie, okraje a okraje.

Navrhujem zvážiť konkrétny príklad. Implementácia prezentovaného malý program, rozhodla som sa, že nevyrobím len farebnú čiapočku, ale naplním ju kvetmi. Na to je potrebné použiť niekoľko ošemetných trikov s nastavením farby písma na priehľadnú a vyplnením písmena vybraným obrázkom.

Tento odsek obsahuje veľmi zaujímavú vetu.

Pokračujme v zaujímavom príbehu v ďalšom odseku.

Získaný výsledok vyzerá veľmi atraktívne a nezvyčajne, čo je ideálne riešenie pre .

Ako vidíte, táto téma je veľmi jednoduchá. mnou prinesené programovací kód môžete jednoducho použiť pre svoje webové zdroje, upravovať a prispôsobovať svojmu štýlu.

Ak bol predložený materiál pre vás užitočný, prihláste sa na odber aktualizácií môjho blogu a nezabudnite sa podeliť o svoje znalosti (a samozrejme odkaz na môj blog) so svojimi priateľmi. Veľa štastia!

Čau Čau!

S pozdravom Roman Chueshov

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, kedy 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 hlavným textovým obsahom, alebo sa okolo nich zalamuje 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 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é.
S zalomenie riadku, nasledujúci riadok nemá začiatočnú hornú hranicu.

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

alebo

. Napríklad, ako je znázornené v príklade nižšie s vyvýšenými písmenami v písme Didot. Všimnite si, ako bol atribút margin pridaný napravo od A . V opačnom prípade by sa „zlepil“ 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 prvé písmeno nastavené na veľké veľké písmeno.

A nový odstavec...

Ak máte chuť experimentovať, môžete okrem :first-child a :first-of-type preskúmať aj rôzne metódy. Napríklad, ako napríklad :nth-of-type alebo :nth-of-child , aby ste videli, ako možno určité typy pseudotried použiť pre text s veľkými písmenami CSS. Či už budete postupovať podľa princípov načrtnutých v tomto článku alebo začnete pátrať hlbšie, keď sa naučíte pracovať s pseudotriedami CSS first-child , :first-of-type a :first-letter CSS, budete vedieť správne aplikovať ich do prvkov HTML.

V html hrá veľkosť písma dôležitú úlohu. Priťahuje pozornosť používateľa dôležitá informácia zverejnené na webovej stránke. Aj keď nie je dôležitá len veľkosť písmen, ale aj ich farba, hrúbka a dokonca aj rodina.

Značky a atribúty pri práci s html písmami

Hypertextový jazyk má veľká sada nástroje na písmo. Koniec koncov, formátovanie textu je hlavnou úlohou html.

Príčina stvorenia jazyk HTML vyskytol sa problém so zobrazovaním pravidiel formátovania textu prehliadačmi.

Zvážte 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.

Je podporovaná kladná hodnota atribútu od 1 do 7.

• face – používa sa na nastavenie rodiny písma textu, ktorý sa má použiť vo vnútri značky . Podporované sú viaceré hodnoty oddelené čiarkami.

Formátuje sa iba text, ktorý sa nachádza medzi časťami spárovaný štítok písmo. Zvyšok textu sa zobrazí v predvolenom type písma.

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

• - nastaví tučné písmo v html. Tag podobný v činnosti ako predchádzajúci;
• - veľkosť je väčšia ako predvolená;
• — menšiu veľkosť písmo;
• - kurzíva (kurzíva). Podobná značka ;
• — text s podčiarknutím;
• - prečiarknutý;
• _{— zobrazenie textu 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čiarknutím

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ísma:

1) font-family - vlastnosť nastavuje rodinu fontov. Je možné vymenovať viacero hodnôt.
Zmena písma v html na nasledujúcu hodnotu sa uskutoční, ak predchádzajúca rodina nie je nastavená na operačný systém užívateľ.

Syntax zápisu:

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

2) font-size - veľkosť je nastavená 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ť | hodnota | úrok | dediť

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

• V pixeloch;
• V absolútnom vyjadrení ( 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ísma. Syntax:

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

Hodnoty:

• normálny - normálny pravopis;
• kurzíva - kurzíva
• šikmé - písmo so sklonom 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é. 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 písania 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 vyjadrení.

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 a farba písma html

Písmo je ďalšou vlastnosťou kontajnera. Interne kombinoval 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 nápisoch na rôzne prvky ovláda:

• titulok - 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ý nadpis

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, ako pri kľúčové slovo, ako aj v rgb formát. A tiež vo forme hexadecimálneho kódu.

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 - určiť 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é s pomocou CSS atribúty.

Písmená HTML a medzery medzi nimi CSS

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ť.