Úvod do HTML a CSS - lekce 4

Podklady ke stažení

Pokračuj se svým kódem z minulé lekce.

Nemáš-li z nějakého důvodu kód k dispozici, zde je ke stažení stránka ve stavu, jak jsem ji ve videu napsal já v minulé lekci: https://czchts.cz/htmlcss04

Co je CSS?

CSS (Cascading Style Sheets) je stylovací jazyk, kterým nastavujeme vzhled stránky. Při tvorbě webu se snažíme co nejvíce oddělit obsah a vzhled. Obsah a strukturu stránky píšeme v HTML. Vzhled stránky píšeme v CSS.

Připojení CSS do HTML

CSS lze psát přímo ke konkrétním značkám nebo do hlavičky HTML souboru, ale nejčastější a nejpoužívanější způsob, který budeme používat i my, je zápis CSS do samostatného souboru.

Aby prohlížeč věděl, že daná stránka používá styl z našeho CSS souboru, musíme styl do stránky tzv. připojit.

Pro připojení externích zdrojů do stránky slouží značka <link>. Jedná se o obecnou značku, kterou lze do stránky napojit mnoho různých zdrojů - např. ikony, písma, apod. Aby prohlížeč vědět, o jaký zdroj se jedná, má značka povinný atribut rel, do kterého se jako hodnota uvádí typ zdroje. V případě CSS souboru je to rel="stylesheet".

Druhým povinným atributem je href, do kterého zapíšeme cestu k připojovanému zdroji. může to být kompletní internetová adresa (url) nebo i cesta souboru relativně ke stránce, do které zdroj vkládáme, např. href="style.css".

Značka pro připojení CSS souboru, který leží na stejné úrovni jako HTMl stránka, pak může vypadat takto:

     <link rel="stylesheet" href="style.css">

Syntaxe CSS

Syntaxe jazyka CSS je velmi jednoduchá. V základní podobě vypadá takto:

selektor {
   vlastnost: hodnota;
}

Chceme-li stylovat nějaký prvek na stránce, musíme CSS říci, o jaký prvek se jedná. K tomu slouží selektor. Selektorů je mnoho typů. Nejjednodušší je selektor typu element, kdy jako selektor uvedeme název HTML značky, např. h1 (viz dále).

Do složených závorek pak píšeme páry vlastnost: hodnota. Vlastnost je CSS vlastnost, kterou chceme nastavit, např. barvu textu nastavíme pomocí vlastnosti color. Hodnota je hodnota, na kterou chceme vlastnost nastavit. V případě naší barvy to může být např. red (červená).

Celý CSS zápis, který nastaví hlavní nadpis H1 na červenou barvu pak vypadá takto:

h1 {
     color: red;
}

Každý řádek uvnitř složených závorek {} vždy končí středníkem. Chceme-li prvku nastavit více vlastností najednou, učiníme tak uvnitř jedné deklarace. Počet vlastností v deklaraci není ničím omezený, na pořadí zápisu jednotlivých vlastností nezáleží.

h1 {
    color: red;
    background-color: yellow;
}

‍

Selektor typu element

Jedná se o nejjednodušší CSS selektor - prostě uvedeme název HTML značky, kterou chceme stylovat. Selektor na stránce vybere všechny značky tohoto typu, tj. pokud napíšeme selektor h2, obarví se všechny nadpisy druhé úrovně na stránce. Jak nastavit barvu pouze jednomu nadpisu si ukážeme v příštích lekcích.

/* ukázka selektorů typu element */
h1 {
    color: red;
    background: yellow;
}

h2 {
    color: purple;
}

p {
    background-color: lightblue;
}

a {
    color: orangered;
}

Vícenásobný selektor

Někdy potřebujeme stejnou vlastnost nastavit několika různým prvkům. Je zbytečné uvádět samostatné deklarace pro každý typ prvku. Jednotlivé selektory lze oddělit čárkou, vlastnosti ve složených závorkách se pak aplikují na všechny prvky v seznamu.

Pokud například chceme všechny nadpisy první, druhé a třetí úrovně modrou barvou:

h1,
h2,
h3 {
   color: blue;
}

Komentáře v CSS

Stejně jako v HTML, i v CSS můžeme použít komentáře - ať už na vlastní poznámky v kódu nebo na zakomentování kusu kódu, když ho chceme přechodně "vypnout", ale přitom si ho v souboru zachovat pro pozdější použití.

Komentáře v CSS mají syntaxi:

/* toto je CSS komentář */

/*
Komentář může být i na více řádků,
vše mezi hvězdičkami se v kódu ignoruje.
*/

Dědičnost v CSS

Pro většinu vlastností v CSS platí princip dědičnosti. Pokud jsou HTML prvky do sebe zanořené, můžeme CSS vlastnosti nastavit na nadřazený vnější prvek (rodič). Všechny podřízené vnořené prvky (potomci) tuto vlastnost zdědí. Nebo obráceně: podřízené prvky přejímají CSS vlastnosti ze svých nadřízených prvků.

Skvěle se to hodí třeba v případě, že potřebuji nastavit barvu nebo styl písma pro celý dokument. Nemá smysl vyjmenovávat postupně všechny prvky a nastavovat jim danou barvu. Všechny prvky na stránce jsou přeci vnořené ve značce <body> (tělo stránky). Nastavíme tedy barvu na a písmo na tělo stránky a všechny značky na stránce toto nastavení zdědí:

body {
   color: orange;
   font-family: Arial;
}

CSS vlastností se dědí na všechny potomky (i potomky potomků) až do chvíle, kdy nějakému prvku danou CSS vlastnost nastavíme konkrétně:

/*
veškerý text na stránce bude oranžovou barvou a fontem Arial
Pouze nadpisy H2 budou růžové
*/

body {
     color: orange;
     font-family: Arial;
}

h2 {
    color: pink;
}

Barvy

Barvy v CSS lze zapsat mnoha různými způsoby. Nejjednodušší způsob už jsme si ukázali.

Pojmenované barvy

V CSS existuje 141 pojmenovaných barev. Tyto vybrané barvy mají přidělené anglické názvy a v CSS stačí tento název zapsat jako hodnotu barvy. Seznamy pojmenovaných barev lze najít na internetu, zde je několik odkazy na některé z nich:

• HTML Color Codes
• W3Schools - CSS Colors
• MDN - Color Values

RGB barvy

Barvy pro zobrazování na monitoru se většinou definují pomocí RGB modelu. RGB je zkratka pro Red, Gree, Blue (červená, zelená, modrá) a dokazuje se na způsob, jakým se na moderních zobrazovačích tvoří barvy. Každý pixel (obrazový bod) na obrazovce je většinou tvořen třemi světelnými diodami - červenou, zelenou a modrou. Podle toho, jak hodně která dioda svítí, tak vnímáme výslednou barvu pixelu.

RGB model tedy barvu definuje jako tři hodnoty - množství červeného, zeleného a modrého světla. Hodnota může být 0 (=nesvítí) až 255 (=svítí na maximum). Smícháním světel dostáváme všechny další barvy. Takže např. žlutá je kombinací červené a zelené. Fialová kombinací červené a modré, apod.

Barvy v RGB lze v CSS zapisovat takto:

/* oranžová barva */
h1 {
   color: rgb(255, 140, 0);
}

/* fialová barva */
h2 {
   color: rgb(190, 20, 240);
}

Hexadecimální barvy

Tento zápis se při tvorbě webu používá nejčastěji, protože se jedná o nejkratší zápis, který ale umožňuje zapsat jakoukoliv barvu. Jedná se o stejné RGB barvy jako výše, pouze zapsané jiným způsobem.

Jednotlivé složky RGB jsou zapsané v šestnáctkové soustavě a celý kód barvy se tak vejde do šesti znaků. Před kód se uvede znak #, aby bylo jasné, že se jedná o zápis v šestnáctkové soustavě. Stejnou oranžovou a fialovou barvu z příkladu výše bychom tak mohli zapsat takto:

/* oranžová barva */
h1 {
   color: #ff8c00;
}

/* fialová barva */
h2 {
   color: #be14f0;
}

V CSS se často můžeme setkat i se zkráceným zápisem barvy s pouze třemi číslicemi. V tomto případě se barva interpretuje tak, jako by se každá číslice dvakrát opakovala. Takže např. #fff znamená #ffffff neboli bílou barvu. Barva #f83 znamená #ff8833 neboli oranžová.

Většina editorů kódu nabízí buď vestavěné nástroje pro práci s barvami, nebo je lze stáhnout do editoru jako doplněk. Kódy barev (nebo číselné hodnoty RGB) lze vidět také v grafických editorech jako je Photoshop a další. Existují i online nástroje na tvorbu barevných palet a míchání barev, například:

• Adobe Color CC
• Paletton
• HTML Color Picker
• … a spousta dalších

Kontrolní otázky

• K čemu je CSS?
• Kam zapisujeme CSS kód?
• Jak připojíme CSS kód do stránky?
• Napiš jednoduchý selektor pro nadpisy druhé úrovně.
• Napiš vícenásobný selektor, který vybere zároveň všechny odstavce i položky seznamu (<li>).
• Jaké jsou v CSS vlastnosti pro nastavení barvy textu a barvy pozadí?
• Co je nejčastější způsob zápisu barev v CSS?

‍