Minikurz
Můj první web

3. lekce

Začínáme se styly

Ahoj kluci a holky,

první dvě lekce jsme se věnovali jazyku HTML a s jeho pomocí jsme vytvořili obsah webové stránky. V této lekci si představíme základy jazyka, který vykouzlí nový vzhled stránek a rozhýbe balónek pomocí animace.

Jedná se o kaskádové styly v anglickém originále Cascading Style Sheets se zkratkou CSS.

Jazyk HTML a CSS jsou moc dobří parťáci. Společně vytvoří webovou stránku tak, že HTML pomocí svých značek vytvoří obsah stránky a CSS pak těmto značkám pomocí pravidel přiřadí určitý styl.

Zápis CSS kódu je odlišný od HTML kódu. U CSS pravidla je nejdříve nutné zvolit dílky z HTML stránky tzv. selektory, na které se styl uplatní. Jednotlivé vlastnosti a jejich hodnoty se pak zapíší do složených závorek, a pokud je jich víc oddělují se středníkem.

CSS selektor {CSS vlastnost 1: hodnota 1; CSS vlastnost 2: hodnota 2;}

Kterou možnost zápisu CSS použijeme u našeho příkladu?

Když se tvoří větší webové projekty, mají většinou více než jednu HTML stránku, proto je dobré zvolit třetí možnost a vložit CSS do samostatného souboru. Pak bude možné CSS soubor připojit k libovolnému počtu HTML stránek a zachovat tak všude stejný styl.

My budeme ovšem vytvářet jen jednu webovou stránku, vložíme tedy CSS kód do hlavičky HTML stránky head mezi počáteční značku <style> a koncovou značku </style>.

Pojďme si nyní vytvořit naše první CSS pravidlo, které nastaví celé stránce zapsané značkou body světle modrou barvu pozadí a vše zarovná na střed.

CSS selektor bude tedy body a nastavíme mu CSS vlastnosti:

background-color tedy barvu pozadí nastavíme na lightblue,
text-align tedy zarovnání nastavíme na střed stránky center.

Celé CSS pravidlo vypadá následovně:

body {background-color: lightblue; text-align: center;}

Zápis CSS pravidla do HTML kódu:

<!DOCTYPE html> 
<html> 
<head>
  <meta charset="UTF-8">
  <title>Létající balónek</title>
  <style>
    body {background-color: lightblue;text-align: center;}
  </style>
</head> 
<body>
  <h1>Létající balónek</h1>
  <p>Balónek létá na všechny strany.</p>
  <input type="checkbox" id="stop"> 
  <label for="stop">START / STOP</label>
  <div></div>
</body> 
</html>

Hotovo! Otevřete HTML soubor a mrkněte na naši první změnu stylu.

Dobrá práce! Barva pozadí je světle modrá a vše je umístěno na střed stránky. Nyní pojďme zvětšit balónek.

Pokračujeme dalším CSS pravidlem k bloku div, kde je umístěn balónek. Tedy CSS selektor bude div. A nastavíme mu jednu CSS vlastnost:

font-size tedy velikost písma nastavíme na 80px.

CSS pravidlo vložte ho opět mezi počáteční značku <style> a koncovou značku </style> a bude vypadat následovně:

div {font-size: 80px;}

Super! Otevřete HTML soubor a mrkněte, jak se balónek zvětší.

A teď můžeme začít animovat – rozhýbeme balónek. K pravidlu se selektorem div přidáme ještě jednu CSS vlastnost:

animation tedy animace nastavíme na hodnotu: letani 5s infinite.

Tato CSS vlastnost říká, že najde nadefinovanou animaci s názvem letani, bude animaci provádět po dobu 5 vteřin a infinite říká, že animace poběží pořád dokola, když tuto hodnotu nevložíme, animace se provede pouze jednou. To si klidně můžeme vyzkoušet.

div {font-size: 80px; animation: letani 5s infinite;}

Ovšem aby animace fungovala, musíme ji nejdřív nadefinovat.

Běžné CSS pravidlo začíná selektorem, který říká, kterého prvku se pravidlo týká. Některá CSS pravidla ale začínají speciálním znakem @. Říkáme jim CSS direktivy. Například @keyframes slouží k vytvoření animace.

Pojďme vytvořit zatím animaci s 2 kroky. Každý krok má svoji definici. Začínáme 1.krokem, který označíme 0% a použijeme příkaz transform 0,0. Poté dáme druhý krok 100% a transform změníme na 50px, 50px. To říká, že posuneme balónek o 50px doprava a dolů.

@keyframes letani {
  0% {transform: translate(0, 0);}
  100% {transform: translate(50px, 50px);}
}

Kompletní CSS styl v HTML dokumentu bude vypadat takto:

<!DOCTYPE html> 
<html> 
<head>
  <meta charset="UTF-8">
  <title>Létající balónek</title>
<style>
  body {background-color: lightblue;text-align: center;}
  div {font-size: 80px; animation: letani 2s infinite;} 
  @keyframes letani {
    0% {transform: translate(0, 0);}
    100% {transform: translate(50px, 50px);}
  }
</style>
</head> 
<body>
  <h1>Létající balónek</h1>
  <p>Balónek létá na všechny strany.</p>
  <div></div>
  <input type="checkbox" id="stop"> 
  <label for="stop">START / STOP</label>
</body> 
</html>

Super! Otevřete HTML soubor a mrkněte, jak se balónek rozpohybuje – poletí trochu doprava a dolů.

Teď můžeme přidat do animace více kroků a nechat balónek létat po celé stránce – doleva, doprava, nahoru a dolů.

Přidáme více kroků, tzn. více procent – 0%, 25%, 50%, 75%, 100% a budeme různě posouvat více směry.

@keyframes letani {
  0% {transform: translate(0, 0);}
  25% {transform: translate(150px, 100px);}
  50% {transform: translate(0, 200px);}
  75% {transform: translate(-50px, 100px);}
  100% {transform: translate(0, 0);} 
}

Balónek by nyní létal jen 5 vteřin, to trochu prodloužíme, aby létal pomaleji. Změníme tedy hodnotu 5s na 15s.

div {font-size: 80px; animation: letani 15s infinite;}

Paráda, otevřete HTML soubor a podívejte se, jak balónek krásně létá do všech směrů.

S příkazem transform může testovat a zkoušet a různě balónek po stránce posouvat. Také může přidat více procent, třeba po 10 – 0%, 10%, 20%, 30%, 40%, 50%, 60%, 70%, 80%, 90%, 100% a tak více balónek rozhýbat různými směry.

Nakonec nám zbývá zprovoznit tlačítko START/STOP a animaci tak spustit nebo zastavit tlačítkem.

Podíváme se nejdříve na checkbox, který funguje jen jako „ovládací prvek“.

Potřebujeme ho pro funkci, ale nechceme, aby byl vidět jako klasické malé políčko.

Proto checkbox schováme následujícím CSS pravidlem:

#stop {display: none;}

Ale checkbox nezrušíme. Pořád existuje a stále může být zaškrtnutý nebo nezaškrtnutý.

Určitě jste si všimli, že CSS selektor vypadá trochu jinak než jen název html značky.

Místo html značky je tam #, která říká: „Hledej element, který má konkrétní ID“.
ID je napsané za #, tzn. v našem příkladě: „Hledej element, který má ID stop“.
A ID stop má input checkbox, který tedy CSS pravidlem schováme.

Dalším CSS pravidlem upravíme tlačítko START/STOP:

label {display: inline-block; padding: 10px 20px; background-color: white; border-radius: 10px; cursor: pointer;}

CSS selektor bude label. A nastavíme mu tyto CSS vlastnosti:

display tedy zobraz prvek jako blokový v řádku, nastavíme na inline-block,
padding tedy vnitřní okraj nastavíme 10px nahoru a dolů a 20 px vpravo a vlevo,
background-color tedy barvu pozadí nastavíme na white tedy bílou barvu,
border-radius tedy zaoblení rohů tlačítka nastavíme na 10px,
cursor tedy při najetí myši na tlačítko se místo šipky zobrazí ruka, nastavíme na pointer.

Poslední pravidlo je trošku složitější. Tak ho klidně jen zkopírujte a vložte do kódu.

#stop:checked ~ div {animation-play-state: paused;}

CSS pravidlo říká, že pokud je checkbox s ID stop zaškrtnutý (checked), najdi následující div (~ div) a pozastav jeho animaci (animation-play-state: paused).

Jednoduše řečeno, pokud zaškrtnu checkbox s ID stop, balónek se zastaví. Pokud zruším zaškrtnutí checkboxu s ID stop, balónek zase začne létat.

Kompletní CSS styl v HTML dokumentu bude vypadat takto:

<!DOCTYPE html> 
<html> 
<head>
<meta charset="UTF-8">
<title>Létající balónek</title>
<style>
  body {background-color: lightblue;text-align: center;}
  div {font-size: 80px; animation: letani 15s infinite;}
 @keyframes letani {
0% {transform: translate(0, 0);}
25% {transform: translate(150px, 100px);}
50% {transform: translate(0, 200px);}
75% {transform: translate(-50px, 100px);}
100% {transform: translate(0, 0);}
}
#stop {display: none;}
label {display: inline-block; padding: 10px 20px; background-color: white; border-radius: 10px; cursor: pointer;}
 #stop:checked ~ div {animation-play-state: paused;}

</style> </head> <body> <h1>Létající balónek</h1> <p>Balónek létá na všechny strany.</p> <input type="checkbox" id="stop"> <label for="stop">START / STOP</label> <div></div> </body> </html>

Super, otevřete HTML soubor a vyzkoušejte tlačítko START/STOP, které ovládá balónek – buď ho zastaví nebo ho zase rozpohybuje.

GRATULUJI! Nyní máte kompletně hotovou první animovanou webovou stránku pomocí jazyků HTML a CSS.

Seznam lekcí

Máš dotaz?

Napiš e-mail na janca@webohratky.cz.

Minikurz
Můj první web

3. lekce

Začínáme se styly

Jančo a kam zapíšeme CSS kód?

Jak funguje příkaz translate?

Seznam lekcí

Máš dotaz?

Minikurz Můj první web

Jančo a kam zapíšeme CSS kód?

Jak funguje příkaz translate?

Seznam lekcí

Máš dotaz?

Minikurz
Můj první web