Třídy a identifikátory
Už jsme se naučili formátovat to, co je označené standardními html tagy.
A už tušíme, že si navíc můžeme prvky také nějak pojmenovat, a formátovat pak i podle těchto názvů. Vrátíme se do HTML kódu a doplníme tam tyto názvy, tj. třídy a identifikátory, které samy na vlastní zobrazení nemají žádný vliv, ale můžeme se na ně odkázat ve stylu a tak je pro formátování využít.
Třída versus identifikátor
Třídy označujeme class, identifikátory id. Můžeme je přiřadit vlastně snad všem html tagům, a tím tyto prvky pojmenovat, a odlišit tak třeba jeden nadpis h1 od druhého. Jejich zápis vypadá takto:
<p class="cerveny">Tento odstavec nastylujeme červeně.</p>
<h1 id="oramovany">Tento nadpis nastylujeme orámovaný.</h1>
A protože jsme si slíbili, že nebudeme zabíhat do detailů, smiřme se s tím, že jediný podstatný rozdíl mezi třídou a identifikátorem je pro nás ten, že jednu třídu můžeme na stránce použít kolikrát chceme, kdežto jeden identifikátor můžeme na jedné stránce přiřadit jen jednomu prvku, protože je unikátní. Dále se pak liší v zápisu CSS.
O třídách a identifikátorech na jakpsatweb: http://www.jakpsatweb.cz/css/css-tridy-class.html
Příklad
Ukážeme si to zase na příkladu. Např. budeme mít v kódu stránky toto:
<h1>Hlavní nadpis stránky</h1>
<p>Tohle je normální odstavec na naší stránce.</p>
<p>A tenhle odstavec bychom chtěli mít nějak výraznější.</p>
<p>Následuje další normální odstavec.</p>
Je jasné, že takhle s tím nic nenaděláme. Bystří z Vás si vzpomenou, že bychom snad mohli použít in-line zápis a ten inkriminovaný odstavec ostylovat jednorázově přímo v html. Ano, to by šlo. Ale budeme předpokládat, že takových zvýrazněných odstavců máme víc, je to systémová záležitost, a bylo by dobré je taky systémově ostylovat. Proto tomu odstavci, který má být stylován odlišně než ostatní, dáme jméno:
<p class="zvyrazneny">A tenhle odstavec bychom chtěli mít nějak výraznější.</p>
Ve stylu máme pro odstavce např. toto:
p {
color: #00008B;
}
Všechny odstavce jsou tedy tmavě modré. Bude to zatím platit i pro ten náš pojmenovaný - dokud jeho jméno nepoužijeme ve stylu, nemá přiřazení třídy žádný vliv na válcování silnic. Takže konečně tu třídu ve stylu použijeme - a to tak, že do něj doplníme:
p.zvyrazneny {
color: #0000CD;
font-weight: bold;
}
Všechny odstavce, které budou mít třídu "zvyrazneny", budou mít tyhle vlastnosti (ať už do toho stylu napíšeme cokoli - v tomto případě budou tučné a světleji modré).
Stylování identifikátoru
Pokud použijeme identifikátor, tj. zapíšeme např.:
<h2 id="jiny_nadpis">Nadpis</h2>
pak ve stylu bude:
h2#jiny_nadpis {
color: #cc00ff;
}
K zápisu tříd a identifikátorů ve stylu
Když napíšete p.zvyrazneny, použijí se tyhle vlastnosti pro všechny odstavce, tj. elementy <p>, s třídou "zvyrazneny". Kdybychom napsali jenom .zvyrazneny, tak bychom tuhle třídu a její vlastnosti mohli přiřadit i jiným elementům. Například v tomhle odstavci, který teď čtete, vidíte části textu vysázené jiným písmem, jsou to ukázky kódu. Ve stylu téhle stránky mám použitu třídu .code, kterou přiřadím odstavci (v textech příkladů), ale také třeba jen části textu. (Ve vlastnostech CSS téhle třídy je hlavně jiný font, než pro ostatní text.)
Zatím jsme si ale neřekli, jak dát jméno (tj. přiřadit třídu nebo identifikátor) části textu nebo kódu, které nemají vlastní samostatný tag. Na to se podíváme v další kapitole.
