Kuidas kasutada enne ja pärast pseudoelemente CSS -is

Kuidas kasutada enne ja pärast pseudoelemente CSS -is

Pseudoelemendid on üks arenenumaid valijaid, mis on CSS-is kasutamiseks saadaval. Nende valijate peamine eesmärk on luua ainulaadne stiil, muutmata HTML -dokumenti, mida kasutatakse antud veebilehe põhistruktuuri loomiseks.





Siit saate teada, kuidas CSS-is pseudoelemente kasutada.



usb -seadme deskriptori taotlus ebaõnnestus

Tavalised pseudoelemendid

Veebiarendaja elu hõlbustamiseks on saadaval lai nimekiri pseudoelementidest. Mõned neist pseudoelementidest hõlmavad järgmist:



  • Enne
  • Pärast
  • Taust
  • Esimene rida
  • Esimene täht

Konkreetsetes olukordades osutuvad mõned pseudoelemendid sobivamaks kui teised, kuid üks asi, mis jääb konstantseks, on mis tahes pseudoelemendi kasutamise üldine struktuur.

Pseudoelementide struktuuri näide


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

Kuigi saate HTML -elementi valijana kasutada, on soovitatav kasutada klassi või ID -d, et vältida paigutuse soovimatute elementide sihtimist. Element, stiil või andmed, mille soovite soovitud kohta sisestada, tuleb asetada lokkis trakside vahele.



Enne ja pärast pseudoelemente on loendis kõige populaarsem ning arvestades, et nende kasutamiseks on palju praktilisi viise-pole raske mõista, miks.

Enne pseudoelementi CSS-is kasutamine

Kuigi see pole võimatu, on CSS -is raske pilte katta loetava tekstiga. Seda enamasti seetõttu, et pilt ja tekst asuksid veebilehel samal positsioonil.



Seda on suhteliselt lihtne teha pildi saatmine tekstirühma taustale , kuid kui see pilt on liiga hele, kipub see selle peal oleva teksti üle koormama. Nendel juhtudel on järgmine samm püüda muuta pilt läbipaistmatuse omaduse abil vähem läbipaistmatuks.

Ainus probleem on see, et kuna pilt ja tekst on samal kohal, muutub ka tekst mõnevõrra läbipaistvaks.



Üks väheseid tõhusaid viise selle probleemi lahendamiseks on eelneva pseudoelemendi kasutamine.

Näite kasutamine enne pseudoelementi


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

Ülaltoodud kood on loodud kasutamiseks koos HTML -i allalaadimisklassiga. Nagu on näidatud ülaltoodud koodis, saame enne pseudoelementi kasutades pilti sihtida ja kasutada sellel läbipaistmatuse omadust enne pildi kombineerimist tekstiga.





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


Selle tulemusel pannakse pildile ülekate ja ülaosas kuvatakse selge tekst, nagu on näidatud alloleval pildil:

Pärast pseudoelementi CSS-is kasutamine

Pseudo-elemendi praktiline kasutamine on abiks HTML-vormi loomisel. Enamik vorme luuakse väljade komplektiga, mis nõuavad vormi edukaks esitamiseks andmeid.

Üks võimalus näidata, et vormivälja jaoks on vaja andmeid, on tähe asetamine selle välja sildi järele. Järgnev pseudoelement annab teile praktilise võimaluse seda teha.

Näite kasutamine pärast pseudoelementi


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

Kui sisestate ülaltoodud koodi oma vormi CSS -i sektsiooni, tagate, et igale nõutavat klassi sisaldavale sildile järgneb otse punane tärn. Selle näite puhul on praktiline ka pseudoelement, kuna see aitab stiilid struktuurist eraldada (mis on tarkvaraarenduses alati ideaalne).

rakendus, mis muudab fotod maalide sarnaseks

Sisu atribuut

Nagu on näidatud ülaltoodud näites pärast pseudoelementi, on sisu atribuut tööriist, mida kasutatakse uue sisu sisestamiseks veebilehele. Seda omadust kasutatakse ainult enne ja pärast pseudoelementidega.

Oluline on märkida, et isegi kui sisu atribuudile edastamiseks pole saadaval sisu (näiteks ülaltoodud näites enne pseudoelementi), peate siiski kasutama sisu atribuuti enne või pärast pseudoelementi, et need toimiksid ettenähtud viisil.

Nüüd saate CSS-is kasutada pseudoelemente

Sellest artiklist õppisite, kuidas tuvastada ja kasutada CSS-programmides pseudoelemente. Teile tutvustati pseudoelemente enne ja pärast ning anti praktilisi võimalusi mõlema kasutamiseks. Samuti nägite, miks on sisuomadus vajalik pseudoelementide enne ja pärast edukaks kasutamiseks.

Jaga Jaga Piiksuma E -post 10 lihtsat CSS -koodi näidet, mida saate õppida 10 minutiga

Kas vajate abi CSS -iga? Alustuseks proovige neid CSS -koodi põhinäiteid, seejärel rakendage neid oma veebilehtedele.

Loe edasi Seotud teemad
  • Programmeerimine
  • Veebidisain
  • CSS
Autori kohta Kadeisha Kean(Avaldatud 21 artiklit)

Kadeisha Kean on täispinu tarkvaraarendaja ja tehniline/tehnoloogiline kirjutaja. Tal on selge võime lihtsustada mõnda kõige keerukamat tehnoloogilist kontseptsiooni; materjali tootmine, millest igale tehnoloogia algajale on lihtne aru saada. Ta on kirglik kirjutamise, huvitava tarkvara arendamise ja maailmas reisimise vastu (dokumentaalfilmide kaudu).

Veel Kadeisha Keanilt

Telli meie uudiskiri

Liituge meie uudiskirjaga, et saada tehnilisi näpunäiteid, ülevaateid, tasuta e -raamatuid ja eksklusiivseid pakkumisi!

Tellimiseks klõpsake siin