Tvorba webu » CSS » Class, id, kontextové selektory, dědičnost

Class, id, kontextové selektory, dědičnost

Pokud chcete stylovat jeden element více styly můžete využít např. třídu (class), nebo identifikátor (id).

V praxi se to velice často využívá např. pokud budete chtít stylovat odstavce p, barvu nastavíte na black, ale budete potřebovat jeden odstavec červený.

p {
color: Black;
}
p.cervena {
color: Red;
}

Předchozí stylopis zajistí že každý odstavec bude zobrazen černým písmen a odstavce s třídou cervena (p class="cervena") se zobrazí červenou barvou.

Podobným způsobem by se dal využít identifikátor (id) jen s tím rozdílem, že stylový předpis by se musel trochu upravit, aůe pamatujte, že id s určitou hodnotou může být na stránce jen jednou.

.normal {
color : Black;
}
#modra {
color : blue;
}

V předchozím příkladě jsou zapsány jen třída a selektor pomocí nich můžete styl připojit na na libovolný element např. na p, h1-h6, div, span ... Jen je zapotřebí k elementu přidat třídu nebo identifikátor s příslušnou hodnotou (class="normal" id="modra").

Kontextové selektory

Pokud je zapotřebí nastavit jinou vlastnost elementu který je uvnitř určitého elementu použijí se kontextové selektory např. Pokud bude element p uvnitř elementu div zformátuje se pomocí nesledujícího stylového předpisu.

div p {
color : gold;
background-color : Black;
}

Dědičnost

Dědičnost si vysvětlíme na následujícím příkladu, co se stane když do hlavního nadpisu vložíme element a (odkaz), odkaz zdědí po hlavním nadpisu vlastnosti, které nemá sám nastavené.

h1{
color : Orange;
background-color : Black;
font-family : Arial, Helvetica, sans-serif;
font-size : 150%;
}

Předpokládejme kód:

<h1>Nadpis s <a href="nekam.html">odkazem</a></h1>

Odkaz tedy zdědí po nadpisu velikost, barvu pozadí a rodinu písma, barva textu odkazu bude však jiná i když ji v css nenastavíme.

Pokud budete chtít např. celému dokumentu nastavit stejné písmo nastavte ho elementu body a styl pak zdědí všechny ostatní elementy, protože jsou umístěny uvnitř body.

Kde má styl vyšší váhu

Pokud ve stylovém předpisu máte styl napsaný z nějakého důvodu několikrát vyšší váhu má později napsaný styl (resp. styl níže v kódu).

Pokud bedete chtít aby nějaký styl měl větší váhu než ostatní jednoduše za něj přidáte ! important a styl bude mít vyšší váhu a nebude ani záležet jesli byl napsán později.

Reklama