Slevový týden - Březen C# týden
Využij náš slevový týden a získej až 30 % bodů navíc zdarma! Zároveň také probíhá C# týden se slevou na e-learning až 80 %
Hledáme fulltime programátora do ITnetwork týmu -100% homeoffice, 100% časově flexibilní #bezdeadlinu Mám zájem!

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

Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!

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

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

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 :)


 

 

Článok pre vás napísal David Čápka
Avatar
Ako sa ti páči článok?
Ešte nikto nehodnotil, buď prvý!
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor sa informačné technológie naučil na Unicorn College - prestížnej súkromnej vysokej škole IT a ekonómie.
Predchádzajúci článok
Riešené úlohy k 4.-5. lekciu HTML a CSS
Všetky články v sekcii
Webové stránky krok za krokom
Miniatúra
Nasledujúci článok
Základné CSS selektory a vlastnosti
Aktivity (1)

 

 

Komentáre

Avatar
Filip Vondricka:24.7.2018 8:24

To znamena že nepisu úplně e nahoru jako v indexu.html...
<!DOCTYPE html>

<html lang="cs-cz">
Dekujj

 
Odpovedať
24.7.2018 8:24
Avatar
Jaroslav Patrný:24.7.2018 14:21

Hned nahoru napíšeš první selektor a vlastnosti, např.

h1 {
    text-align: center;
    ....
    ....
   }
 
Odpovedať
24.7.2018 14:21
Avatar
Odpovedá na Filip Vondricka
Reaktivní uživatel:24.7.2018 14:30

Co tak abys příště místo dotazů pokračoval na další díl? Ono je to totiž mockrát i jednodušší.

Odpovedať
24.7.2018 14:30
Kdo je připraven, toho zaskočí něco jiného
Avatar
Dávid Bóna
Člen
Avatar
Dávid Bóna:6.11.2018 20:13

Ďakujem za ďalší super članok :) vedomosti sa zbieraju

 
Odpovedať
6.11.2018 20:13
Avatar
Jan Karas
Člen
Avatar
Jan Karas:24.11.2018 19:18

boží web....

 
Odpovedať
24.11.2018 19:18
Tento výukový obsah pomáhajú rozvíjať nasledujúce firmy, ktoré možno hľadajú práve teba!
Avatar
Vlada
Člen
Avatar
Vlada:11.4.2019 16:30

Díky (y)

 
Odpovedať
11.4.2019 16:30
Avatar
Ondřej Matýs:25.4.2019 13:57

Super srovnání

 
Odpovedať
25.4.2019 13:57
Avatar
MiroslavP
Člen
Avatar
MiroslavP:3.8.2019 20:43

dobrota :-)

 
Odpovedať
3.8.2019 20:43
Avatar
Nikola Tomášková:26.10.2019 0:36

Díky mockrát :)

Odpovedať
26.10.2019 0:36
Je čas z nemožného udělat možným.
Avatar
Ladislav Guldan:26. marca 17:39

Nedá sa platiť zo Slovenska kartou?

 
Odpovedať
26. marca 17:39
Robíme čo je v našich silách, aby bola tunajšia diskusia čo najkvalitnejšia. Preto do nej tiež môžu prispievať len registrovaní členovia. Pre zapojenie sa do diskusie sa zaloguj. Ak ešte nemáš účet, zaregistruj sa, je to zadarmo.

Zatiaľ nikto nevložil komentár - buď prvý!