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.

Levinud pseudoelemendid

Veebiarendaja elu lihtsustamiseks on olemas ulatuslik loetelu pseudoelementidest. Mõned neist pseudoelementidest hõlmavad järgmist:

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

Konkreetsetes olukordades osutuvad mõned pseudoelemendid sobivamateks kui teised, kuid üks asi, mis püsib, on mis tahes pseudoelemendi kasutamise üldine struktuur.

Pseudoelementide struktuuri näide

valija:: pseudo-element {
/ * css kood * /
} 

Kuigi saate kasutada valijana HTML-elementi, 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, tuleks asetada lokkis trakside vahele.

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

Enne pseudoelemendi kasutamist CSS-is

Kuigi see pole võimatu, on CSS-is kujutiste loetava tekstiga ülekatmine keeruline. Seda peamiselt seetõttu, et pilt ja tekst hõivaksid veebilehel sama positsiooni.

Seda on suhteliselt lihtne teha saatke pilt tekstirühma taustale, kuid kui see pilt on liiga hele, kipub see selle peal oleva teksti üle jõu käima. Nendel juhtudel on järgmine samm proovida pilti läbipaistmatuse abil muuta vähem läbipaistmatuks.

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

Üks vähestest tõhusatest viisidest selle probleemi lahendamiseks on enne pseudoelemendi kasutamine.

Enne pseudoelemendi näite kasutamist

.landingPage {
/ * Korrastab pildi ülekatte teksti * /
kuva: painduv;
painde suund: veerg;
õigusta-sisu: keskus;
joondavad elemendid: keskel;
teksti joondamine: keskel;
/ * määrab lehe erinevatele ekraanisuurustele kohandamiseks * /
kõrgus: 100vh;
}
.landingPage:: enne {
sisu:'';
/ * impordib pildi * /
taust: url ( https://source.unsplash.com/_1EYIHRG014/1600x900)
ei kordu keskel / kaanel;
/ * asetab pildi peale ülekatte * /
läbipaistmatus: 0,4;
/ * muudab pildi nähtavaks * /
positsioon: absoluutne;
ülemine: 0;
vasakul: 0;
laius: 100%;
kõrgus: 100%;
}

Ülaltoodud kood on loodud kasutamiseks koos alloleva HTML landingPage klassiga. Nagu on näidatud ülaltoodud koodis, saame enne pseudoelementi kasutades pildi sihtida ja kasutada selle läbipaistmatuse omadust enne pildi ühendamist tekstiga.

Pseudoelemendi Enne kasutamine


See on eelneva pseudoelemendi kasutamise tulemus
loetava tekstiga ülekate ja pilt.

Selle tulemuseks on pildile ülekatte paigutamine ja selge teksti kuvamine, nagu alloleval pildil näidatud:

After Pseudo-elemendi kasutamine CSS-is

Pärast pseudoelemendi praktiline kasutamine on abiks HTML-vormi loomisel. Enamik vorme luuakse väljade komplektiga, mis nõuab vormi edukaks esitamiseks andmeid.

Üks võimalus näidata, et vormi väli nõuab andmeid, on selle välja sildi järele tärn. Järgnev pseudoelement pakub teile praktilist võimalust seda teha.

Kasutades pseudoelemendi näidet

. nõutav:: pärast {
sisu: '*';
värv: punane;
} 

Ülaltoodud koodi sisestamine vormi CSS-i jaotisse tagab, et igale nõutavat klassi sisaldavale sildile järgneb otse punane tärn. Järgnev pseudoelement on selles näites praktiline ka seetõttu, et see aitab stiililt struktuuri eraldada (mis on tarkvaraarenduses alati ideaalne).

Sisu vara

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

Oluline on märkida, et isegi kui sisu atribuudi jaoks ei ole sisu saadaval (näiteks enne pseudoelementide näidet ülal), peate ikkagi kasutama atribuudi enne või pärast pseudoelemendi parameetrite piires sisu omadust, et need toimiksid mõeldud.

Nüüd saate CSS-is kasutada pseudoelemente

Selles artiklis õppisite pseudoelemente CSS-i programmides tuvastama ja kasutama. Teile tutvustati pseudoelemente enne ja pärast ning anti praktilisi viise mõlema kasutamiseks. Samuti nägite, miks on atribuut sisu enne ja pärast pseudoelementide edukaks kasutamiseks vajalik.

10 lihtsat CSS-koodi näidet, mida saate õppida 10 minutiga

Kas soovite CSS-i kasutamise kohta rohkem teada saada? Alustuseks proovige neid CSS-i põhilisi näiteid ja seejärel rakendage neid oma veebisaitidele.

Loe edasi

Autori kohta