TVORBA WEBU
CSS - ZÁKLADY
CSS - Stylovanie
- CSS Styling pozadia
- CSS Styling text
- CSS Styling fonty
- CSS Styling odkazy
- CSS Styling zoznamy
- CSS Styling tabuľky
CSS - BOX MODEL
CSS - PRÍKLADY
Učebnica CSS - Fonty
CSS Basic - CSS Font
| « Predchádzajúca | Ďalšia kapitola » |
CSS vlastnosť písma definuje rodinu písma, rez, veľkosť a štýl textu.
Difference Between Serif and Sans-serif Fonts
Na obrazovkách počítačov sú sans - serif fonty za čitateľnejšie ako bezpätkové rezy písmien.
CSS rodiny písiem
V CSS existujú dva typy názvov rodiny fontov:
- Generické rodina - skupina písiem rodín s podobný vzhľad (ako "Serif" alebo " Monospace")
- Rodina písiem - konkrétna rodina písma (ako "Times New Roman" alebo "Arial")
| Generic rodina | Rodina písiem | Poznámka |
|---|---|---|
| Serif | Times New Roman Georgia |
Fonty pätky sú čiarky na koncoch niektorých znakov |
| Sans-serif | Arial Verdana |
" Sans " znamená bez - tieto písma nemajú na koncoch riadkov znakov |
| Monospace | Courier New Lucida Console |
Všetky monospace znaky majú rovnakú šírku |
Rodina písma
Font se zadává CSS vlastnosťouí font-family. Použiteľné sú iba také písma, ktoré sú bežne rozšírené. Zo slovenských písiem sú to Times New Roman, Arial a Courier New a tiež písma Garamond, Georgia, Verdana a MS Sans Serif.
Sekundárny font: pokiaľ systém nenájde písmo zadané v stránke, skúsi nájsť ďalšie písmo, ktoré je uvedené ako druhé za čiarkou. Napríklad: font-family: Verdana, Arial, Helvetica, sans-serif je spoľahlivá deklaracia bezpatkového písma.
Poznámka: Ak názov rodiny fontov je viac ako jedno slovo, musí byť v úvodzovkách, ako je font - family: "Times New Roman".
Viac ako jedno písmo je oddelené čiarkou - oddelený zoznam.
Príklad
Vyskúšajte si to » |
Štýl písma
Font - štýl vlastnosť väčšinou slúži na typ písma.
Táto vlastnosť má tri hodnoty:
- Normálne - text sa zobrazí normálne
- Kurzívou - text sa zobrazí kurzívou
- Šikmé - text je "opretý " (šikmý text je veľmi podobný kurzíve, ale menej podporovaný)
Príklad
Vyskúšajte si to » |
Veľkosť písma
Font - size nastavuje veľkosť textu.
Schopnosť meniť veľkosti textu je dôležité v oblasti web dizajnu.
Vždy používajte správne HTML tagy, ako <h1> - <h6> pre nadpisy a <p> pre odseky.
Font - size hodnota môže byť absolútna, alebo relatívna veľkosť.
Absolútna veľkosť:
- Nastaví text na zadanú veľkosť
- Neumožňuje užívateľovi meniť veľkosť textu vo všetkých prehliadačoch
- Absolútna veľkosť je užitočná, keď je známa, potrebná výstupná veľkosť
Relatívna veľkosť:
- Slúži na nastavenie veľkosti v porovnaní s okolitými prvkami
- Umožňuje užívateľovi zmeniť veľkosť textu v prehliadačoch
Nastavenie veľkosti písma v pixeloch
Nastavenie veľkosti textu s pixelmi, vám dáva plnú kontrolu nad veľkosť textu
Príklad
Vyskúšajte si to » |
Vyššie uvedený príklad umožňuje Firefoxu, Opere, Chrome, Safari zmeniť veľkosť textu, ale nie Internet Exploreru.
Text môže byť zväčšený vo všetkých prehliadačoch pomocou zoom nástroja (však, toto zmení veľkosť celej stránky, nie len textu ).
Nastaviť veľkosť písma Em
Aby sa zabránilo problému zmeny veľkosti s Internet Exploreror, mnoho vývojárov použitie em miesto pixelov.
Jednotka Em je doporučená W3C.
1em je rovná aktuálnej veľkosti písma. Predvolené veľkosti písma v prehliadačoch je 16px. Takže, predvolená veľkosť 1em je 16px.
Veľkosť možno vypočítať z pixelov em pomocou tohto vzorca: pixels/16 = em
Príklad
Vyskúšajte si to » |
Vo vyššie uvedenom príklade, veľkosť textu v em je rovnaká ako v predchádzajúcom príklade v pixeloch. Avšak s em veľkosťou je možné nastaviť veľkosť textu vo všetkých prehliadačoch.
Problémom je stále IE.
Použite kombináciu percenta a Em
Riešenie, ktoré funguje vo všetkých prehliadačoch, je nastaviť predvolený font - size v percentách tela elementu
Príklad
Vyskúšajte si to » |
Náš kód teraz funguje skvele! Teraz ukazuje rovnakú veľkosť textu vo všetkých prehliadačoch a umožňuje všetkym prehliadačom zväčšenie alebo zmenšenie veľkosti textu!
Ďalšie príklady
Ako nastaviť tučnosť písma
Tento príklad ukazuje, ako nastaviť tučnosť písma.
Nastaviť variantu písma
Tento príklad ukazuje, ako nastaviť variantu písma.
Všetky vlastnosti písma v jednej deklarácii
Tento príklad ukazuje, ako používať skratku pre vlastnosť všetkých vlastností písma v jednej deklarácií.
Všetky CSS Vlastnosti fontov
Číslo v "CSS" stĺpec ukazuje, v ktorej CSS verzii je vlastnosť definovaná ( CSS1 alebo CSS2 ).
| Vlastnosť | Popis | Hodnota | CSS |
|---|---|---|---|
| font |
Sets all the font properties in one declaration | font-style font-variant font-weight font-size/line-height font-family caption icon menu message-box small-caption status-bar inherit |
1 |
| font-family |
Specifies the font family for text | family-name generic-family inherit |
1 |
| font-size |
Specifies the font size of text | xx-small x-small small medium large x-large xx-large smaller larger length % inherit |
1 |
| font-style |
Specifies the font style for text | normal italic oblique inherit |
1 |
| font-variant |
Specifies whether or not a text should be displayed in a small-caps font | normal small-caps inherit |
1 |
| font-weight |
Specifies the weight of a font | normal bold bolder lighter 100 200 300 400 500 600 700 800 900 inherit |
1 |
| « Predchádzajúca | Ďalšia kapitola » |