Az ál-elemek az egyik legfejlettebb szelektor, amelyek a CSS-ben használhatók. A kiválasztók fő célja az egyedi stílus létrehozása, anélkül, hogy megváltoztatnák az adott weboldal alapstruktúrájának létrehozásához használt HTML dokumentumot.

A pszeudo-elemek CSS-ben történő felhasználásának módja:

Közös álelemek

Van egy átfogó lista ál-elemekről, amelyek megkönnyítik a webfejlesztők életét. Ezen álelemek közül néhány a következőket tartalmazza:

• Előtt
• Utána
• Háttér
• Első sor
• Első levél

Bizonyos helyzetekben egyes álelemek alkalmasabbnak bizonyulnak, mint mások, de az egyetlen dolog, ami állandó marad, az az álszerkezetek általános felépítése.

Pszeudo-elemek szerkezeti példa

választó:: ál-elem {
/ * css kód * /
} 

Pedig lehet használjon HTML elemet választóként, ajánlott osztályt vagy azonosítót használni, hogy elkerülje a nem szándékos elemek célzását az elrendezésben. Az elemet, stílust vagy adatot, amelyet be szeretne illeszteni a kívánt helyre, a göndör zárójelek közé kell helyezni.

Az előtte és utána használt pszeudo-elemek a legnépszerűbbek a listában, és tekintettel arra, hogy sok gyakorlati módja van ezeknek a felhasználására - nem nehéz megérteni, miért.

Az Before Pseudo elem használata a CSS-ben

Bár nem lehetetlen, nehéz a képeket olvasható szöveggel átfedni a CSS-ben. Ez főleg azért van, mert a kép és a szöveg ugyanazt a helyet foglalja el egy weboldalon.

Viszonylag könnyű képet küldhet egy szövegcsoport hátterére, de ha ez a kép túl világos, akkor hajlamos elnyomni a tetején lévő szöveget. Ezekben az esetekben a következő lépés az, hogy megkísérelje a képet kevésbé átlátszatlanná tenni az opacitás tulajdonság segítségével.

Az egyetlen probléma az, hogy mivel a kép és a szöveg ugyanazt a helyet foglalja el, a szöveg is kissé átlátszóvá válik.

A probléma megoldásának kevés hatékony módja az egyik, ha az előző pszeudo-elemet használjuk.

A Pseudo-elem előtti példa használata

.nyitóoldal{
/ * Rendezi a szöveget a képfedvényen * /
kijelző: flex;
hajlítási irány: oszlop;
igazol-tartalom: központ;
align-items: center;
text-align: center;
/ * beállítja az oldalt a különböző képernyőméretekhez való igazításra * /
magasság: 100vh;
}
.landingPage:: előtt {
tartalom:'';
/ * képet importál * /
háttér: url ( https://source.unsplash.com/_1EYIHRG014/1600x900)
ismétlés nélküli központ / fedél;
/ * fedvényt helyez a kép tetejére * /
opacitás: 0,4;
/ * láthatóvá teszi a képet * /
pozíció: abszolút;
felső: 0;
bal: 0;
szélesség: 100%;
magasság: 100%;
}

A fenti kódot úgy hoztuk létre, hogy egységesen használhassa az alábbi HTML landingPage osztályt. Amint azt a fenti kód mutatja, az előtte lévő pszeudo-elem használatával megcélozhatjuk a képet, és használhatjuk a rajta lévő opacitás tulajdonságot, mielőtt a kép a szöveggel kombinálódik.

A Before pszeudo-elem használata


Ez az előző pszeudo-elem használatának eredménye
hogy olvasható szöveggel fedje le és képezze.

Ez azt eredményezi, hogy a képre fedvény kerül, és tiszta szöveg jelenik meg a tetején, amint az az alábbi képen látható:

Az After Pseudo elem használata a CSS-ben

Az utólagos ál-elem gyakorlati alkalmazása a HTML-űrlap létrehozásának elősegítése. A legtöbb űrlap olyan mezők készítésével jön létre, amelyekhez adatok szükségesek az űrlap sikeres elküldéséhez.

Az egyik módja annak jelzésére, hogy egy űrlap mezőjéhez adatokra van szükség, az, ha csillagot helyez a mező címkéje után. Az utólagos ál-elem gyakorlati módot kínál erre.

Az After Pseudo-element példa használata

.required:: {után
tartalom: '*';
piros szín;
} 

A fenti kód beillesztése az űrlap CSS szakaszába biztosítja, hogy minden címkét, amely tartalmazza a szükséges osztályt, közvetlenül piros csillag követi. Az utólagos pszeudo-elem azért is praktikus ebben a példában, mert elősegíti a stílus és a struktúra elválasztását (ami mindig ideális a szoftverfejlesztésben.)

A Tartalom tulajdonság

Amint az a fenti pszeudo-elem utáni példában látható, a content tulajdonság az az eszköz, amellyel új tartalmat lehet beilleszteni egy weboldalra. Ezt a tulajdonságot csak a pszeudo-elemek előtt és után használják.

Fontos megjegyezni, hogy még akkor is, ha nem áll rendelkezésre tartalom a tartalom tulajdonságához (például az előző pszeudo-elem példában) fenti), akkor is a tartalmi tulajdonságot kell használnia az előtag vagy után pszeudo-elem paraméterein belül, hogy a szándékolt.

Most használhat álelemeket a CSS-ben

Ebben a cikkben megtanulta, hogyan lehet azonosítani és használni az álelemeket a CSS programokban. Megismerkedtél az ál-előtti és utáni elemekkel, és gyakorlati módszereket kaptál mindkettő használatára. Azt is megtudhatta, hogy miért szükséges a tartalmi tulajdonság az előtag és utána álelemek sikeres használatához.

10 egyszerű CSS-kód példa, amelyeket 10 perc alatt megtanulhat

Szeretne többet megtudni a CSS használatáról? Először próbálkozzon ezekkel az alapvető CSS-kódokkal, majd alkalmazza azokat a saját weboldalain.

Olvassa el a következőt

A szerzőről