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

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

Zatiaľ sme sa v našom HTML tutoriáli úspešne vyhýbali štylovaniu stránok. Poďme to teraz napraviť! Vysvetlíme si, na čo slúži CSS a ukážeme si, ako vyzerá. V dnešnej lekcii nebudeme kódovať a iba si tému predstavíme.

História jazyka HTML

Aby sme čo najlepšie pochopili podstatu jazyka CSS, urobme si veľmi krátku odbočku do histórie vývoja internetu a jazyka HTML.

Prvý internet sa nazýval Arpanet a vznikol v 60. rokoch 20. storočia ako armádny projekt USA počas 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 rodí jazyk HTML a štandard WWW. Teda web, ako ho poznáme dnes. HTML malo slúžiť na zdieľanie interných dokumentov v ústave. Jazyk HTML bol vytvorený za účelom rozlíšiť jednotlivé časti dokumentu od jednoduché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 doň nové a nové tagy. Napriek pôvodnému účelu HTML sa jednalo aj o tagy, ktoré neprideľovali žiadny význam, ale elementy nejako štylovali. Prehliadače sa predbiehali, 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 iba na zafarbovanie textu, na 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, ktorý sa autor snažil ostylovat (ukážeme si len časť <body>, hlavička pre nás nie je zaujímavá):

<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 internetu 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ící web v HTML

odstrasujici.html

Všimnite si, koľko percent kódu zaberá samotný obsah webu a koľko percent "balast", ktorý slúži len na štylovanie. Š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číta,
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ápajú a indexujú.
...

O tvorbe webov bez CSS sa bohužiaľ môžete stále chybne dočítať v iných a starých návodoch na internete.

Predstavme si, že máme web, ktorý má 50 stránok podobné tejto. A my sa rozhodneme, že sa nám modré tabuľky s modrým písmom už nepáčia a že chceme zelené s tmavo zeleným písmom. Čo urobíme? Áno, budeme musieť prepísať stovky tagov na inú farbu. Asi sami vidíte, že takto to nepôjde. Preto bol vyvinutý jazyk CSS.

Jazyk CSS

CSS (Cascading Style Sheets) je jazyk špeciálne vyvinutý na štylovanie HTML. Kaskádový 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 samy prejavia na všetkých stránkach. CSS k sebe presúva všetko štylovanie HTML dokumentu, kód sa teda čistí, je prehľadný a odpadajú duplicity.

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 centrovany">Na ITnetwork.cz se dočtete jak na to.</p>

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

Výsledok:

Web využívající CSS

css.html

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

A ako CSS vyzerá?

Dnes to bude naozaj len nahliadnutie, pracovať sami budeme nabudúce. CSS súbor pre stránku vyššie by sa volal napr. styl.css a vyzeral by asi takto:

body {
    background-color: #0395c3;
    color: white;
}
h1,
h2 {
    text-align: center;
    color: #0a294b;
}
table {
    margin: 0 auto;
    background-color: white;
    border-collapse: collapse;
}
table td {
    text-align: center;
    padding: 10px;
    border: 1px black solid;
    color: black;
}
.centrovany {
    text-align: center;
}
.velky {
    color: #0a294b;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
}

Čo presne kód znamená si vysvetlíme ďalej v kurze. Vidíme ale, že každý štýl je tu definovaný len raz a potom sa priraďuje elementom na stránke.

K stránke vyššie by sa štýl napojil vložením tohto riadku do hlavičky <head>:

<link rel="stylesheet" type="text/css" href="styl.css" />

Všetko si ale ukážeme až nabudúce. Podstatou dnešnej lekcie bolo ukázať, aké problémy viedli k vzniku CSS a prečo nepoužívať zastarané, ale stále funkčné štylovacie tagy.

V budúcej lekcii, Typové CSS selektory a zarovnanie textu , si ukážeme použitie CSS a naučíme sa, ako zarovnávať text.

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é 607x (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