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:
<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:
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:
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í:
- vlastnosti definované přímým zápisem do elementů
- vlastnosti přiřazené k danému elementu (před dědičnými vlatnostmi)
- vlastnosti specifičtější (např. p.trida má přednost před .trida
- 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
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
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
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
<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
.tucne {font-weight: bold;}
.tucne#podtrzeno {text-decoration: underline;}
Komentáře
Okomentovat