Pseidoelementi ir viens no progresīvākajiem atlasītājiem, kas ir 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 attiecīgās tīmekļa lapas pamatstruktūru.

Lūk, kā CSS izmantot pseidoelementus.

Kopējie pseidoelementi

Ir pieejams plašs pieejamo pseidoelementu saraksts, kas atvieglo 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 vispārēja jebkura pseidoelementa izmantošana.

Pseidoelementu struktūras piemērs

selektors:: pseido-elements {
/ * css kods * /
} 

Lai gan jūs varat izmantot HTML elementu kā atlasītāju, ieteicams izmantot klasi vai ID, lai izkārtojumā netiktu atlasīti neparedzēti elementi. Elements, stils vai dati, kurus vēlaties ievietot vēlamajā vietā, jānovieto starp cirtainajām lencēm.

Sarakstā vispopulārākie ir pseidoelementi pirms un pēc, un, ņemot vērā to, ka ir daudz praktisku veidu, kā tos izmantot - nav grūti saprast, kāpēc.

Pirms pseidoelementa izmantošana CSS

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

Tas ir samērā viegli nosūtiet attēlu uz teksta grupas fona, bet, ja attēls ir pārāk spilgts, tam ir tendence pārņemt tekstu, kas atrodas tā augšpusē. Šādos gadījumos nākamais solis ir mēģinājums padarīt attēlu mazāk necaurspīdīgu, izmantojot rekvizītu necaurredzamība.

Vienīgā problēma ir tā, ka, tā kā attēls un teksts aizņ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 iepriekšējo pseidoelementu.

Izmantojot pseidoelementu Pirms piemēra

.galvenā lapa{
/ * Sakārto tekstu uz attēla pārklājuma * /
displejs: elastīgs;
elastības virziens: kolonna;
attaisnot-saturs: centrs;
align-items: centrs;
text-align: center;
/ * iestata lapu pielāgošanai dažādiem ekrāna izmēriem * /
augstums: 100vh;
}
.landingPage:: pirms {
saturs: '';
/ * importē attēlu * /
fons: url ( https://source.unsplash.com/_1EYIHRG014/1600x900)
neatkārtot centru / vāku;
/ * attēla augšpusē novieto pārklājumu * /
necaurredzamība: 0,4;
/ * padara attēlu redzamu * /
pozīcija: absolūta;
augšdaļa: 0;
pa kreisi: 0;
platums: 100%;
augstums: 100%;
}

Iepriekš minētais kods ir izveidots, lai to izmantotu vienoti ar zemāk esošo HTML landingPage klasi. Kā parādīts iepriekš minētajā kodā, izmantojot iepriekšējo pseidoelementu, mēs varam atlasīt attēlu un izmantot tajā redzamo necaurredzamības rekvizītu, pirms attēls tiek apvienots ar tekstu.

Pseidoelementa Pirms izmantošana


Tas ir rezultāts, izmantojot iepriekšējo pseidoelementu
pārklāt un attēlot ar lasāmu tekstu.

Tā rezultātā uz attēla tiks uzlikts pārklājums, un augšpusē tiks parādīts skaidrs teksts, kā parādīts zemāk esošajā attēlā:

Pēc pseidoelementa izmantošana CSS

Pēc pseidoelementa praktisks pielietojums ir palīdzēt izveidot HTML formu. Lielākā daļa veidlapu tiek veidotas ar lauku kopumu, kam nepieciešami dati, lai veiksmīgi iesniegtu veidlapu.

Viens veids, kā norādīt, ka laukam formā ir nepieciešami dati, ir zvaigznīte, kas atrodas aiz šī lauka etiķetes. Pēc pseidoelementa jūs varat to praktiski izmantot.

Izmantojot pseidoelementa piemēru

.required:: pēc {
saturs: '*';
krāsa: sarkana;
} 

Ievietojot iepriekš minēto kodu savas veidlapas CSS sadaļā, tiks nodrošināts, ka pēc katras etiķetes, kas satur nepieciešamo klasi, tieši seko sarkana zvaigznīte. Šis piemērs ir praktisks arī pēc pseidoelementa, jo tas palīdz nošķirt stilu no struktūras (kas programmatūras izstrādē vienmēr ir ideāls.)

Satura īpašums

Kā parādīts augšējā pseidoelementu piemērā, satura rekvizīts ir rīks, ko izmanto jauna satura ievietošanai tīmekļa lapā. Šis rekvizīts tiek izmantots tikai ar pirms un pēc pseidoelementiem.

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

Tagad CSS varat izmantot pseidoelementus

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

10 vienkārši CSS kodu piemēri, kurus varat uzzināt 10 minūtēs

Vai vēlaties uzzināt vairāk par CSS izmantošanu? Vispirms izmēģiniet šos pamata CSS koda piemērus, pēc tam tos lietojiet savās tīmekļa lapās.

Lasiet Tālāk

Par autoru