Programátorská sociální síť a materiálová základna pro C#, Java, PHP, HTML, CSS, JavaScript a další.

Přihlásit se Registrace  

6. díl - Úvod do CSS (kaskádových stylů)

Zpět do sekce Webové stránky krok za krokem

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

Historie jazyka HTML

Stručně řečeno, 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 ho 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 dokumetu 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 nové a nové tagy. Bohužel už ne jen ty, které přidělovaly význam, ale i ty, které elementy jen 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 (zobrazil jsem jen část body, hlavička pro nás není zajímavá), který se 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 devbook, 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í příklad webu v HTML 3 bez CSS

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í. Hlavně si představte, že máte web, který má 50 stránek podobné této. A vy se rozhodnete, že se vám modré tabulky s modrým písmem již nelíbí a že chcete zelené s tmavě zeleným písmem. Co uděláte? Ano, budete muset přepsat stovky tagů na jinou barvu. Asi sami vidíte, že takhle to nepůjde. Proto byl vyvinut jazyk CSS.

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í duplikace.

Dal jsem si záležet, abych vám názorně ukázal, že používat CSS je nutnost a že do HTML prostě styly napatří. Tyto tutoriály píši tak, jak se píše moderní web nyní, ne, jak se psal před X lety a jak se můžete chybně dočíst v jiných a starých návodech na internetu.

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">Na devbooku 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ýsledek:

Web s CSS

To je poměrně zásadní rozdíl, že? Porovnejte si 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.

Jak tedy vypadá a funguje onen magický CSS soubor, který nám sám HTML takto ostyluje? To se dozvíte příště :)


 

Článek pro vás napsal David Čápka
Avatar
Autor je C# a PHP programátor, dále se věnuje webovým technologiím a redaktorské činnosti na portálu devbook. Rád své znalosti sdílí s komunitou a tak je rozšiřuje, věří, že smysl života je v poznání.
Unicorn College Autor se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.

Jak se vám líbí článek?
Celkem (15 hlasů):
4.93333 4.93333 4.93333 4.93333 4.93333


 


Předchozí článek
Seznamy v HTML a zopakování tabulky
V HTML tutoriálu si zopakujeme použití tabulky (table) a uvedeme si různé seznamy (ul, ol a dl), jejich položky (li) a jejich názorné použití.
Všechny články v sekci
Webové stránky krok za krokem
Tutoriály vás provedou tvorbou jednoduchého statického webu v HTML a CSS. Vše je vysvětleno od úplných začátků až po nahrání hotového webu na internet.
Další článek
Základní CSS selektory a atributy
HTML tutoriál vysvětluje základní princip CSS selektorů a ukáže stylování zarovnání (text-align) a barvy textu (color).


 

 

Vaše komentáře:
Zobrazit starší komentáře (26)

07.08.2013 08:56:34
Avatar
jsedy7
Člen
DotDotDotDotDotDotDotDotDotDot

Nepotřebuju návrh s vrstvami, ten si klidně udělám sám. To mi přijde jednoduché :) jen si neumím představit jak ten návrh použít pro tvorbu hotového webu.

A dělat webovky z JPEG musí být lahůdka. Člověk to zabere minimálně půl hodiny práce na zpracování grafiky na nějakou použitelnou podobu. A to nemluvím ještě o kvalitativních ztrátách.

Když jsem dělal návrhy já, tak v PSD jsem měl vrstvu ke všemu. Taky jsem neviděl důvod proč to slučovat. Jen můj problém je a zatím i bude nakódění webovek tak, aby byla použita grafika z PSD. Stačí mi princip tvorby nějaký jednoduchý stránky, se zbytkem bych se mohl pokusit maličko pohrát. :)

Odpovědět   i++; | i--;
Musíš se mnoho učit, abys poznal, že málo víš...
07.08.2013 08:59:39
Avatar
Jiří Gracík (FunebrakCZ)
Moderátor
DotDotDotDotDotDotDotDotDotDot
Odpovídá na jsedy7

Ne, udělat návrh není jednoduché. To bude taky jeden z důvodů, proč webdesigner dostane za web třeba 40 tisíc a koder jen 5 ...

Odpovědět   i++; | i--;
Kdo si zahrává se mnou, bude litovat toho, že si nezahrával s ohněm.
07.08.2013 09:04:47
Avatar
jsedy7
Člen
DotDotDotDotDotDotDotDotDotDot
Odpovídá na Jiří Gracík (FunebrakCZ)

Tak v tom případě buď něčemu hodně špatně rozumím a nebo nevím.
Takže vytvořit obrázek (když to tak nazvu) s rozložením prvků webu není snadné?

V příloze je jedna z mých návrhů na design webové stránky. Ber to s rezervou jak to vypadá. :)

Potřebuju prostě pochopit, co myslíš tím, že to není tak jednoduché, tvořit webdesign. :)


Odpovědět   i++; | i--;
Musíš se mnoho učit, abys poznal, že málo víš...
07.08.2013 09:17:41
Avatar
Jiří Gracík (FunebrakCZ)
Moderátor
DotDotDotDotDotDotDotDotDotDot
Odpovídá na jsedy7

Nemyslel rozložení webu, myslel jsem, aby to nevypadalo jako opičí p*del :)

Editováno 7.8.2013

Odpovědět   i++; | i--; ( +4 )
Kdo si zahrává se mnou, bude litovat toho, že si nezahrával s ohněm.
07.08.2013 09:54:03
Avatar
Kit
Redaktor
DotDotDotDotDotDotDotDotDotDot
Odpovídá na jsedy7

Design navržený v PS je použitelný pro web pouze jako návrh. Kodér ho musí celý přepsat a musí vědět jak.

Odpovědět   i++; | i--; ( +2 )
Vlastnosti objektů by neměly být veřejné. A to ani prostřednictvím getterů/setterů.
24.11.2013 14:53:41
Avatar
SandMan
Člen
DotDotDotDotDotDotDotDotDotDot

Divné je, že když to napíšu v HTML 3 tak mi to ukazuje stejný výsledek jako máš ty, ale když to udělám pomocí HTML 5 tak je pozadí bílé. Nevycentrované odstavce. :)) Nevěděl by mi někdo poradit?

Odpovědět   i++; | i--;
Život je jako cesta do kurníku. Krátká a posraná.
24.11.2013 21:59:36
Avatar
Jiří Gracík (FunebrakCZ)
Moderátor
DotDotDotDotDotDotDotDotDotDot
Odpovídá na SandMan

Nevidíme kód, takže takhle asi ne :)

Odpovědět   i++; | i--;
Kdo si zahrává se mnou, bude litovat toho, že si nezahrával s ohněm.
28.11.2013 16:39:55
Avatar
SandMan
Člen
DotDotDotDotDotDotDotDotDotDot
Odpovídá na Jiří Gracík (FunebrakCZ)

Zkopíroval jsem kód autora tohoto článku :))

Odpovědět   i++; | i--;
Život je jako cesta do kurníku. Krátká a posraná.
28.11.2013 16:50:08
Avatar
Zdeněk Pavlátka
Redaktor
DotDotDotDotDotDotDotDotDotDot
Odpovídá na SandMan

HTML5 neobsahuje některé zastaralé tagy.

Odpovědět   i++; | i--;
Kolik jazyků umíš, tolikrát jsi programátor.
28.11.2013 16:53:16
Avatar
mkub
Člen
DotDotDotDotDotDotDotDotDotDot
Odpovídá na SandMan

HTML3 sa uz nikde nepouziva, je to uz velmi zastaraly standard

 

Zobrazeno 10 z 36 zpráv

Zobrazit všechny komentáře k článku

Přidat novou zprávu

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řihlaš. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.