6. diel - Úvod do CSS (kaskádových štýlov)

V predchádzajúcom cvičení, Riešené úlohy k 4.-5. lekciu HTML a CSS, sme si precvičili získané skúsenosti z predchádzajúcich lekcií.

V minulej lekcii, Riešené úlohy k 4.-5. lekciu HTML a CSS , sme si uviedli zoznamy a rozšírili znalosti HTML tabuliek. Zatiaľ sme sa v našom on-line kurzu HTML úspešne vyhýbali štýlovanie stránok, poďme to teraz napraviť. V tomto tutoriále si vysvetlíme na čo slúži CSS a ukážeme si, ako vyzerá. Aby som čo najlepšie vysvetlil podstatu jazyka CSS, urobme si veľmi krátku odbočku do histórie vývoja internetu a jazyka HTML.

História jazyka HTML

Stručne povedané, prvý internet sa nazýval Arpanet a vznikol v 60. rokoch 20. storočia ako armádny projekt USA v dobe studenej vojny. Neskôr bol uvoľnený medzi verejnosť a pripájali sa k nemu univerzity a výskumné ústavy. Vtedy vôbec nevyzeral ako dnes, pretože sa cez neho prenášali iba textové súbory.

Až v 90. rokoch sa v európskom výskumnom ústave CERN rodia jazyk HTML a štandard WWW, teda web, ako ho poznáme dnes. HTML malo slúžiť pre zdieľanie interných dokumentov v ústave. Jazyk HTML bol vytvorený za účelom rozlíšiť jednotlivé časti dokumetu od obyčajného textu (napr. Toto je nadpis, toto je zoznam, toto je tabuľka) a hlavne, aby mohol prepájať jednotlivé dokumenty pomocou odkazov. Vznikali prvé webové prehliadače.

Ako sa web dostával medzi ľudí, HTML sa rozvíjalo a pridávali sa nové a nové tagy. Bohužiaľ už nie len tie, ktoré prideľovali význam, ale aj tie, ktoré elementy len stylovaly. Prehliadače sa predháňali, koľko tagov podporujú a chrlili nové a nové značky. Problémom bolo, že v HTML dokumentoch sa razom objavilo 60% balastu, ktorý slúžil len na tónovanie textu, k zarovnanie nadpisov na stred alebo na nastavenie fontu písma. Tento problém narastal až do HTML verzie 4, kedy sa štýlovanie priamo v HTML označilo za zastarané a prestalo sa používať.

Odstrašujúci príklad zastaraného webu

Pozrite sa sami, ako mohol vyzerať zastaraný HTML 3 dokument (zobrazil som len časť body, hlavička pre nás nie je zaujímavá), ktorý sa autor snažil ostylovat.

<body bgcolor="#0395c3" text="white">
    <h1 align="center"><font color="#0a294b">Web v HTML 3</font></h1>
    <p>Když chci všechny nadpisy na stránce tmavě modré a centrované, musím to do každého psát znovu a znovu. Můj kód je plný zastaralých atributů align a zastaralých tagů font.</p>

    <h2 align="center"><font color="#0a294b">Další nadpis</font></h2>
    <p>Opět do nadpisu musím napsat, že ho chci centrovaný a tmavě modrý. Ve stránce se již téměř nevyznám.</p>

    <table align="center" cellpadding="10" cellspacing="0" border="1" bgcolor="white" bordercolor="#0a294b">
        <tr><td valign="top" align="center"><font color="#0a294b">Tato tabulka</font></td><td valign="top" align="center"><font color="#0a294b">obsahuje</font></td></tr>
        <tr><td valign="top" align="center"><font color="#0a294b">příliš mnoho</font></td><td valign="top" align="center"><font color="#0a294b">zbytečných atributů</font></td></tr>
    </table>

    <br />

    <table align="center" cellpadding="10" cellspacing="0" border="1" bgcolor="white" text="white" bordercolor="#0a294b">
        <tr><td valign="top" align="center"><font color="#0a294b">Tato tabulka je úplně</font></td><td valign="top" align="center"><font color="#0a294b">stejně stylovaná, jako</font></td></tr>
        <tr><td valign="top" align="center"><font color="#0a294b">ta nahoře, ale stejně musím</font></td><td valign="top" align="center"><font color="#0a294b">všechny styly psát znovu.</font></td></tr>
    </table>
    <h2 align="center"><font color="#0a294b">Smutné je</font></h2>

    <p>Že hodně návodů na internetů vás bude učit psát web právě takto.</p>
    <p align="center"><img src="obrazky/smutny.png" alt="Smutný" /></p>

    <p align="center"><font size="4" color="#0a294b" face="arial">Proto používejte zejména ITnetwork, kde učíme, jak psát web moderně. </font></p>

    <p align="center"><font size="4" color="#0a294b" face="arial">Tento odstavec je tmavě modrý a centrovaný stejně jako ten výše, ale já to musím stejně napsat znovu.</font></p>
</body>

Výsledný web by potom vyzeral takto:

Odstrašujúci príklad webu v HTML 3 bez CSS - Webové stránky krok za krokom

Všimnite si, koľko percent kódu zaberá samotný obsah webu a koľko percent balast, ktorý slúži len ku štýlovanie. Štýly sa tiež opakujú zbytočne stále dookola. Nevýhod sú desiatky, napr. Neprehľadnosť kódu, stránka je niekoľkokrát väčšia a dlhšie sa načítava, je potláčaný význam elementov a teda aj základný účel jazyka HTML, príliš veľa tagov mate vyhľadávače (napr. Google) a tie potom stránky chybne chápu a indexujú. Hlavne si predstavte, že máte web, ktorý má 50 stránok podobné tejto. A vy sa rozhodnete, že sa vám modré tabuľky s modrým písmom už nepáči a že chcete zelené s tmavo zeleným písmom. Čo urobíte? Áno, budete musieť prepísať stovky tagov na inú farbu. Asi sami vidíte, že takto to nepôjde. Preto bol vyvinutý jazyk CSS.

CSS

CSS (Cascading Style Sheets) je jazyk, špeciálne vyvinutý pre štýlovanie HTML. Kaskádový preto, pretože v štýloch funguje dedičnosť. Keď teda napr. Dáme bunke tabuľky červenú farbu písma, túto farbu písma automaticky dostanú aj všetky odseky textu v tejto bunke. Samozrejme stále môžeme nejakému odseku dodatočne farbu zmeniť, vždy platí ten konkrétnejší štýl. Najlepšie je, že jeden a ten istý CSS štýl môžeme aplikovať napríklad na 100 stránok a všetky budú vyzerať rovnako. Keď sa rozhodneme niečo zmeniť, zmeníme jeden riadok v štýle a zmeny sa samé prejaví na všetkých stránkach. CSS k sebe presúva všetky štýlovanie HTML dokumentu, kód sa teda čistí, je prehľadný a odpadajú duplikácie.

Dal som si záležať, aby som vám názorne ukázal, že používať CSS je nutnosť a že do HTML jednoducho štýly nepatrí. Tieto tutoriály píšem tak, ako sa píše moderné web teraz, nie, ako sa písal pred X rokmi a ako sa môžete chybne dočítať v iných a starých návodoch na internete.

Ukážeme si ešte, ako by vyzeral ten istý dokument s použitím CSS:

<body>
    <h1>Web využívající CSS</h1>
    <p>Když chci všechny nadpisy na stránce tmavě modré a centrované, jednoduše styl jednou definuji v souboru CSS. Můj HTML kód je čistý a styl je zapsán pouze jednou a platí pro všechny nadpisy.</p>

    <h2>Další nadpis</h2>
    <p>Nadpis výše se sám ostyloval, jelikož to bylo jednou pro všechny nadpisy definováno v CSS.</p>

    <table>
        <tr>
            <td>Tato tabulka</td>
            <td>obsahuje</td>
        </tr>
        <tr>
            <td>jen definici tabulky</td>
            <td>a text.</td>
        </tr>
    </table>

    <br />

    <table>
        <tr>
            <td>Tato tabulka je úplně</td>
            <td>stejně stylovaná, jako</td>
        </tr>
        <tr>
            <td>ta nahoře, jednoduše</td>
            <td>se použije ten samý styl.</td>
        </tr>
    </table>

    <h2>Dobré je</h2>

    <p>Že toto čtete a již tedy víte, jak se to dělá správně.</p>
    <p class="centrovany"><img src="obrazky/vesely.png" alt="Veselý" /></p>

    <p class="velky">Na ITnetwork se dočtete jak na to.</p>

    <p class="velky">Tento odstavec používá styl s větším textem, který je jednou definován v CSS.</p>
</body>

výsledok:

Web s CSS - Webové stránky krok za krokom

To je pomerne zásadný rozdiel, že? Porovnajte si kód ešte raz s kódom vyššie. Určite ste si tiež všimli atribútov class, ktoré priraďujú elementu nejaký štýl, definovaný v externom CSS súbore.

Ako teda vyzerá a funguje onen magický CSS súbor, ktorý nám sám HTML takto ostyluje? To sa dozviete v nasledujúcej lekcii, Základné CSS selektory a vlastnosti

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.

Stiahnuť

Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami

Stiahnuté 589x (14.99 kB)
Aplikácia je vrátane zdrojových kódov v jazyku HTML a CSS

Článok pre vás napísal David Hartinger

Užívateľské hodnotenie:

6 hlasov

David je zakladatelem ITnetwork a programování se profesionálně věnuje 15 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.

David sa informačné technológie naučil na Unicorn University - prestížnej súkromnej vysokej škole IT a ekonómie.

Aktivity