3#Hodina – CSS

V této hodině budu opět předpokládat, že zvládáte obsah 1. a 2. hodiny.

Na začátek si vytvoříme opět dva soubory. HTML a JS. Ty mezi sebou propojíte pomocí <Script>. Budeme ale potřebovat dnes ještě jeden soubor a to .CSS. CSS (Cascading style sheets) jsou soubory, ve kterých by jsme měli definovat to jak bude naše stránka vypadat. Takže nyní máme 3 soubory, V jednom máme co na stránce je (HTML), v druhém máme funkce (JS) a ve třetím budeme mít vzhled.

Z minulých hodin známe již dobře ID, pro identifikaci konkrétního prvku a zmínil jsem CLASS. Class funguje hodně podobně, není pro identifikaci jednoho prvku, ale většinou skupiny prvků ve stránce. Například když máme na stránce 20 tlačítek nedáme si ke každému nějaké ID pak je neměníme jedno po druhém. Dáme si k nim CLASS a budeme měnit všechny tlačítka najednou. Můžeme však měnit i to co nemá u sebe ID nebo CLASS. Můžeme měnit například všechny H1, H2, p a další. Existuje však i možnost kdy můžete definovat například že chcete změnit všechny odstavce, které jsou v divu s ID “obsah”. K tomu se ale tuto hodinu nedostaneme.

První co musíme udělat je propojení souborů. Použijeme na to tag “Link” Který dáme do hlavičky HTML souboru.

Samozřejmě href bude obsahovat jméno souboru tak jak si ho pojmenujete vy. Nyní si můžeme ukázat základní úpravy pomocí CSS. Na začátek něco jednoduchého. V HTML si uděláme jeden nadpis H1 a přes CSS mu změníme barvu.

Když chceme v CSS měnit vzhled prvku, který běžný HTML tag tak stačí napsat jeho jméno, za to složené závorky {} a do nich doplníme jak chceme daný prvek upravit. Když budeme chtít změnit barvu prvku, budeme měnit “Color”. A OPRAVDU SLOVO COLOR V SOBĚ NEMÁ ŽÁDNÉ “U”! Za slovem Color následuje dvojtečka, za ní definujete barvu a řádek ukončíte středníkem. Jediné co může být náročnější je definice barvy. Je víc možností jak barvu zapsat:

• Anglicky názve barvy – Asi nejsnadnější způsob a zároveň nejméně používaný. Můžete použít barvy jako “red”, “green” etc, ale také “darkblue”, “lightblue” a “deeppink”. Brackets vám budou tyto barvy nabízet i s ukázkou jak tato barva vypadá
• RGB – Opět nejedná se o běžný způsob zápisu barev, ale vychází z modelu Red, Green, Blue kdy definujete intenzitu každé barevné složky od 0-255.  Zápis modré může tedy vypadat takto “rgb(0,0,255);”
• HEX – Asi nejběžnější zápis barev. Je to vlastně jen kratší zápis RGB, kde je místo desítkové soustavy použita šestnáctková. Zápis modré by vypadal takto “#0000FF”

Existují další možnosti (rgba, hsl, hsla), ale ty si ukážeme až později protože buď přidávají alfa kanál nebo úplně mění to z čeho se barva počítá … případně obojí najednou 🙂

Takto vypadá nápověda barev:

Samotná změna barvy H1 na modrou může být zapsána třeba takto:

Stejně můžeme měnit barvu i u dalších tagů (h2, h3…, p, span, div), když ale chceme změnit barvu pozadí sáhneme do tagu “body” a budeme měnit background-color. Zápis je velmi podobný:

Barva #000000 je černá 😉

Můžeme však barvu pozadí použít i na prvky jako je H1. Díky tomu i uvidíte že nadpisy se roztahují po celé šířce stránky. O něco použitelnější je background-color u tagu span. Ten již znáte z minulé hodiny. Ten se nám neroztahuje po celé šířce řádku a tak jej může používat na zvýrazňování slov, na změnu barvy a další drobné úpravy písma. Na to se již použije CLASS. Tak si uděláme v HTML malý kousek textu je jedno slovo obalíme tagem span a dáme mu class “vyrazny”.

Schválně jsem přidal ještě tag p (odstavec). Takto by jste měli obalit každý souvislý text a ideálně vůbec nepoužívat tag <br> (zalomení řádku) Nyní totiž můžeme změnit barvu písma v p a zároveň změnit barvu pozadí a písma ve spanu. S ohledem na to že máme pozadí stránky černé, dáme si text bílý a span uděláme černý text v s bílým pozadím. Aby jsme mohly upravovat vzhled span, musíme použít nový způsob zapisu. Span použijeme mnohokrát a nebudeme chtít, každý span vypadal stejně. Proto do css budeme psát class. Aby css pochopilo, že se jedná o Class musíme použít . (tečku) před název class. U ID se používá # (hashtag) před názvem ID. Náš výsledná zápis bude vypadat takto:

Někdy se nám může stát, že budeme mít například vytvořenou class na velké písmo a class na červené písmo a budeme chtít udělat velké červené písmo. Nebudeme muset kvůli tomu dělat další class, prostě dáme k jednomu prvku dvě class. Když chcete použít více Class píšete je za sebe k tagu a oddělujete je pouze mezerou. 

S ohledem na to, že barvy již umíte dostáváme se k velikosti písma. Opět je x možný definic velikosti písma. My si na začátek ukáže tři možnosti možnosti.

• PX (pixel) Není to nejobvyklejší zápis, ale občas potřebujeme použít přesnou definici na pixel. Nastává zde však problém, že velikost písma se mění s PPI (Pixel per Inch), čím menší pixely jsou tím menší bude i samotné písmo. Takže třeba ten kdo se bude na vaší aplikaci koukat na 15.4″ MacBook Pro, který má DPI 110 bude mít písmo strašně velké, a oproti tomu bude mít člověk na Sony Xperia Z5 Premium problém si vůbec něčeho jako písmo všimnout protože má DPI 801. Celkově jednotka PX není při tvorbě webů vhodná čase si ukážeme další důvody proč 🙂 
• % Velmi používaná možnost a zároveň velmi praktická. Prostě vezmeme velikost písma a když ho chceme dvojnásobně velké nastavíme mu fons-size 200%. Chceme ho poloviční nastavíme 50%. Snadné a jednoduché 🙂
• vh (viewport height) Velmi dobré řešení, zatím není příliš používané (nebo jsem se s ním setkal zatím minimálně). vh je procento z velikosti okna prohlížeče. Takže pokud si nastavíte 50vh bude text velký jako polovina okna prohlížeče a bude se měnit podle toho jak budete měnit velikost okna.

Když už jsme si ukázali nějaké základní použití Class, tak si můžeme říct, že ID se používá úplně stejně, jediný rozdíl je, že místo tečky použijete hashtag. Můžete kombinovat ID a Class, ale ID můžete na jedné stránce (jednom HTML dokumentu) použít pouze jednou.

V dnešní době si však nemusíte, všechny class psát sami a ručně. Můžete místo toho použít nějaký framework. Ten nejobvyklejší je pravděpodobně Bootstrap. My si samozřejmě ukážeme i další a hlavně takové, které jsou vhodnější pro mobilní aplikace. Na začátek je ale Bootstrap velmi dobrý 🙂 Funguje totiž dobře na desktopu i na mobilních zařízeních. Aby jsme bootstrap mohli používat musíme připojit jeho knihovny k našemu HTML souboru. Staří když do hlavičky souboru přidáme tři řádky 🙂 Od tohoto momentu však budeme muset být vždy při práci připojeni na internet. Protože soubory, které budeme používat nejsou u nás, ale na serverech CDN. Toto je bezpečné 🙂 Jinak nedoporučuji příliš používat věci z jiných stránek.

Toto budeme potřebovat v hlavičce. Vemte si to z oficiální stránky.

Bootstrap official

Vložte to do hlavičky HTML.

Nyní máme “nainstalovaný” bootstrap. Ten funguje tak, že máme přednastavené class, které můžeme rovnou používat a nemusíme je psát. A u velké části z nich by to bylo hodně zbytečné práce. Jedna věc se nám, ale na stránce změnila pouhým přidáním bootstrap a to barva pozadí. Tu upravuje v základu boostrap na bílou. Pro nás to znamená, že si musíme ukázat jak přemoci boostrap a dát tam co chceme. Stačí když přidáme k danému parametru to, že je důležitý (!important). Pokud to přidáme k pozadí, vrátí se nám barva, kterou jsme si zvolili. zápis bude vypadat takto:

Nyní si můžete otestovat použití nějakých Class v praxi a zároveň si ukážeme nějaké tagy, kterých vzhled v základu Bootstrap upravuje:

• Úprava textu <p> – .text-muted, .text-primary, .text-success, .text-info, .text-warning, and .text-danger:
• Úprava textu s pozadím <p> – .bg-primary, .bg-success, bg-info, bg-warning, and .bg-danger
• Zarovnání textu <p> – .text-left, .text-center, .text-right and .text-justify (justify = zarovnání do bloku)
• Velikost textu <p> – .lead = velký, .small = malý (85%)
• Rámečky <div> (Alert v JS není to samé jako Alert v Bootstrap) – Vždy musíme použít dvě CLASS .alert a jednu z těchto
  • .alert-success
  • .alert-info
  • .alert-warning
  • .alert-danger
• Ještě se dá udělat Alert se zavíráním (po kliknutí na křížek zmizí) přidáním řádku s odkazem
  • <a href=”#” class=”close” data-dismiss=”alert” aria-label=”close”>&times;</a>
    • &times; je značka násobení (x) můžete si vyzkoušet místo toho napsat cokoliv jiného třeba “zavřít” (bez uvozovek)
• Poslední co se dá k Alert přidat je animace. Stačí přidat další class k divu (za alert alert-success) .fade .in
• Tlačítka <button> Základní styl tlačítka se dá upravit alespoň na několik základních stylů, opět musíme použít dvě CLASS, první je .btn a další z nabídky
  • .btn-default
  • .btn-primary
  • .btn-success
  • .btn-info
  • .btn-warning
  • .btn-danger
  • .btn-link
• Tlačítkům ještě můžetě měnit velikost přidáním třetí class
  • .btn-lg
  • .btn-md
  • .btrn-sm
  • .btn-xs
• Tlačítka se dají udělat i na šířku stránky pomocí CLASS .btn-block Případně se dají vypnout pomocí class .disabled/.active

Když už jsme u tlačítek, ne každé tlačítko musí pouštět JS. Tlačítka často fungují jako odkazy a to jsem vám zatím ještě neprozradil. S ohledem na to že pracujeme v HTML, tak každá stránka vaší webové stránky bude samostatný soubor, mezi kterými se budeme pohybovat. Na začátek si ale ukážeme snadnější formu odkazu a to odkaz na další stránku. Odkaz, s ohledem že je to to co se na webu používá velmi často má tag <a> musíme ale tomu přidat parametr href=”” kde do uvozovek napíšeme cíl odkazu. <a> je párový tag, takže má začátek i konec a odkaz na mojí stránku by vypadal třeba takto:

Takto napsaný odkaz bude pouze modrý podtržený text :/ ale když už máme bootstrap můžeme z toho snadno udělat tlačítko pomocí úplně stejných class jako na tag <button>. Takže velké aktivní červené tlačítko s odkazem na mou stránku můžeme vytvořit třeba takto:

Schválně jsem toho tam dal co nejvíc 🙂 je totiž jedno kolik má prvek class:)

Nahrávání na hosting

S ohledem na to, že máte na emailu přístupové udaje na nahrávání na web nebude to tak náročně nastavit. Použijeme na to druhý program z balíčku a to “FileZilla”. Po spuštění dáte “SOUBOR” -> “SPRÁVCE MÍST…” nebo “CTRL + S”. Nyní dáme “Nové místo” a vyplníme základní údaje, jeden údaj bude společný a to “Hostitel” s ohledem na to, že jsme všichni na stejném hostingu. Také začátek uživatelského jména bude stejné pro všechny.

Kliknutím na připojit se připojíte do své složky na hostingu. Nahrajte soubory ze všech 3 hodin. Pokud nějakou práci nemáte uloženou, vypracujte ji do další hodiny doma podle příspěvků na webu. Tato práce bude hodnocena. Ověřte si, hlavně že kód z druhé hodiny je funkční.

Po nahrání označte soubory, dejte si pravé tlačítko a upravte práva, aby bylo možné k souborů vzdáleně přistupovat. 755.

Doporučují vytvořit si na hostingu složky “01hodina”, “02hodina”, “03hodina” … a ve 4. hodině si vytvoříme funkční rozcestník, který se nám načte po otevření vaší stránky. Nahrání souborů budu kontrolovat DATE UNKNOWN – 22:00. Pokud tam práce nebudou nahrané počítejte s nedostatečnou.