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á se dvou částí nejprve selektor a pak 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 pak deklarace, deklarace musí být uzavřena do znaku { a }, každá vlastnost se odděluje od hodnoty dvojtečkou (:), pokud zapisujete více vlastností musí se oddělit středníkem (;).

Pokud chcete pro více selektorů napsat stejnou deklaraci např. 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 použít třídu, nebo identifikátor jako selektor.

U každého elementu v html můžete přidat atributy class a id pomocí kterých můžete na daný element navázat styl, jako hodnoty se uvádí libovolné jméno (nesmí začínat číslicí!).

Pokud např. 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 id v hlavním nadpisu napíšete např. "modre" můžete pak použít styl 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, narozdíl od třídy, jen jednou.

Komentáře /* */

Aby byl styl více čitelný a jasný můžete si 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ů.

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