Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Kids
Webdesign

Webdesign pro děti: CSS

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Web Design for Kids.
Web Design for Kids: HTML Content
Web Design for Kids: CSS Layout

Czech (Čeština) translation by Vítězslav Jaroš (you can also view the original English article)

Vítejte v páté lekci našeho seriálu Webdesign pro děti, tentokrát o CSS.

Tvrdě jsme pracovali na našem HTML obsahu, teď je na čase ho zkrášlit! Přidáme několik dalších věcí do HTML stránky a také vytvoříme nový soubor: CSS dokument.

Mrkněte se na kompletní webovou stránku, kterou vytváříme! Soubory pro tuto lekci jsou ke stažení odtud a nezapomeňte, že se můžete ptát v komentářích pod článkem.

Co přesně CSS znamená?

Než začneme vytvářet kód, ujistěme se, že víme co znamená CSS. CSS je zkratka pro Cascading Style Sheets [česky zkráceně Kaskádové styly], jazyk určený k nastavení vzhledu naší HTML stránky. 

no css vs css

Na obrázku výše, prohlížeč nalevo zobrazuje stránku bez CSS, bez nastylování, zatímco ten napravo je nastylovaný. Styly jsou zapsány do CSS souboru - je to mnohem lepší!

CSS se zapisuje pomocí textového editoru do samostatném souboru. Náš HTML dokument byl uložen s .html příponou, ale CSS dokument uložíme s .css příponou.

Tvorba CSS souboru

Potřebujeme vytvořit nový dokument pomocí textového editoru a uložit ho jako "tutstown.css" v "tutsfolder"; hned vedle "index.html" a adresáře "images".

HTML & CSS

Abychom mohli styly z CSS dokumentu aplikovat na náš HTML dokument, musíme je nejdříve propojit. To se dělá pomocí elementu <link> v elementu <head> ve vrchní části našeho HTML documentu.

Umístíme tento link přímo pod náš titulek:

Obsahuje několik důležitých atributů, prvním z nich je type. Atribut type řekne prohlížeči, jaký typ obsahu připojujeme. V tomto případě je to text/css soubor.

Druhým atributem je rel, který oznamuje, jaký je vztah mezi HTML a připojeným dokumentem (naším CSS). CSS dokument je stylesheet (stylopis) pro náš HTML, takže to sem vložíme.

Posledním je href, který si nejspíš pamatujete z elementu <a>. Ukazuje někam jinam. V tomto případě, posílá prohlížeči umístění CSS soubor, který připojujeme.

Pokud je všechno správně připojeno, stránka bude po opětovném načtení v prohlížeči vypadat jinak.

Třídy [classes]

Do našeho CSS souboru vypíšeme seznam HTML elementů, které jsme použili a řekneme, jak by měly vypadat.  Je několik způsobu, jak označit elementy a HTML třídy jsou jedním z nich.

HTML třídy jsou atributy, které můžeme přiřadit elementům. Jakmile do elementu přidáme jméno třídy, tak ho můžeme použít v našem CSS.

Vybrané jméno třídy by mělo být slovo nebo slova popisující obsah elementu.

Přídání třídy do našeho <header> může vypadat takto:

Třídy nemusí být unikátní, tudíž několik různých elementů může mít stejnou třídu. To zjednodušuje přidávání stejných stylů spoustě elementů najednou; sami si to vyzkoušíme, hned jak se dostaneme k našim obrázkům obchodů!

Jak se CSS zapisuje

Způsobu, jakým se kód zapisuje, se říká syntaxe. Stejně jako HTML i CSS se musí správně zapsat, aby správně fungovala.

Pojďme rovnou do našeho CSS souboru a jentak na zkoušku, změňme background-color hlavičky na blue.

Je tady spousta částí, které je potřeba nastavit!

Takže, naše CSS chápe, že jsme se zaměřili na naši pojmenovanou třídu, ale ještě musíme udělat pár věcí:

  • Vložit tečku . před jméno.
  • Stylové instrukce se umísťují mezi složené závorky {}.
  • To, co stylujeme (background-color) je ihned následované dvojtečkou :
  • Pak je na řadě hodnota (v tomto případě blue).
  • Každý styl je zakončen středníkem ;

Lehce se na tohle dá zapomenou!

Uložte tento CSS soubor a obnovte okno prohlížeče; pokud nemáte stránku otevřenou, tak dvojklikem otevřete soubor "index.html" v "tutsfolder". Hezká stránka, že?!

Důležité! Teď ten styl smažte, protože naše stránka nebude mít modrou hlavičku!

Více komentářů

Do CSS můžeme také přidávat komentáře a prohlížeč je bude ignorovat, ale zapisují se jinak, než HTML komentáře.

CSS komentář se zapisuje mezi tyto symboly: /* */

CSS dokument v příkladových souborech bude obsahovat několik nápomocných komentářů, které vysvětlují některé části.

Tělo [body]

První věc, co můžeme nastavit na našem webu, je změna background-color (barva pozadí) na krásnou světle žlutou. Je několik barev, které můžeme rovnou zapsat do CSS, jako třeba blue (modrá) v příkladovém kódu výše a prohlížeč tomu bude rozumět. Pro méně běžné barvy, budeme potřebovat hexadecimální (šestnáctkové) neboli hex číslo barvy.

Všechny barvy mají své hex číslo. Prohlížeče nerozumí mnoha barvám podle názvu, ale hex čísla poznají všechny. Hex číslo pro naši světle žlutou barvu je #FAF8DA a chceme ji aplikovat na <body>, abychom vyplnili celou stránku.

Důležité! Před body se tečka nedává, protože to není jméno třídy. Na element body se odkazujeme napřímo.

Pokud vás zajímají šestnáctkové hodnoty jiných barev, tento web s hex barev se vám může hodit.

Písma [fonts]

Můžeme také nastavit font (styl písma) naší webové stránky použítím body v našem CSS.

Zatím si jenom řekneme, že je potřeba připojit link na písma od Googlu na náš HTML dokument. Jakmile je připojíme, prohlížeč to pochopí a mi je můžeme používat.

Tady je pohled na link, který musíme přidat do <head> našeho HTML (stejné místo, kde jsme připojovali náš CSS dokument!)

Pak to stačí jen uložit a přesunem se na náš CSS dokument.

Tímto se nastaví písmo v celém textu webu na Open Sans.

Hlavička [header]

Uvnitř header budeme měnit barvu textu a jeho velikost, stejně tak i velikost obrázku městečka.

První je potřeba přidat správné HTML třídy u elementů v hlavičce, abychom je mohli použít v našem CSS.

V počátečním tagu <h1> bude třída main-heading a uvnitř <img> třída town-preview:

Z našeho CSS dokumentu se nyní můžeme na tyto třídy odkazovat, pomocí jmen, které jsme jim nastavili.

Nastavili jsme poměrně velkou velikost písma na 70px. px neboli pixely, jsou něco jako body na obrazovce. Tento bod je vyplněn barvou a slouží jako měrná jednotka. Obrázek našeho městečka je taky poměrně velký, takže mu nastavíme šířku 650px.

Vlastnost color nastaví barvu textu, který v tomto případě (#205D76) je tmavě modrá.

Hlavní část [main]

Vzpomeňte si, že uvnitř main máme menší sekce, které obsahují obrázek a text. Pomocí CSS musíme nastavit velikost těch obrázků, styl nadpisů a seznamů.

Obrázky

První nastavíme velikost obrázkům budov. Abychom ji nastavili všem stejnou, tak pro všechny použijeme stejné jméno třídy.

Použijeme název třídy building pro všechny tři obrázky obchodů v našem HTML a pak jim zároveň změníme velikost v CSS, takto:

Nadpisy

Naše tři menší nadpisy budou taktéž mít stejné jméno třídy a použijeme ji ke změně barvy color a velikost písma font-size textu.

Seznamy a odkazy

Pod nadpisy jsou v každé sekci seznamy obchodů - pamatujete si je? Krom změny velikosti a barvy odkazů, změníme také barvu teček před každým odkazem.

Přidejme tedy třídu store-list do <ul> a store-link do <a> v našem HTML dokumentu a uložme ho.

Možná jste si všimli při pohledu na náš web v prohlížeči, že není moc velká mezera mezi položkami seznamu, což nevypadá moc dobře. O nastavení mezer a jejich přidávání si promluvíme později v některém z tutoriálů našeho seriálu.

Patička [footer]

Až přidáte třídu primary-footer do <footer> a created-by do <p> elementu uvnitř této patičky, můžeme také deklarovat background-color, color a font-size u textu. 

Shrnutí

V této lekci jsme se naučili propojit HTML a CSS dokument, poté jsme přidali krásné styly k našim elementům pomocí tříd. V tomto momentě prozatím ještě stránka v prohlížeči nevypadá tak, jako plně nastylovaný náhled uvedený dříve, ale podívejte se, co drobná změna barvy a velikosti dokáže! Už to bude jen lepší.

Příště budeme posouvat náš obsah na správné místo na obrazovce pomocí několika extra chytrých CSS layout technik.

Nashle příště!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.