Přeskočit na hlavní obsah

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

Komentáře

Populární příspěvky z tohoto blogu

Vydání e-knihy nakladatelem

Pokud jako autor máte rukopis, který byste rád vydal, máte několik možností. Rozhodnutí, kterou cestou se vydat závisí na tom, jaký jsem sám obchodník, kolik knih plánujete prodat a dalších faktorech. V tomto článku si povíme o možnosti vydání přes nakladatele. Poznámka: rukopis Slovem "rukopis" se v souvislosti s nakladatelskou praxí označuje text odevzdaný nakladateli za účelem přípravy publikace. V minulosti byl psán ručně nebo na psacím stroji a odtud pramení toto označení, ač v současnosti je standardně dodáván ve formě textového souboru. S rozvojem e-knih se autorům ulehčují prakticky všechny možné cesty, jelikož náklady oproti tištěným knihám jsou menší a tedy s vydáním se méně riskuje. Na druhou stanu snáze kniha zapadne v množství vydaných knih. Níže trochu nastíním některé možné cesty, jak dostat knihu "do světa". Výhody spolupráce s nakladatelstvím Autor chce hlavně psát a okolní činnosti jsou pro něj často zdržující a zatěžující. To je hlavní dů

Struktura XHTML + základní tagy

Struktura XHTML dokumentu má základní rozdělení na dvě části - hlavička dokumentu ( head ) a tělo ( body ) dokumentu. V hlavičce jsou informace o stránce, kódování, odkazy na css styly či titulek. V těle je pak zobrazovaný obsah, který se skládá z několika dílčích částí (nadpisy, odstavce, tabulky a další). Dokument XHTML může mít následující skladbu: <?xml version='1.0' encoding='utf-8'?> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link href="../Styles/styl.css" rel="stylesheet" type="text/css"> <title>Titulek stránky</title> </head> <body> <h1>Nadpis</h1> <p>První odstavec</p> <p>Druhý odstavec... <ul> <li>1. položka seznamu</li> <li>2. položka seznamu</li> </ul> <span>...text s odlišnými vlastnostmi</span> </p> </body> Tagy pro EPUB 2 Zde je přehled základních