Pseudo-elemendi mõistmine enne ja pärast
Cascading Style Sheet (CSS) on mõeldud peamiselt HTML-märgistuse stiilide rakendamiseks, kuid mõnel juhul, kui lisamärgistuse lisamine dokumendile on üleliigne või ei ole võimalik, on CSS-is tegelikult funktsioon, mis võimaldab meil lisada lisamärgistust ilma häirimata tegelik dokument, nimelt pseudoelemendid.
Te olete sellest terminist kuulnud, eriti kui olete jälginud mõningaid meie õpetusi.
Tegelikult on mõned CSS-i pereliikmed, kes on klassifitseeritud pseudoelemendid nagu :esimene rida, : esimene täht, :: valik, : enne ja : pärast. Kuid selle artikli puhul piirame oma levialasid ainult : enne ja : pärast, “pseudoelemendid” Siin viidatakse konkreetselt mõlemale. Me uurime seda teemat põhitõedest.
Süntaksi ja brauseri tugi
The pseudoelemendid on tegelikult olnud alates sellest ajast CSS1, kuid : enne ja : pärast mida me siin arutame, vabastati CSS2.1. Alguses pseudoelemendid kasutage süntaksi jaoks ühekolonni, seejärel kui veebi CSS3 the pseudoelemendid korrigeeriti, et kasutada topeltkolonni muutumist :: enne & :: pärast - seda eristada pseudo-klassid (st. :hõljuma, : aktiivne, ja nii edasi).
Siiski, kas te kasutate ühekoloonilist või topeltkoloonilist formaati, tunnevad brauserid ka seda. Ja kuna Internet Explorer 8 toetab ainult ühekolonni formaati, on turvalisem kasutada ühekolonni, kui soovite laiemat brauseri ühilduvust.
Mida see teeb?
Lühidalt, pseudoelemendid lisab täiendava elemendi enne või pärast seda sisu elementi, nii et kui lisame need mõlemad, on need tehniliselt võrdsed järgmise märgistusega.
: enne See on peamine sisu. : pärast
Kuid neid elemente dokumendis tegelikult ei looda. Nad on pinnal ikka nähtavad, kuid te ei leia neid dokumendi allikast, nii et nad praktiliselt on võlts elemente.
Pseudoelementide kasutamine
Kasutamine pseudoelemendid on suhteliselt lihtne; järgmine süntaks valija: enne lisab elemendi enne selle süntaksiga sisu valija valija: pärast lisab pärast seda ja sisu lisamiseks nendesse saame kasutada sisu vara.
Näiteks lisatakse allpool olevale fragmentile jutumärk enne ja pärast blockquote.
blockquote: enne sisu: avatud pakkumine; blockquote: pärast content: close-quote;
Pseudoelementide kujundamine
Vaatamata sellele, et tegemist on võltsitud elemendiga, pseudoelemendid tegelikult toimib nagu “reaalne” element; me saame neile lisada mis tahes stiilideklaratsiooni, näiteks värvi muutmise, tausta lisamise, fondi suuruse kohandamise, selle sees oleva teksti joondamise ja nii edasi.
blockquote: enne sisu: avatud pakkumine; fondi suurus: 24pt; teksti joondamine: keskus; rea kõrgus: 42 pikslit; värv: #fff; taust: #ddd; float: vasakule; positsioon: suhteline; top: 30px; blockquote: pärast content: close-quote; fondi suurus: 24pt; teksti joondamine: keskus; rea kõrgus: 42 pikslit; värv: #fff; taust: #ddd; float: parem; positsioon: suhteline; põhja: 40px;
Mõõtme määramine
Genereeritud elemendid on vaikimisi inline-tasemel element, nii et kui me täpsustame kõrgust ja laiust, siis peame selle kõigepealt plokkelemendina määrama, kasutades kuva: plokk deklaratsiooni.
blockquote: enne sisu: avatud pakkumine; fondi suurus: 24pt; teksti joondamine: keskus; rea kõrgus: 42 pikslit; värv: #fff; taust: #ddd; float: vasakule; positsioon: suhteline; top: 30px; raadius: 25px; / ** defineerige see plokkelemendina ** / kuvarina: plokk; kõrgus: 25 px; laius: 25 px; blockquote: pärast content: close-quote; fondi suurus: 24pt; teksti joondamine: keskus; rea kõrgus: 42 pikslit; värv: #fff; taust: #ddd; float: parem; positsioon: suhteline; põhja: 40px; raadius: 25px; / ** defineerige see plokkelemendina ** / kuvarina: plokk; kõrgus: 25 px; laius: 25 px;
Lisage taustapilt
Me võime ka sisu asendada pildiga, mitte ainult lihttekstiga. kuigi sisu vara pakub a URL () stringi pildi sisestamiseks, kuid enamasti eelistan seda palju taustal kinnisvarale lisatud pildi kontrollimiseks.
blockquote: enne sisu: "; fondi suurus: 24pt; teksti joondamine: keskus; rea kõrgus: 42 pikslit; värv: #fff; float: vasakule; positsioon: suhteline; top: 30px; raadius: 25px; taust: url (images / quotationmark.png) -3px -3px #ddd; kuva: plokk; kõrgus: 25 px; laius: 25 px; blockquote: pärast content: ""; fondi suurus: 24pt; teksti joondamine: keskus; rea kõrgus: 42 pikslit; värv: #fff; float: parem; positsioon: suhteline; põhja: 40px; raadius: 25px; taust: url (images / quotationmark.png) -1px -32px #ddd; kuva: plokk; kõrgus: 25 px; laius: 25 px;
Siiski, nagu näete ülaltoodud lõigust, kuulutame me ikka veel sisu vara ja seekord tühja stringiga. The sisu vara on nõue ja seda tuleks alati kohaldada; vastasel juhul pseudoelement ei tööta üldse.
Pseudo-klassidega kombineerimine
Kuigi nad on teistsugused pseudo, me saame seda kasutada pseudo-klassid koos pseudoelemendid üheskoos ühes CSS-reeglis, kui tahame seda muuta jutumärk taustal natuke tumedam, kui me hover üle blockquote.
blockquote: hover: after, blockquote: hover: enne taustavärv: # 555;
Üleminekuefekti lisamine
Ja me võime isegi rakendada üleminek vara, et luua graatsiline värvi ülemineku efekt.
üleminek: kõik 350ms; -o-üleminek: kõik 350ms; -moz-üleminek: kõik 350ms; -webkit-üleminek: kõik 350ms;
Kahjuks tundub ülemineku efekt vaid Firefoxi viimases versioonis. Loodetavasti jõuavad rohkem brauserid, et võimaldada üleminekuvara rakendamist pseudoelemendid tulevikus.
- Demo
- Allalaadimise allikas
Rohkem inspiratsiooni
Et teid inspireerida, oleme valinud kolm lahedat näidet, mis annavad teile ideid veebidisaini loomiseks.
Põnevad varjud
Selles juhendis selgitas Paul Underwood, kuidas luua realistlikum ja põnevam variefekt : enne ja : pärast pseudoelemendid. Mõlemad on paigutatud absoluutselt ja paigutatud tagaküljele negatiivne z-indeks väärtus.
Stacked Image Effect
Kasutades pseudoelemendid samuti on võimalik luua räpane virnastatud kujutisefekt ainult ühe kujutise abil. The pseudoelemendid kasutatakse, et luua tegeliku pildi tagaküljel olevate virnastatud piltide illusioon negatiivse abil z-indeks.
Järeldus
Pseudoelemendid on lihtsalt “jahtuda” ja lõppkokkuvõttes kasutatav, põhimõtteliselt meil on kaks boonuselementi iga elemendi kohta, mida me lisame, ilma et see üldse tegelikku HTML-i struktuuri segaks, ja seejärel pöörates need peaaegu kõikeks, mida me kunagi kujutame.
Tegelikult on olukord paranenud pseudoelemendid mida praegu töödeldakse, näiteks pesitsevad pseudoelemendid div :: enne :: enne content: "; ja mitu pseudoelementi div :: enne (3) content: "; mis ilmselt avab tulevikus veebiarenduse praktikas palju rohkem võimalusi. Praeguste brauserite rakendamisel oodake nüüd kannatlikult.
