Tvorba webu » CSS » Základy práce se styly, selektory a deklarace

Základy práce se styly, selektory a deklarace

Práce se styly není příliš obtížná. Každý styl se skládá ze dvou částí: nejprve je selektor a potom deklarace.

Následující styl zajistí, že všechny odstavce budou zobrazeny bíle s černým pozadím.

p {
color:white;
background-color:black;
}

Vše se musí zapisovat jako v příkladu: nejdříve selektor a potom deklarace. Deklarace musí být uzavřena do znaků { a }, každá vlastnost se od hodnoty odděluje dvojtečkou (:) a více vlastností se odděluje středníkem (;).

Pokud chcete pro více selektorů napsat stejnou deklaraci, například u nadpisů, napíšete selektory za sebou a oddělíte je čárkami. Následující příklad zajistí, že nadpisy h1–h4 se budou zobrazovat zeleně se zlatým pozadím.

h1, h2, h3, h4 {
color:green;
background-color:gold;
}

Třídy a identifikátory (class, id)

Pokud potřebujete pro určitý element nastavit jiné zobrazení, například když všechny nadpisy nastavíte nazeleno a jeden budete chtít modrý, můžete jako selektor použít třídu nebo identifikátor.

Ke každému elementu v HTML můžete přidat atributy class a id, pomocí kterých lze na daný element navázat styl. Jako hodnotu lze uvést libovolné jméno (nesmí začínat číslicí!).

Pokud například u nadpisu použijete třídu a jako hodnotu uvedete "modre":

<h1 class="modre">Nadpis</h1>

Pak si můžete vytvořit styl.

.modre {
color:blue;
}

Nebo

h1.modre {
color:blue;
}

Stejným způsobem můžete použít identifikátor. Pokud jako hodnotu atributu id v hlavním nadpisu napíšete například "modre", můžete styl použít následovně:

#modre {
color:blue;
}

Nebo

h1#modre {
color:blue;
}

Pozor! Identifikátor id s určitým jménem by měl být na stránce na rozdíl od třídy použit jen jednou.

Komentáře /* */

Aby byl styl čitelnější a přehlednější, můžete do něj přidávat komentáře, které prohlížeč ignoruje. Komentář se vkládá mezi znaky /* a */ a může být i přes několik řádků dlouhý.

Je dobré se v komentářích vyvarovat psaní písmen ě š č ř ž, protože některé prohlížeče s tím mají problémy.

h1, h2, h3 {/* nadpisy budou hezky zelené se zlatým pozadím*/
color:green;
background-color:gold;
}

Reklama