CSS, nebo Kaskádové styly, jsou přijatelným způsobem, jak průmyslový webový design přidávat na web vizuální styly. Pomocí CSS můžete ovládat rozvržení stránky, barvy, typografie, obrázek na pozadí a mnoho dalšího. V zásadě, pokud se jedná o vizuální styl, je CSS způsob, jak tyto styly přenést na váš web.
Když do dokumentu přidáte styly CSS, můžete si všimnout, že se dokument začíná prodlužovat. Dokonce i malý web, který má jen několik stránek, může skončit s velkým souborem CSS - a velmi velký web se spoustou a spoustou stránek jedinečného obsahu může mít velmi velké soubory CSS. K tomu se přidá responzivní weby které mají spoustu mediální dotazy zahrnuty v šablonách stylů pro změnu vzhledu vizuálu a stránky pro různé obrazovky.
Ano, soubory CSS mohou být zdlouhavé. Pokud jde o, nejde o zásadní problém výkon stránek a rychlost stahování, protože i zdlouhavý soubor CSS bude pravděpodobně docela malý (protože je to opravdu jen textový dokument). Přesto se každý kousek počítá, pokud jde o rychlost stránky, takže pokud můžete svou šablonu stylů zúžit, je to dobrý nápad. Tady může být čárka ve vaší šabloně stylů velmi užitečná!
Čárky a CSS
Možná vás zajímalo, jakou roli hraje čárka v syntaxi selektoru CSS. Stejně jako ve větách, čárka přináší do oddělovačů jasnost - nikoli kód. Čárka v a Selektor CSS odděluje více selektorů ve stejných stylech.
Podívejme se například na některé CSS níže.
th {barva: červená; }
td {barva: červená; }
p.red {barva: červená; }
div # firstred {barva: červená; }
S touto syntaxí říkáte, že chcete th značky, td tagy, tagy odstavců s červenou třídou a tag div s ID nejprve začervenaly všechny, aby měly barvu stylu červenou.
To je naprosto přijatelné CSS, ale jeho psaní tímto způsobem má dvě významné nevýhody:
- Pokud se v budoucnu rozhodnete změnit barva fontu z těchto vlastností na modrou, musíte tuto změnu provést čtyřikrát ve své šabloně stylů.
- Přidá do vaší šablony stylů spoustu dalších znaků, které nepotřebujete. Tyto 4 styly se nemusí zdát přehnané, ale pokud to budete dělat v celé své šabloně stylů, řádky se sčítají a tento list bude mnohem, mnohem větší, než je třeba.
Abychom se těmto nevýhodám vyhnuli a zefektivnili svůj soubor CSS, zkusíme použít čárky.
Čárky k oddělení selektorů
Místo psaní 4 samostatných selektorů CSS a 4 pravidel můžete kombajn všechny tyto styly do jedné vlastnosti pravidla oddělením jednotlivých selektorů čárkou. Takto by se to stalo:
th, td, p.red, div # firstred {barva: červená; }
Znak čárky v podstatě funguje jako slovo „nebo“ uvnitř selektoru. To platí pro th značky NEBO td značky NEBO značky odstavců s červenou třídou NEBO značkou div s prvním červeným ID. To je přesně to, co jsme měli dříve, ale místo toho, abychom potřebovali 4 pravidla CSS, máme jedno pravidlo s více selektory. To je to, co čárka dělá v selektoru, což nám umožňuje mít více selektorů v jednom pravidle.
Tento přístup nejen umožňuje štíhlejší a čistší soubory CSS, ale také mnohem usnadňuje budoucí aktualizace. Nyní, pokud jste chtěli změnit barvu z červené na modrou, musíte provést změnu pouze na jednom místě namísto původních 4 pravidel stylu, která jsme měli! Přemýšlejte o těchto časových úsporách v celém souboru CSS a uvidíte, jak vám to z dlouhodobého hlediska ušetří čas i prostor!
Varianta syntaxe
Někteří lidé se rozhodnou udělat CSS čitelnějším oddělením každého selektoru na vlastním řádku, místo toho, aby to psali na jeden řádek, jak je uvedeno výše. Takto by se to stalo:
th,
td,
str. červená,
div # firstred
{
červená barva;
}
Všimněte si, že za každý selektor vložíte čárku a poté pomocí klávesy Enter rozdělíte další selektor na svůj vlastní řádek. Po posledním voliči NEPŘIDÁVÁTE čárku.
Pomocí čárek mezi selektory vytvoříte další kompaktní stylový list které se v budoucnu snadněji aktualizují a které se dnes snáze čtou!