Stránky neboli dlhú dobu aktualizované. Môžu obsahovať nepresné alebo neaktuálne informácie.
Používaním tejto stránky súhlasíte s používaním cookies.
Hľadanie
Rozšírené vyhľadávanie
TOP 7 - stránky
Napaľovacie programy - 104 877x
Free Pascal - Úvod - 58 535x
Free Pascal - Začiatky - 38 395x
Lazarus - Kreslenie - 36 045x
Internetové prehliadače - 32 238x
3D grafické programy - 31 572x
Free Pascal - Podmienky - 29 693x
Nové v diskusii
Free Pascal - Cykly - štvrtok 31.3.
Lazarus - Začíname - piatok 25.3.
Anketa - streda 2.3.
Navigácia: Tvorba Webu > CSS - Vlastnosti fontu

CSS - Vlastnosti fontu

Dostali sme sa k vlastnostiam CSS, ktoré nám poskytujú naozaj široké spektrum možností, ako bude naša stránka vyzerať. Ako prvé si uvedieme vlastnosti fontu.

Meno fontu

Názov vlastnosti: font-family

Font môžeme určiť názvom alebo typom. Názvy písem všetci dobre poznáme - Arial, Times New Roman, Courier, Comic Sans MS,... Typy fontu existujú nasledujúce:

Typy písem
serif pätkové
sans-serif bezpätkové
cursive písané/kurzívne
fantasy ozdobné
monospace neproporcionálne

Pozrime si zápisy:

p {font-family: Arial}
.patkove {font-family: serif}

Písem môžeme určiť i viacero - použije sa to, ktoré má užívateľ nainštalované, pričom najväčšiu prioritu má prvé. Oddeľujeme ich čiarkami.

span {font-family: Arial, Tahoma, sans-serif}

K príkladu: Ak teda na PC nebude nainštalované písmo Arial, použije sa Tahoma. Pokiaľ by sme nemali ani Tahomu, výsledný font by bol akýkoľvek bezpätkový.

Viacslovné názvy konkrétnych písem by sme mali písať v úvodzovkách:

.bezne {font-family: "Times New Roman",
 "Palatino Linotype"}

Štýl písma

Názov vlastnosti: font-style

Pod pojmom štýl písma v CSS rozumieme jeho sklonenosť. Môže byť normálny - normal (vtedy nemusíme túto vlastnosť uvádzať - je predvolená), kurzíva - italic alebo šikmý - oblique.

div {font-style: normal}
.kurziva {font-style: italic}
.sikme {font-style: oblique}

Takto sa náš pokus zobrazí v prehliadači:

Normálne písmo
Kurzíva
Šikmé písmo

Variant veľkosti písma

Názov vlastnosti: font-variant

Občas sa stane, že chceme písať text tzv. kapitálkami (veľké písmená, prvé najväčšie). Vtedy sa dá určiť vlastnosť font-variant s hodnotami normal (bežné), small-caps (kapitálky).

p {font-variant: small-caps}
Toto sú kapitálky

Tučnosť písmen

Názov vlastnosti: font-weight

Väčšina fontov je vytvorená na používanie ako bežný štýl písma alebo ako tučné písmená. Pomocou CSS sa teoreticky dá určiť tučnosť hodnotami: normal, bold, bolder, lighter, 100, 200, 300, ..., 900. Prakticky majú význam väčšinou len hodnoty normal a bold.

.bezne {font-weight: normal}
.tucne {font-weight: bold}
Normálne
Tučné

Veľkosť písma

Názov vlastnosti: font-size

Veľkosť (alebo tiež výška) písmen jednou z najčastejšie určovaných vlastností. Môže nadobúdať hodnoty: xx-small (ultra-malé), x-small (veľmi malé), small (malé), medium (stredne veľké), large (veľké), x-large (veľmi veľké), xx-large (ultra-veľké).

Zvoliť môžeme tiež relatívnu veľkosť: larger (väčšie vzhľadom k bežnému) a smaller (menšie). Dajú sa použiť i dĺžkové jednotky alebo percentá.

.male {font-size: x-small}
div {font-size: 12px}
.vacsie {font-size: larger}
span {font-size: 80%}

Súhrn fontu

Názov vlastnosti: font

CSS nám ponúka i tzv. súhrnné vlastnosti, ktoré môžu zahŕňať všetky bežné vlastnosti danej skupiny. Píšeme ich ako hodnotu a oddeľujeme medzerami. Nemusíme ich písať všetky, stačia tie, ktoré sú povinné a tie, čo potrebujete. Poradie vlastností je presne určené.

V prípade fontov vyzerá syntax nasledovne:

nejaký-element {
 font: štýl-fontu variant-veľkosti
  tučnosť-písmen veľkosť-písma meno-fontu
}

Povinné sú: veľkosť písma a meno fontu.

V praxi sú použiteľné napríklad nasledovné deklarácie:

/* skloneny 11px vysoky Arial */
p {font: oblique 11px Arial}
/* velmi male neproporcionalne pismo */
.male {font: x-small monospace}
/* tucna kapitalkova kurziva Verdana - 1cm */
div {font: italic small-caps bold 1cm Verdana}
Hodnotenie
1 2 3 4 5 (ako v škole)
Priemerná známka: 3
Diskusia k tejto stránke Príspevok na túto tému zatiaľ neexistuje. Môžete pridať prvý z nich!
Prejsť do diskusie»
2005-2012, Matúš Sulír, matus.sulir (zav) gmail bodka com. Gen.: 0,0632 s. Valid XHTML, CSS.