Ön nem csak egyetlen CSS-osztályon van elemenként.
A CSS (Cascading Style Sheets) (Cascading Style Sheets) segítségével meg lehet határozni az elemek megjelenését az adott elemhez tartozó attribútumokhoz való csatlakozással. Ezek az attribútumok lehetnek ID vagy osztályok, és mint minden attribútum, hasznos információkkal szolgálnak azokhoz az elemekhez, amelyekhez kapcsolódnak. Attól függően, hogy milyen attribútumot ad hozzá egy elemhez, akkor CSS-választót írhat a szükséges vizuális stílusok alkalmazásához, amelyek szükségesek ahhoz, hogy az adott elem és a webhely egészének megjelenését érezzék.
Miközben az azonosítók vagy osztályok a CSS-szabályokkal való összekapcsolás céljából dolgoznak, a modern webes tervezési módszerek előnyben részesítik az osztályokat az azonosítókkal szemben, részben azért, mert kevésbé konkrétak és könnyebben dolgoznak együtt. Igen, még mindig sok olyan webhely található, amelyek ID-t használnak, de ezeket a tulajdonságokat kevésbé használják, mint a múltban, míg az osztályok átvette a modern weboldalakat.
Egy vagy több osztály a CSS-ben?
A legtöbb esetben egyetlen elemet rendelhet egy elemhez, de valójában nem csak egy osztályra korlátozódik, ahogy az azonosítóval rendelkezik. Bár egy elemnek csak egyetlen azonosítója lehet, akkor egy elemet több osztályba is beadhat, és bizonyos esetekben ezáltal az oldal könnyebben stílusos és sokkal rugalmasabb lesz!
Ha több osztályt kell hozzárendelnünk egy elemhez, hozzáadhatjuk a további osztályokat, és egyszerűen elkülöníthetjük őket egy attribútumban lévő szóközzel.
Például ez a bekezdés három osztályba sorolható:
pullquote featured left "> Ez a bekezdés szövege
Ez a következő három osztályt állítja be a bekezdés címkéjére:
- Pullquote
- Kiemelt
- Balra
Vegye észre a szóközöket az egyes osztályértékek között. Ezek azok a terek, amelyek különböző, egyedi osztályokat hoznak létre. Ez az oka annak is, hogy az osztályneveknek nem lehetnek szóközökük, mert különálló osztályokba rendezik őket.
Például, ha helyet nem használva "pullquote-featured-left" -t használsz, akkor egy osztály érték lenne, de a fenti példa, ahol ez a három szó szét van választva egy szóközzel, ezeket egyedi értékekként állítja be. Fontos megérteni ezt a koncepciót, amikor eldönti, mely osztály értékeket használja a weboldalain.
Miután megadta az osztályértékeket a HTML-ben, akkor ezeket hozzárendelheti osztályként a CSS-ben, és alkalmazhatja azokat a stílusokat, amelyeket hozzá szeretne adni. Például.
.pullquote {...}
.featured {...}
p.left {...}
Ezekben a példákban a CSS nyilatkozatok és értékpárok a göndör zárójelek belsejében helyezkednek el, így ezeket a stílusokat alkalmaznák a megfelelő szelektorra.
Megjegyzés: ha egy adott elemhez egy osztályt állít be (például p.left), akkor továbbra is használhatja az osztályok listájának részeként; vegye figyelembe azonban, hogy ez csak a CSS által meghatározott elemeket érinti. Más szavakkal, a p.left stílus csak az ebben az osztályban szereplő bekezdésekre vonatkozik, mivel a választó valójában azt mondja, hogy "bekezdéseket tartalmaz, amelyeknek osztály értéke a" left "". Ezzel szemben a példa másik két szelektora nem ad meg egy bizonyos elemet, ezért minden olyan elemre alkalmazni fognak, amely ezeket az osztályértékeket használja.
A több osztály előnyei
A több osztályból könnyebben hozzáadhat speciális effektusokat az elemekhez anélkül, hogy teljesen új stílust kellene létrehoznia az adott elem számára.
Előfordulhat például, hogy gyorsabban vagy balra vagy balra kell elemeket lebegenie. Lehet, hogy két osztályt írsz balra és jobbra, csak úszni: balra; és úszni: jobb; bennük. Ezután minden olyan elemnél, amikor egy elemet kell lebegnie balra, egyszerűen hozzáadja a "left" osztályt az osztálylistájához.
Van azonban egy finom vonal a gyalogláshoz. Ne feledje, hogy a webes szabványok diktálják a stílus és struktúra szétválasztását. A struktúra a HTML-en keresztül történik, míg a stílus a CSS-ben van.
Ha a HTML-dokumentum olyan elemekkel van feltöltve, amelyek mindegyike olyan osztálynevekkel rendelkezik, mint a "piros" vagy a "bal", amelyek olyan nevek, amelyek diktálják, hogy az elemek inkább nézzenek, mint amilyenek, akkor átlépi azt a vonalat a struktúra és a stílus között. Ezért igyekszem korlátozni a nem szemantikus osztályneveket, amennyire csak lehetséges.
Több osztály, szemantika és JavaScript
A több osztály használatának másik előnye, hogy sokkal több interaktivitási lehetőséget biztosít.
Új osztályokat alkalmazhat a meglévő elemekre a JavaScript használatával, anélkül, hogy eltávolítaná a kezdeti osztályokat. Az elemek semantikájának meghatározásához osztályokat is használhat. Ez azt jelenti, hogy további osztályokat adhat hozzá annak meghatározásához, hogy ez az elem szemantikailag mit jelent. Így működik a Microformats.
Többszörös osztályok hátrányai
Az elemek több osztályának leginkább hátránya, hogy rengeteg nehézkes lehet az idő múlásával nézni és kezelni. Nehéz lehet meghatároznia, hogy milyen stílusok befolyásolják egy elemet, és ha a szkriptek hatással vannak rá. A ma rendelkezésre álló keretek közül sok, mint a Bootstrap, több osztályból álló elemeket is használ. Ez a kód kimenthet, és nagyon nehéz dolgozni, ha nem vagy óvatos.
Ha több osztályt használsz, fennáll annak a kockázata is, hogy az egyik osztályhoz tartozó stílus felülírja a másik stílusát, még akkor is, ha nem szándékozta ezt. Ez akkor megnehezíti annak megértését, hogy miért nem alkalmazzák a stílusokat még akkor is, ha úgy tűnik, hogy kellene.
Önnek tisztában kell lennie a specificitással, még az adott elemhez tartozó attribútumokkal is!
Olyan eszköz használatával, mint a Chrome webmestereszközök, könnyebben láthatja, hogyan befolyásolják az osztályok a stílusokat, és elkerülik az ütköző stílusok és attribútumok problémáját.
Jennifer Krynin eredeti cikke. Szerkesztette: Jeremy Girard, 2007.07.08