Pseudo elemento supratimas prieš ir po
„Cascading Style Sheet“ („CSS“) visų pirma yra skirtas stilių pritaikymui HTML žymėjimui, tačiau kai kuriais atvejais, kai pridedamas papildomas žymėjimas dokumentui yra nereikalingas arba neįmanoma, CSS funkcija iš tikrųjų suteikia galimybę pridėti papildomą žymėjimą nepažeidžiant faktinį dokumentą, ty pseudo elementai.
Jūs girdėjote apie šį terminą, ypač kai sekėte kai kuriuos mūsų vadovus.
Iš tikrųjų yra keletas CSS šeimos narių, kurie yra klasifikuojami kaip pseudo elementai toks kaip :Pirma eilė, :pirmoji raidė, ::pasirinkimas, : anksčiau ir : po. Tačiau šiame straipsnyje mes apribosime savo aprėptį tik : anksčiau ir : po, “pseudo elementai” čia bus konkrečiai nurodyti abu. Mes išnagrinėsime šį konkretų dalyką iš pagrindų.
Sintaksė ir naršyklės palaikymas
The pseudo elementai iš tikrųjų buvo nuo to laiko CSS1, bet : anksčiau ir : po mes čia diskutuojame, buvo išleisti CSS2.1. Pradžioje pseudo elementai sintaksei naudokite vieną dvitaškį, tada kaip internetą, CSS3 the pseudo elementai buvo pakeistos, kad būtų galima naudoti dvigubą dvitaškį :: prieš & :: po - atskirti pseudo klasės (t.y. : Pakimba, : aktyvus, ir taip toliau).
Tačiau, ar naudojatės dvitaškio arba dvigubos dvitaškis, naršyklės vis tiek atpažins. Ir kadangi „Internet Explorer 8“ palaiko tik vieno colio formatą, saugiau naudoti vieną dvitaškį, jei norite didesnio naršyklės suderinamumo.
Ką tai daro?
Trumpai tariant, pseudo elementai įves papildomą elementą anksčiau arba po to turinio elementas, taigi, kai juos pridedame, jie techniškai yra lygūs su šiuo žymėjimu.
: anksčiau Tai pagrindinis turinys. : po
Tačiau šie elementai nėra faktiškai sukurti dokumente. Jie vis dar matomi ant paviršiaus, bet jūs jų nerasite ant dokumento šaltinio, todėl praktiškai jie yra suklastotas elementus.
Naudojant pseudo elementus
Naudojimas pseudo elementai yra gana lengva; šią sintaksę selektorius: anksčiau pridės elementą anksčiau turinio selektorių, kai ši sintaksė yra selektorius: po pridės po jo, ir pridėti turinį viduje mes galime naudoti turinys nuosavybė.
Pavyzdžiui, toliau pateikiamas fragmentas prideda kabučių ženklą prieš ir po blokas.
blockquote: prieš content: open-quote; blockquote: po content: close-quote;
Pseudo elementų formavimas
Nepaisant to, kad tai suklastotas elementas, pseudo elementai iš tikrųjų veikia kaip a “tikras” elementas; galime pridėti bet kokią stilių deklaraciją, pvz., keisti spalvą, pridėti foną, koreguoti šrifto dydį, suderinti jo viduje esantį tekstą ir pan..
blockquote: prieš content: open-quote; šrifto dydis: 24pt; teksto derinimas: centras; linijos aukštis: 42px; spalva: #fff; fonas: #ddd; plūdė: kairė; pozicija: santykinis; viršuje: 30px; blockquote: po content: close-quote; šrifto dydis: 24pt; teksto derinimas: centras; linijos aukštis: 42px; spalva: #fff; fonas: #ddd; float: right; pozicija: santykinis; apačioje: 40px;
Matmens nustatymas
Sukurti elementai pagal nutylėjimą yra eilutės lygio elementas, todėl kai mes norime nurodyti aukštį ir plotį, pirmiausia turime jį apibrėžti kaip blokinį elementą naudojant ekranas: blokas deklaraciją.
blockquote: prieš content: open-quote; šrifto dydis: 24pt; teksto derinimas: centras; linijos aukštis: 42px; spalva: #fff; fonas: #ddd; plūdė: kairė; pozicija: santykinis; viršuje: 30px; pasienio spindulys: 25px; / ** jį apibrėžia kaip blokinį elementą ** / ekraną: bloką; aukštis: 25px; plotis: 25px; blockquote: po content: close-quote; šrifto dydis: 24pt; teksto derinimas: centras; linijos aukštis: 42px; spalva: #fff; fonas: #ddd; float: right; pozicija: santykinis; apačioje: 40px; pasienio spindulys: 25px; / ** jį apibrėžia kaip blokinį elementą ** / ekraną: bloką; aukštis: 25px; plotis: 25px;
Pridėkite fono paveikslėlį
Mes taip pat galime pakeisti turinį vaizdu, o ne tik paprastu tekstu. nors turinys nuosavybė suteikia a URL () eilutę įterpti vaizdą, tačiau daugeliu atvejų aš daug labiau norėčiau naudoti fonas turtą, kad būtų galima labiau kontroliuoti pridedamą vaizdą.
blokas: prieš turinys: "; šrifto dydis: 24pt; teksto derinimas: centras; linijos aukštis: 42px; spalva: #fff; plūdė: kairė; pozicija: santykinis; viršuje: 30px; pasienio spindulys: 25px; fonas: url (images / quotationmark.png) -3px -3px #ddd; ekranas: blokas; aukštis: 25px; plotis: 25px; blockquote: po content: ""; šrifto dydis: 24pt; teksto derinimas: centras; linijos aukštis: 42px; spalva: #fff; float: right; pozicija: santykinis; apačioje: 40px; pasienio spindulys: 25px; fonas: url (images / quotationmark.png) -1px -32px #ddd; ekranas: blokas; aukštis: 25px; plotis: 25px;
Tačiau, kaip matote iš pirmiau pateikto fragmento, mes vis dar skelbiame turinys turtą ir šį kartą su tuščia eilute. The turinys turtas yra reikalavimas ir visada turėtų būti taikomi; kitaip pseudo elementas neveiks bet kokia.
Derinimas su pseudo klasėmis
Nors jie yra kitokio pobūdžio pseudo, mes galime naudoti pseudo klasės kartu su pseudo elementai pavyzdžiui, vienoje CSS taisyklėje, jei norime pakeisti kabučių fonas šiek tiek tamsesnis, kai pakyla virš blokas.
blockquote: hover: after, blockquote: hover: prieš background-color: # 555;
Pereinamojo efekto pridėjimas
Ir mes galime net taikyti perėjimas nuosavybė jiems sukurti gražią spalvų perėjimo efektą.
perėjimas: visi 350ms; -o-perėjimas: visi 350ms; -moz-perėjimas: visi 350ms; -webkit-perėjimas: visi 350ms;
Deja, atrodo, kad perėjimo efektas veikia tik naujausioje „Firefox“ versijoje. Tikimės, kad daugiau naršyklių bus paspaudę, kad būtų galima taikyti pereinamąjį turtą pseudo elementai ateityje.
- Demo
- Atsisiųsti šaltinį
Daugiau įkvėpimo
Kad paskatintumėte jus, mes pasirinkome tris puikius pavyzdžius, kurie gali suteikti jums idėjų savo interneto dizainui.
Įspūdingos šešėliai
Šioje pamokoje Paulas Underwoodas paaiškino, kaip sukurti realistiškesnį ir įdomesnį šešėlio efektą : anksčiau ir : po pseudo elementai. Abi jos yra išdėstytos absoliučiai ir padedamos gale neigiamas z-indeksas vertė.
Sudėtinis vaizdo efektas
Naudojant pseudo elementai taip pat galima sukurti netvarų sukrautą vaizdo efektą tik su vienu vaizdu žymėjime. The pseudo elementai naudojamas sukurti sukurtų vaizdų iliustraciją faktinio vaizdo gale, naudojant neigiamą z-indeksas.
Išvada
Pseudo elementai yra tiesiog “Saunus” galiausiai mes galime naudoti du premijos elementai už kiekvieną elementą, kurį mes pridėjome, nesikišdami į faktinę HTML struktūrą, ir tada paverčiant juos beveik viskas, ką galime įsivaizduoti.
Iš tikrųjų yra šiek tiek patobulinimų pseudo elementai šiuo metu dirbama, pvz pseudo elementai div :: prieš :: prieš content: "; ir keli pseudo elementai div :: prieš (3) content: "; kuri ateityje akivaizdžiai atvers daug daugiau interneto dizaino praktikos galimybių. Kol jie yra įgyvendinami dabartinėse naršyklėse, dabar palaukite kantriai.
