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á v operačnom systéme používateľa.

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:dediť

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ť

Písma používané systémom v štítkoch na rôznych ovládacích prvkoch možno nastaviť ako hodnotu:

• 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 vám nastaviť farbu, ako pomocou kľúčového slova, tak aj vo formáte rgb. A tiež vo forme hexadecimálneho kódu.

Iniciálka 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 začiatočného písmena 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é do textu (a posunuté nadol) veľké písmená. úžasné! Čo však robiť, ak plugin nechcete používať (som si istý, že nie) a potrebujete obmedziť iba niekoľko príspevkov a možno aj konkrétne miesto?

Dobrou správou je, že na vytváranie veľkých písmen nepotrebujete plugin, stačí vám nejaký 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é upraviť na základe vášho návrhu a textu.

span tag

Aby bol štýl aplikovaný na veľké písmeno textu, je potrebné veľké písmeno „zabaliť“ do značky span a predpísať príslušnú triedu.

A

Pseudoprvok:prvé písmeno

Prvý znak v texte môžete tiež upraviť pomocou pseudoprvku :first-letter. 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, okrajom, okrajom a výplňou. Ďalšia vec, ktorú treba poznamenať, je, že pseudoprvok :first-letter 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 úprav veľké písmená s CSS.

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 používali aj naďalej od 8. do 15. storočia, kedy tlačiarenské stroje umožnili dostať 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ú v jednej rovine so zvyškom textu a zvyčajne nie je potrebné meniť zalomenie vonkajších okrajov. Vynechané písmená vyžadujú jemnejšie doladenie. 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 na pravej strane 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 štýlov CSS teda otestujte svoje stránky na rôznych zariadeniach, aby ste videli, ako na nich vyzerá text v CSS s veľkými písmenami.

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 písma: 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,6 em. 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 prevedie na písmeno.
Prvé písmeno za zlomom riadka nebude veľké.

O Všimnite si, že v zdrojovom kóde HTML nie je prvé písmeno veľké, ale je skonvertované 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 prevádzať 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 premení na vyvýšenú čiapočku.

Keďže sa konvertuje 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 veľa 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