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

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

Historie e-knih

Myšlenka elektronických knih se objevila v roce 1971, kdy Michael S. Hart založil Projekt Gutenberg ( www.gutenberg.org ). Počátek vývoje byl velmi roztříštěný a většinou souvisel s počítačovými obory, kde se e-kniha uchytila například pro různé příručky a návody. Určitý přelom nastal konce 20. století, kdy se e-knihy dostaly do zájmu širšího množství čtenářů a vydavatelé díky tomu podnikali první nesmělé kroky do světa elektronické literatury. Ač se jednalo o určité hledání cesty a narážení do slepých uliček, bylo objeveno několik fungujících řešení. Na trhu však nebyl žádný velký hráč, který by určil nějaký standard a tak se současně vyvíjelo nepřeberné množství formátů.

Specifika XHTML

Pokud máte základní znalosti HTML jazyka, dovolím upozornit na nejdůležitělší rozdíly: Uvozovky pro atributy Oproti HTML musí být všechny hodnoty atributů v uvozovkách. Uvozovky je vhodné používat i v HTML, ale jejich nepoužití není chyba. Například HTML kód pro obrázek může být zapsán takto: <img src=tojsemja.png width=150 height=400> V XHTML musí být vždy použity uvozovky (eventuálně apostrofy): <img src="tojsemja.png" width="150" height="400" /> nebo také: <img src='tojsemja.png' width='150' height='400' /> Zákaz křížení tagů Toto vlastně není změna, křížení tagů se nesmí ani v HTML. Zatímco ale většina internetových prohlížečů křížený zápis HTML přečtou a poradí si s ním, v XHTML je to striktně zakázáno a validátory epub souborů zahlásí chybu. špatně: <b><i>tučná kurzíva</b></i> správně: <