Osztályok és azonosítók Súgó kiterjesztése CSS
A mai webes weboldalak építése a CSS (Cascading Style Sheets) mély megértését igényli. Ezek azok az utasítások, amelyeket egy weboldalon ad meg annak meghatározásához, hogyan fog megjelenni a böngészőablakban. A HTML-dokumentum egy sor "stílusát" alkalmazza, amely megteremti a weboldal megjelenését.
Számos módon alkalmazhatjuk ezeket a stílusokat egy dokumentumon keresztül, de gyakran csak stíluselemeket szeretnénk használni a dokumentum egyes elemeiben, de az elemek nem minden példányát.
Lehet, hogy olyan stílusot szeretne létrehozni, amelyre a dokumentum számos elemére alkalmazható, anélkül, hogy meg kellene ismételnie az egyes példányok stílusszabályát. A kívánt stílusok eléréséhez az osztály és az ID HTML attribútumokat fogja használni. Ezek az attribútumok olyan globális attribútumok, amelyek szinte minden HTML-címkére alkalmazhatók . Ez azt jelenti, hogy a dokumentumban lévő szakaszok, bekezdések, hivatkozások, listák vagy bármely más HTML-elemek stílusát formázza, az osztály- és azonosítójellemzőkhöz fordulhat segítséget nyújt e feladat elvégzésében!
Osztályválasztók
Az osztályválasztó lehetővé teszi, hogy több stílusot állítson be ugyanarra az elemre vagy címkére egy dokumentumban. Például érdemes lehet, hogy a szöveg bizonyos részei más színnel jelennek meg a dokumentum többi részében. Ezek a kiemelt szakaszok lehetnek "figyelmeztető jelzések", amelyeket az oldalon állít be. A bekezdéseket az alábbi osztályokkal rendelheti:
p {szín: # 0000ff; }
p.alert {color: # ff0000; }
Ezek a stílusok az összes bekezdés színét kékre állítanák (# 0000ff), de a "figyelmeztetés" osztályú attribútummal rendelkező bekezdés helyett a piros színű (# ff0000). Ez azért van, mert az osztálytulajdonságnak nagyobb az egyedi sajátossága, mint az első CSS-szabály, amely csak címkekiválasztót használ.
Ha a CSS-t használja, egy specifikusabb szabály felülír egy kevésbé specifikus szabályt. Tehát ebben a példában az általánosabb szabály határozza meg az összes bekezdés színét, de a második, pontosabb szabályt, mint a felülbírálást, hogy csak bizonyos bekezdésekre van beállítva.
Íme, hogy ez hogyan használható néhány HTML jelölésnél:
Ez a bekezdés kék színnel jelenik meg, amely az oldal alapértelmezett.
Ez a bekezdés is kék színű lesz.
Ez a bekezdés piros színnel jelenik meg, mivel az osztálytulajdonság felülírja a szabványos kék színt az elemválasztó stílusától.
Ebben a példában a "p.alert" stílus csak a "figyelmeztető" osztályba tartozó bekezdéselemekre vonatkozik. Ha azt szeretné használni az adott osztályt több HTML elemen, egyszerűen eltávolítaná a HTML elemet a (csak feltétlenül hagyja el az időt (.) a helyén), így:
.alert {háttérszín: # ff0000;}
Ez az osztály már elérhető minden olyan elemhez, amelyre szüksége van. A HTML-kód minden olyan eleme, amelynek a "figyelmeztető jelzés" attribútuma van, most megkapja ezt a stílust. Az alábbi HTML-ben egyaránt tartalmaz egy bekezdést és egy 2. szintű fejlécet, amely a "riasztási" osztályt használja. Mindkettőnek vörös színű háttérszíne van a CSS-nek megfelelően.
Ezt a bekezdést vörösre írnák.
És ez a h2 is piros lenne.
A mai weboldalakon gyakran használják az osztály attribútumokat a legtöbb elemen, mert könnyebben dolgozhatnak az egyedi azonosítási szempontból, hogy az azonosítók. A legtöbb jelenlegi HTML-oldalt meg kell tölteni osztály attribútumokkal, amelyek közül néhány többször is megismétlődik egy dokumentumban és másokban, amelyek csak egyszer jelennek meg.
ID választók
Az ID- választó lehetővé teszi, hogy egy adott stílushoz adjon nevet, anélkül, hogy hozzárendelné egy címkével vagy más HTML-elemekkel . Mondja meg, hogy van egy részlege a HTML-jelölésben, amely információkat tartalmaz egy eseményről.
Ezt a szekciót megadhatod az "esemény" azonosító attribútumának, és akkor ha egy 1-pixel széles fekete szegéllyel körvonalazod ezt a megosztást, akkor ilyen azonosítót írsz:
#event {border: 1px solid # 000; }
Az ID szelektorokkal végzett kihívás az, hogy nem lehet megismételni egy HTML dokumentumban. Egyénieknek kell lenniük (ugyanazt az azonosítót használhatja a webhely több oldalán, de csak egyszer minden egyes HTML dokumentumban). Tehát, ha 3 eseményre volt szükséged, amelyek mindenkinek szüksége volt erre a határaira, akkor az "event1", "event2" és "event3" azonosító attribútumokat kell megadnia, és mindegyiket meg kell adnia. Ezért sokkal könnyebb használni a fent említett "esemény" osztálytulajdonságot, és egyszerre megformálni őket.
Az ID attribútumokkal szembeni másik kihívás az, hogy nagyobb sajátossággal rendelkeznek, mint az osztály tulajdonságai. Ez azt jelenti, hogy ha olyan CSS-re van szüksége, amely felülírja a korábban létrehozott stílust, akkor nehéz lehet, ha túl nagy mértékben támaszkodik az azonosítókra. Ezért sok webfejlesztő távolodott el az azonosítók használatától a jelölésüknél, még akkor is, ha csak egyszer kívánják használni ezt az értéket, és inkább csaknem minden stílusra vonatkozó kevésbé jellemző osztálytulajdonságokat fordított.
Az egyik olyan terület, ahol az azonosító attribútumok jönnek létre, amikor olyan oldalt szeretne létrehozni, amelynek oldalán található horgonyhivatkozások vannak. Például, ha van egy parallaxis stílusú weboldal, amely egyetlen oldalon tartalmaz minden tartalmat olyan hivatkozással, amely "ugrik" az adott oldal különböző részein. Ezt az ID-attribútumokkal és szöveges hivatkozásokkal végzik, amelyek ezeket a horgonyhivatkozásokat használják.
Egyszerűen hozzáadja az attribútum értékét, amelyet a # szimbólum előz meg a link href attribútumához:
Ez a link
Ha rákattintott vagy megérintett, ez a hivatkozás az oldal azon részéhez ugrik, amely rendelkezik ezzel az azonosítójával. Ha az oldalon nem szerepel az elem az ID-értéket, a link nem tehet semmit.
Ne feledje, hogy webhelyen való hivatkozást szeretne létrehozni egy webhelyen, de szükség van ID-attribútumok használatára, de még mindig általános osztályozási célokra használhatja az osztályokat. Így ma megjelölem az oldalakat - az osztályszelektorokat a lehető legnagyobb mértékben használtam, és csak az azonosítókhoz fordulok, amikor szükségem van arra, hogy az attribútum nemcsak a CSS kampányaként működjön, hanem egy oldalsó hivatkozásként is.
Jennifer Krynin eredeti cikke. Szerkesztette: Jeremy Girard, 1996. 8. 9