4. díl - Úvod do CSS
Zpět do sekce Webové stránky krok za krokemZatím jsme se v našem seriálu úspěšně vyhýbali stylování stránek, pojďme to nyní napravit. 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. 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 další 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 ve 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 vyvoř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.
Podívejte se sami, jak mohl vypadat HTML 3 dokument (zobrazil jsem jen část body, hlavička pro nás není zajímavá):
<body bgcolor="silver" text="blue" link="red" vlink="red" alink="green">
<h1 align="center">Web v HTML 3</h1>
<h2 align="center">Když chci mít všechny nadpisy centrované,</h2>
<table align="center" cellpadding="10" cellspacing="0" border="2" bgcolor="blue">
<tr><td valign="top" align="center"><font color="white">Tato tabulka</font></td><td valign="top" align="center"><font color="white">obsahuje</font></td></tr>
<tr><td valign="top" align="center"><font color="white">příliš mnoho</font></td><td valign="top" align="center"><font color="white">zbytečných atributů</font></td></tr>
</table>
<h2 align="center">Musím centrování psát do každého nadpisu</h2>
<table align="center" cellpadding="10" cellspacing="0" border="2" bgcolor="blue" text="white">
<tr><td valign="top" align="center"><font color="white">Tato tabulka je úplně</font></td><td valign="top" align="center"><font color="white">stejně stylovaná, jako</font></td></tr>
<tr><td valign="top" align="center"><font color="white">ta nahoře, ale stejně musím</font></td><td valign="top" align="center"><font color="white">všechny styly psát znovu.</font></td></tr>
</table>
<h2 align="center">A to je otrava</h2>
<p align="center"><font size="4" color="green" face="arial">Tento odstavec je zelený a centrovaný</font></p>
<p><b>Text v tomto odstavci je vykreslen tučně, ale jinak nemá vůbec žádný vyšší význam</b></p>
<p align="center"><font size="4" color="green" face="arial">Tento odstavec je zelený a centrovaný, vše musím psát znovu.</font></p>
</body>Výsledný web by potom vypadal takto:
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 bílým písmem již nelíbí a že chcete červené se žlutý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 (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 sami 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 v HTML 4+</h1>
<h2>Všechny mé nadpisy jsou centrované,</h2>
<table class="modra-tabulka">
<tr><td>Tato tabulka</td><td>obsahuje</td></tr>
<tr><td>jen definici tabulky</td><td>a text.</td></tr>
</table>
<h2>Protože jsem si je tak ostyloval</h2>
<table class="modra-tabulka">
<tr><td>Tato tabulka</td><td>je stejně stylovaná, jako</td></tr>
<tr><td>ta nahoře, mohu tedy</td><td>použít ten samý styl.</td></tr>
</table>
<h2>A psát web mě nyní i víc baví.</h2>
<p class="zeleny-odstavec">Tento odstavec je zelený a centrovaný</p>
<p><strong>Text v tomto odstavci je považován za důležitý a je také vykreslen tučně</strong></p>
<p class="zeleny-odstavec">Tento odstavec je také zelený a centrovaný, opět jen znovu použiji styl.</p>
</body>Výsledek:
Určitě jste si všimli atributů class, které přiřazují elementu nějaký styl, definovaný v externím CSS souboru. Na závěr nahlédneme pod pokličku a ukážeme si, jak obsah tohoto souboru vypadá. Zatím mu budete rozumět spíše intuitivně, příště si CSS detailně popíšeme.
body {
background-color: silver;
color: blue;
}
a { color: red; }
a:hover { color: green; }
h1, h2 { text-align: center; }
.modra-tabulka {
margin: 0 auto;
background-color: blue;
border-collapse: collapse;
}
.modra-tabulka td {
text-align: center;
vertical-align: top;
color: white;
border: 2px solid black;
padding: 10px;
}
.zeleny-odstavec {
text-align: center;
font-size: 1.2em;
font-family: arial;
color: green;
}
Autor se informační technologie naučil na Unicorn College
- prestižní soukromé vysoké škole IT a ekonomie.
Tisk
Tabulky a seznamy Tutoriál vysvětlující tabulky a seznamy v HTML, vysvětluje tagy thead, tbody, th, tr, td, ul, ol, li. Nechybí slučování buněk ani tvorba hlavičky.
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.
Základní CSS selektory a atributy Tutoriál vysvětluje základní CSS selektory (typové, id a class), ukáže stylování textu, pozadí, centrování nadpisů, nastavení obtékání a stylování seznamů.
po pár dnech úprav jsem se rozhodnul že se naučim CSS 
