CSS základná terminológia
Martin Valent / 15. 11. 2010, 00:00
Základné pojmy (terminológia) použité v článkoch seriálu CSS3. Vysvetlenie pojmov ako sú selektor elementu alebo deklarácia.
Najzákladnejší zápis v CSS:
selektor:pesudoelement/pesudotrieda
{
deklarácia - vlastnosť:hodnota;
}
Rada: Aby ste po klávesnici nehľadali znaky, ktoré sa používajú v CSS alebo aj pri programovaní v C, JAVA, atď. Môžete použiť nasledovné zápisy pre najpoužívanejšie znaky, okrem písmen:
{ - alt + 123
} - alr + 125
[ - alt + 91
] - alt + 93
# - alt + 35 alebo alt + x
& - alt + 38
< - alt + 60
> - alt + 62
- pseudotrieda: hover, link, visited, active,...
- pseudoelement: before, after, first-line,...
Selektory
- selektory elementu: V praxi je to element (tag), ktorý sa nachádza v HTML dokumente. To čo sa definuje jednému selektoru elementu (napríklad DIV) platí každému elementu (tagu, napríklad tomu DIVu) v HTML. Selektory elementu sú napríklad: span, div, h(1,2,3,4,5,6), strong, em, li, ul,... Na rozdiel od iných selektorov, sa selektory elementu zapisujú bez bodky alebo # (mriežky).
- selektor identifikátora: Keď je potrebné nastaviť deklaráciu jednému tagu v HTML dokumente, teda tak, aby tieto deklarácie neovplyvňovali ostatné elementy rovnakého typu, použijú sa práve tieto identifikátory. Teda do vybraného tagu v HTML dokumente pridáme identifikátor, ktorý nejako nazveme, a tento názov použijeme v CSS pre určenie vlastností. Ich skratka je ID, napríklad:
<span id="modrytext">Ahoj.</span>
...v CSS:
#modrytext {
color: blue;}
...možná alternatíva:
span#modrytext {
color: blue;}
V CSS kóde sa zapisuje pred názov mriežka #.
- selektor triedy: Funguje rovnako ako identifikátor, lenže namiesto mriežky zapisujeme bodku. To, či budete používať identifikátor alebo triedu je na vás, nič s tým nepokazíte (v seriáli CSS3 budem používať triedy, keďže som na ne zvyknutý). Skratka je CLASS, napríklad:
<span class="modrytext">Ahoj.</span>
...v CSS:
.modrytext {
color: blue;}
...možná alternatíva:
span.modrytext {
color: blue;}
Rovnako ako v identifikátoroch sa zapisuje pred názov, v tomto prípade, bodka.
- selektor následníka: Zápis môže vyzerať aj takto: ul li li, teda deklarácia bude platiť pre il, ktorý sa nachádza v il, a ten sa tiež nachádza v ul. Tento selektor sa používa hlavne vtedy, keď chceme, aby sa, dajme tomu, po príchode kurzora na istú časť stránky zmenila iná časť stránky. Bez následníka sa mení len tá časť, na ktorú spadá pseudotrieda. Jednoduché použitie následníka:
<html>
<body>
<style>
.prvy:hover .druhy {color:red;}
</style>
<span class="prvy"> Ahoj <span class="druhy">Peter</span></span>
</body>
</html>
Nevýhodou je to, že musíme zapisovať tag v tagu (<tag1><tag2></tag2></tag1>). Riešenie tejto nevýhody je zapisovanie pomocou selektoru súrodenca. Niekedy je potrebné riešiť situácie pomocou selektoru potomka, vtedy je ovplyvňovaný priamy potomok daného selektoru (zápis: ul > li >li).
- selektor súrodenca: Zápis môže vyzerať aj takto: #prvé + #druhé + #tretie. Súrodenca, alebo nasledujúci selektor určujeme zápisom +. Napríklad:
<html>
<body>
<style>
.prvy:hover + .druhy {color:red;}
</style>
<span class="prvy"> Ahoj </span><span class="druhy">Peter</span>
</body>
</html>