Stílusosztályok és azonosítók használata HTML-ben és CSS-ben

Jól megtervezett webhelyek felépítése a mai interneten mély megértést igényel Lépcsőzetes stíluslapok. Alkalmazzon CSS stílusok sorozatát a HTML-dokumentumára, hogy tájékoztassa a weboldal kinézetét és hangulatát.

Osztály és azonosító attribútumok

A tervezőknek néha csak egy stílust kell alkalmazniuk néhány a dokumentum elemei közül, de nem minden elemét. A kívánt stílusok eléréséhez használja a osztály és ID HTML attribútumok. Ezek az attribútumok globális attribútumok, amelyek szinte mindegyikre alkalmazhatók HTML címke- tehát akár megosztások, bekezdések, linkek, listák vagy bármely más HTML-dokumentum stílusát formázza a dokumentumban, az osztály és az ID attribútumokhoz fordulhat, hogy segítsen ennek a feladatnak a végrehajtásában!

Osztályválasztók

Az osztályválasztó több stílust állít be ugyanazon elemre vagy címkére a dokumentumban. Például, ha a szöveg egyes szakaszait más színben hívja figyelmeztetésként, rendelje hozzá a bekezdéseket az alábbi osztályokhoz:

p {szín: # 0000ff; }
p.alert {color: # ff0000; }
watch instagram stories

Ezek a stílusok állítanák be a színétminden bekezdések kékre (# 0000ff), de bármelyik bekezdés, amelynek class attribútuma: éber ehelyett pirosra írta (# ff0000). Ennek oka, hogy az class attribútumnak magasabb a specifitása, mint az első CSS-szabálynak, amely csak címkeválasztót használ. Amikor dolgozik CSS, egy konkrétabb szabály felülír egy kevésbé specifikus szabályt. Tehát ebben a példában az általánosabb szabály állítja be az összes bekezdés színét, de a második, konkrétabb szabály, mintsem csak néhány bekezdésben írja felül ezt a beállítást.

Így lehet ezt használni néhány HTML jelölésben:


Ez a bekezdés kék színnel jelenik meg, ami az oldal alapértelmezett értéke.



Ez a bekezdés is kék színű lenne.



Ez a bekezdés pedig piros színnel jelenik meg, mivel az class attribútum felülírja a szokásos kék színt az elemválasztó stílusban.

Ebben a példában a stílus riasztás csak az ezt használó bekezdéselemekre vonatkozna éber osztály. Ha ezt az osztályt több HTML elemben szeretné használni, távolítsa el a HTML elemet a stílushívás elejéről, így:

.alert {background-color: # ff0000;}

Ez az osztály ma már minden olyan elem számára elérhető, amelyre szüksége van. A HTML bármely olyan darabja, amelynek osztályattribútum értéke: éber most megkapja ezt a stílust. Az alábbi HTML-ben van egy bekezdésünk és egy második szintű fejlécünk, amely a éber osztály. Mindkettő piros háttérszínnel rendelkezik:


Ezt a bekezdést pirossal írnák.

A weboldalakon manapság az osztályattribútumokat gyakran használják a legtöbb elemre, mert specifitási szempontból könnyebben kezelhetők, mint az azonosítók. A legfrissebb HTML-oldalakat osztályattribútumokkal fogja feltölteni, amelyek közül néhány gyakran ismétlődik egy dokumentumban, mások pedig csak egyszer jelennek meg.

ID-választók

Azonosító választó megnevez egy adott stílust anélkül, hogy egy címkével vagy mással társítaná HTML elem.

Tegyünk fel egy felosztást a HTML-jelölésben, amely információkat tartalmaz egy eseményről. Adhatna ennek a felosztásnak egy ID attribútum nak,-nek esemény, majd vázolja fel ezt a felosztást 1 pixel széles fekete szegéllyel:

#event {határ: 1px szilárd # 000; }

A kihívás ID-választók az, hogy nem ismételhetők meg egy HTML dokumentumban. Ezeknek egyedinek kell lenniük (ugyanazt az azonosítót használhatja webhelyének több oldalán, de minden HTML-dokumentumban csak egyszer). Tehát három olyan esemény esetében, amelyek mindegyikének szüksége van erre a szegélyre, meg kell határoznia a esemény1, esemény2, és esemény3 és mindegyiket formázza. Ezért sokkal könnyebb lenne használni a fent említett class attribútumát esemény és egyszerre formázza őket.

Az azonosító attribútumok komplikációi

Az ID-attribútumok másik kihívása az, hogy magasabb specifitással rendelkeznek, mint az osztályattribútumok. Egy korábban kialakított stílus felülírása nehéz lehet, ha túlságosan támaszkodik az azonosítókra. Sok webfejlesztő eltávolodott azonosítókat használ a jelölésükben, még akkor is, ha csak egyszer kívánják használni ezt az értéket, és ehelyett a kevésbé specifikus class stílusok.

Az egyetlen terület, ahol az azonosító attribútumok játszanak szerepet, az az oldal, amikor az oldalon belüli horgony linkekkel rendelkezik. Vegyünk például egy olyan parallaxis stílusú weboldalt, amely egyetlen oldal teljes tartalmát tartalmazza, linkekkel, amelyek az oldal különböző részeire "ugranak". Az ID attribútumok és a szöveges hivatkozások ezeket a horgony linkeket használják. Adja hozzá az attribútum értékét, előtte a # szimbólum, a href a link attribútuma, így:

Ez a link

Ha rákattint vagy megérinti, ez a link az oldal azon részére ugrik, amely rendelkezik ezzel az azonosítóval. Ha az oldalon egyetlen elem sem használja ezt az azonosító értéket, a link semmit sem tenne.

A webhelyen belüli linkelés létrehozásához azonosító attribútumok használatára lesz szükség, de továbbra is általános CSS stíluscélokból fordulhat osztályokhoz. A tervezők így jelölik ma az oldalakat - a lehető legtöbbet használják az osztályválasztókkal, és csak akkor fordulnak azonosítókhoz, ha szükségük van az attribútumra, hogy ne csak a CSS horgaként, hanem az oldalon belüli linkként is működjön.

instagram story viewer