CSS - selektory

Cascading Style Sheets, česky “kaskádové styly” je jazyk, který definuje vzhled HTML dokumentu. V současnosti se používá specifikace verze 3.

1️⃣ Blok deklarace

Blok deklarace CSS se skládá ze selektoru a bloku deklarací vlastnost: hodnota oddělené dvojtečkou. Každá z deklarací se ukončuje středníkem. Celý blok je uzavřen do složených závorek { }.

🌍 Dokumentace na https://www.w3schools.com/css/default.asp

2️⃣ Umístění

Deklaraci lze do HTML dokumentu umístit třemi různými způsoby (způsoby je možné navzájem kombinovat). Podrobně na https://www.w3schools.com/css/css_howto.asp.

🖥️ Video tutoriál: Tři způsoby vložení CSS na stránku (35 min)

A) Externí

Definice stylů se vkládají do jiného souboru (má příponu .css). Smyslem tohoto řešení je, že jeden css soubor ovlivní více html stránek - všechny tak mají jednotný vzhled.

Vkládá se značkou <link> do hlavičky dokumentu (bloku <head>):

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

B) Interní

Definice stylů se o vkládají do hlavičky stránky mezi značky <style></style>:

<style>
    h1 {
        color: red; /* cervena barva */
    }
</style>

...

</head>

C) Inline

Styl se vkládá přímo ke značce do atributu style="...". Pokud vhodná značka není, lze využít neutrální značky:

<span></span> řádkový element
<div></div> blokový element

<p style="color: red;">červený text</p>
<p>text <span style="color: red;">červený</span> text</p>

Inlinový styl má nejvyšší prioritu – “přebije” styly externí i interní a interní styl má vyšší prioritu než externí.

Text odstavce v ukázce níže bude červený a zarovnaný na střed:

<style>
p {
    text-align: center;
    color: green;
}
</style>
...
<p style="color: red;">...text odstavce...</p>

3️⃣ Selektory

Selektor je html značka/značky, třída apod., který definuje, které styly se ne něj budou aplikovat.

selektor {
    vlastnost: hodnota;
    vlastnost: hodnota;
}

🖥️ Video tutoriál: CSS třídy (32 min)

Níže jsou uvedeny běžné typy selektorů (s těmi si vystačíme). Další typy jsou na webu https://www.w3schools.com/css/css_selectors.asp.

A) Selektor typu

Selektor typu aplikuje styl na všechny značky se stejným názvem. Název značky se píše bez lomených závorek h1, nikoliv <h1>.

<style>
    p {
      text-align: center;
      color: red;
    } 
</style>

<p>Červený odstavec zarovnaný na střed.</p>
<h2>Nadpis ovlivněn nebude</h2>
<p>Tento bude také červený a na střed.</p>

Více selektorů se odděluje čárkou (opravdu čárka, mezera by měla jiný význam a tedy výsledný efekt):

<style>
	h2, p {
	    text-align: center; 
	    color: red;
	} 
</style>

<p>Červený odstavec zarovnaný na střed.</p>
<h2>Nadpis bude také červený a na střed</h2>
<p>Červený odstavec zarovnaný na střed.</p>

B) Selektor potomka

Selektor potomka aplikuje styly na potomka rodičovského selektoru. Potomek se odděluje mezerou.

<style>
	p a {
	    color: red;
	}
</style>

<p> ... <a href="#">červený odkaz</a> ... </p>
<h2> ... <a href="#">nebude červený</a> ... </h2>
<div> ... <a href="#">nebude červený</a> ... </div>

C) Selektor třídy

Selektor třídy aplikuje styly na všechny prvky, které mají stejný atribut třídy (class="nazev"). Selektor musí začínat tečkou následovaný názvem třídy (.nazev).

Název třídy v definici začíná tečkou (.abc), kdežto u značky se píše bez tečky (abc). Názvy tříd jsou citlivé na velikost písmen a nesmí obsahovat mezery.

<style>
    .doprostred {
        text-align: center;
        color: red;
    }
</style>

<h1 class="doprostred">Červený nadpis zarovnaný na střed</h1>
<p class="doprostred">Červený odstavec zarovnaný na střed.</p>

Také lze určit, že třída má ovlivnit pouze určité prvky HTML:

<style>
	p.doprostred {
	    text-align: center;
	    color: red;
	}
</style>

<h1 class="doprostred">Tento nadpis nebude ovlivněn</h1>
<p class="doprostred">Tento odstavec bude červený a zarovnán na střed.</p>

🌍 Dokumentace a ukázka na developer.mozilla.com

(D) Pseudotřída `:hover`

Je jedna z celkem 50 pseudotříd které jsou v CSS dostupné. Vlastnosti uvedené v této konkrétní pseudotřídě se aplikují při přejezdu myši. Lze spojit s jakoukoliv značkou. Běžně se využívá ve spojení s hypertextovým odkazem, pro tvorbu rozbalovacích nabídek na webových stránkách, zvýraznění řádků u tabulek, pro efekty u obrázků a mnoha dalším věcem.

Použití je snadné. Za značku (na kterou se má styl vztahovat) se přidá klíčové klíčové slovo :hover.

🌍 Více o pseudotřídách na w3schools.com/css/css_pseudo_classes.asp

<style>
a:hover {                   /* po najetí myší na odkaz se */
    color: red;             /* písmo odkazu obarví červeně */
    text-decoration: none;  /* a nebude podrtžené */
}
</style>

Hover + třída

Často se využívá v kombinaci se selektorem potomka, kdy rodičovský element je buď značka nebo třída. Tato kombinace umožní vytvořit např. menu na webové stránce.

V ukázce níže se efekt :hover aplikuje pouze na odkazy (a) uvnitř elementu div s třídou .menu:

<style>
div.menu a:hover {
    color: red;             /* písmo odkazu obarví červeně */
    text-decoration: none;  /* a nebude podrtžené */
}
</style>

<div class="menu">
	<a href="onas.html">O nás</a>
	<a href="kontakty.html">Kontakty</a>
</div>

4️⃣ Vlastnosti a hodnoty

Existuje velké množství různých CSS vlastností a téměř neomezený počet různých hodnot. Každá vlastnost definuje, jaké jsou platné hodnoty. Pokud je v definici chyba, prohlížeč ji ignoruje – neaplikuje ji.

Některé vlastnosti mají více hodnot v přesně daném pořadí (např. border: 2px solid red;). Hodnoty se oddělují mezerou.

vlastnost: hodnota;
vlastnost: hodnota_A hodnota_B hodnota_C;

🌍 developer.mozilla.org/en-US/docs/Web/CSS/Reference

Barvy

🌍 Pojmenované barvy (w3schools.com)

Diagram vlastností (jako ve Wordu)

Běžné CSS vlastnosti (jako ve Wordu)