Selektory v jazyku CSS

Aby ste mohli začať pracovať s jazykom CSS, musíte pochopiť, ako sa adresuje štýlovanie v tomto jazyku. Na adresáciu sa v CSS používajú selektory – id > identifikátor a class > trieda. Ďalšou možnosťou štýlovania je adresácia html tag-u.

Identifikátor – id

Pre označenie časti – bloku html identifikátorom sa používa značka id.

See the Pen xwEOML by Peter Bohus (@PeterBo) on CodePen.15586

Ako si môžte všimnúť, v značke <div id="identifikator"> je pridaný atribút id, ktorým prehliadaču oznámite, že tento prvok sa má štýlovať pomocou identifikátoru identifikator. Následne v  CSS je deklarované štýlovanie pre tento identifikátor – v našom prípade vyfarbenie textu na červeno.

Ako použiť Identifikátor

1.) Každý html tag môže mať iba jeden Identifikátor ( id ), na vykreslenej stránke sa smie jedno id použiť iba raz! Tento identifikátor sa v kóde html môže nachádzať na každej stránke, ale na zobrazenej stránke sa smie použiť iba jediný krát a to včetne schovaného obsahu. Vyzerá to ako jeho nevýhoda, ale opak je pravdou. Keďže sa id smie na stránke použiť iba jediný krát, poskytuje nám jednoznačnosť, ktorá u triedy nemusí byť dodržaná (o tom neskôr).

2.) Identifikátor sa dá na stránke použiť ako odkaz na špecifickú časť obsahu.

See the Pen VvKmwZ by Peter Bohus (@PeterBo) on CodePen.15586

…ako odkaz je v oboch prípadoch použitý id – takzvaný anchor – kotva <a href="#dole">Dole</a>. Takýmto istým spôsobom sa dá vytvoriť odkaz na konkrétnu časť stránky, napríklad komentáre. Jednoducho sa za odkaz doplní anchor – id, ktorým je označený blog pre komentáre napr:

– predpokladajme, že blog komentárov má nastavený identifikátor na id="komentare".

3.) Identifikátor sa používa aj ako jednoznačný selektor pre jazyk JavaScript.

Ak odignorujeme tieto 3 fakty, id sa môže použiť na stránke aj viackrát. Funkčne na vykreslenie stránky to nebude mať žiaden vplyv, ale stránka neprejde validáciou. Možno to znie pateticky, ale pri písaní webu by sme sa mali snažiť o dodržanie všetkých štandardov, skôr či neskôr zistíte aj sami, že jednoznačnosť identifikátora je jeho veľkou výhodou.

V css sa označuje identifikátor pomocou značky „#“ – hash: #identifikátor

Trieda – class

Pre označenie časti – bloku html triedou sa používa značka class.

See the Pen WQGOKB by Peter Bohus (@PeterBo) on CodePen.15586

Už z príkladu je jasné, že u triedy nejde o jednoznačné označenie, ale o opakujúce sa označenie bloku v html.

Ako použiť Triedu

Trieda sa používa podobne, ako identifikátor, ale:

  • na označenie triedy sa používa class="nazov-triedy"
  • každý html tag môže mať viac tried class="prva-trieda druha-trieda" oddelené medzerou
  • každá trieda sa môže na stránke nachádzať viackrát

V CSS sa označuje trieda pomocou značky „.“ – bodka: .trieda

Rozdiel Identifikátora a Triedy v CSS

Dávnejšie som čítal porovnanie Identifikátora a Triedy v CSS k Barkódu a Sériovému číslu. V podstate to presne vystihuje rozdiel medzi nimi.

Predstavte si obchod so spotrebnou elektrotechnikou. Každý druh výrobku má Barkód, na základe ktorého sa dá zistiť, do ktorej skupiny výrobkov produkt patrí. Každý výrobok má však aj svoje sériové číslo, ktoré je jedinečné pre každý jeden produkt a u žiadneho výrobku sa neopakuje. Sériové číslo slúži na jednoznačnú identifikáciu konkrétneho výrobku. Podobne je to aj s CSS. Sériové číslo predstavuje v našej analógii Identifikátor a Barkód Triedu.

Každý jeden html prvok môže mať Identifikátor, ale aj Triedu

Z hľadiska použitia, však nieje žiaden rozdiel, či štýl aplikujete pomocou id, alebo class. V jazyku CSS neexistuje nič, čo by sa nedalo aplikovať na Identifikátor a nie na Triedu a naopak. Žiaden prehliadač nemá dopredu prednastavené vlastnosti pre Identifikátory a Triedy.

Ak ich nieje treba, nepoužívajte ich…

Aj keď používanie Identifikátorov a Tried je pre správne štýlovanie potrebné, mali by ste sa vyvarovať ich zbytočnému používaniu. Aj v tomto prípade znamená, že menej je viac. Dobrým pravidlom je používať pomenovania podľa toho, čo ten ktorý prvok znamená

Nie veľmi vhodné pomenovanie:

Vhodnejšie pomenovanie:

Interakcia medzi Identifikátorom a Triedou v CSS

Pri interakcii medzi Triedami, sa postupuje logicky. Platí tá deklarácie pre Triedu, ktorá bola načítaná neskôr, avšak Identifikátor má vždy väčšiu váhu ako Trieda. Prepisovanie štýlovania sa však deje iba pre rovnaké deklarácie.

Ak sú oba triedy definované pre jeden html tag, výsledné štýlovanie bude odsadenie html tagu od ostatných prvkov html o 5px margin: 5px a vnútorné odsadenie v samotnom html tagu bude 15px padding: 15px – trieda „dalsia-trieda“ prepísala vnútorné odsadenie – padding, ale margin nedefinovala, preto platí posledná deklarácia pre vonkajšie odsadenie – margin, definované v triede „trieda“.

See the Pen vNXyZG by Peter Bohus (@PeterBo) on CodePen.15586

Na tomto príklade vidno, ako deklarácia Triedy ktorá je v CSS definovaná nižšie, prepisuje deklaráciu triedy ktorá je definovaná vyššie. V štvrtom prípade vidno, že deklarácia Identifikátora prepisuje všetky deklarácie Tried, aj keď boli definované neskôr, ako samotný Identifikátor.

Pod čiarou

V ďalšom článku sa pozrieme na dedičnosť v jazyku CSS a ako ju použiť a obísť v prípade nutnosti.

Nezabudnite, ak sa Vám článok páčil zdieľajte ho, komentujte. Samozrejme konštruktívna kritika je vždy vítaná

(Celkom zobrazené 948 krát, 25 dnes)
Tags

Pridaj komentár

Vaša e-mailová adresa nebude zverejnená. Vyžadované polia sú označené *