Přeskočit na hlavní obsah

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éto možnosti věnován jeden příklad. Dále se však tomuto zápisu nevěnuji, jelikož řešení se samostatným soubory považuji pohodlnější a přehlednější a to vzhledem i k jednoduším úpravám.

Dědičnost

V zápisu CSS fungují často dědičné sklony - tzn.dceřiné elementy přebírají vlastnosti rodičovského elementu. Odstavec, který je součástí tabulky, dědí její vlastnosti. Zmíněná tabulka zase dědí vlastnosti nadřazeného elementu (např. <body>).

Syntaxe

CSS není přímo součástí XHTML, a má tedy jiná pravidla zápisu. Zpravdidla se skládá ze dvou částí - popis vlastnosti a následně její hodnota. v popisu nesmí být mezera, za popisem následuje dvojtečka, mezera a popis vlastnosti (i více údají oddělených mezerami) a tento zápis vlastnosti je ukonček středníkem. ještě doplním, že v CSS se mezi číslem a značkou jednotky nedělá mezera. V definici je obvykle i více definovaných vlastností. Vše se píše do složených závorek { }. Tak například:

h1 {
font-size: 14pt
margin: 2pt 1pt 3pt 2pt;
color: green;
}

Tak tento zápis pro hlavní nadpisy <h1> způsobí, že písmo nadpisu bude velikosti 14 typografických bodů, šířku vnějších okrajů bude 2, 1, 3, 4 (horní, pravý, spodní, levý) typografických bodů a nadpis bude mít zelenou barvu (#008000).

Kolize

Mmůže stát, že si zápisy stylů "protiřečí". Při kolizi se zobrazení řídí podle následujících pravidel. Předsnot mají:

  1. vlastnosti definované přímým zápisem do elementů
  2. vlastnosti přiřazené k danému elementu (před dědičnými vlatnostmi)
  3. vlastnosti specifičtější (např. p.trida má přednost před .trida
  4. vlastnosti později zapsané

Definice

Selektor typu - X {…}

Tento selektor se aplikuje na všechny elementy zadaného typu (<p>, <table>, <h1>,...). Například zápis

p {
text-align: justify;
text-indent: 1em;
}

se uplatní u všech elementů <p> v celé knize.

Selektor třídy - .jmeno_tridy {…}

Takto definovaný styl se uplatní na všechny elementy definované jménem třídy (class) bez ohledu na jejich typ. Zápis třídy k elementu se zadává zápisem class="jmeno_tridy". Například zápis

.ramecek {
border: 1px solid black;
}

se uplatní u libovolného elementu (nadpis, tabulka, odstavec,...), který má zápis class="ramecek".

Selektor ID - X#jmeno {…}

Další možností je zadání ID. Styl se pak použije pouze u prvku, jehož identifikace (id) odpovídá názvu stylu. Například zápis

p#kurziva {
font-style: italic;
}

se uplatní na všechny elementy, které mají zápis id="kurziva". Narozdíl od tříd lze identifikátor v dokumentu použít pouze jednou.

Kombinace

Vše uvedené je možné různě kombinovat. K elementům vybraného typu je možné přiřadit libovolný počet tříd i ID. Styl se pak uplatní na takové elementy, které odpovídají zápisu. V XHTML zápisu mohou být prvky zapsáno například takto

<h1 class="tucne">nadpis</h1>
<p>text odstavce</p>
<p class="tucne">odstavec tučným písmem
<span class="tucne" id="podtrzeno">
tučné a pdtržené písmo </span></p>

a v souboru css mohou být styly zapsány

p {text-align: justify; text-indent: 1em;}
.tucne {font-weight: bold;}
.tucne#podtrzeno {text-decoration: underline;}


Komentáře

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

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

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

O formátu EPUB

Formát EPUB je v současné době nejrozšířenější a nejpodporovanější formát pro e-knihy, proto mu budu věnovat nejvíce prostoru. EPUB (Electronic PUBlication) otevřený formát vytvořený speciálně pro e-knihy podle standardu organizace International Digital Publishing Forum ( IDPF ). Přípona souboru je .epub a ve skutečnosti se jedná o přejmenovaný soubor .zip se specifickou adresářovou a souborovou strukturou. EPUB využívá jazy XHTML včetně stylování a vkládání multimediálních souborů. Verze formátu EPUB: EOB (Open eBook) - 1999 EPUB 2 - 2007 EPUB 2.0.1 - 2010 EPUB 3 - 2011 EPUB 3.0.1 - 2014 EPUB 3.1 - 2017 Základní struktura Soubor EPUB "sbaluje" několik souborů uložených ve složkách jako formát *.zip. Základní struktura sbalených souborů pak pro EPUB 2 vypadá takto: Pojďme si nyní uvedený strom projít trochu podrobněji. Soubor minitype Jedná se malý soubor v kořenovém adresáři. Soubor obsahuje jediný řádek v tomto tvaru: application/epub+zip Adresář META-INF V tomto adresáři j