Hrátky se vzhledem aneb co nabízí CSS
Na předchozí stránce jsem si řekli, že element <p> neslouží k definování vzhledu (a ostatní HTML značky také ne). Řeč je o elementu <strong>. Tento element je často využíván ke ztučnění textu. 😀 Pravdou ale je, že jeho funkci je předávat prohlížeči informaci, že se v něm nachází důležitý text. No a jako bonus jej prohlížeče zobrazují jako tučný text. Já sám jej v patičce také takhle používám, protože jsem líný si najít v CSS třídu, která definuje tučný text. Je to funkční řešení, ale to je tak vše. V kontextu našeho kódu by bylo lepší zaměnit element <strong> za element <text> a v CSS pro element <text> napsat pravidla pro zobrazení (jednodušeji řečeno vzhled).
Nyní vám představím tři základní způsoby, jak můžete zapisovat CSS kód. Vzhled můžete napsat pro konkrétní element, identifikátor (id) nebo třídu (class). Když se rozhodnete psát pravidla pro zobrazení na element <text>, tak to bude v praxi znamenat, že každý textový řetězec uvnitř elementu <text> bude využívat stejná pravidla pro zobrazení. V kontextu našeho kódu to bude vypadat následovně (nejdříve uvádím upravený HTML kód, pak CSS).
<div>
<text>Jsem členem</text><br>
<a href="https://klub-blog.blogspot.com/" target="_blank">
<img src="adresa_obrazku">
</a>
</div>text { font-weight: bold;
margin-block: 8px; }Parametr „font-weight“ s hodnotou „bold“ nám zajistí kýžené zvýraznění textu „Jsem člen“. Parametr „margin-block“ s hodnotou „8 pixelu“ způsobí odsazení ostatního obsahu od elementu <text> a to jak nad ním, tak pod ním. Pravidla zobrazení pro konkrétní element můžete psát i přímo do HTML kódu. Musíte mít však na paměti jedno pravidlo. Při interpretaci CSS kódu má vyšší prioritu CSS kód zapsaný v HTML před CSS v externím souboru, na který se odkazujete. Nyní vám ukážu jak to vypadá.
<div>
<text style="font-weight: bold; margin-block: 8px;">Jsem členem</text><br>
<a href="https://klub-blog.blogspot.com/" target="_blank">
<img src="adresa_obrazku">
</a>
</div>Jak sami můžete vidět, náš kód se stává nepřehledným. Pravidla pro zobrazení si samozřejmě můžete zapsat zvlášť dovnitř elementu <style>. Tohle je spíše nouzové řešení pro ty, kteří nemají jinou možnost.
Daleko lepší je psát CSS pro konkrétní identifikátor (id), či třídu (class). Identifikátor je vždy unikátní a přiřazuje se konkrétnímu elementu zápisem parametru „id“. Hodnota parametru slouží jako identifikátor. V CSS se konkrétní identifikátor zapisuje pomoci křížku (#). V kontextu našeho kódu to vypadá následovně.
<div>
<text id="kb-ikona">Jsem členem</text><br>
<a href="https://klub-blog.blogspot.com/" target="_blank">
<img src="adresa_obrazku">
</a>
</div>#kb-ikona { font-weight: bold;
margin-block: 8px; }Stejně jako identifikátor fungují třídy. Rozdíl spočívá v tom, že stejnou třídu může mít více elementů najednou. Rozdílné elementy si představte jako Toma, Antonína a Pepého. Každý z nich je odlišný, ale všichni chodí do stejné třídy. V HTML kódu se třídy zapisují pomoci parametru „class“. Hodnotu tohoto parametru tvoří názvy jednotlivých tříd. Jeden element může sdílet vícero tříd najednou. V CSS se třídy označují tečkou (.). V kontextu našeho kódu to vypadá následovně.
<div class="kb-center">
<text class="kb-bold">Jsem členem</text><br class="kb-odsazeni-16">
<a href="https://klub-blog.blogspot.com/" target="_blank">
<img src="adresa_obrazku">
</a>
</div>.kb-bold { font-weight: bold; }
.kb-center { text-align: center; }
.kb-odsazeni-16 { margin-bottom: 16px; }Kód je stručnější, čitelnější a dosáhl stejného výsledku. Jak můžete vidět, výhodou tříd je, že pokud budete chtít nějaký text ztučnit, stačí danému elementu přiřadit třídu .kb-bold. Totéž platí pro ostatní třídy. Ještě by bylo dobré zmínit, že CSS disponuje jinými metodami, jak zarovnat obsah do středu. Ty ovšem fungují v kódu, který pracuje se vnořenými elementy <div> (potomci) do základního elementu <div> (rodič). Principem dědičnosti nebo polymorfismem vás nebudu zatěžovat. Na další straně jsem pro vás připravil kód pro snadné kopírování do stránky. Níže také můžete vidět výsledek. Oproti originálu k nerozeznání že?
