CSS - selektory

Cascading Style Sheets, česky “kaskádové styly” je jazyk, který definuje vzhled HTML dokumentu.

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 { }.


2️⃣ Umístění

A) 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> (řádková) nebo <div> (bloková).

<strong style="color: red;">zvýraznění červený text</strong> 

B) Interní

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

...
<style>
    h1 {color: red;}
</style>
</head>

C) 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. Samotný css soubor nemá žádnou hlavičku, obsahuje pouze sady pravidel a popř. komentáře.

...
<link href="styly.css" rel="stylesheet" type="text/css">
</head>

3️⃣ Selektory

  1. Selektor je html značka, značky, třída, identifikátor apod, na které se má aplikovat styl uzavřený ve složených závorkách.

  2. Název značky se píše bez lomených závorek h1, nikoliv <h1>.

    selektor {
        vlastnost: hodnota;
        vlastnost: hodnota;
    }
    

Níže jsou uvedeny běžné typy selektorů (s těmi si vystačíme). Další typy jsou na webech developer.mozilla.org nebo w3schools.com.

A) Selektor typu

<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:

<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

<style>
	p strong {color: red;} /* červený bude pouze text em, pokud je v odstavci */
</style>

<p> ... <strong>bude červený</strong> ... </p>
<h2> ... <strong>nebude červený</strong> ... </h2>
<div> ... <strong>nebude červený</strong> ... </div>

Tento zápis říká, že všechny elementy, které jsou v odstavci obsažené, budou zelené (respektive zelený bude obsah, který je do nich zabalen):

<style>
	p * {color: red;} /* hvězdička je zástupný symbol pro libovolnou značku */
</style>

<p> ... <strong>bude červený</strong> ... </p>
<p> ... <em>bude červený</em> ... </p>
<h2> ... <strong>nebude červený</strong> ... </h2>

C) Selektor třídy

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

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

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

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

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

Prvky HTML mohou také odkazovat na více než jednu třídu.

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

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

(E) Selektor identifikátoru

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

<h1 id="center">Červený nadpis zarovnaný na střed</h1>

(F) Selektor atributu

Selektor atributu porovnává elementy (značky) na základě přítomnosti nebo hodnoty daného atributu. Jakási obdoba podmíněného stylu. 👉 Zde na této stránce uvádím pouze pro demonstraci možností CSS. Povinně učit se to nemusíte.

/* všechny <a> s hodnotou href "https://example.org" */
a[href="https://example.org"] {
  color: green;
}
/* všechny <a> končící na .org */
a[href$=".org"] {
  font-style: italic;
}

(G) Pseudotřída :hover

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

4️⃣ Vlastnosti a hodnoty

Barvy

Diagram vlastností (jako ve Wordu)

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