CSS vlastnosti pro EPUB2

Pokud jste již pochopili Základní principy CSS, pojďme projít jednotlivé prvky, které můžeme v CSS nastavit.

Poznámka: strany prvků

U některých prvků (rámečka, okraje) je možné zapsat rozdílné hodnoty pro jednotlivé strany tím, že napíšou za sebe - odělené mezerou. Strany se zapisují v pořadí po směru hodinových ručiček: horní, pravý, spodní, levý.

Rozměry

Pro zadání rozměrů slouží zápisy widht a height. U obojího lze zadat i minimální či maximální rozměr. Hodnotou je číslo s jednotkou. jednotlivé zápisy vlastností pro rozměr jsou:

width (šířka), min-width (minimální šířka), max-width (maximální šířka), height (výška), min-height (minimální výška), max-height (maximální výška)

• číslo s jednotkou

Rámečky

Vlastnosti rámečků lze zadat pomoví border (všechny vlastnosti najednou), nebo pomocí jednotlivých vlastností border-width, border-style,border-color.

border

Jednotlivé vlastnosti se oddělují mezerou, taktéž lze naráz mezerou oddělit vlastnosti pro jednotlivé strany rámečku.

Příklad stylu zápis rámečku šíře 1 px, plné čáry, modré barvy (zápisu konkrétních hodnot se věnuji níže):

div {border: 1px solid blue}

Pro stanovení okraje pouze z jedné strany je možné použít tyto specifika: border-top, border-bottom, border-left, border-right.

border-width (šířka rámečku)

• _px rozměr v pixelech (nebo jiný rozměr)
• thin slabý rámeček
• medium středně silný rámeček
• thick tlustý rámeček

border-style (styl rámečku)

• solid plný
• dotted tečkovaný
• dashed čárkovaný
• double dvojitý
• none žádný
• další (groove, ridge, inset, outset), ale je jejich využitelnost v e-knihách je minimální

border-color (barva rámečku)

• zápis barvy

Pro stanovení konkrétní vlastnosti pouze jedné strany je možné zápis vlastnosti kombinovat: napřiklad border-top-style, border-bottom-color, border-left-width.

Okraje prvků

Pro každý prvek lze zadat jeho vnitřní i vnější okraje. Pro šířku vnějšího okraje slouží zápis margin a pro šířku vnitřního okraje, pak zápis padding.

Pro stanovení okraje pouze z jedné strany je možné použít napříkald tyto specifika: margin-top, margin-bottom, padding-left, padding-right,...

margin (vnější okraj)

• číslo s jednotkou

padding (vnitřní okraj)

• číslo s jednotkou

Barvy prvků

Barva písma či prvku se zapisuje vlastvností color. Pro některé prvky lze předepsat také barvu pozadí pomocí background-color.

color, background-color

• zápis barvy

Písma

Pro styl a vzhled písma slouží několik zápisů vlastností. Základním je font, pomocí které lze určit všechny css vlastnosti najednou. Při zápisu vlastností se musí dodržovat pořadí (kurzíva, verzálky, tučnost, velikost/výška, rodina písma) - většina hodnot se může vynechat, jen velikost a rodina písma jsou povinné.

Příklad pro kurzívové, tučné písmo o velikosti 15 px psané Arialem:

font: italic bold 15px Arial

Pro stanovení pouze některé vlastnosti lze používat tyto zápisy:

font-family (rodina písma)

• jméno fontu
• sans-serif (bezpatkové písmo)
• serif (patkové písmo)
• monospace (jako psací stroj)

K font-family si dovolím ještě dvě malé poznámky. Pokud je název písma dvouslovný (např. Palatino Linotype), musí být uzavřen v uvozovkách. Dále je třeba také zmínit, že je možné v zápisu zmínit několik možností písem, pro případ, že první z nich není v zařízení. Např.:

font-family: "Arial Bold", Arial, sans-serif

font-style (styl písma)

• normal (normální stojaté písmo)
• italic (kurzíva)
• oblique (skloněné písmo)

font-variant (kapitálky)

• normal (normální písmo)
• small-caps (kapitálky)

font-weight (tučnost písma)

• normal (písmo nebude tučné)
• bold (tučné písmo)
• 100-900 (stupně tučnosti: 100-nejslabší, 900-nejtučnější)

font-size (velikost písma)

• velikost v jednotkách
• smaller, larger (o stupeň menší nebo větší)
• xx-small, x-small, small, medium, large, x-large, xx-large (řazeno od nejmenších po největší)

Text, odstavce

Pro zadání vlastností všech textových prvků (nadpisů, odstavců a dalších).

text-indent (odsazení prvního řádku)

• velikost v jednotkách

text-align (zarovnání)

• left (levý)
• right (pravý)
• center (na střed)
• justify (do bloku)

text-decoration (dekorace textu)

• none (bez dekorace)
• line-through (pravý)
• underline (přeškrtnutí)

Pro formátování buněk tabulek je možné využívat vlastnosti pro text či písmo. Pouze pro tabulky však slouží zadání k umístění popisu tabulky (caption).

caption-side

• top (nahoře)
• bottom (dole)
• left (vlevo)
• right (vpravo)

Stránkování

Zvláštní kapitolou je předepsání chování prvkl při rozdělování na jednotlivé stránky. E-kniha má tu vlastnost, že rozdělení na jednotlivé stránky je specifické pro každého uživatele jinak. Pokud je třeba přepsat nějaké parametry pro slučování, lze to zapsat taktéž CSS vlastností.

page-break-before (umístění na začáek stránky)

• always (vždy)
• avoid (nikdy)

page-break-after (nová stránky za elementem)

• always (vždy)
• avoid (nikdy)

page-break-inside (zobrazení elementu vcelku)

• always (vždy)
• avoid (nikdy)

Poznámka: Obecné atributy

Dříve něž přikročím k elementům pro tělo stránky, je nutné zmínit jaké jsou obecné atributy.

Obecné atributy se dají použít u všech níže uvedených tagů. Jedná se o identifikaci pro následné přiřazení stylů.

• class - hodnotou může být libovolný jednoslovný název, který se odvolává na definovaný styl
• id - hodnotou může být libovolné unikátní id, které jednoznačně idetifikuje definovaný styl