Kaip naudoti CSS prieš ir po pseudo elementų

Kaip naudoti CSS prieš ir po pseudo elementų

Pseudoelementai yra vienas iš pažangesnių selektorių, kuriuos galima naudoti CSS. Pagrindinis šių parinkiklių tikslas yra sukurti unikalų stilių, nekeičiant HTML dokumento, kuris naudojamas kuriant pagrindinę tam tikro tinklalapio struktūrą.





Štai kaip CSS naudoti pseudoelementus.



kaip pašalinti onedrive iš windows 8

Įprasti pseudo elementai

Yra platus pseudo elementų, kurie palengvina žiniatinklio kūrėjo gyvenimą, sąrašas. Kai kurie iš šių pseudo elementų yra šie:





  • Prieš
  • Po
  • Fonas
  • Pirma eilė
  • Pirmoji raidė

Tam tikrose situacijose kai kurie pseudoelementai pasirodys tinkamesni už kitus, tačiau vienas dalykas, kuris išlieka pastovus, yra bendra bet kurio pseudoelemento naudojimo struktūra.

Pseudoelementų struktūros pavyzdys


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

Nors galite naudoti HTML elementą kaip parinkiklį, rekomenduojama naudoti klasę arba ID, kad išvengtumėte taikymo pagal nenumatytus išdėstymo elementus. Elementas, stilius ar duomenys, kuriuos norite įterpti norimoje vietoje, turėtų būti dedami tarp garbanotų skliaustų.



Pseudoelementai prieš ir po yra populiariausi sąraše, ir atsižvelgiant į tai, kad yra daug praktinių būdų juos naudoti-nesunku suprasti, kodėl.

Prieš pseudo elementą naudojant CSS

Nors tai nėra neįmanoma, CSS sudėtinga perteikti vaizdus skaitomu tekstu. Taip yra daugiausia todėl, kad vaizdas ir tekstas tinklalapyje užimtų tą pačią vietą.



Tai palyginti lengva siųsti paveikslėlį į teksto grupės foną , bet kai tas vaizdas yra per šviesus, jis linkęs užgožti ant jo esantį tekstą. Tokiais atvejais kitas žingsnis yra pabandyti padaryti vaizdą mažiau nepermatomą naudojant neskaidrumo savybę.

Vienintelė problema yra ta, kad kadangi vaizdas ir tekstas užima tą pačią padėtį, tekstas taip pat taps šiek tiek skaidrus.



Vienas iš nedaugelio veiksmingų šios problemos sprendimo būdų yra prieš pseudo elementą.

Prieš pseudoelemento pavyzdžio naudojimas


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

Aukščiau pateiktas kodas sukurtas naudoti kartu su toliau nurodyta HTML landingPage klase. Kaip parodyta aukščiau esančiame kode, naudodami prieš pseudo elementą galime nukreipti vaizdą ir naudoti jame esantį neskaidrumo ypatybę prieš sujungiant vaizdą su tekstu.





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


Dėl to ant vaizdo bus uždėta perdanga, o viršuje bus rodomas aiškus tekstas, kaip parodyta paveikslėlyje žemiau:

„After Pseudo“ elemento naudojimas CSS

Praktinis pseudo elemento panaudojimas yra pagalba kuriant HTML formą. Dauguma formų yra sukurtos naudojant laukų rinkinį, kuriam reikalingi duomenys, kad forma būtų sėkmingai pateikta.

Vienas iš būdų nurodyti, kad formos laukas reikalauja duomenų, yra žvaigždutė po šio lauko etiketės. Pseudo elementas suteikia praktinį būdą tai padaryti.

Naudojant pavyzdį po pseudoelemento


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

Įterpę aukščiau esantį kodą į savo formos CSS skiltį, užtikrinsite, kad po kiekvienos etiketės, kurioje yra reikiama klasė, bus tiesiogiai raudona žvaigždutė. Pseudo elementas šiame pavyzdyje taip pat yra praktiškas, nes padeda atskirti stilių nuo struktūros (kuri visada idealiai tinka kuriant programinę įrangą).

Kaip įdiegti „Google Play“ parduotuvę „Amazon Fire“ planšetiniame kompiuteryje

Turinio nuosavybė

Kaip parodyta aukščiau pateiktame pavyzdyje po pseudoelemento, turinio savybė yra įrankis, naudojamas įterpti naują turinį į tinklalapį. Ši savybė naudojama tik su pseudoelementais prieš ir po.

Svarbu pažymėti, kad net jei nėra turinio, kurį būtų galima pateikti turinio ypatybei (pvz., Anksčiau pateiktame pseudoelemento pavyzdyje), jūs vis tiek turite naudoti turinio ypatybę pagal parametrus prieš arba po pseudo-elementas, kad jie veiktų taip, kaip numatyta.

Dabar CSS galite naudoti pseudo elementus

Šiame straipsnyje jūs sužinojote, kaip atpažinti ir naudoti pseudo elementus savo CSS programose. Buvote supažindinti su pseudoelementais prieš ir po ir buvo pateikti praktiniai abiejų naudojimo būdai. Taip pat matėte, kodėl turinio ypatybė yra būtina norint sėkmingai naudoti prieš ir po pseudoelementus.

Dalintis Dalintis „Tweet“ Paštu 10 paprastų CSS kodų pavyzdžių, kuriuos galite išmokti per 10 minučių

Reikia pagalbos dėl CSS? Pirmiausia išbandykite šiuos pagrindinius CSS kodų pavyzdžius, tada pritaikykite juos savo tinklalapiuose.

Skaityti toliau Susijusios temos
  • Programavimas
  • Interneto svetainės dizainas
  • CSS
Apie autorių Kadeisha Kean(Paskelbti 21 straipsniai)

Kadeisha Kean yra „Full Stack“ programinės įrangos kūrėja ir techninė/technologijų rašytoja. Ji turi aiškų sugebėjimą supaprastinti kai kurias sudėtingiausias technologines sąvokas; gaminti medžiagą, kurią lengvai supranta bet kuris naujokas. Ji aistringai rašo, kuria įdomią programinę įrangą ir keliauja po pasaulį (per dokumentinius filmus).

Daugiau iš Kadeisha Kean

Prenumeruokite mūsų naujienlaiškį

Prisijunkite prie mūsų naujienlaiškio, kad gautumėte techninių patarimų, apžvalgų, nemokamų el. Knygų ir išskirtinių pasiūlymų!

Norėdami užsiprenumeruoti, spustelėkite čia