Kaskádové štýly definujte vzhľad prvku webovej stránky zaháknutím sa za atribútmi, ktoré pre tento prvok použijete. Tieto atribúty môžu byť ID alebo trieda a rovnako ako všetky atribúty pridávajú užitočné informácie k prvkom, ku ktorým sú pripojené.
V závislosti od toho, ktorý atribút pridáte k prvku, môžete napísať selektor CSS a použiť znak potrebné vizuálne štýly, ktoré sú potrebné na dosiahnutie vzhľadu a štýlu pre tento prvok a webovú stránku ako celok.
Zatiaľ čo ID alebo triedy fungujú s cieľom zapojiť sa do nich pomocou pravidiel CSS, moderný webový dizajn metódy uprednostňujú triedy pred ID, čiastočne preto, lebo sú menej konkrétne a celkovo ľahšie sa s nimi pracuje.
Jedna alebo viac tried v CSS?
Vo väčšine prípadov prvku priradíte jeden atribút triedy, ale v skutočnosti nie ste obmedzený iba na jednu triedu, ktorá je rovnaká ako u vás s ID. Zatiaľ čo živel môže mať iba jeden atribút ID, môžete prvku dať niekoľko tried a v niektorých prípadoch to uľahčí štýl vašej stránky a oveľa viac flexibilný.
Ak potrebujete k prvku priradiť niekoľko tried, pridajte ďalšie triedy a jednoducho ich oddeľte medzerou v atribúte.
Tento odsek má napríklad tri triedy:
Toto by bol text odseku
Toto nastaví na značku odseku nasledujúce tri triedy:
- Pullquote
- Najlepšie
- Vľavo
Všimnite si medzery medzi každou z týchto hodnôt triedy. Tieto priestory ich nastavujú ako odlišné jednotlivé triedy. To je tiež dôvod, prečo názvy tried nemôžu obsahovať medzery, pretože by ich to nastavilo ako samostatné triedy.
Akonáhle budete mať svoje hodnoty triedy v HTML, potom ich môžete vo svojom CSS priradiť ako triedy a použiť štýly, ktoré chcete pridať. Napríklad.
.pullquote {... }
.featured {... }
p.left {... }
V týchto príkladoch sa dvojice deklarácií a hodnôt CSS objavujú vo vnútri zložených zátvoriek, čím sa tieto štýly použijú na príslušný selektor.
Ak ty nastaviť triedu na konkrétny prvok (napríklad, p.vľavo), môžete ho naďalej používať ako súčasť zoznamu tried; uvedomte si však, že to ovplyvní iba tie prvky, ktoré sú uvedené v CSS. Inými slovami, p.vľavo štýl sa bude vzťahovať iba na odseky s touto triedou, pretože váš selektor v skutočnosti hovorí, že sa má použiť na „odseky s hodnotou pre triedu vľavo„Naopak, ďalšie dva selektory v príklade neurčujú určitý prvok, takže by sa použili na akýkoľvek prvok, ktorý používa tieto hodnoty triedy.
Viacero tried, sémantika a JavaScript
Ďalšou výhodou použitia niekoľkých tried je to, že zvyšuje možnosti interaktivity.
Aplikujte nové triedy na existujúce prvky pomocou JavaScriptu bez toho, aby ste odstránili niektorú z počiatočných tried. Na definovanie súboru môžete použiť aj triedy sémantika prvku - pridať ďalšie triedy, aby ste definovali, čo tento prvok znamená sémanticky. Tento prístup je taký Mikroformáty Tvorba.
Výhody viacerých tried
Vrstvenie niekoľkých tried môže uľahčiť pridávanie špeciálnych efektov k prvkom bez toho, aby ste pre daný prvok museli vytvárať úplne nový štýl.
Napríklad na plávajúce prvky vľavo alebo vpravo môžete napísať dve triedy:
vľavo.
a.
správny.
len s.
plavák: vľavo;
a.
plavák: vpravo;
v nich. Potom, kedykoľvek by ste mali prvok, ktorý potrebujete na vznášanie sa vľavo, jednoducho pridáte triedu „left“ do jej zoznamu tried.
Tadiaľto však vedie tenká čiara. Pamätajte, že webové štandardy diktujú oddelenie štýlu a štruktúry. Štruktúra je riešená pomocou HTML, zatiaľ čo štýl je v CSS. Ak je váš dokument HTML naplnený prvkami, ktoré majú všetky názvy tried, napríklad „červená“ alebo „ľavá“, čo sú názvy, ktoré sú to diktovať, ako majú prvky vyzerať, a nie to, čo sú, prekračujete túto hranicu medzi štruktúrou a štýlom.
Nevýhody viacerých tried
Najväčšou nevýhodou použitia viacerých simultánnych tried na vašich prvkoch je to, že môžu byť trochu nepriehľadné na pozeranie a správu v priebehu času. Môže byť ťažké určiť, aké štýly ovplyvňujú prvok a či na neho majú vplyv nejaké skripty. Mnoho dnes dostupných rámcov, napríklad Bootstrap, intenzívne využíva prvky s viacerými triedami. Ak nie ste opatrní, tento kód sa vám môže veľmi rýchlo vymknúť z rúk a ťažko s ním pracovať.
Ak použijete viac tried, riskujete tiež, že štýl pre jednu triedu prepíše štýl inej. Táto kolízia potom môže sťažiť zistenie, prečo sa vaše štýly nepoužívajú, aj keď sa zdá, že by mali. Buďte si stále vedomí špecifickosti, a to aj pri atribútoch použitých pre tento jeden prvok.
Pomocou nástroja, ako sú nástroje správcu webu v prehliadači Google Chrome, môžete ľahšie zistiť, ako vaše triedy ovplyvňujú vaše štýly, a vyhnúť sa tak problémom konfliktných štýlov a atribútov.