Ovládněte tvorbu webu!
S námi to zvládne opravdu každý.
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;
}
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.
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;
}
Copyright (c) 2004 Tvorba Webu - Kontakt - mapa webu