A pszeudoelemek előtti és utáni használata a CSS -ben

A pszeudoelemek előtti és utáni használata a CSS -ben

Az ál-elemek a CSS-ben használható fejlettebb választók egyike. Ezeknek a választóknak a fő célja egyedi stílus létrehozása, anélkül, hogy módosítaná az adott weboldal alapstruktúrájának létrehozásához használt HTML dokumentumot.





Így használhatja az ál-elemeket a CSS-ben.



hogyan lehet törölni az eseményeket az iPhone naptárából

Gyakori ál-elemek

Az ál-elemek kiterjedt listája rendelkezésre áll, amelyek megkönnyítik egy webfejlesztő életét. Ezen ál-elemek közül néhány:



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

Bizonyos helyzetekben bizonyos pszeudoelemek alkalmasabbnak bizonyulnak, mint mások, de az egyetlen dolog, amely állandó marad, az ál-elemek általános felépítése.

Példa ál-elemek szerkezetére


selector::pseudo-element{
/* css code */
}

Bár választhat HTML -elemeket, ajánlott osztályt vagy azonosítót használni, hogy elkerülje a nem kívánt elemek célzását az elrendezésben. A kívánt helyre beilleszteni kívánt elemet, stílust vagy adatot a göndör zárójelek közé kell helyezni.



A lista előtti és utáni pszeudo-elemek a legnépszerűbbek, és tekintettel arra, hogy számos praktikus módszer létezik ezek használatára-nem nehéz megérteni, miért.

A Before Pseudo-elem használata a CSS-ben

Bár nem lehetetlen, de nehéz átfedni a képeket olvasható szöveggel a CSS -ben. Ez leginkább azért van így, mert a kép és a szöveg ugyanazt a pozíciót foglalja el egy weboldalon.



Viszonylag könnyű küldjön képet egy szövegcsoport hátterébe , de ha ez a kép túl világos, hajlamos túlterhelni a rajta lévő szöveget. Ezekben az esetekben a következő lépés az, hogy megpróbálja kevésbé átláthatóvá tenni a képet az opacity tulajdonság használatával.

Az egyetlen probléma az, hogy mivel a kép és a szöveg ugyanazt a pozíciót foglalja el, a szöveg is átlátszó lesz.



Ennek a problémának a néhány hatékony módja közül az egyik az előző pszeudoelem használata.

Példa a pszeudoelem előtti példára


.landingPage{
/* Arranges the text on the image overlay */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
/*sets the page to adjust to different screen sizes*/
height: 100vh;
}
.landingPage::before{
content:'';
/*imports an image*/
background: url(https://source.unsplash.com/_1EYIHRG014/1600x900)
no-repeat center/cover;
/*places an overlay on top of the image*/
opacity: 0.4;
/*makes the image visible*/
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

A fenti kódot az alábbi HTML landingPage osztállyal együtt kell használni. Amint az a fenti kódban látható, az előtt pszeudoelem segítségével megcélozhatjuk a képet, és használhatjuk rajta az átlátszatlanságot, mielőtt a képet a szöveggel kombinálnánk.





This is the result of using the before pseudo-element
to overlay and image with readable text.


Ennek eredményeképpen egy fedvény kerül a képre, és világos szöveg jelenik meg felül, amint az az alábbi képen látható:

Az After Pseudo elem használata a CSS-ben

Az utólagos pszeudo-elem gyakorlati haszna, hogy segítséget nyújt egy HTML-űrlap létrehozásában. A legtöbb űrlap mezők halmazával jön létre, amelyek adatot igényelnek az űrlap sikeres elküldéséhez.

Az egyik módja annak, hogy jelezze, hogy az űrlap mezői adatot igényelnek, ha csillagot tesz a mező címkéje után. Az utólagos pszeudoelem praktikus módszert kínál erre.

Az After Pseudo-element példa használata


.required::after{
content: '*';
color: red;
}

Ha a fenti kódot beilleszti az űrlap CSS szakaszába, akkor minden szükséges címkét tartalmazó címkét közvetlenül egy piros csillag követ. Az utólagos pszeudoelem ebben a példában is praktikus, mivel segít elkülöníteni a stílust a struktúrától (ami mindig ideális a szoftverfejlesztésben.)

legjobb szoftver a youtube videók szerkesztéséhez

A Tartalomtulajdon

Amint azt a fenti pszeudoelem-példa is mutatja, a tartalom tulajdonság az az eszköz, amelyet új tartalom weboldalra való beillesztésére használnak. Ez a tulajdonság csak a pszeudoelemek előtti és utáni elemekkel használható.

Fontos megjegyezni, hogy még akkor is, ha nem áll rendelkezésre tartalom, amelyet a tartalomtulajdonba kell betáplálni (például a fenti ál-elem előtti példában), akkor is a tartalomtulajdonságot kell használni az előtte vagy az után paraméterek között ál-elemet, hogy rendeltetésszerűen működjenek.

Most már használhat pszeudoelemeket a CSS-ben

Ebben a cikkben megtanulta, hogyan lehet azonosítani és használni az ál-elemeket a CSS-programokban. Bemutatkozott az ál-elemek előtt és után, és gyakorlati módszereket adott mindkettő használatára. Azt is láthatta, hogy miért szükséges a tartalomtulajdonság az elő- és az ál-elemek sikeres használatához.

Részvény Részvény Csipog Email 10 egyszerű CSS -példa, amelyet 10 perc alatt megtanulhat

Segítségre van szüksége CSS munkájában? Először is próbálja ki ezeket az alapvető CSS -kódpéldákat, majd alkalmazza őket saját weboldalain.

Olvassa tovább Kapcsolódó témák
  • Programozás
  • Web Design
  • CSS
A szerzőről Kadeisha Kean(21 cikk megjelent)

Kadeisha Kean Full Stack szoftverfejlesztő és műszaki/technológiai író. Megvan az a képessége, hogy leegyszerűsítse a legösszetettebb technológiai fogalmakat; olyan anyagot állít elő, amelyet minden technológiai kezdő könnyen megért. Szenvedélyesen ír, érdekes szoftvereket fejleszt és utazik a világban (dokumentumfilmeken keresztül).

Bővebben: Kadeisha Kean

Iratkozzon fel hírlevelünkre

Csatlakozz hírlevelünkhöz, ahol technikai tippeket, értékeléseket, ingyenes e -könyveket és exkluzív ajánlatokat találsz!

Feliratkozáshoz kattintson ide