Kako uporabljati psevdoelemente pred in po njej v CSS

Kako uporabljati psevdoelemente pred in po njej v CSS

Psevdo elementi so eden naprednejših izbirnikov, ki so na voljo za uporabo v CSS. Glavni namen teh izbirnikov je ustvariti edinstven slog brez spreminjanja dokumenta HTML, ki se uporablja za ustvarjanje osnovne strukture dane spletne strani.





Tukaj je opisano, kako uporabljati psevdoelemente v CSS.



izjema sistemske niti ni obdelana za posodobitev sistema Windows 10

Pogosti psevdoelementi

Na voljo je obsežen seznam psevdo-elementov, ki olajšajo življenje spletnega razvijalca. Nekateri od teh psevdoelementov vključujejo:





  • Prej
  • Po
  • Ozadje
  • Prva vrsta
  • Prvo pismo

V posebnih situacijah se bodo nekateri psevdoelementi izkazali za primernejše od drugih, toda ena stvar, ki ostane konstantna, je splošna struktura za uporabo katerega koli psevdoelementa.

Primer strukture psevdoelementov


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

Čeprav lahko element HTML uporabite kot izbirnik, je priporočljivo, da uporabite razred ali id, da se izognete ciljanju na nenamerne elemente v postavitvi. Element, slog ali podatke, ki jih želite vstaviti na želeno mesto, postavite med zavite oklepaje.



Na seznamu sta najbolj priljubljena psevdoelementa pred in po njem, glede na to, da obstaja veliko praktičnih načinov njihove uporabe-ni težko razumeti, zakaj.

Uporaba Pseudo-elementa Before v CSS

Čeprav ni nemogoče, je slike v CSS težko prekrivati ​​z berljivim besedilom. To je predvsem zato, ker bi slika in besedilo zasedli enako mesto na spletni strani.



Relativno enostavno je pošljite sliko v ozadje skupine besedil , če pa je slika preveč svetla, se nagiba k preplavljanju besedila, ki je na njej. V teh primerih je naslednji korak poskušati narediti sliko manj nepregledno z lastnostjo motnosti.

Edina težava je v tem, da bosta besedilo in besedilo v istem položaju postala tudi nekoliko pregledna.



Eden redkih učinkovitih načinov za rešitev tega problema je uporaba psevdoelementa before.

Z uporabo primera Pred psevdoelementom Pred


.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%;
}

Zgornja koda je ustvarjena za uporabo v sozvočju s spodnjim razredom HTML destinationPage. Kot je prikazano v zgornji kodi, lahko s prejšnjim psevdoelementom ciljamo sliko in na njej uporabimo lastnost motnosti, preden se slika združi z besedilom.





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


To bo povzročilo, da se na sliko postavi prekrivanje, na vrhu pa jasno besedilo, kot je prikazano na spodnji sliki:

Uporaba After Pseudo-elementa v CSS

Praktična uporaba psevdoelementa after je pomoč pri ustvarjanju obrazca HTML. Večina obrazcev je ustvarjenih z nizom polj, ki zahtevajo podatke za uspešno predložitev obrazca.

Eden od načinov, da označite, da polje v obrazcu zahteva podatke, je, da za oznako tega polja postavite zvezdico. Psevdoelement after vam za to ponuja praktičen način.

Z uporabo primera po psevdoelementu After


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

Če vstavite zgornjo kodo v razdelek CSS vašega obrazca, boste zagotovili, da bo vsaki oznaki, ki vsebuje zahtevani razred, neposredno sledila rdeča zvezdica. Psevdoelement after je v tem primeru tudi praktičen, saj pomaga ločiti styling od strukture (kar je vedno idealno pri razvoju programske opreme.)

razlika med jabolčno uro serije 3 in 5

Lastnost vsebine

Kot je prikazano v zgornjem primeru psevdoelementa zgoraj, je lastnost vsebine orodje, ki se uporablja za vstavljanje nove vsebine na spletno stran. Ta lastnost se uporablja samo s psevdoelementi pred in po.

Pomembno je omeniti, da morate kljub temu, da ni na voljo vsebine, ki bi jo lahko napajali v lastnost vsebine (na primer v zgornjem primeru prejšnjega psevdoelementa), vseeno uporabiti lastnost vsebine v parametrih pred ali po psevdoelement, da bodo delovali po predvidevanjih.

Zdaj lahko v CSS uporabite psevdoelemente

V tem članku ste izvedeli, kako prepoznati in uporabiti psevdoelemente v svojih programih CSS. Seznanili ste se s psevdoelementi pred in po njem ter vam predstavili praktične načine uporabe obeh. Prav tako ste lahko videli, zakaj je lastnost vsebine potrebna za uspešno uporabo psevdo-elementov pred in po.

Deliti Deliti Cvrkutati E-naslov 10 preprostih primerov kode CSS, ki se jih lahko naučite v 10 minutah

Potrebujete pomoč pri CSS? Za začetek preizkusite te osnovne primere kode CSS, nato pa jih uporabite na svojih spletnih straneh.

Preberite Naprej Sorodne teme
  • Programiranje
  • Oblikovanje spletnih strani
  • CSS
O avtorju Kadeisha Kean(21 objavljenih člankov)

Kadeisha Kean je razvijalka programske opreme in tehnična/tehnološka pisateljica. Ima izrazito sposobnost poenostavitve nekaterih najbolj zapletenih tehnoloških konceptov; izdelavo materiala, ki ga lahko vsak tehnološki začetnik zlahka razume. Strastno piše, razvija zanimivo programsko opremo in potuje po svetu (skozi dokumentarne filme).

Več od Kadeisha Kean

Naročite se na naše novice

Pridružite se našemu glasilu za tehnične nasvete, ocene, brezplačne e -knjige in ekskluzivne ponudbe!

Kliknite tukaj, da se naročite