Kotisivu » Coding » Pseudo-elementin ymmärtäminen ennen ja jälkeen

    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.