Některé stránky nepřitahují uživatele animacemi, obrázky nebo fotografiemi, videi, ale výhradně textovým obsahem. Text je nedílnou součástí obsahu mnoha oblíbených stránek. V předchozích lekcích jsme se zabývali vlastnostmi CSS, které umožňují změnit barvu textu, přidat k němu stín, zarovnat jej a přidat k němu podtržení, přeškrtnutí nebo dokonce přeškrtnutí. Tato lekce se podívá na to, jaké rodiny písem existují a jak změnit výchozí písmo textu.
Rozdíl mezi rodinami bezpatkových a patkových písem
webové stránky - bezpatkové písmo
webové stránky - patkové písmo
Rodiny písem v CSS
V CSS jsou písma rozdělena do rodin, přičemž každá rodina se skládá ze sady písem, která sdílejí společné vlastnosti. Existuje pouze pět rodin písem:
- sans-serif - bezpatkové fonty, jsou považovány za lépe čitelné na obrazovce počítače než fonty z rodiny patek.
- patka je rodina patkových písem. Mnoho lidí si je spojuje s novinovými články. Patky jsou ozdobné tahy a čárky podél okrajů písmen.
- monospace je rodina písem, jejichž znaky mají stejnou pevnou šířku. Takové fonty se používají především k zobrazení příkladů programového kódu.
- kurzíva – písma, která napodobují ručně psaný text.
- fantasy - umělecká a dekorativní písma. Nejsou příliš rozšířené, nejsou dostupné na všech počítačích a ve webdesignu se používají jen zřídka.
Vlastnost font-family umožňuje změnit výchozí písmo. Obvykle obsahuje čárkami oddělený seznam zaměnitelných písem patřících do stejné rodiny. Pokud se název písma skládá z více slov, musí být uveden v uvozovkách. Příjmení je obvykle uvedeno na konci seznamu:
Tělo (rodina písem: Verdana, Helvetica, Arial, bezpatkové; )
Podívejme se, jak prohlížeč zpracovává seznam písem uvedených v naší vlastnosti font-family:
- Nejprve zkontroluje, zda je na vašem počítači nainstalováno písmo Verdana, a pokud ano, použije jej jako písmo pro text uvnitř prvku (v našem případě uvnitř prvku )
- Pokud Verdana není nainstalována, hledá písmo Helvetica. Pokud je hledání úspěšné, použijte jej uvnitř .
- Pokud Helvetica není nainstalována, hledá písmo Arial. Pokud je v počítači k dispozici, použije se interně .
- Nakonec, pokud není nalezeno žádné ze zadaných písem, použije se první písmo z bezpatkové rodiny nalezené prohlížečem v počítači. Prohlížeč tak může nezávisle určit vhodné písmo z rodiny.
Vlastnost CSS font-family
Odstavec pomocí písma Times New Roman.
Odstavec pomocí písma Arial.
Snaž se "
Poznámka: Při výběru pouze jednoho konkrétního písma je důležité pochopit, že jej prohlížeč zobrazí pouze v případě, že je písmo nainstalováno na počítači uživatele. Pokud písmo není nalezeno, text se zobrazí ve fontu „Times New Roman“, což je výchozí písmo ve všech prohlížečích.
CSS fonty— sada vlastností pro ovládání vzhledu textu na webových stránkách. Použitím různých písem pro nadpisy, odstavce a další prvky můžete nastavit specifický styl pro psaná sdělení, přenášející požadované emoce a náladu.
Když se ponoříte do rozmanitosti písem, nezapomeňte, že text hlavního obsahu webové stránky by měl být především čitelný. Nedoporučuje se používat na stránce více než dvě písma a požadovaného kontrastu lze dosáhnout kombinací písem různé tloušťky, velikosti, stylu nebo barvy.
Více o pravidlech se dozvíte v následujícím článku.
Formátování písma pomocí vlastností CSS
1. Rodina písem Rodina písem
Vlastnost se používá k výběru stylu písma. Vzhledem k tomu, že nelze předvídat, zda je konkrétní písmo nainstalováno na počítači návštěvníka vašich stránek, doporučujeme zaregistrovat všechny možné varianty stejného typu písem. V takovém případě prohlížeč zkontroluje jejich přítomnost a postupně projde navrhovanými možnostmi. Zděděno.
Důležité! Pokud název písma obsahuje mezery nebo symboly (například #, $, %), je uzavřen v uvozovkách. To se provádí tak, aby prohlížeč pochopil, kde začíná a končí název písma.
| rodina písem | |
|---|---|
| Hodnoty: | |
| rodinné jméno | Název rodiny písem, například Times, Courier, Arial. Doporučuje se specifikovat společně se základní rodinou. |
| generická rodina | Základní rodina. CSS definuje pět základních rodin písem: Serif fonty - Serif (Times New Roman, Times, Garamond, Georgia) Bezpatková písma (Helvetica, Geneva, Arial, Verdana, Trebuchet, Univers) Monospace fonty - Monospace (Courier, Courier New, Andele Mono) Ručně psané fonty – Cursive (Comic Sans, Gabriola, Monotype Corsiva, Author, Zapf Chancery) Alegorická písma (Western, Woodblock, Klingon) |
| počáteční | |
| zdědit | |
Syntax
P (rodina písem: "Times New Roman", Georgia, Serif;)
2. Styl písma styl písma
Tato vlastnost vám umožňuje vybrat styl písma pro text. Jak již bylo řečeno, rozdíl mezi kurzívou a kurzívou je ten, že kurzíva provádí malé změny ve struktuře každého písmene, zatímco kurzíva je nakloněná verze rovného textu. Zděděno.
Syntax
H1 (font-style: normal;) h1 (font-style: italic;) h1 (font-style: šikmé;) Obr. 1. Vlastnost font-style
3. Možnost stylu písma varianta písma
Tato vlastnost umožňuje zobrazit písmo malými velkými písmeny. Zděděno.
Syntax
H1 (varianta písma: normální;) h1 (varianta písma: malá písmena;) Obr. 2. Vlastnost font-variant
4. Tloušťka písma tloušťka písma
Vlastnost určuje tloušťku písma.
| Hodnoty: | |
| normální | Výchozí hodnota nastaví tloušťku písma na normální. Odpovídá hodnotě nasycení 400. |
| tučně | Nastaví písmo textu na tučné. Odpovídá hodnotě nasycení 700. |
| odvážnější | Tloušťka písma bude větší než u předka. |
| lehčí | Tloušťka písma bude menší než u předka. |
| 100, 200, 300, 400, 500, 600, 700, 800, 900 | Hodnota 100 je nejsvětlejší styl písma a 900 je nejtlustší. Navíc tato čísla neurčují konkrétní hustotu, tzn. 100, 200, 300 a 400 může odpovídat stejné variantě slabé tloušťky písma; 500 a 600 mají střední hmotnost a 700, 800 a 900 mohou zobrazit stejný velmi bohatý styl. Rozložení hustoty také závisí na počtu úrovní tloušťky definovaných v konkrétní rodině písem. |
| počáteční | Nastaví hodnotu vlastnosti na výchozí hodnotu. |
| zdědit | Zdědí hodnotu vlastnosti z nadřazeného prvku. |
Syntax
H1 (tloušťka písma: normální;) span (tloušťka písma: tučné;) span (tloušťka písma: tučnější;) span (tloušťka písma: světlejší;) h1 (tloušťka písma: 100;) 
Rýže. 3. Vlastnost font-weight
5. Velikost písma velikost písma
Vlastnost určuje velikost (bod) písma.
| velikost písma | |
|---|---|
| Hodnoty: | |
| absolutní velikosti | xx-small, x-small, small, medium, large, x-large, xx-large. Absolutní velikosti jsou definovány vzájemně vůči sobě a škálovací faktor mezi dvěma sousedními absolutními velikostmi je přibližně 1,5 od malé k velké a 0,66 od velké k malé. Střední je akceptována jako standardní velikost. |
| relativní-velikost | menší, větší. Relativní velikosti způsobují, že se velikost písma prvku mění vzhledem k jeho nadřazenému prvku. V tomto případě může velikost písma přesahovat velikosti očekávané pro xx-small a xx-large . |
| délka | Velikost písma se nastavuje pomocí kladných jednotek délky – px, jak celých čísel, tak zlomků. |
| % | Relativní hodnota, vypočtená na základě libovolné velikosti zděděné z nadřazeného prvku. Poskytuje přesnější úpravu vypočítané velikosti písma. Nastavení velikosti písma pomocí em je ekvivalentní procentuální hodnotě. |
| počáteční | Nastaví hodnotu vlastnosti na výchozí hodnotu. |
| zdědit | Zdědí hodnotu vlastnosti z nadřazeného prvku. |
Syntax
H3 (velikost písma: malá;) h1 (velikost písma: xx-large;), em (velikost písma: velká;) p (velikost písma: 20px;) h3 (velikost písma: 120 %;)
6. Barva písma
Vlastnost určuje barvu písma pomocí různých systémů vykreslování barev. Nemovitost se dědí.
| barva | |
|---|---|
| Hodnoty: | |
| HEX | Tento systém používá arabská desetinná čísla od 0 do 9 a latinská písmena od A do F. Pro webdesign se bere 16 základních barev, tzv. hexadecimální barevný kód #RRGGBB, kde každý pár odpovídá za svůj podíl barvy: RR - červená, GG - zelená a BB - modrá. Každá barevná frakce se pohybuje od 00 do FF. |
| RGB | Červená Zelená Modrá, označuje množství odpovídajícího tónu (červená, zelená, modrá) ve výsledné barvě. |
| RGBA | RGB barevný systém rozšířený o parametr Alfa, který slouží k ovládání míchání barev. Hodnotu podporují IE9+, Firefox 3+, Chrome, Safari a Opera 10+. Poslední číslo určuje stupeň průhlednosti, nastavený hodnotou od 0 do 1, kde 0 odpovídá plné průhlednosti a 1 neprůhlednosti. |
| HSL | Odstín, sytost, světlost (intenzita)- odstín (tón), sytost, světlost, barevný model pro popis barev. První hodnota je odstín— určeno stupněm rotace barevného spektra ve směru hodinových ručiček od 0° do 360°, kde 60° je žlutá, 120° je zelená, 180° je azurová, 240° je modrá, 300° je fialová. Druhá hodnota určuje nasycení vybraný odstín a je uveden v procentech v rozmezí od 0 % do 100 %. Čím více se tato hodnota blíží 100 %, tím je barva čistší a sytější. Světlost nebo jas indikováno v procentech; čím vyšší procento, tím jasnější bude barva. Hodnoty 0 % a 100 % označují černé (žádné světlo) a bílé (přeexponované) barvy, bez ohledu na to, který odstín z barevného kruhu byl původně vybrán. Optimální hodnota jasu barev je 50 %. Podporovaná hodnota IE9+, Firefox, Chrome, Safari, Opera 10+ |
| HSLA | Nastaví průhlednost (přes alfa kanál) prvku. Odstín (0 až 360), Sytost (0 % až 100 %), Světlost (0 % až 100 %), Průhlednost (0 až 1). Hodnota podporována IE9+, Firefox 3+, Chrome, Safari a Opera 10+. |
| název barvy | Hodnota barvy je určena názvem pro různé prohlížeče. V současné době existuje |
Vlastnosti CSS lze použít k nastavení různých písem pro různé prvky webové stránky a také k určení jejich stylu, velikosti, barvy a dalších parametrů.
Podívejme se na dostupné vlastnosti.
rodina písem
Umožňuje určit, jakým písmem bude text napsán. Pro seskupování písem v CSS se používají dva typy názvů: generická rodina A rodinné jméno.
generická rodina obsahuje pět základních rodin písem, které lze nalézt téměř na každém počítači.
- sans-serif- bezpatková písma. Text, který píší, je vnímán lépe než ostatní.
- patka- patková písma.
- monoprostor- písma, jejichž znaky mají pevnou šířku. Obvykle se používají k zobrazení kódu programu.
- kurzívní- ručně psaná písma.
- fantazie- dekorativní (umělecká) písma.
rodinné jméno nedefinuje rodinu, ale jedno písmo: „Arial Black“, Verdana.
Jako hodnoty majetku rodina písem rodiny a fonty jsou uvedeny oddělené čárkami. Prohlížeč zjistí, zda je na počítači uživatele nainstalováno první písmo v seznamu, a pokud ano, zobrazí text v něm, pokud ne, přejde na další atd. Pokud název písma obsahuje speciální znaky nebo se skládá více slov (obsahuje mezeru), pak je třeba dát do uvozovek.
H1 (rodina písem: Arial, sans-serif;) h2 (rodina písem: "Times New Roman", patka; )
styl fontu
Nastaví kurzívu (hodnota kurzíva), šikmý ( šikmý) nebo standardní ( normální) styl textu.
Text kurzívou.
Text kurzívou.
Normální styl textu.
Vytvoří stránku takto:
velikost písma
Důležitá vlastnost, která určuje velikost písma. Lze jej specifikovat různými způsoby.
- Pixely (px). Používají se poměrně často, protože umožňují co nejpřesněji určit velikost. Ve výchozím nastavení prohlížeč zobrazuje text o velikosti 16 pixelů.
P (velikost písma: 12px; )
Upozornění: mezi číslem a měrnými jednotkami by neměla být mezera.
- Procento (%). Počítáno z velikosti písma nadřazeného prvku. Pokud to má rodič nastaveno defaultně, tak si můžete zapamatovat cca 16 pixelů a brát je jako 100%.
P (velikost písma: 120 %; )
- Body (pt). Také velmi často používaný. Navíc, když vyberete číslo nastavením velikosti písma v textových editorech (Word, Poznámkový blok, Poznámkový blok atd.), použijete také body.
P (velikost písma: 15pt; )
- Relativní výška písma (em). Výška nadřazeného písma je brána jako jedna a výška písma aktuálního prvku je nastavena relativně k ní.
P (velikost písma: 1,2 em; )
- Konstanty. Věří se, že hodnoty xx-malý, x-malé, malý, střední, velký, x-velký, xx-velký(od nejmenšího po největší) nastavte absolutní velikost písma, i když ve skutečnosti bude při jejich použití velikost stále záviset na nastavení operačního systému a prohlížeče. Existují také relativní konstanty: menší(menší) a větší(větší), které zmenšují nebo zvětšují písmo vzhledem k rodičovskému prvku.
P (velikost písma: x-large; )
- Jiné měrné jednotky. K nastavení písma můžete použít vše, co je v CSS dostupné: milimetry ( mm), centimetry ( cm), palce ( v), vrcholy ( ks, 1 ks = 12 b), velikost znaků X (např).
P (velikost písma: 1,5ks; )
varianta písma
Nabízí dva významy:
- malokapitálky. Malá písmena se změní na malá velká písmena.
- normální. Prostý text.
Abyste pochopili rozdíl, je lepší to vidět jednou:
H1 (varianta písma: malá písmena; ) h2 (varianta písma: normální; )
tloušťka písma
Ovlivňuje sytost (tučnost) písma. Hodnoty mohou být:
- Čísla od 100 do 900 v krocích po stovce. S jejich pomocí můžete nejpřesněji nastavit obsah tuku. Hmotnost běžného písma, které obvykle vidíte na stránkách, je 400, zatímco tučné písmo je 700. Problém je v tom, že mnoho prohlížečů nepodporuje celý tento rozsah, takže použití číselných hodnot je často zbytečné.
- normální. Běžné písmo.
- tučně. Nastaví styl na tučné.
Div ( váha písma: tučné; )
- odvážnější a lehčí. Učiní písmo tučnějším nebo tenčím než písmo nadřazeného textu.
barva
Určuje barvu písma. Lze nastavit následujícími způsoby
- Podle jména. Vyhrazená slova se používají k označení názvů barev (např. modrý- modrá, žlutá- žlutá). Nejjednodušší, ale zároveň nejomezenější metoda, protože podporuje pouze 140 barev, i když většinou jich je dost.
P (barva: červená; )
- Pomocí hexadecimálního kódu (HEX). Hexadecimální číselná soustava obsahuje 16 číslic, z nichž posledních šest je označeno písmeny latinské abecedy od A do F a desetinné číslo 255 se v této soustavě zapisuje jako FF. Jak víte, všechny barvy vznikají smícháním pouze tří: červené, zelené a modré. Stupeň přítomnosti každého z nich je určen čísly od 0 do 255 zapsanými v šestnáctkové soustavě. Před číslem je symbol hash ( # ). Bílá barva - #000000 , Černá - #ffffff.
Níže uvedený příklad nastaví barvu odstavce na šedou:
P ( barva: #808080; )
- V systému RGB. Všechny stejné červené, zelené a modré (červená, zelená, modrá), ale již specifikované čísly od 0 do 255 oddělenými čárkami. Přítomnost každé ze tří barev může být také uvedena v procentech. Potom 100 % bude odpovídat číslu 255.
A (barva: rgb(0,128,201);)
- RGBA. Vše je stejné jako v RGB, jen na konci je přidáno ještě jedno číslo od 0 do 1 - alfa kanál, který nastavuje průhlednost textu.
A (barva: rgba(0,128,201,0,5);)
- HSL. Hodnota v tomto formátu je určena třemi parametry oddělenými čárkami.
1. H (odstín - odstín). Definováno ve stupních od 0 do 359° v závislosti na barvě na barevném kole (obrázek níže).
2. S (Saturate - odstín). Uvádí se v procentech. Je jasné, že od 0 do 100 % a je jasné, že čím vyšší procento, tím sytější barva.
3. L (lehkost - jas). Stejně jako saturace se nastavuje v procentech.
A (barva: hsl(0,100%,100%);)
- HSLA. Stejné jako HSL, ale s přidaným alfa kanálem (jako RGBA).
A (barva: hsla(0,100%,100%,0,7);)
písmo
Umožňuje kombinovat všechny vlastnosti písma v jednom řádku a může tak značně zredukovat kód. Má následující strukturu:
Písmo: font-style font-variant font-weight font-size/line-height font-family
Vlastnosti musí být zapsány přesně v tomto pořadí (abyste nenastavili hodnotu, můžete ji jednoduše přeskočit).
Zde je příklad:
Div (font: šikmá malá písmena 12pt/1,2 Arial, bezpatkové;)
Jak změnit písmo?
Při tvorbě webu je vždy potřeba změnit písmo textu u nejrůznějších částí a prvků HTML stránek, protože to dodává webu nejen jedinečnost a styl, ale také zlepšuje kvalitu vnímání informací. V HTML na to existují speciální značky, o nich budeme mluvit v této lekci, která bude jednou z největších v tomto tutoriálu. Ale, jak jsem vám řekl dříve, nesnažte se zapamatovat si vše zpaměti, ne, hlavní věcí je přijít na to a pochopit, o čem se v každé fázi lekce diskutuje.
Změna stylů písma
Existuje více než jeden způsob, jak změnit styly psaní písem v HTML, a brzy to uvidíte. Nyní se podívejme na některé nové značky:
... A ...- zvýraznit text tučně písmo.
... A ...- zvýraznit text kurzíva.
...- zobrazí text v horním indexu, například E = mc 2 .
...- zobrazí text v dolním indexu, například H 2 SO 4.
Všechny tyto značky jsou vestavěný (inline, linka na úrovni), to znamená, že nevytvářejí konce řádků před a za sebou, ale jsou umístěny na jednom řádku. Mohou také obsahovat pouze vestavěné prvky, takže je lze do sebe libovolně vnořovat. Nejdůležitější je nezapomenout na správné vnoření: dříve otevřená značka musí být později uzavřena.
Myslím, že jste si všimli, že existují dvě značky pro tučné písmo a kurzívu. Faktem je, že běžné prohlížeče zobrazují obsah těchto značek stejným způsobem, ale nevizuální (hlasové) prohlížeče mohou zvláště zdůraznit text uvnitř A . Pokud tedy chcete zvýraznit určitá slova nebo fráze, abyste přilákali čtenáře, je lepší použít tyto značky, i když v tom celkově není žádný rozdíl.
Můžete se ptát: „Jsou ale výše uvedené značky skutečně jediné, co lze použít ke zvýraznění textu v HTML?“ No jasně že ne! Nechybí ani značky A , podtržení textu i značky , zobrazující přeškrtnutý text. Ale jak vidíte, tyto značky jsou v HTML zastaralé a stejně jako atribut align jim prohlížeče brzy přestanou rozumět. Ukážu vám proto další metodu, kterou můžete bez obav použít. A spočívá v použití atributu style a je přípustné jej specifikovat uvnitř jakýchkoli značek. Obecná syntaxe je následující:
<тег style= "text-decoration:underline" >... - zdůrazňuje text.
<тег style= "text-decoration:overline" >... - podtrhne text.
<тег styl= "text-decoration:line-through">... - přeškrtne text.
Příklad změny stylů písma
Tučné písmo. Kurzíva.
tučná kurzíva.
H 2 TAK 4- vzorec kyseliny sírové psaný kurzívou.
Podtržený odstavec textu.
Prostý text, tučně přeškrtnuté.
Výsledek v prohlížeči
Nyní bych rád upřesnil atribut style. Styl je úplně obyčejný atribut tagu, ale týká se kaskádových stylů (CSS). V dávné minulosti všechny funkce pro strukturování HTML stránky jako celku i pro vnější prezentaci každého prvku zvlášť (barva, tvar, pozice na stránce atd.) převzal jazyk HTML. Pak se ale vývojáři jazyků rozhodli tyto funkce oddělit a vytvořili CSS. V souladu s tím se mnoho značek nebo atributů značek stalo zastaralými. Abyste si proto nezaplnili hlavu zbytečnými informacemi, v tomto návodu jsem je nahradil i styly, tedy atributem style. Jeho obecná syntaxe je následující:
<тег styl= "Vlastnost CSS:hodnota">...
Používáním stylu neztratíte vůbec nic, ale naučíte se psát kompetentní HTML a jako bonus si osvojíte i trochu CSS.
Štítek nebo co dělat, když nejsou žádné potřebné značky
No, je zatím vše jasné? Dobře, tak otázka. Co uděláte, když například potřebujete přeškrtnout ne celý odstavec, ale jen polovinu textu a nedělat to tučně nebo kurzívou? No, nebojte se, zde vám pomůže jeden velmi pohodlný a nezbytný štítek.
Tak se seznamte -... Tato značka je také vestavěný (inline, linka na úrovni) a může obsahovat jakékoli vestavěné značky, ale to není to hlavní. Sám , bez atributů, nepřidává žádné změny do textu ani do značek uvnitř. A byl vytvořen speciálně pro styly, tedy v podstatě pro atribut style. Právě díky tomuto atributu, respektive jeho odlišným významům objevují se určité vlastnosti. To je vše, nyní si prostudujeme příklad.
Příklad použití značky SPAN
Prostý text beze změn.
Běžnější text. ve stresu. Přeškrtnuté.
Výsledek v prohlížeči
Prostý text beze změn.
Běžnější text. ve stresu. Přeškrtnuté.
Změna názvu (typu písma) fontu
Nevíte, co je to název písma? Určitě mnozí z vás alespoň jednou zadali text v aplikaci Microsoft Word nebo OpenOffice Writer a viděli tuto nabídku:
Toto jsou názvy písem, která jsou k dispozici na vašem počítači a používá je nejen Word nebo Writer, ale také mnoho dalších aplikací, včetně prohlížečů. Název (typ písma) písma určuje jeho samotný design, který odlišuje jedno písmo od druhého.
Důrazně nedoporučuji používat žádná exotická písma, protože nemusí být na počítači toho, kdo navštíví váš web, a místo písmen pak uvidí různé nesrozumitelné symboly nebo čtverečky. Zde je seznam nejběžnějších písem, která má ve svém počítači téměř každý uživatel:
Ve výchozím nastavení téměř všechny prohlížeče používají písmo „Times New Roman“ a pro jeho změnu se používá stejný atribut stylu, který lze použít uvnitř jakékoli značky. Obecná syntaxe pro specifikaci je:
<тег styl= "font-family: název písma, rodina">...
Pokud se název písma skládá z několika slov, musí být uzavřen v jednoduchých uvozovkách. Je povoleno zadat ne jeden, ale několik názvů písem oddělených čárkami, a pokud první písmo není v počítači, použije se druhé, třetí atd. Na konec ale nezapomeňte uvést název celé rodiny písem, v tomto případě, pokud prohlížeč nerozpozná ani jedno písmo, použije písmo, které je pro tuto rodinu nejvhodnější.
Chcete-li změnit písmo na celé stránce, stačí ve značce zadat atribut stylu
. A pokud potřebujete změnit písmo pro samostatnou část textu, pak to uzavřete do štítku a aplikujte na něj atribut.Příklad změny názvů písem
Toto je písmo Arial, pokud tam není, tak Verdana, a pokud tam není, pak jakékoli jiné bezpatkové.
Toto je Comic Sans MS nebo jakákoli kurzíva.
To je opět Arial, Verdana nebo jakýkoli bezpatkový. A tohle je Courier nebo jakýkoli monospace.
Výsledek v prohlížeči
Dobře, přišel jsi na ten příklad? Udělám jedno upřesnění, jehož pochopení vám v budoucnu značně usnadní život, i když si myslím, že mnozí již uhodli. Pokud jsou tedy značky vnořeny do sebe a několika z nich provádět změny stejného typu(například změní název písma), potom tagy potomka přepíší vlastnosti tagů předků. Pokud vnořené značky provádějí různé změny, pak se vzájemně doplňují, to je vše.
Změna velikosti písma
Jazyk HTML je omezen pouze na sedm velikostí písma, což, jak vidíte, je na dobrý web velmi málo. Proto všichni odedávna používají CSS pro změnu velikosti a teď se to naučíte i vy.
V CSS je asi deset měrných jednotek, ale my se podíváme pouze na tři nejoblíbenější – body (pt), pixely (px) a procenta (%). Tak:
- pt- Body. Jeden bod se rovná 1/72 palce a jeden palec je 2,54 cm. Proto 1pt = 0,03527778 cm. Toto je absolutní hodnota, protože velikost zadaná v bodech na ničem nezávisí.
- px- Pixely. Měřeno v pixelech monitoru počítače. Pixel je nejmenší bod na monitoru a je to relativní hodnota, protože jeho velikost závisí na aktuálním rozlišení obrazovky a velikosti samotného monitoru.
- % - Zájem. Počítá se v procentech, kdy 100 % se bere jako hodnota nadřazeného tagu a pokud není uvedena, tak výchozí hodnota v prohlížeči. To je také relativní hodnota, protože velikost nadřazeného písma může být zcela odlišná a uživatelé mohou velikost písma v prohlížeči libovolně měnit.
K určení velikosti písma se používá atribut style, který lze zadat uvnitř jakékoli značky. Obecná syntaxe je:
<тег style="font-size:size">...
Stejně jako u názvů písem, chcete-li změnit velikost písma na celé stránce, stačí ve značce zadat atribut stylu
. A pokud potřebujete změnit písmo pro kus textu, pak jej uzavřete do štítku a aplikujte na něj atribut.Příklad změny velikosti písma
Tato velikost písma je 90 % výchozí velikosti prohlížeče.
Tato velikost odpovídá 90 % velikosti na štítku BODY.
Velikost písma nadpisu je 120 % velikosti BODY.
To je opět 90 % výchozí velikosti v prohlížeči. Tato velikost písma je 15 bodů.
Výsledek v prohlížeči
Tato velikost písma je 90 % výchozí velikosti prohlížeče.
Tato velikost je 90% velikosti BODY.
Velikost písma nadpisu je 120 % velikosti BODY.
To je opět 90 % výchozí velikosti v prohlížeči. Tato velikost písma je 15 bodů.
Velikost písma závisí nejen na jeho výslovném označení, ale také na jeho názvu (typu písma) – různá písma mohou mít zcela odlišné výšky a šířky písmen a také mezery mezi písmeny.
Trochu více o atributu style
Je načase prozradit vám další tajemství této úžasné vlastnosti, ale opět vám nejprve položím otázku. Co byste dělali, kdybyste museli nastavit celý odstavec na název písma Arial o velikosti 80 %? A řeknu vám, napsal byste něco takového:
Text odstavce.
Text odstavce.
Nebo i takhle.
Text odstavce.
Mám pravdu? No, pokud jsou první dvě možnosti v zásadě správné, pak poslední je obecně chyba, protože, pokud si pamatujete, jeden tag nemůže mít dva stejné atributy. Nyní je čas si připomenout, že styl není jen atribut, ale atribut CSS. Podívejte se na toto:
Text odstavce.
Mnohem jednodušší, že? Nejdůležitější je nezapomenout vložit středník (;) mezi sousední styly a všechny tyto věci vložit do dvojitých uvozovek (" "), jinak bude použit pouze první styl a prohlížeč bude ostatní ignorovat. No, vždy dáváme dvojité uvozovky, že?
Takže tato lekce se ukázala jako velmi intenzivní, takže si udělejte domácí úkoly a trochu si odpočiňte.
Domácí práce.
- Vytvořte nadpis článku a jeho dvou sekcí, ale také podtrhněte nadpisy sekcí.
- Ujistěte se, že když najedete myší na nadpis článku, zobrazí se odpovídající titulek.
- Napište jeden odstavec na začátek článku a dva do každé části.
- Nastavte celou stránku na písmo Arial na 90 % výchozí velikosti prohlížeče.
- Nastavte všechny nadpisy na písmo Times a nadpis článku nastavte na velikost písma 150 % a podnadpisy na 120 %.
- V prvním odstavci zvýrazněte dvě slova tučně a jedno kurzívou. Ve druhém - fráze několika slov tučnou kurzívou. Ve třetím podtrhněte frázi kurzívou. Ve čtvrtém přeškrtněte polovinu fráze tučně.
- Do posledního odstavce napište vzorec alkoholu: C 2 H 5 OH.
Od autora: vítejte na webformyself. Informace jsou to, k čemu všichni používáme internet. Dobře zvolené písmo umožňuje lépe vnímat textové informace, což zvyšuje loajalitu lidí ke konkrétnímu zdroji. Pojďme dnes zjistit, jak změnit písmo na webu.
Jak změnit parametry
Hned je na místě poznamenat, že změnu textu lze chápat jednoduše jako změnu jeho parametrů nebo změnu samotného názvu písma, po kterém budou písmena a symboly vypadat úplně jinak. V prvním případě jednoduše získá jinou barvu, stane se výraznější nebo kurzívou.
Takové parametry lze změnit pomocí vlastností CSS pro práci s textem. Více se o nich můžete dozvědět v našem CSS tutoriálu pro začátečníky.
Jak změnit písma
A přejdeme k naší dnešní hlavní otázce. K takovým změnám budete opět potřebovat znalost CSS alespoň na základní úrovni. Chcete-li změnit písmo, musíme napsat vlastnost pro prvek, který potřebujeme:
JavaScript. Rychlý start
font-family: jméno;
písmo - rodina : jméno; |
Chcete-li to například změnit pro celý web, musíte v šabloně stylů hledat selektor těla (obvykle style.css). Obvykle má specifikováno několik písem. Ta, která je první za dvojtečkou, bude použita jako první. Pokud se z nějakého důvodu nepodaří načíst, prohlížeč vybere druhý a tak dále, dokud nenajde písmo, které je aktuálně dostupné pro použití.
Měli byste vědět, že existují takzvané standardní fonty, které jsou dostupné na jakémkoli OS a lze je bez obav používat. Jedná se například o Arial, Times New Roman, Tahoma atd. Pro ještě větší spolehlivost můžete po zadání konkrétního názvu určit rodinu písem oddělenou čárkami. V tomto případě, pokud vybraný styl není k dispozici, prohlížeč vybere první optimální z rodiny.
rodina písem: Arial, "Times New Roman", bezpatkové;
písmo - rodina: Arial, "Times New Roman", bezpatkové; |
V tomto příkladu bude nejprve nahrazeno písmo Arial. Pokud bude nalezen, bude použit. Pokud ne, prohlížeč vyhledá Times New Roman. Mimochodem, věnujte pozornost skutečnosti, že pokud se název písma skládá z několika slov. Musí být uzavřen do dvojitých uvozovek.
Oddělené čárkami jsme označili rodinu písem „sans serif“. Jen pro případ. Existují také následující: patka (patka), kurzíva (kurzíva), jednoprostorová (jednoprostorová), fantazie (ozdobná). Každá rodina pro své vlastní účely. Jako hlavní font pro čtení informací je například lepší zvolit bezpatkový.
Pro uvozovky můžete použít kurzívu a pro výstup strojového kódu text bez mezer. A konečně, různé nadpisy se rády navrhují pomocí dekorativních písem.
Jak nahrát nový font na web?
Ano, máte takovou možnost. K tomu vám doporučuji, abyste si ve svém motivu okamžitě vytvořili složku fontů, do které v budoucnu dáte všechna fonty, která připojíte. Obecně nedoporučuji příliš zapojovat.
Ve skutečnosti vidím dva způsoby, jak přidat nová písma na web:
Použijte službu Google Fonts. Zde si můžete vybrat písmo, které se vám líbí, a velmi rychle jej připojit k webu. V tomto případě nemusíte připojovat žádné další složky – vše se načte z úložiště služeb, ale zároveň se mírně sníží rychlost stahování. Proto vám nedoporučuji příliš se připojovat. Maximum – 3-4 fonty.
JavaScript. Rychlý start
Naučte se základy JavaScriptu s praktickým příkladem, jak vytvořit webovou aplikaci.
Na snímku obrazovky můžete vidět, které tlačítko musíte stisknout, abyste písmo rychle použili. Také, pokud se vám líbí, můžete si ji přidat do své sbírky, abyste ji neztratili.
Když kliknete na rychlé použití, služba vám nabídne několik možností připojení a kód, který musíte zkopírovat, aby se písmo propojilo. Doporučuji se připojit standardním způsobem přes link tag.
Poté můžete písmo používat přes font-face, služba vám řekne, jak správně napsat jeho název.
Metoda 2: Nahrajte na web a připojte se přes @font-face. CSS má speciální syntaxi, která umožňuje přidávat nové fonty. Chcete-li to provést, musíte je nejprve nahrát do nějakého adresáře na vašem webu. Doporučuji vytvořit nový - fonty. Také možná již takový adresář máte, pak do něj jednoduše přetáhněte složku se soubory. Kde ho mohu získat? No, samozřejmě, stahujeme všechny potřebné fonty na internetu, kde jinde?
Chtěl bych poznamenat, že pro zobrazení napříč prohlížeči musí být soubor alespoň v několika formátech. Totiž ttf, woff, eot. Na snímku obrazovky můžete vidět typický příklad připojení:
Nejdůležitější je zadat název a také cestu ke všem dostupným formátům pomocí vlastnosti src, oddělené čárkami.
Nyní, kamkoli potřebujete umístit toto písmo, zkopírujte řádek s font-family a vložte jej tam. Bylo by rozumné přidat pár jednodušších písem oddělených čárkami.
Velikost a další parametry
Jak změnit velikost písma na webu? Za to je zodpovědná vlastnost font-size a můžete zadat hodnoty v pixelech, relativních jednotkách em, procentech a dalších jednotkách. Při vývoji webu se považuje za dobrou praxi nastavit velikosti v relativních jednotkách, aby text vypadal co nejčitelněji při různém nastavení velikosti písma.
