Black Friday je tu! Využij jedinečnou příležitost a získej až 80 % znalostí navíc zdarma! Více zde
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
BF extended 2022

Lekce 6 - Úvod do CSS (kaskádových stylů)

V předešlém cvičení, Řešené úlohy k 4.-5. lekci HTML a CSS, jsme si procvičili nabyté zkušenosti z předchozích lekcí.

Zatím jsme se v našem HTML tutoriálu úspěšně vyhýbali stylování stránek. Pojďme to nyní napravit! Vysvětlíme si, k čemu slouží CSS a ukážeme si, jak vypadá. Abychom co nejlépe pochopili podstatu jazyka CSS, udělejme si velmi krátkou odbočku do historie vývoje internetu a jazyka HTML.

Historie jazyka HTML

První internet se nazýval Arpanet a vznikl v 60. letech 20. století jako armádní projekt USA v době studené války. Později byl uvolněn mezi veřejnost a připojovaly se k němu univerzity a výzkumné ústavy. Tehdy vůbec nevypadal jako dnes, protože se přes něj přenášely pouze textové soubory.

Až v 90. letech se v evropském výzkumném ústavu CERN rodí jazyk HTML a standard WWW. Tedy web, jak jej známe dnes. HTML mělo sloužit pro sdílení interních dokumentů v ústavu. Jazyk HTML byl vytvořen za účelem rozlišit jednotlivé části dokumentu od prostého textu (např. "toto je nadpis", "toto je seznam", "toto je tabulka") a hlavně, aby mohl propojovat jednotlivé dokumenty pomocí odkazů. Vznikaly první webové prohlížeče.

Jak se web dostával mezi lidi, HTML se rozvíjelo a přidávaly se do něj nové a nové tagy. Navzdory původnímu účelu HTML se jednalo i o tagy, které nepřidělovaly žádný význam, ale elementy nějak stylovaly. Prohlížeče se předháněly, kolik tagů podporují a chrlily nové a nové značky. Problémem bylo, že v HTML dokumentech se rázem objevilo 60% "balastu", který sloužil pouze k obarvování textu, k zarovnání nadpisů na střed nebo k nastavení fontu písma. Tento problém narůstal až do HTML verze 4, kdy se stylování přímo v HTML označilo za zastaralé a přestalo se používat.

Odstrašující příklad zastaralého webu

Podívejte se sami, jak mohl vypadat zastaralý HTML 3 dokument, který se autor snažil ostylovat (ukážeme si jen část body, hlavička pro nás není zají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 vypadal takto:

Odstrašující web v HTML
odstrasujici.html

Všimněte si, kolik procent kódu zabírá samotný obsah webu a kolik procent "balast", který slouží jen ke stylování. Styly se také opakují zbytečně pořád dokola. Nevýhod jsou desítky, např.:

  • nepřehlednost kódu,
  • stránka je několikrát větší a déle se načítá,
  • je potlačován význam elementů a tedy i základní účel jazyka HTML,
  • příliš mnoho tagů mate vyhledávače (např. Google) a ty pak stránky chybně chápají a indexují.
  • ...

O tvorbě webů bez CSS se bohužel můžete stále chybně dočíst v jiných a starých návodech na internetu.

Představme si, že máme web, který má 50 stránek podobné této. A my se rozhodneme, že se nám modré tabulky s modrým písmem již nelíbí a že chceme zelené s tmavě zeleným písmem. Co uděláme? Ano, budeme muset přepsat stovky tagů na jinou barvu. Asi sami vidíte, že takhle to nepůjde. Proto byl vyvinut jazyk CSS.

Jazyk CSS

CSS (Cascading Style Sheets) je jazyk speciálně vyvinutý pro stylování HTML. Kaskádový proto, protože ve stylech funguje dědičnost. Když tedy např. dáme buňce tabulky červenou barvu písma, tuto barvu písma automaticky dostanou i všechny odstavce textu v této buňce. Samozřejmě stále můžeme nějakému odstavci dodatečně barvu změnit, vždy platí ten konkrétnější styl.

Nejlepší je, že jeden a ten samý CSS styl můžeme aplikovat třeba na 100 stránek a všechny budou vypadat stejně. Když se rozhodneme něco změnit, změníme jednu řádku ve stylu a změny se samy projeví na všech stránkách. CSS k sobě přesouvá veškeré stylování HTML dokumentu, kód se tedy čistí, je přehledný a odpadají duplicity.

Ukážeme si ještě, jak by vypadal ten samý 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ýsledek:

Web využívající CSS
css.html

To je poměrně zásadní rozdíl, že? Porovnejte si první kód ještě jednou s kódem výše. Určitě jste si také všimli atributů class, které přiřazují elementu nějaký styl, definovaný v externím CSS souboru.

A jak CSS vypadá?

Dnes to bude opravdu jen nahlédnutí, pracovat sami budeme příště. CSS soubor by pro stránku výše vypadal 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;
}

Co přesně kód znamená si vysvětlíme dále v kurzu. Vidíme ale, že každý styl je zde definovaný jen jednou a pak se přiřazuje elementům na stránce. Mechanismus napojení stylu na stránku i použité CSS vlastnosti si vysvětlíme příště.

V příští lekci, Základní CSS selektory a vlastnosti, si ukážeme použití CSS. Naučíme se jak barvit a zarovnávat text.


 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

Staženo 31x (14.99 kB)
Aplikace je včetně zdrojových kódů v jazyce HTML a CSS

 

Předchozí článek
Řešené úlohy k 4.-5. lekci HTML a CSS
Všechny články v sekci
Webové stránky krok za krokem
Přeskočit článek
(nedoporučujeme)
Základní CSS selektory a vlastnosti
Článek pro vás napsal David Čápka
Avatar
Uživatelské hodnocení:
765 hlasů
David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 let. Má rád Nirvanu, nemovitosti a svobodu podnikání.
Unicorn university David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity

 

 

Komentáře
Zobrazit starší komentáře (71)

Avatar
Robin Štafl
Člen
Avatar
Robin Štafl:12.11.2021 10:39

Ja tedy v CSS kodu nevidim definovane barvy, tak aby to vypadalo jak v HTML, tedy modre pozadí, bila tabulka, cerny text v tabulce...

 
Odpovědět
12.11.2021 10:39
Avatar
Samuel Hél
Tým ITnetwork
Avatar
Odpovídá na Robin Štafl
Samuel Hél:12.11.2021 11:07

Protože to není CSS kód, ale HTML kód s použitím tříd. CSS je v druhém případě v externím souboru. V HTML kódu už jsou jen CSS třídy, jejich styl však můžeš vidět v prvním kódu HTML.

 
Odpovědět
12.11.2021 11:07
Avatar
Robin Štafl
Člen
Avatar
Robin Štafl:23.11.2021 14:54

Uprimne atribut CSS v druhem opravenem nevidim? Kde jsou nastavene barvy pozadi, pisma, atp.? Diky. R.

 
Odpovědět
23.11.2021 14:54
Avatar
Zdeněk Plicka:20.12.2021 20:32

Je v pořádku centrovat třeba tabulku v css nastavením levého a pravého marginu na auto?

Odpovědět
20.12.2021 20:32
Nejprve je třeba naučit se plazit
Avatar
Jaroslav Drobek:18. března 9:07

Ve zdrojíácích je "ITnetwork", ve výstupech "Devbook"..

 
Odpovědět
18. března 9:07
Avatar
Petr Jukl
Člen
Avatar
Petr Jukl:2. června 16:48

V každém cvičení si kód přepisuji a hned se učím,
tady jsem kód ani nepsal, jelikož jsem tam neviděl použití patřičných tagů, které by naformátovaly stránku do konečné podoby.

 
Odpovědět
2. června 16:48
Avatar
Lubor Pešek
Člen
Avatar
Lubor Pešek:6. června 13:26

Poněkud sráží věrohodnost, když v ukázkovém kódu je napsáno ITnetwork a v zobrazené ukázce je Devbook

Odpovědět
6. června 13:26
Existují dva způsoby, jak vyřešit problém. Za prvé vyhoďte počítač z okna. Za druhé vyhoďte okna z počítače.
Avatar
Lubor Pešek
Člen
Avatar
Odpovídá na Petr Jukl
Lubor Pešek:6. června 13:28

Tady toto byla také jen ukázka. Podstata tkví v tom, aby nováčci, pro které písmenka CSS znamenala sprostá slova viděli ten zásadní rozdíl a aby pochopili o čem kaskády jsou.
Konkrétní příklady, které si můžeš procvičovat jsou v dalších lekcích.

Odpovědět
6. června 13:28
Existují dva způsoby, jak vyřešit problém. Za prvé vyhoďte počítač z okna. Za druhé vyhoďte okna z počítače.
Avatar
Kateřina Zákostelská:3. září 17:56

přála bych si vidět externí CSS soubor již zde u příkladu ke kterému patří, pro lepší srovnání a pochopení a ne si ho dohledávat v komentářích

 
Odpovědět
3. září 17:56
Avatar
David Čápka
Tým ITnetwork
Avatar
Odpovídá na Kateřina Zákostelská
David Čápka:10. listopadu 18:23

Díky za podnět, přidal jsem ho jak do lekce, tak do archivu ke stažení.

Odpovědět
10. listopadu 18:23
One of the most common causes of failure is the habit of quitting when one is overtaken by temporary defeat.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 81. Zobrazit vše