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

Jak číst e-knihy

Už jsme si probrali, co je e-kniha, jaké mohou být formáty i jaké jsou  výhody elektronického čtení . V tomto textu projdeme možnosti čtení e-knih. Čtečka Čtečka je specializované zařízení pro čtení e-knih. Největší rozmach čteček byl současně s techlogií e-ink (též e-papír, digitální inkoust). Díky této technologii je čtení e-knih velmi podobné čtení knihám papírovým. Ač je čtečka díky e-ink většinou s černobílým displejem, má v porovnání oproti tabletům určité čtenářské výhody - malá hmotnost, dlouhá výdrž baterie i lepší čitelnost na slunci. Pro náročnější čtenáře je čtečka nadále ideální variantou. Na světovém trhu jsou však tyto zařízení na pomalém ústupu - přesto, že se vyvíjí nové modely s dalšími funkcemi, nemají uživatelé tendenci své zařízení často obnovovat. I přes dotykový displej, wi-fi, internetový prohlížeč, hry a další funkce, stále jde o zařízení specializované a mnoho čtenářů dává dnes přednost zařízením multifunkčním. Tablet, mobil Právě rozvoj tabletů a chytrých tel

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ů

Základní principy CSS

V článku  Základní struktura XHTML jsem se již o CSS zmínil. Je jedno kolik CSS souborů v e-knize bude, jejich umístění však bude vždy ve složce Styles . V jednotlivých souborech XHTML se na použité styly musíte odkázat. Provázání se soubory stylů (.css) je vždy zapsáno v hlavičce dokumentu mezi znaky <head> a </head>. Například tedy takto: <head> <link href="../Styles/tiraz.css" rel="stylesheet" type="text/css"/> <link href="../Styles/kniha.css" rel="stylesheet" type="text/css"/> ... </head> Poznámka: zápis stylů do elementů V předchozí části věnované XHTML jsem zmínil, že je možné zapisovat styly přímo do elementů (bez nutnosti samostatného souboru *.css). K tomuto účelu slouží atribut style , do kterého je možné požadované vlastnosti zapsat. Například: <p style="text-align:center;color:#000000;"> text </p> V přílohách knihy je k té