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

Další možnosti vydání e-knihy

Tento článek navazuje na předchozí  Vydání e-knihy nakladatelem a představuje další možnosti k vydání e-knihy. Poznámka: co myslím oficiálním vydáním Pod "oficiálním vydáním" myslím e-knihu splňující všechny zákonné parametry pro distribuci i přiřazení ISBN. Oficiálně sám Pokud má autor plán vydávat větší množství knih, může zvážit založení vlastního nakladatelství (jde o volnou živnost). Možné je pochopitelně vydat sám i jedinou e-knihu, ale investovaný čas se nevyplatí. Oficiální vydání obnáší zařízení ISBN, jednání s distributory a další související činnosti. Co se týče provizí není třeba se dělit s nakladatelem. Po odečtení DPH a provizí distributorů, se orientačně pohybují mezi 20 až 55% z prodejní ceny. Neoficiálně sám Nikde není psáno, že e-knihu je nutné vydávat pouze oficiální cestou. Naopak. Svépomocí vytvořené neoficiální e-knihy mají veliký boom. Zejména díky marketingovým snahám vyzískat kontakt se internet hemží e-knihami všemožné úrovně, které jsou k mán