TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Co to je CSS? Proč je lepší je používat? ..
1.1 - Co je to CSS?
CSS, nebo-li Cascading Style Sheets, česky „kaskádové styly“, vzniklo kolem roku 1997. K čemu CSS slouží si teď rozebereme. Dejme tomu, že děláte HTML stránku, na které máte normální text a několik (např. 12) nadpisů h1. Chcete, aby se nadpisy zobrazily modrou barvou a fontem Verdana. Budete muset u každého nadpisu samostatně definovat font a barvu. Není to trochu nemotorné? Přiznejme si, že to minimálně hodně zdržuje a výsledný kód nevypadá zrovna nejlépe. Díky CSS jen nadefinujete, že všechny nadpisy h1 se mají zobrazit modře a fontem Verdana. A je to na jeden řádek!
Toto je nejjednodušší forma CSS. Později se dozvíte, jaké různé fígle se s CSS dají udělat a také se naučíte, jak CSS zapsat do externího souboru, což je to nejefektivnější řešení. Jen na okraj se ještě zmíním, že na světě je už i návrh CSS 2, o něco víc „hi-tech CSS“ :), ale v IE to prý moc nefunguje. Ono se taky není moc čemu divit, že?;)
1.2 - Jak se dá CSS deklarovat?
CSS se dá uvařit na několik způsobů. Konkrétně na tři.
Za prvé, můžete ho umístit hned k prvku, který chcete formátovat. To atributem style=“.....“. Tato varianta je hodně nešikovná a moc se nepoužívá.
Za druhé, dá se umístit do hlavičky celého kódu. Říká se tomu stylopis, angl. „stylesheet“. Tato varianta je už lepší a používá se tak, že se jednotlivé atributy vkládají mezi tágy <style> a </style>.
A do třetice všeho dobrého - je použití externího souboru (např. whizzzkey.css). Na samotné strance je jen odkaz (tág <link>). Tahle možnost je prakticky stejná, jako možnost druhá, rozdíl je v tom, že je externí a tím pádem může mít efekt na více stránek!
1.3 - Deklarace prakticky
1.3.a - Zápis přímý - dejte ho hned k textu, který chcete formátovat. Ukážeme si to u odstavce:
<p style="color: green">Cely tento odstavec bude zeleny.</p>
Pomoci stejného zápisu píšu nyní modrou. Ale jen tento odstavec.
1.3.b - Stylesheet - dáme ho pěkně do hlavičky celého dokumentu:
<style> p {color: green} </style>
A všechny odstavce budou zelené.
1.3.c - Externí CSS soubor - Této variantě se budeme věnovat, až váš skill v CSS trochu stoupne, a doufám, že to bude brzy.
1.4 - Na závěr malý úkol
Vaším úkolem v první lekci je poslat mi zdroják, ve kterém jste aplikovali první dva způsoby používání CSS. Tak se snažte, budeme známkovat!
