Znak | odděluje různé možnosti, použitelná je vždy jedna z nich. Např. u vlastnosti font-style:normal | italic | oblique; znamená, že použitelná je vždy POUZE JEDNA z uvedených vlastností. Takže: buď font-style:normal; nebo font-style:italic; nebo font-style:oblique;
| Vlastnosti písma a textu |
| Vlastnost |
Zápis - syntaxe - obecně / konkrétní příklad |
Ukázka |
Poznámka |
Typ písma
-
font-family |
font-family:rodina písma nebo přesný název písma | obecná rodina
Příklady:
font-family:arial;
font-family:times;
font-family:serif;
font-family:arial,"Arial Black", tahoma,sans-serif;
|
tahoma TAHOMA
verdana VERDANA
times TIMES
sans-serif SANS-SERIF
arial black ARIAL BLACK
|
Jako rodinu uvádíme konkrétní název písma - názvy obsahující mezeru musí být uzavřeny do uvozovek. Obecná rodina: uvádíme, zda písmo bude patkové = serif, nebo bezpatkové = sans-serif. Můžeme uvést i několik typů písem - pokud prohlížeč nenajde první uvedený, pokusí se najít další, případně další, až vyčerpá celý seznam uvedený v definici. Proto je vhodné uvádět na konci výčtu písem obecnou rodinu, aby prohlížeč použil alespoň libovolné patkové nebo bezpatkové písmo. |
Velikost písma
-
font-size |
font-size:velikost v px, cm, em a pod. | procenta | klíčové slovo pro velikost xx-small | small | medium | large | x-large | xx-large | larger | smaller
Příklady:
font-size:x-large;
font-size:10px;
font-size:120%;
font-size:1.2em;
|
velikost xx-small
velikost x-large
velikost 2.5em
velikost 130%
velikost 10px
|
Použití přesné hodnoty (např. px, mm) umožňuje sice nastavit velmi přesně grafickou podobu stránky, ale v některých prohlížečích neumožňuje zvětšení nebo zmenšení písma uživatelem. Použití klíčových slov: různé prohlížeče interpretují různě klíčová slova, takže někde může být font o velikosti small velký třeba 10 px a jinde třeba 8 px a jinde zase třeba 11 nebo 12 px. Nejschůdnější je proto možná zadávat velikost písma v procentech, pokud nepotřebujeme absolutní kontrolu nad grafikou stránky.
|
Styl písma
-
font-style |
font-style:normal|italic|oblique
Příklady:
font-style:normal;
font-size:italic;
font-style:oblique;
|
normal NORMAL
italic ITALIC
oblique verdana OBLIQUE VERDANA
|
Nastavuje styl písma mezi normálním (normal) a skloněným (italic, oblique). Je-li uveden styl oblique, je použita oblique varianta písma (obvykle má v názvu Oblique, Slanted nebo Incline), pokud je uveden typ italic, použije se příslušná varianta písma (obvykle má v názvu Italic, Cursive nebo Kurziv). Pokud není k dispozici italic varianta písma, použije prohlížeč oblique.
|
Síla (tloušťka) písma
-
font-weight |
font-weight:normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Příklady:
font-weight:normal;
font-weight:500;
font-weight:bold;
|
weight normal WEIGHT NORMAL
weight bold WEIGHT BOLD
weight 900 WEIGHT 900
weight 100 WEIGHT 100
|
Při zadání číselných hodnot - 400 = normal, 700 = bold. Hodnoty bolder a lighter použijí o 1 stupeň silnější (bolder) nebo slabší (lighter) písmo, než je písmo rodičovského prvku. Často fungují pouze hodnoty normal a bold.
|
Výška řádku
-
line-height |
line-height:normal | číslo | velikost (px,em) | procenta
Příklady:
line-height:normal;
line-height:1.45;
line-height:12px; line-height:130%;
|
line-height:20px
line-height:20px
line-height:0.8
line-height:0.8
line-height:150%
line-height:150%
|
Zadáme-li jako hodnotu velikost (s jednotkami), nastaví se výška řádku na tuto absolutní velikost. Zadáme-li hodnotu v procentech nebo jako číslo bez jednotek, použijí se procenta nebo číslo jako koeficient pro výpočet. Např. je-li výška řádku normálně 10px, pak při zadání hodnoty 130% bude 13px, při hodnotě např. 0.8 bude 8px. Zadání hodnoty v procentech nebo číslem bez jednotek je flexibilnější, umožňuje, aby se výška řádku měnila podle velikosti písma.
|
Rozpal - mezery mezi písmeny
-
letter-spacing |
letter-spacing:normal | velikost v jednotkách (px,em)
Příklady:
letter-spacing:normal;
letter-spacing:3px;
letter-spacing:0.5em;
|
letter-spacing:3px
letter-spacing:3
letter-spacing:0.4em
letter-spacing:3mm
letter-spacing:-1px
|
Při zadání jiné hodnoty než normal je mezera mezi písmeny zvětšena o zadanou hodnotu. Hodnotu můžeme zadat i bez jednotek, ale abychom se vyhnuli případnému nepředvídatelnému chování v různých prohlížečích, je vhodné jednotky zadat. Lze zadat i zápornou hodnotu, ale ta nemusí být interpretována různými prohlížeči správně. Jako hodnotu nelze použít procenta.
|
Mezery mezi slovy
-
word-spacing |
word-spacing:normal | velikost v jednotkách (px,em,pt,mm...)
Příklady:
word-spacing:normal;
word-spacing:3px;
word-spacing:0.5em;
word-spacing:1.5mm;
|
mezera mezi slovy 3px
mezera mezi slovy 3
mezera mezi slovy 0.7em
mezera mezi slovy 7mm
mezera mezi slovy -2px
|
Funguje stejně jako letter-spacing, ale nastavuje velikost mezer mezi SLOVY.
|
Vodorovné zarovnání textu
-
text-align |
text-align:left | right | justify | center
Příklady:
text-align:left; - zarovná text doleva
text-align:right; - zarovná text doprava
text-align:justify; - zarovná text do bloku
text-align:center; - zarovná text na střed
|
ukázkový text zarovnaný vlevo: Zadáme-li jako hodnotu velikost (s jednotkami), nastaví se výška řádku na tuto absolutní velikost. Zadáme-li hodnotu v procentech nebo jako číslo bez jednotek, použijí se procenta nebo číslo jako koeficient pro výpočet.
ukázkový text zarovnaný vpravo: Zadáme-li jako hodnotu velikost (s jednotkami), nastaví se výška řádku na tuto absolutní velikost. Zadáme-li hodnotu v procentech nebo jako číslo bez jednotek, použijí se procenta nebo číslo jako koeficient pro výpočet.
ukázkový text zarovnaný do bloku: Zadáme-li jako hodnotu velikost (s jednotkami), nastaví se výška řádku na tuto absolutní velikost. Zadáme-li hodnotu v procentech nebo jako číslo bez jednotek, použijí se procenta nebo číslo jako koeficient pro výpočet.
ukázkový text zarovnaný na střed: Zadáme-li jako hodnotu velikost (s jednotkami), nastaví se výška řádku na tuto absolutní velikost. Zadáme-li hodnotu v procentech nebo jako číslo bez jednotek, použijí se procenta nebo číslo jako koeficient pro výpočet.
|
Vlastnost text-align se může kromě textu uplatnit i na další řádkové prvky - např. obrázky. Je-li text vložený v řádkovém prvku (např. <span>), musí být tento prvek převeden na blokový, aby zarovnání fungovalo. Internet Explorer zarovnává pomocí text-align všechny prvky, Firefox jen prvky řádkové - to může způsobit nestejné zobrazení.
|
Barva písma
-
color |
color:klíčové slovo pro barvu | barva zapsaná pomocí RGB hodnot;
Příklady:
color:red;
color:RGB(255,100,100);
color:FF00FF;
|
color RED
RGB (255,0,255)
FF00FF
|
Barvu lze zapsat pomocí klíčového slova (např. red, green, blue...), nebo pomocí RGB hodnoty v desítkové soustavě (0 - 255), nebo pomocí RGB hodnoty v šestnáctkové soustavě (šestnáctková 00 odpovídá hodnotě 0 v desítkové, šestnáctková FF = 255 v desítkové ) - hodnoty šestnáctkové soustavy lze zjistit např. pomocí kalkulačky ve Windows přepnuté do vědeckého módu. Nejvýhodnější je použití RGB hodnot v desítkové soustavě a nebo klíčových slov.
|
Sdružená vlastnost font
-
font |
font:font-style font-variant font-weight font-size/line-height font-family - červené vlastnosti jsou povinné
Příklady:
font:italic small-caps bold 16px/120% tahoma,arial,sans-serif; - kompletní definice se všemi vlastnostmi
font:14px arial;
font:bold 20px tahoma,helvetica;
|
font:italic small-caps bold 16px/120% tahoma,arial,sans-serif;
font:14px arial;
|
Pomocí sdružené vlastnosti lze nastavit všechny vlastnosti písma současně v jedné definici - kromě barvy písma, která je vlastně barvou popředí. Pořadí vlastností je nutno dodržet. Hodnoty jednotlivých vlastností se oddělují mezerou. Vlastnosti font-style, font-variant, font-weight mohou být v libovolném pořadí, ale vždy vepředu. Vlastnosti font-size a font-family musí být uvedeny vždy. Za vlastností font-size může být za lomítkem uvedena vlastnost line-height (výška řádku). Pokud line-height není uvedena, nesmí být ani lomítko.
|
dekorace textu
-
text-decoration |
text-decoration:none | underline | overline | line-through | blink
Příklady:
text-decoration:underline;
text-decoration:line-through;
|
OVERLINE
UNDERLINE
BLINK
LINE-THROUGH
|
Vlastnost text-decoration lze využít např. k vytváření nepodtržených odkazů (text-decoration:none;), nebo odkazů, které se po najetí myší změní z podtržených na nepodtržené a naopak. Hodnota blink vytvoří blikající odkaz, což bývá dost nevkusné. Je proto třeba používat ji s rozmyslem a opatrně.
|
odsazení 1. řádku
-
text-indent |
text-indent:velikost (px,pt,em,%...);
Příklady:
text-indent:20%;
text-indent:30px;
|
ukázka odsazení - 20%: Zadáme-li jako hodnotu velikost (s jednotkami), nastaví se výška řádku na tuto absolutní velikost. Zadáme-li hodnotu v procentech nebo jako číslo bez jednotek, použijí se procenta nebo číslo jako koeficient pro výpočet.
ukázka odsazení - 5px: Zadáme-li jako hodnotu velikost (s jednotkami), nastaví se výška řádku na tuto absolutní velikost. Zadáme-li hodnotu v procentech nebo jako číslo bez jednotek, použijí se procenta nebo číslo jako koeficient pro výpočet.
|
Pokud je hodnota odsazení uvedena v procentech, vztahuje se tato hodnota k šířce rodičovského prvku - má-li tedy odstavec nastaveno text-indent:10%; a nemá nastavenou šířku a je přímým potomkem stránky, pak je odsazení 10% ze šířky stránky. Je-li např. odstavec vnořen do bloku se šířkou 100px, bude při hodnotě 10% odsazení veliké 10px. Pokud má samotný odstavec nastavenou šířku 100px, bude opět při hodnotě 10% odsazení veliké 10px.
|
poslední změna: 4. 6. 2012
