Kā lietot pirms un pēc pseidoelementiem CSS

Kā lietot pirms un pēc pseidoelementiem CSS

Pseidoelementi ir viens no progresīvākajiem atlasītājiem, kas pieejami lietošanai CSS. Šo atlasītāju galvenais mērķis ir radīt unikālu stilu, nemainot HTML dokumentu, kas tiek izmantots, lai izveidotu konkrētas tīmekļa lapas pamatstruktūru.





Lūk, kā CSS izmantot pseidoelementus.



kāpēc mans ābolu pulkstenis mirst tik ātri?

Parastie pseidoelementi

Ir pieejams plašs saraksts ar pseidoelementiem, kas ir pieejami, lai atvieglotu tīmekļa izstrādātāja dzīvi. Daži no šiem pseidoelementiem ietver:





  • Pirms
  • Pēc
  • Fons
  • Pirmā līnija
  • Pirmais burts

Konkrētās situācijās daži pseidoelementi izrādīsies piemērotāki nekā citi, taču viena lieta, kas paliek nemainīga, ir jebkura pseidoelementa izmantošanas vispārējā struktūra.

Pseidoelementu struktūras piemērs


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

Lai gan kā atlasītāju varat izmantot HTML elementu, ieteicams izmantot klasi vai ID, lai izvairītos no mērķauditorijas atlases neparedzētos izkārtojuma elementos. Elements, stils vai dati, kurus vēlaties ievietot vēlamajā vietā, ir jāievieto starp cirtainām figūriekavām.



Pirms un pēc pseidoelementi ir populārākie sarakstā, un, ņemot vērā, ka ir daudz praktisku to izmantošanas veidu-nav grūti saprast, kāpēc.

Pirms pseidoelementa izmantošana CSS

Lai gan tas nav neiespējami, CSS ir grūti pārklāt attēlus ar lasāmu tekstu. Tas galvenokārt ir tāpēc, ka attēls un teksts tīmekļa vietnē ieņemtu vienādu pozīciju.



Tas ir salīdzinoši viegli nosūtīt attēlu uz teksta grupas fona , bet, ja attēls ir pārāk gaišs, tam ir tendence pārspēt tekstu, kas atrodas virs tā. Šādos gadījumos nākamais solis ir mēģināt padarīt attēlu mazāk necaurspīdīgu, izmantojot necaurredzamības īpašību.

Vienīgā problēma ir tā, ka, tā kā attēls un teksts ieņem vienu un to pašu pozīciju, arī teksts kļūs nedaudz caurspīdīgs.



Viens no nedaudzajiem efektīvajiem veidiem, kā atrisināt šo problēmu, ir izmantot pseidoelementu pirms.

Izmantojot pirms pseidoelementa piemēru


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

Iepriekš minētais kods ir izveidots, lai to varētu izmantot kopā ar zemāk esošo HTML landingPage klasi. Kā parādīts iepriekš redzamajā kodā, izmantojot pirms pseidoelementa, mēs varam atlasīt attēla mērķauditoriju un izmantot tajā esošo necaurredzamības īpašību, pirms attēls tiek apvienots ar tekstu.





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


Tā rezultātā attēlam tiks uzlikts pārklājums un virs tā tiks parādīts skaidrs teksts, kā parādīts attēlā zemāk:

Pēcpseidoelementa izmantošana CSS

Pseidoelementa praktiskais pielietojums ir palīdzība HTML veidlapas izveidē. Lielākā daļa veidlapu ir izveidotas ar lauku kopu, kuriem ir nepieciešami dati, lai veidlapa tiktu veiksmīgi iesniegta.

Viens veids, kā norādīt, ka veidlapas laukam ir nepieciešami dati, ir zvaigznītes ievietošana aiz šī lauka etiķetes. Pēcpseido elements nodrošina praktisku veidu, kā to izdarīt.

Izmantojot pēc pseidoelementa piemēru


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

Ievietojot iepriekš norādīto kodu veidlapas CSS sadaļā, katrai etiķetei, kurā ir nepieciešamā klase, tiks tieši pievienota sarkana zvaigznīte. Šajā piemērā praktisks ir arī pseido elements pēc, jo tas palīdz nošķirt stilu no struktūras (kas programmatūras izstrādē vienmēr ir ideāli piemērota).

Es negribu gudru televizoru

Satura īpašums

Kā parādīts iepriekš minētajā pseidoelementu piemērā, satura rekvizīts ir rīks, ko izmanto, lai tīmekļa lapā ievietotu jaunu saturu. Šis rekvizīts tiek izmantots tikai ar pseidoelementiem pirms un pēc.

Ir svarīgi atzīmēt, ka pat tad, ja satura īpašumam nav pieejams plūsma (piemēram, iepriekš pseidoelementa piemērā), jums joprojām ir jāizmanto satura rekvizīti pirms vai pēc parametriem. pseidoelementu, lai tie darbotos kā paredzēts.

Tagad CSS varat izmantot pseidoelementus

Šajā rakstā jūs uzzinājāt, kā identificēt un izmantot pseidoelementus savās CSS programmās. Jūs iepazīstināja ar pseidoelementiem pirms un pēc un tika sniegti praktiski veidi, kā izmantot abus. Jūs arī redzējāt, kāpēc satura īpašums ir nepieciešams, lai veiksmīgi izmantotu pirms un pēc pseidoelementus.

Kopīgot Kopīgot Čivināt E -pasts 10 vienkārši CSS koda piemēri, kurus varat iemācīties 10 minūtēs

Vai nepieciešama palīdzība saistībā ar CSS? Vispirms izmēģiniet šos pamata CSS koda piemērus, pēc tam izmantojiet tos savām tīmekļa lapām.

Lasīt Tālāk Saistītās tēmas
  • Programmēšana
  • Web dizains
  • CSS
Par autoru Kadeiša Kīna(Publicēti 21 raksti)

Kadeisha Kean ir pilna komplekta programmatūras izstrādātājs un tehniskais/tehnoloģiju rakstnieks. Viņai ir izteikta spēja vienkāršot dažus no sarežģītākajiem tehnoloģiskajiem jēdzieniem; materiāla ražošana, ko var viegli saprast ikviens tehnoloģiju iesācējs. Viņa aizraujas ar rakstīšanu, interesantas programmatūras izstrādi un pasaules apceļošanu (caur dokumentālajām filmām).

Vairāk no Kadeisha Kean

Abonējiet mūsu biļetenu

Pievienojieties mūsu informatīvajam izdevumam, lai iegūtu tehniskus padomus, pārskatus, bezmaksas e -grāmatas un ekskluzīvus piedāvājumus!

Noklikšķiniet šeit, lai abonētu