CSS – selektor class.tx { color: black; /* nastaví černou barvu písma */ } Selektor class (třída) použijeme pokud chceme určité vlastnosti definovat pro.

Prezentace na téma: "CSS – selektor class.tx { color: black; /* nastaví černou barvu písma */ } Selektor class (třída) použijeme pokud chceme určité vlastnosti definovat pro."— Transkript prezentace:

1 CSS – selektor class.tx { color: black; /* nastaví černou barvu písma */ } Selektor class (třída) použijeme pokud chceme určité vlastnosti definovat pro různé prvky na stránce. Třída se v CSS souboru zapisuje pomocí tečky a zvoleného názvu třídy (viz výše). V názvu třídy nepoužívejte jako první znak číslici. blok odstavec Zápis v XHTML je nastavením slova class jako atributu prvku, který si zvolíme.

2 CSS – vlastnosti písma #font-family (typ písma): 5 obecných typů (sans-serif, serif, monospace, cursive, fantasy) #font-size (velikost písma) #font-weight (síla písma) #font-style (styl písma) #font-variant (kapitálky) #font (sdružená vlastnost písma)

3 CSS – font-family (1) #5 obecných typů (sans-serif, serif, monospace, cursive, fantasy) #konkrétní typy písma (Arial, Times New Roman, …) #můžeme zadat více typů písma pro případ, že by prohlížeč některý typ neidentifikoval; jako poslední by měl být uveden obecný typ písma #písma skládající se z více slov se dávají do uvozovek #standardní text by měl být psán písmem bezpatkovým (sans-serif), nadpisy patkovým (serif)

4 CSS – font-family (2) body { font-family: Georgia, "Times New Roman", serif; } #jednotlivá písma jsou oddělena čárkou

5 CSS – font-size (1) #několik možností zadání velikosti písma #fixní velikosti (xx-small, x-small, small, medium, large, x-large, xx-large) #různé jednotky (nejčastěji px, em) #pokud má např. prvek nastaveno písmo velikosti 20px a jemu podřízený prvek písmo velikosti 0.7em, znamená to, že velikost podřízeného prvku je v podstatě 14px

6 CSS – font-size (2) body { font-size: 20px; } div { font-size: 0.7em; } p { font-size: 0.5em; }

7 CSS – font-weight #font-weight má výchozí hodnotu normal, variantně nabývá hodnoty bold, popř. se dá síla písma vyjádřit číslicemi 100, 200, …, 900, kde 100 je nejslabší písmo a 900 nejsilnější; ve vztahu nadřízeného a podřízeného je možno použít také hodnoty lighter a bolder, kde písmo podřízeného prvku je o jednotku slabší (silnější) než u nadřízeného div { font-weight: bold; }

8 CSS – font-style, font-variant #font-style má výchozí hodnotu normal, variantně nabývá hodnot italic nebo oblique div { font-style: italic; } #font-variant má výchozí hodnotu normal, variantně nabývá hodnoty small-caps (zmenšená velká písmena) div { font-variant: small-caps; }

9 CSS – sdružená vlastnost font #musí obsahovat vlastnosti font-size a font-family, zbylé vlastnosti jsou variantní #vlastnost font-family je vždy uvedena jako poslední, font-size jako předposlední, ostatní vlastnosti (pokud jsou přítomny) mohou být zadány v libovolném pořadí #mezi jednotlivými vlastnostmi se dělají mezery div { font: bold 1.1em Arial, sans-serif; }