Lépcsőzetes stíluslapok meghatározhatja a weboldal elem megjelenését azáltal, hogy bekapcsolja az adott elemre alkalmazott attribútumokat. Ezek az attribútumok lehetnek azonosítók vagy osztályok, és mint minden attribútum, hasznos információkat adnak hozzá azokhoz az elemekhez, amelyekhez kapcsolódnak.
Attól függően, hogy melyik attribútumot adja hozzá egy elemhez, írhat egy CSS-választót az alkalmazáshoz szükséges vizuális stílusok, amelyek az adott elem és a webhely megjelenésének eléréséhez szükségesek mint egész.
Míg az azonosítók vagy az osztályok a CSS-szabályokkal való összekapcsolódás céljából működnek, a modern webdesign A módszerek részben az osztályokat részesítik előnyben az azonosítókkal szemben, mivel kevésbé specifikusak és összességében könnyebben kezelhetők.
Egy vagy több osztály a CSS-ben?
A legtöbb esetben egyetlen osztályattribútumot rendel hozzá egy elemhez, de valójában nem csak egy osztályra korlátozódik, ahogyan az azonosítókkal. Míg egy elem csak egyetlen azonosító attribútummal rendelkezhet, egy elemnek több osztályt is adhat, és bizonyos esetekben ez megkönnyíti az oldal stílusának kialakítását és még sok minden mást rugalmas.
Ha több osztályt kell hozzárendelnie egy elemhez, adja hozzá a további osztályokat, és egyszerűen válassza el őket szóközzel az attribútumban.
Például ennek a bekezdésnek három osztálya van:
Ez lenne a bekezdés szövege
Ez a következő három osztályt állítja be a bekezdéscímkén:
- Pullquote
- Kiemelt
- Bal
Figyelje meg a szóközöket ezen osztályértékek között. Ezek a terek különböztetik meg őket különálló, különálló osztályként. Ez az oka annak is, hogy az osztálynevekben nem lehet szóköz, mert ezzel külön osztályokká tennék őket.
Miután megadta az osztály értékeit HTML, akkor ezeket osztályokként rendelheti hozzá a CSS-be, és alkalmazhatja a hozzáadni kívánt stílusokat. Például.
.hívás {... }
.jellemző {... }
p.balra {... }
Ezekben a példákban a CSS deklarációk és értékpárok a göndör zárójelben jelennek meg, így alkalmazzák ezeket a stílusokat a megfelelő választóra.
Ha te osztályt állítson be egy meghatározott elemre (például, p.balra), akkor is használhatja az osztálylista részeként; azonban ne feledje, hogy ez csak azokat az elemeket érinti, amelyeket a CSS tartalmaz. Más szavakkal, a p.balra A stílus csak az ezzel az osztállyal rendelkező bekezdésekre fog vonatkozni, mivel a választója azt mondja, hogy "bekezdésekre, amelyek osztályértéke: bal, "Ezzel szemben a példa másik két szelektorja nem határoz meg bizonyos elemeket, így minden olyan elemre vonatkoznak, amely ezeket az osztályértékeket használja.
Több osztály, szemantika és JavaScript
A több osztály használatának további előnye, hogy növeli az interaktivitási lehetőségeket.
Alkalmazzon új osztályokat a meglévő elemekre a JavaScript használatával anélkül, hogy eltávolítaná a kezdeti osztályok egyikét. Osztályok segítségével meghatározhatja a egy elem szemantikája - adjon hozzá további osztályokat annak meghatározásához, hogy mit jelent ez az elem szemantikailag. Ez a megközelítés hogyan Mikroformák művek.
A több osztály előnyei
Több osztály rétege megkönnyítheti a speciális effektusok hozzáadását az elemekhez anélkül, hogy teljesen új stílust kellene létrehozni az elemhez.
Például az elemek balra vagy jobbra lebegtetéséhez két osztályt írhat:
bal.
és.
jobb.
csak.
balra lebeg;
és.
úszó: jobbra;
bennük. Ezután, amikor van egy elem, amelyet balra kell lebegnie, egyszerűen hozzá kell adnia a "bal" osztályt az osztálylistájához.
Van azonban egy jó sor a sétára itt. Ne feledje, hogy a webes szabványok diktálják a stílus és a szerkezet elválasztását. A struktúrát HTML segítségével kezeljük, míg a stílus CSS-ben van. Ha a HTML-dokumentum olyan elemekkel van tele, amelyek mindegyikének osztálynevei vannak, például "piros" vagy "bal", ezek nevek diktálja, hogy az elemeknek hogyan kell kinézniük, nem pedig annak, hogy milyenek, átléped ezt a határt a szerkezet és a stílus között.
A több osztály hátrányai
A legtöbb hátránya, ha több szimultán osztályt használsz az elemeiden, az az, hogy ez kissé nehézkessé teheti őket, ha idővel megnézik és kezelik őket. Nehezebbé válhat annak meghatározása, hogy milyen stílusok befolyásolják az elemet, és ha valamilyen szkript befolyásolja azt. A ma elérhető keretrendszerek közül sok, például a Bootstrap, erőteljesen használja a több osztályú elemeket. Ez a kód nagyon hamar kiszabadulhat a kezéből, és nehéz vele dolgozni, ha nem vagy óvatos.
Több osztály használata esetén fennáll annak a kockázata is, hogy az egyik osztály felülírja a másik stílusát. Ez az ütközés megnehezítheti, hogy miért nem alkalmazzák a stílusaidat, még akkor sem, ha úgy tűnik, hogy kellene. Legyen tisztában a sajátossággal, még az adott elemre alkalmazott attribútumokkal is.
Egy olyan eszköz használatával, mint a Google Chrome Webmestereszközei, könnyebben láthatja, hogy az osztályai hogyan befolyásolják a stílusait, és elkerülheti az ütköző stílusok és attribútumok problémáját.