Kaskádové styly definujte vzhled prvku webové stránky připojením k atributům, které na tento prvek použijete. Tyto atributy mohou být ID nebo třída a stejně jako všechny atributy přidávají užitečné informace k prvkům, ke kterým jsou připojeny.
V závislosti na tom, který atribut přidáte k prvku, můžete napsat selektor CSS a použít nezbytné vizuální styly, které jsou potřebné k dosažení vzhledu a chování daného prvku a webové stránky jako celek.
Zatímco ID nebo třídy fungují za účelem zapojení do nich pomocí pravidel CSS, moderní webový design metody upřednostňují třídy před ID, částečně proto, že jsou méně konkrétní a celkově se s nimi snadněji pracuje.
Jedna nebo více tříd v CSS?
Ve většině případů elementu přiřadíte atribut jedné třídy, ale ve skutečnosti nejste omezeni pouze na jednu třídu tak, jak jste s ID. Zatímco prvek může mít pouze jeden atribut ID, můžete prvku dát několik tříd a v některých případech to usnadní vaši stránku snadnějšímu stylu a mnohem více flexibilní.
Pokud potřebujete k prvku přiřadit několik tříd, přidejte další třídy a jednoduše je oddělte mezerou ve svém atributu.
Například tento odstavec má tři třídy:
To by byl text odstavce
Tím se na značce odstavce nastaví následující tři třídy:
- Pullquote
- Doporučené
- Vlevo, odjet
Všimněte si mezery mezi každou z těchto hodnot třídy. Tyto prostory je nastavují jako odlišné jednotlivé třídy. To je také důvod, proč názvy tříd nemohou mít v sobě mezery, protože by je nastavily jako samostatné třídy.
Jakmile budete mít své hodnoty třídy v HTML, pak je můžete v CSS přiřadit jako třídy a použít styly, které chcete přidat. Například.
.pullquote {... }
. doporučeno {... }
p.left {... }
V těchto příkladech se deklarace CSS a páry hodnot objevují uvnitř složených závorek, což je způsob, jakým by se tyto styly aplikovaly na příslušný volič.
jestli ty nastavit třídu na konkrétní prvek (například, p. vlevo), můžete jej stále používat jako součást seznamu tříd; mějte však na paměti, že to ovlivní pouze ty prvky, které jsou specifikovány v CSS. Jinými slovy p. vlevo style se bude vztahovat pouze na odstavce s touto třídou, protože váš selektor ve skutečnosti říká, že jej použije na „odstavce s hodnotou třídy vlevo, odjet„Naproti tomu další dva selektory v příkladu neurčují určitý prvek, takže by se vztahovaly na jakýkoli prvek, který používá tyto hodnoty třídy.
Více tříd, sémantika a JavaScript
Další výhodou použití několika tříd je to, že zvyšuje možnosti interaktivity.
Aplikujte nové třídy na existující prvky pomocí JavaScriptu, aniž byste odebrali některou z počátečních tříd. Můžete také použít třídy k definování sémantika prvku - přidejte další třídy, abyste definovali, co tento prvek znamená sémanticky. Tento přístup je jak Mikroformáty funguje.
Výhody více tříd
Layering several classes can make it easier to add special effects to elements without having to create a whole new style for that element.
Chcete-li například floatovat elementy vlevo nebo vpravo, můžete napsat dvě třídy:
vlevo, odjet.
a.
že jo.
jen s.
plavat vlevo;
a.
float: správně;
v nich. Pak, kdykoli jste měli prvek, který potřebujete plavat vlevo, jednoduše přidáte třídu „left“ do seznamu tříd.
Tady je ale tenká čára. Pamatujte, že webové standardy diktují oddělení stylu a struktury. Struktura je zpracována pomocí HTML, zatímco styl je v CSS. Pokud je váš dokument HTML naplněn prvky, které mají všechny názvy tříd, například „červený“ nebo „levý“, což jsou názvy diktovat, jak by měly prvky vypadat, spíše než jaké jsou, překračujete tuto hranici mezi strukturou a stylem.
Nevýhody více tříd
Největší nevýhodou používání několika simultánních tříd na vašich prvcích je to, že je mohou trochu neprakticky sledovat a spravovat v průběhu času. Může být obtížné určit, jaké styly ovlivňují prvek a zda na něj mají vliv nějaké skripty. Mnoho dnes dostupných rámců, například Bootstrap, těžce využívá prvky s více třídami. Tento kód se může rychle vymknout z rukou a těžko s ním pracovat, pokud nejste opatrní.
Pokud používáte několik tříd, riskujete také, že styl pro jednu třídu přepíše styl jiné. Tato kolize pak může ztěžovat zjištění, proč se vaše styly nepoužívají, i když se zdá, že by měly. Buďte si stále vědomi specificity, a to i při použití atributů použitých u tohoto jednoho prvku.
Pomocí nástroje, jako jsou nástroje pro webmastery v Google Chrome, můžete snáze zjistit, jak vaše třídy ovlivňují vaše styly, a vyhnout se tomuto problému konfliktních stylů a atributů.