Razumevanje psevdo-elementa pred in po
Cascading Style Sheet (CSS) je v prvi vrsti namenjen uporabi slogov v označevalniku HTML, v nekaterih primerih, ko je dodajanje dodatnega označevalnega dokumenta odveč ali pa ni mogoče, je v CSS dejansko na voljo funkcija, ki nam omogoča, da dodate dodatne oznake, ne da bi pri tem motili dejanski dokument, in sicer. \ t psevdoelementi.
Slišali ste za ta izraz, še posebej, ko ste sledili nekaterim našim vadnicam.
Obstaja nekaj članov družine CSS, ki so razvrščeni kot psevdoelementi kot je :prva vrsta, : prva črka, :: izbor, : prej in : after. Toda za ta članek bomo omejili pokritost le na : prej in : after, “psevdoelementi” tukaj se posebej nanaša na obe. To temo bomo preučili iz osnov.
Sintaksa in podpora za brskalnik
The psevdoelementi od takrat CSS1, toda : prej in : after o katerih razpravljamo tukaj, so bili sproščeni CSS2.1. Na začetku psevdoelementi uporabite eno-dvopičje za sintakso, nato pa kot splet razvil, v CSS3 psevdoelementi revidirali, da bi dobili dvojno debelo črevo :: pred & :: po - za razlikovanje psevdo-razredi (tj. : hover, : aktivno, in tako naprej).
Ne glede na to, ali uporabljate eno-dvopičje ali dvoposteljno obliko, bodo brskalniki še vedno prepoznavali. Ker Internet Explorer 8 podpira samo eno-dvopičje, je varnejša uporaba dvopičja, če želite širšo združljivost brskalnika.
Kaj to naredi?
Na kratko, psevdoelementi bo vstavil dodatni element prej ali po element vsebine, tako da, ko jih dodamo oboje, sta tehnično enaki, z naslednjo oznako.
: prej To je glavna vsebina. : after
Vendar ti elementi v dokumentu dejansko niso ustvarjeni. Še vedno so vidni na površini, vendar jih ne boste našli na viru dokumentov, tako da so praktično ponaredek elementov.
Uporaba psevdoelementov
Uporaba psevdoelementi relativno enostavno; naslednjo skladnjo izbirnik: prej bo dodal element prej izbirnik vsebine, medtem ko ta sintaksa izbirnik: po bo dodal po njem, in da bi dodali vsebino v njih, lahko uporabimo vsebine nepremičnine.
Na primer, spodnji odrezek bo dodal narekovaj pred in za blockquote.
blockquote: pred vsebina: odprta ponudba; blockquote: po content: close-quote;
Oblikovanje psevdoelementov
Kljub temu, da je lažen element psevdoelementi dejansko delujejo kot a “resnično” element; na njih lahko dodajamo vse sloge, kot je spreminjanje barve, dodajanje ozadja, prilagajanje velikosti pisave, poravnava besedila v njem in tako naprej.
blockquote: pred vsebina: odprta ponudba; velikost pisave: 24pt; text-align: center; line-height: 42px; barva: #fff; ozadje: #ddd; plovec: levo; položaj: relativna; vrh: 30px; blockquote: po content: close-quote; velikost pisave: 24pt; text-align: center; line-height: 42px; barva: #fff; ozadje: #ddd; float: desno; položaj: relativna; spodaj: 40px;
Določanje dimenzije
Ustvarjeni elementi so privzeto element v ravni ravni, zato moramo določiti višino in širino, zato jo moramo najprej definirati kot element bloka z uporabo prikaz: blok deklaracije.
blockquote: pred vsebina: odprta ponudba; velikost pisave: 24pt; text-align: center; line-height: 42px; barva: #fff; ozadje: #ddd; plovec: levo; položaj: relativna; vrh: 30px; obrobni polmer: 25px; / ** ga definira kot element bloka ** / prikaz: blok; višina: 25px; širina: 25px; blockquote: po content: close-quote; velikost pisave: 24pt; text-align: center; line-height: 42px; barva: #fff; ozadje: #ddd; float: desno; položaj: relativna; spodaj: 40px; obrobni polmer: 25px; / ** ga definira kot element bloka ** / prikaz: blok; višina: 25px; širina: 25px;
Priložite sliko za ozadje
Vsebino lahko zamenjamo tudi s sliko in ne samo z navadnim besedilom. Čeprav vsebine lastnina zagotavlja URL () niz, da vstavite sliko, vendar v večini primerov raje uporabljam ozadju premoženja za večji nadzor nad priloženo sliko.
blockquote: pred content: ""; velikost pisave: 24pt; text-align: center; line-height: 42px; barva: #fff; plovec: levo; položaj: relativna; vrh: 30px; obrobni polmer: 25px; ozadje: url (images / quotationmark.png) -3px -3px #ddd; prikaz: blok; višina: 25px; širina: 25px; blockquote: po content: ""; velikost pisave: 24pt; text-align: center; line-height: 42px; barva: #fff; float: desno; položaj: relativna; spodaj: 40px; obrobni polmer: 25px; ozadje: url (images / quotationmark.png) -1px -32px #ddd; prikaz: blok; višina: 25px; širina: 25px;
Vendar, kot lahko vidite na zgornjem odlomku, še vedno prijavljamo vsebine in tokrat s praznim nizom. The vsebine lastnine zahteva in jih je treba vedno uporabljati; v nasprotnem primeru psevdoelement ne bo delovalo kar koli.
Združevanje s psevdo-razredi
Čeprav so drugačne vrste psevdo, lahko uporabimo psevdo-razredi skupaj z psevdoelementi skupaj v enem pravilu CSS, na primer, če želimo obrniti ozadje kotacijskega znaka nekoliko temnejši, ko se premikamo nad blockquote.
blockquote: hover: after, blockquote: lebdenje: pred background-color: # 555;
Dodajanje učinka prehoda
In lahko uporabimo celo prehod lastnost, da ustvarijo eleganten učinek prehoda barve.
prehod: vseh 350ms; -o-prehod: vseh 350ms; -moz-prehod: vseh 350ms; -webkit-prehod: vseh 350ms;
Na žalost se zdi, da učinek prehoda deluje le v najnovejši različici Firefoxa. Upajmo, da bo več brskalnikov dohitilo, da bo lastnost prehoda uporabljena psevdoelementi v prihodnosti.
- Demo
- Prenesi vir
Več navdiha
Da bi vas navdihnili, smo izbrali tri kul primere, ki vam lahko dajo ideje za vašo spletno oblikovanje.
Fascinantne sence
V tej vadbi je Paul Underwood pojasnil, kako ustvariti bolj realističen in zanimiv senčni učinek : prej in : after psevdoelementi. Oba sta nameščena povsem zadaj in postavljena zadaj negativno z-indeks vrednost.
Učinek zloženih slik
Uporabljati psevdoelementi za ustvarjanje neurejenega učinka zložene slike samo z eno sliko na označevalniku je prav tako mogoče. The psevdoelementi se uporablja za ustvarjanje iluzije zloženih slik na zadnji strani dejanske slike z uporabo negativnega z-indeks.
Zaključek
Pseudo-elementi je preprosto “kul” in končno uporabna, v bistvu imamo dva bonus elementa za vsak element, ki ga dodamo, ne da bi posegali v dejansko strukturo HTML, in jih nato spremenili v skoraj vse, kar si lahko predstavljamo.
Obstaja nekaj izboljšav psevdoelementi trenutno poteka, na primer gnezdenje psevdoelementov div :: before :: before content: "; in več psevdoelementov div :: before (3) content: "; kar bo v prihodnosti odprlo veliko več možnosti za prakso spletnega oblikovanja. Medtem ko se izvajajo v trenutnih brskalnikih, počakajmo zdaj potrpežljivo.
