CSS, príp Kaskádové štýly, sú akceptovaným spôsobom odvetvia webového dizajnu na pridanie vizuálnych štýlov na web. Pomocou CSS môžete ovládať rozloženie stránky, farby, typografia, obrázok na pozadí a oveľa viac. V zásade platí, že ak ide o vizuálny štýl, potom CSS predstavuje spôsob, ako tieto štýly preniesť na svoj web.
Keď do dokumentu pridáte štýly CSS, môžete si všimnúť, že dokument sa začína čoraz viac predlžovať. Aj malý web, ktorý má len pár stránok, môže skončiť s veľkým súborom CSS - a veľmi veľký web s množstvom a množstvom stránok jedinečného obsahu môže mať veľmi veľké súbory CSS. Toto je ešte znásobené responzívne stránky ktoré majú veľa mediálne dotazy zahrnuté v šablónach štýlov, aby ste zmenili vzhľad vizuálu a nastavenia stránky pre rôzne obrazovky.
Áno, súbory CSS môžu byť zdĺhavé. Pokiaľ ide o, nejde o zásadný problém výkon stránok a rýchlosť sťahovania, pretože aj zdĺhavý súbor CSS bude pravdepodobne dosť malý (pretože ide skutočne iba o textový dokument). Aj keď sa jedná o rýchlosť stránky, počíta sa každý kúsok, takže ak môžete svoju šablónu štýlov zoštíhliť, je to dobrý nápad. To je miesto, kde môže byť čiarka veľmi užitočná vo vašom zozname štýlov!
Čiarky a CSS
Možno by vás zaujímalo, akú rolu hrá čiarka v syntaxi selektora CSS. Rovnako ako vo vetách, čiarka prináša do oddeľovačov jasnosť - nie kód. Čiarka v a Selektor CSS oddeľuje viac selektorov v rovnakých štýloch.
Pozrime sa napríklad na niektoré CSS nižšie.
th {farba: červená; }
td {farba: červená; }
p.red {farba: červená; }
div # firstred {farba: červená; }
Pomocou tejto syntaxe si hovoríte, že chcete th značky, td tagy, tagy odsekov s červenou farbou a tag div s ID musia mať najskôr červenú farbu štýlu.
Toto je úplne prijateľné CSS, ale jeho písanie má dve významné nevýhody:
- V budúcnosti, ak sa rozhodnete zmeniť farba písma z týchto vlastností na modrú, musíte túto zmenu vykonať štyrikrát v šablóne štýlov.
- Do šablóny štýlov pridá veľa ďalších znakov, ktoré nepotrebujete. Tieto 4 štýly sa nemusia javiť ako prehnané, ale ak v tom budete pokračovať v celej svojej šablóne so štýlmi, riadky sa sčítajú a tento hárok bude oveľa, oveľa väčší, ako je potrebné.
Aby sme sa vyhli týmto nevýhodám a aby sme zjednodušili váš súbor CSS, pokúsime sa použiť čiarky.
Oddeľovanie selektorov pomocou čiarok
Namiesto písania 4 samostatných selektorov CSS a 4 pravidiel môžete kombinovať všetky tieto štýly do jednej vlastnosti pravidla oddelením jednotlivých selektorov čiarkou. Takto by sa to stalo:
th, td, p.red, div # firstred {farba: červená; }
Znak čiarky vo vnútri selektora funguje ako slovo „alebo“. Týka sa to teda th tagy ALEBO td tagy ALEBO značky odsekov s červenou triedou ALEBO značkou div s prvou ID. To je presne to, čo sme mali predtým, ale namiesto toho, aby sme potrebovali 4 pravidlá CSS, máme jediné pravidlo s viacerými selektormi. Toto robí čiarka v selektore, čo nám umožňuje mať v jednom pravidle viac selektorov.
Tento prístup umožňuje nielen štíhlejšie a čistejšie súbory CSS, ale aj výrazne uľahčuje budúce aktualizácie. Ak teraz chcete zmeniť farbu z červenej na modrú, musíte vykonať zmenu iba na jednom mieste namiesto pôvodných 4 pravidiel štýlu, ktoré sme mali! Popremýšľajte o týchto časových úsporách v celom súbore CSS a uvidíte, ako vám to z dlhodobého hľadiska ušetrí čas i priestor!
Variácia syntaxe
Niektorí ľudia sa rozhodnú, že urobia CSS čitateľnejším tak, že každý selektor oddelia od vlastného riadku, namiesto toho, aby ho napísali do jedného riadku, ako je uvedené vyššie. Takto by sa to stalo:
th,
td,
p.red,
div # firstred
{
farba: červená;
}
Všimnite si, že za každým selektorom umiestnite čiarku a potom pomocou klávesu Enter rozbite nasledujúci selektor na svoj vlastný riadok. Po poslednom selektore nepridávate čiarku.
Čiarkami medzi selektormi vytvoríte ďalšie kompaktný štýl listu ktoré sa budú v budúcnosti ľahšie aktualizovať a ktoré sa dnes ľahšie čítajú!