Pseudo-elementin ymmärtäminen ennen ja jälkeen
CSS (Cascading Style Sheet) on tarkoitettu ensisijaisesti HTML-merkinnän tyyleihin, mutta joissakin tapauksissa, kun ylimääräisen merkinnän lisääminen asiakirjaan on tarpeeton tai ei ole mahdollista, CSS: ssä on todella ominaisuus, jonka avulla voimme lisätä ylimääräistä merkintää häiritsemättä todellinen asiakirja, nimittäin pseudo-elementit.
Olet kuullut tästä termistä, varsinkin kun olet seurannut joitakin opetusohjelmistamme.
On olemassa muutamia CSS-perheenjäseniä, jotka luokitellaan pseudo-elementit kuten :ensimmäinen linja
, :ensimmäinen kirjain
, ::valinta
, :ennen
ja :jälkeen
. Mutta tässä artikkelissa rajoitamme kattavuutemme vain :ennen
ja :jälkeen
, “pseudo-elementit” tässä viitataan erityisesti molempiin. Tarkastelemme tätä asiaa perusasioista.
Syntaksi ja selaimen tuki
pseudo-elementit ovat olleet noin vuodesta CSS1, mutta :ennen
ja :jälkeen
josta keskustelemme täällä, julkaistiin vuonna CSS2.1. Alussa pseudo-elementit käytä syntaksia varten yhden kolononin, sitten webin kehittyessä CSS3: ssa pseudo-elementit tarkistettiin käyttämään kaksoispiste - tulossa ::ennen
& ::jälkeen
- erottaa se näennäisluokkia (ts. : hover
, : aktiivinen
, ja niin edelleen).
Kuitenkin, käytätkö kaksoispiste- tai kaksoispisteformaattia, selaimet tunnistavat silti. Ja koska Internet Explorer 8 tukee vain kaksoispisteformaattia, on yksinkertaisempi kaksoispiste, jos haluat laajemman selaimen yhteensopivuuden.
Mitä se tekee?
Lyhyesti sanottuna pseudo-elementit lisää ylimääräisen elementin ennen tai jälkeen sisällön elementti, joten kun lisäät ne molemmat, ne ovat teknisesti yhtä suuria, seuraavalla merkinnällä.
:ennen Tämä on tärkein sisältö. :jälkeen
Mutta nämä elementit eivät tosiasiassa tuotu asiakirjassa. Ne ovat edelleen näkyvissä pinnalla, mutta et löydä niitä dokumentin lähteestä, joten käytännössä ne ovat väärennös elementtejä.
Pseudoelementtien käyttö
käyttämällä pseudo-elementit on suhteellisen helppoa; seuraava syntaksi valitsin: ennen
lisää elementin ennen sisällön valitsin tämän syntaksin aikana valitsin: jälkeen
lisää sen jälkeen, ja lisätä sisältöä niiden sisällä voimme käyttää pitoisuus
omaisuus.
Esimerkiksi alla oleva fragmentti lisää lainausmerkin ennen ja jälkeen blockquote
.
blockquote: ennen content: open-quote; blockquote: sen jälkeen, kun content: close-quote;
Pseudoelementtien muotoilu
Huolimatta siitä, että se on väärennös, pseudo-elementit itse asiassa toimii “todellinen” elementti; pystymme lisäämään niihin tyylien ilmoituksia, kuten värin muuttamista, taustan lisäämistä, fonttikoon säätämistä, tekstin kohdistamista sen sisällä ja niin edelleen.
blockquote: ennen content: open-quote; kirjasinkoko: 24pt; text-align: center; linjan korkeus: 42px; väri: #fff; tausta: #ddd; float: vasen; asema: suhteellinen; alkuun: 30px; blockquote: sen jälkeen, kun content: close-quote; kirjasinkoko: 24pt; text-align: center; linjan korkeus: 42px; väri: #fff; tausta: #ddd; float: oikea; asema: suhteellinen; pohja: 40px;
Mitan määrittäminen
Luodut elementit ovat oletusarvoisesti sisäisen tason elementti, joten kun aiomme määrittää korkeuden ja leveyden, meidän on ensin määritettävä se lohkoelementtinä käyttämällä näyttö: lohko
ilmoitus.
blockquote: ennen content: open-quote; kirjasinkoko: 24pt; text-align: center; linjan korkeus: 42px; väri: #fff; tausta: #ddd; float: vasen; asema: suhteellinen; alkuun: 30px; raja-säde: 25px; / ** määrittele se lohkoelementiksi ** / näyttö: lohko; korkeus: 25px; leveys: 25px; blockquote: sen jälkeen, kun content: close-quote; kirjasinkoko: 24pt; text-align: center; linjan korkeus: 42px; väri: #fff; tausta: #ddd; float: oikea; asema: suhteellinen; pohja: 40px; raja-säde: 25px; / ** määrittele se lohkoelementiksi ** / näyttö: lohko; korkeus: 25px; leveys: 25px;
Liitä taustakuva
Voimme myös korvata sisällön pikemminkin kuin pelkällä tekstillä. vaikkakin pitoisuus
omaisuus tarjoaa a url ()
merkkijono kuvan lisäämiseksi, mutta useimmissa tapauksissa mieluummin käytän tausta
omaisuutta, jotta se voi hallita enemmän liitettyä kuvaa.
blockquote: ennen content: ""; kirjasinkoko: 24pt; text-align: center; linjan korkeus: 42px; väri: #fff; float: vasen; asema: suhteellinen; alkuun: 30px; raja-säde: 25px; tausta: url (images / quotationmark.png) -3px -3px #ddd; näyttö: lohko; korkeus: 25px; leveys: 25px; blockquote: sen jälkeen, kun content: ""; kirjasinkoko: 24pt; text-align: center; linjan korkeus: 42px; väri: #fff; float: oikea; asema: suhteellinen; pohja: 40px; raja-säde: 25px; tausta: url (images / quotationmark.png) -1px -32px #ddd; näyttö: lohko; korkeus: 25px; leveys: 25px;
Kuten edellä olevasta katkelmasta näet, julistamme kuitenkin edelleen pitoisuus
omaisuutta ja tällä kertaa tyhjällä merkkijonolla. pitoisuus
omaisuus on vaatimus ja sitä olisi aina sovellettava; muuten pseudo-elementti ei toimi mikä tahansa.
Yhdistäminen pseudoklasseihin
Vaikka ne ovat erilaisia pseudo, voimme käyttää näennäisluokkia kera pseudo-elementit yhdessä yhdessä CSS-säännössä, jos haluamme kääntää lainausmerkin tausta hieman tummempi, kun siirrämme blockquote
.
blockquote: hover: after, blockquote: hover: ennen taustaväri: # 555;
Siirtymävaiheen lisääminen
Ja voimme jopa soveltaa sitä siirtyminen
omaisuutta heille luomaan siro värinmuutosvaikutus.
siirtyminen: kaikki 350ms; -o-siirtyminen: kaikki 350ms; -moz-siirtyminen: kaikki 350ms; -webkit-siirto: kaikki 350ms;
Valitettavasti siirtymävaikutus näyttää vain toimivan Firefoxin uusimmassa versiossa. Toivottavasti enemmän selaimia tulee kiinni, jotta siirtymäominaisuus voidaan soveltaa pseudo-elementit tulevaisuudessa.
- esittely
- Lataa lähde
Lisää inspiraatiota
Voit innostaa sinua valitsemaan kolme viileää esimerkkiä, jotka voivat antaa sinulle ideoita web-suunnitteluun.
Ihastuttavat varjot
Tässä opetuksessa Paul Underwood selitti, miten luodaan realistisempi ja kiehtovampi varjoefekti käyttämällä :ennen
ja :jälkeen
pseudo-elementit. Molemmat on sijoitettu ehdottomasti ja sijoitettu takaosaan negatiivinen z-index
arvo.
Pinottu kuvatehoste
Käyttämällä pseudo-elementit On myös mahdollista luoda sotkuinen pinottu kuvatehoste vain yhden kuvan avulla. pseudo-elementit käytetään luomaan illuusion pinottuista kuvista todellisen kuvan takana negatiivisella z-index
.
johtopäätös
Pseudo-elementit on yksinkertaisesti “viileä” ja lopulta käyttökelpoinen, periaatteessa meillä on kaksi bonuselementtiä jokaiselle lisättävälle elementille häiritsemättä todellista HTML-rakennetta ollenkaan ja kääntämällä ne lähes kaiken, mitä voimme koskaan kuvitella.
Itse asiassa on olemassa joitakin parannuksia pseudo-elementit jota parhaillaan käsitellään, kuten pseudoelementit div :: ennen :: ennen content: ";
ja useita pseudoelementtejä div :: ennen (3) content: ";
joka avaa ilmeisesti paljon enemmän mahdollisuuksia web-suunnittelukäytännössä tulevaisuudessa. Odotamme kärsivällisesti nyt, kun niitä käytetään nykyisissä selaimissa.