|
Syntax CSS pozostáva zo selektorov a z deklarácií. Deklarácia obsahuje vždy vlastnosť a hodnotu.
Takto vyzerá príklad jednoduchej zmeny farby písma všetkých DIV elementov. Selektor definuje elementy nad ktorými chcete aplikovať definované štýly. Jedna deklarácia môže byť použitá aj s viacerými selektormi.
Toto je príklad komplikovanejšieho zápisu. Viac selektorov nad jednou deklaráciou.
Zápis deklarácií je v podstate jednoduchý. CSS obsahuje približne 94 premenných alebo príkazov. Podstatne zložitejší je však zápis selektorov. Typy selektorov Selektory určujú nad ktorými prvkami sa dané príkazy vykonajú. Málokedy chceme vykonať zmeny nad všetkými elementami na stránke. Je preto dôležité vybrať len tie elementy, ktoré chceme ovplyvniť. Na to slúžia rôzne zápisy. Zápis
| Popis
| | # | Vyberie element s ID ktoré má rovnaký názov. Pozor, podľa špecifikácie HTML musia byť na stránke len unikátne ID. <style>
#asd { color:red; }
</style>
<div id='asd'>TEST</div>
| | . | V zápise je bodka. Vyberie elementy ktoré majú rovnaký názov triedy. <style>
.asd { color:red; }
</style>
<div class='asd'>TEST</div>
| | DIV | Zmena sa prejaví na všetkých DIV elementoch bez ohľadu na to kde sú umiestnené. Ak použijete * zmena sa prejaví nad všetkými elementami. | DIV SPAN
| Ovplyvní všetky elementy SPAN ktoré sú potomkom elementu DIV. | | DIV > SPAN | Ovplyvní všetky elementy SPAN, ktoré sú priamym potomkom elementu DIV. <head>
<style>
div > span {
color:red;
}
</style>
</head>
<body>
<div>TEST
<span>QWE</span> <!-- Toto je priamy potomok DIV-->
<ul><span>ASD</span></ul> <!-- Toto NIE je priamy potomok DIV-->
</div>
</body>
</html>
V tomto prípade SPAN v UL elemente nebude ovplyvnený, keďže nie je priamym potomkom. | | DIV:first-child | Ovplyvní len DIV elementy ktoré sú prvé voči rodičovi. <html>
<head>
<style>
span:first-child {
color:red;
}
</style>
</head>
<body>
<div>TEST <!-- Rodič SPAN elementov-->
<span>QWE</span> <!-- Prvý potomok DIV elementu-->
<span>ASD</span> <!-- Druhý potomok -->
</div>
</body>
</html>
Druhý potomok nebude ovplyvnený. | | A:link | Vyberie elementy typu link (a), ktorý ešte nie je navštívený. Užívateľ ešte neklikol na tento link. Zápis DIV:link nedáva veľký zmysel, lebo DIV nie je link.
| | A:visited | Ak už užívateľ klikol na link, tak sa tento link považuje za navštívený (:visited). Navštívený link tak môžete zafarbiť inou farbou ako nenavštívený.
| | DIV:active | Ovplyvní DIV elementy, ktoré užívateľ aktivoval stlačením tlačidla. <html>
<head>
<style>
a:active {
color:red;
}
</style>
</head>
<body>
<a href=''>asd</a><br />
<a href=''>qwe</a>
</body>
</html> Pri kliknutí na link sa tento zafarbí na červeno. Po uvoľnení tlačítka nadobudne pôvodnú farbu. | | DIV:hover | Ovplyvní elementy DIV nad ktorými užívateľ prejde myšou, alebo prstom v prípade dotykových zariadení.
| | DIV:focus | Používa sa hlavne pri INPUT elementoch, keď užívateľ označí takýto element aby mohol začať písať. Tento element získa focus. Tiež to znamená že takýto element príma vstupy z klávesnice. Focus môže mať len jeden element na stránke.
| | DIV:lang(xx) | Ovplyvní elementy ktoré majú definovaný atribút lang = xx <html>
<head>
<style>
body:lang(sk) {
color:red;
}
</style>
</head>
<body lang=sk>
<p>Toto je SK text</p>
</body>
</html>
P element bude červený. Toto je užitočné keď chcete pri každom jazyku trochu inak naformátovať text. Selektory :link, :visited, :active, :hover, :focus, :first-child a :lang sú takzvané psedo selektory. | | DIV + SPAN | Vyberie element SPAN ktorý má súrodenca element DIV. <html>
<head>
<style>
div + span {
color:red;
}
</style>
</head>
<body>
<div>Text
<span>Span Text</span> <!-- Toto je potomok, nie súrodenec-->
</div>
<span>Dalsi text</span> <!-- Toto je súrodenec DIV-->
</body>
</html>
„Span text“ bude v tomto prípade neoznačený. „Dalsi text“ bude označený červenou farbou, keďže má súrodenca DIV. | | DIV[asd] | Vyberie všetky DIV elementy, ktoré majú atribút asd nastavený na akúkoľvek hodnotu. <html>
<head>
<style>
div[asd] {
color:red;
}
</style>
</head>
<body>
<div asd='asd'>Text</div>
</body>
</html>
Atribút „asd“ nie je samozrejme validný podľa HTML špecifikácie. HTML jazyk ale umožňuje takéto „rozširovanie“ o ľubovolné atribúty. Veľmi dobre to napríklad používa DOJO toolkit.
Výber podľa atribútu sa dá zapísať aj takto:
DIV[asd=”qwe”] V tomto prípade sa vyberú len tie elementy, ktoré majú atribút asd=”qwe”.
Ďalší zápis je DIV[asd~=”qwe”], kedy sa vyberú DIV elementy, ktoré majú aspoň jednu hodnotu atribútu rovnú „qwe“. <html>
<head>
<style>
div[asd~="qwe"] {
color:red;
}
</style>
</head>
<body>
<div asd='asd qwe'>Text</div>
</body>
</html>
Samozrejme selektory je možné kombinovať. Napríklad
div[asd=”qwe”][id=”test”][class=”red”].
Naschvál som použil výber podľa atribútov id a class. To je duplicita zápisu selektorov keď je možný zápis
div.moja_trieda čo je ekvivalent div[class~=moja_trieda].
Tak isto
div#moje_id čo je ekvivalent div[id=”moje_id”]
Skrátený zápis je samozrejme efektívnejší z hľadiska rýchlosti zápisu aj veľkosti kódu. |
Dôležitosť
Aby to nebolo také jednoduché, jednotlivé selektorý sú si nadradené.
Napríklad, výber podľa ID má prednosť pred výberom podľa triedy. Výber zadefinovaný cez atribút style má zas prednosť pred všetkými selektormi.
Vyskúšajte si: <html>
<head>
<style>
.asd {
color:red;
}
#qwe {
color:blue;
}
</style>
</head>
<body>
<div id='qwe' class='asd' style='color:green'>TEST</div>
</body>
</html>
Výsledok bude zelený text „TEST“. Ak zmažete style atribút. „TEST“ bude modrý.
Záver Problematika selektorov je dosť široká, odporúčam vyskúšať si aspoň časť selektorov. Dôležité je pochopiť čo je potomok, rodič alebo súrodenec.
|
Technológie 
