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">Website in HTML 3</font></h1>
    <p>If I want every heading dark blue and centered, I'd have to set it again and again to every one of the headings. My code is full of deprecated align attributes and deprecated font tags.</p>

    <h2 align="center"><font color="#0a294b">Another heading</font></h2>
    <p>I have to specify that I want the heading centered and dark blue again. I'm already lost in the code at this point.</p>

    <table align="center" cellpadding="10" cellspacing="0" border="1" bgcolor="white" bordercolor="#0a294b">
        <tr><td valign="top" align="center"><font color="#0a294b">This table</font></td><td valign="top" align="center"><font color="#0a294b">has</font></td></tr>
        <tr><td valign="top" align="center"><font color="#0a294b">too many</font></td><td valign="top" align="center"><font color="#0a294b">unnecessary attributes.</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">This table is styled</font></td><td valign="top" align="center"><font color="#0a294b">exactly the same</font></td></tr>
        <tr><td valign="top" align="center"><font color="#0a294b">as the one above, but still</font></td><td valign="top" align="center"><font color="#0a294b">I have to write the styles all over again.</font></td></tr>
    </table>
    <h2 align="center"><font color="#0a294b">The sad part is</font></h2>

    <p>that many online tutorials will still teach you to code websites this way.</p>
    <p align="center"><img src="images/sad.png" alt="Sad" /></p>

    <p align="center"><font size="4" color="#0a294b" face="arial">That's why I use ICTdemy where they teach how to make modern websites.</font></p>

    <p align="center"><font size="4" color="#0a294b" face="arial">This paragraph is dark blue and centered just like the one above, but I still have to write it again.</font></p>
</body>

Výsledný web by potom vyzeral takto:

Terrible Web in HTML

terrible.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íklad:

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>Website using CSS</h1>
    <p>If I want every headline dark blue and centered, all I would have to do it define it as such in CSS. My HTML code is clear and the style is specified only once and applies for every heading.</p>

    <h2>Another heading</h2>
    <p>The heading above is styled because the style was declared on every heading in CSS. </p>

    <table>
        <tr>
            <td>This table</td>
            <td>only contains</td>
        </tr>
        <tr>
            <td>a table definition</td>
            <td>and text.</td>
        </tr>
    </table>

    <br />

    <table>
        <tr>
            <td>This table is</td>
            <td>styled exactly</td>
        </tr>
        <tr>
            <td>as the one above</td>
            <td>because they share the same style.</td>
        </tr>
    </table>

    <h2>It's a good thing that</h2>

    <p>you're reading this, so you know how to do the right way.</p>
    <p class="centered"><img src="images/happy.png" alt="Happy" /></p>

    <p class="large centered">On ICTdemy, you will learn how to make modern, elegant websites.</p>

    <p class="large centered">This paragraph uses style with a bigger text which is only had to be defined once in CSS.</p>
</body>

Výsledok:

Website Using 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. style.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;
}

.centered {
    text-align: center;
}

.large {
    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="style.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é 26x (15.29 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:

64 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