Po tom, co jsi pochopil/a základy kaskádových stylů, se můžeme odhodlat k jejich složitějšímu použití.
Třídy
Když chci změnit vlastnosti jednoho nebo skupiny elementu, můžu použít třídy - tedy atribut class (už jsem ho zmiňoval zde). Zvolit můžu libovolný název, ten potom v CSS označím tečkou:
<head><!-- Zde může být titulek, vlastnosti dokumentu --><style>.upravovano{color:#fff;/* Bílá */background-color:black; }</style></head><body><p>Normální text (černý s bílým pozadím)</p><pclass="upravovano">Bílý text s černým pozadím</p><h2class="upravovano">Také upravený text, nadpis</h2></body>
Pokud chci použít tento styl pouze na odstavec s danou třídou, můžu zkombinovat to, co už umím:
p.upravovano{%vlastnost%:%hodnota%; }
Použití ID
ID není primárně určeno ke stylům, ale dá se použít. Třídu můžeš přiřadit ke kolika elementům chceš, počet není omezený. To u ID neplatí - je jedinečné (teda, mělo by být). Dva elementy tak nesmí mít stejné ID!
Při označování v CSS místo tečky používáme křížek #.
#nadpis{font-size:3rem; }
<h1id="nadpis">Velký nadpis</h1>
Vzhledem k tomu, že ID je jedinečné, nemusím řešit kombinace jako se třídami. Ano, h1#nadpis bude fungovat, ale je to zbytečné.
Pseudoelementy
Pseudoelementy zapisujeme za dvojtečku a nadále upravují, kdy se dané pravidlo použije. Nejlépe vysvětlím na příkladu:
<head><!-- ... --><style>p:first-child{/* Pravidlo se použije pouze pro první nalezený odstavec */color:red;font-style:italic; }</style></head><body><p>První, upravený text</p><!-- První odstavec v dokumentu, CSS pravidlo se použije --><p>Druhý, neupravený text</p><!-- Pravidlo se už nepoužívá --></body>
Mezi nejčastější pseudoelementy potom patří ty následující:
:hover- Použije se, když na element najedu myší:active- Použije se, když na element právě klikám myšía:link- Používá se jen u tagu<a>, pokud jsem na něj ještě neklikla:visited- Používá se jen u tagu<a>, pokud jsem na něj už klikl
A právě u odkazů (tj. značek/tagů <a>) jde pseudoelementy vysvětlit nejlépe.
a:link{color:yellow; }a:hover{color:blue;font-weight:bold; }a:active{text-decoration:underline; }a:visited{color:green; }
Příkladem, jak tato pravidla fungují, je TENTO ODKAZ (nejlépe funguje na počítači).
Jak jdou pravidla za sebou
Všimni si, že pokud na odkaz klikneš a pak na něj znovu najedeš myší, jeho barva se na modro už nemění. Již jednou jsem totiž zmiňoval, že v CSS má vždy přednost to úplně poslední.
To můžeme změnit, přidáme-li k vlastnosti slovíčko !important.
a:hover{color:blue!important;font-weight:bold; }a:visited{color:green; }
V tomto případě už by se barva měnila, protože je v dříve uvedeném pravidle označena jako „důležitá“. Kdyby ale byly vlastnosti v obou pravidlech důležité, použije se zas ta poslední.
Sloučení pravidel
Potřebuji-li stejné pravidlo použít pro více různých tagů, nemusím jej opisovat. Stačí značky (s případnými třídami či pseudoelementy) oddělit čárkami.
p,img.profilovy-obrazek{/* Vlastnosti */}
Za pomoc s tvořením článku znovu děkuji stránce Jak psát web. Pro doplňující informace se tam můžeš zajít podívat!
Víc tu toho prozatím nemám, tématu kaskádových stylů se ale rozhodně ještě hodlám věnovat! Kdo si počká, ten se dočká.