Třídy a identifikátory
Čtěte také:
Třídy a identifikátory v CSS slouží k tomu, abychom mohli různé elementy formátovat různě. Například odkazy na stránce. Každý z nás asi chce mít na stránce různé druhy odkazů, ne jen jeden. Jinak seobvykle dělají odkazy v menu, jinak odkazy v textu.
Třída class v CSS
Třídy vytvoříme snadno tak, že k elementu v HTML přidáme atribut class. Jeho hodnotou bude nějaký řetězec písmen, stejný pak budeme používat v CSS stylu jako selektor.
<p class="poznamka">Nějaký text</p>
Tímto říkáme, že tento odstavec bude formátován podle pravidel třídy poznamka, na formátování ostatních odstavců se tato pravidla neprojeví. Teď musíme ještě ta pravidla určit v CSS stylu.
.poznamka {font-size: x-small; color: black}
Teď tedy budeme mít všechny odstavce stejné, jen odstavec s třídou poznamka bude vypadat jinak (malým černým písmem). Resp. jinak budou vypadat všechny odstavce s třídou poznamka, protože stejnou třídu můžeme použít u libovolného množství elementů. Dokonce i u různých elementů.
<p class="poznamka">Nějaký odstavec</p> <li class="poznamka">Položka seznamu</li> .poznamka {color: black} styl se aplikuje na všechny elementy s třídou poznamka li.poznamka {color: blue} styl se aplikuje jen na elementy li s třídou poznamka
Dědičnost
Třída každého elementu bude dědit všechny vlastnosti daného elementu a navíc bude mít své vlastní, tedy např.:
p {text-align: center; color: blue}
.poznamka {font-size:x-small; color: black}
Tímto zápisem je řečeno, že všechny odstavce budou zarovnány na střed a jejich text bude mít modrou barvu (první deklarace). Toto obecně platí pro všechny odstavce stránky. Odstavec s třídou poznamka bude mít navíc ještě menší písmo (druhá deklarace). Barva je určená v obou deklarací, v takovém případě ma vyšší prioritu deklarace zadaná později, tedy odstavec s třídou poznamka bude mít černý text. Všechny odstavce tedy budou modré, zarovnané na střed, kromě odstavce s třídou poznamka, ten bude černý, s malým písmem, zarovnaný bude také na střed.
Kontextová deklarace s třídou
<p class="poznamka"><a href=" … ">Odkaz</a> Nějaký text</p>
.poznamka a {color: red}
Možnost kontextové deklarace platí i pro třídu. Tento zápis říká, že odkazy v odstavci třídy poznamka budou červené.
Identifikátor id v CSS
Identifikátor se od třídy liší tím, že se jedná vždy o jednoznačný identifikátor. To znamená, že ho na každé stránce můžeme použít jen jednou. Tím myslím opravdu na každé stránce, tedy v každém souboru.html jen jednou, v rámci celého webu můžeme stejný identifikátor použít libovolněkrát. Oproti tomu třídu jsme mohli použít libovolněkrát na každé stránce webu.
Identifikátory se tedy používají právě tam, kde je jisté, že se daný element objeví ve stránce jen jednou. Ideálně se tedy hodí pro věci jako je box celé stránky, menu, záhlaví nebo zápatí. Identifikátory se označují dvojkřížkem (#). Jinak je jejich zápis stejný jako zápis třídy.
<div id="menu"> … </div> #menu {width:14em; background-color:black} #menu a {color: white}