Pseidoelementa izpratne pirms un pēc
Cascading Style Sheet (CSS) galvenokārt ir paredzēts, lai HTML iezīmēm piemērotu stilu, tomēr dažos gadījumos, kad papildu atzīmes pievienošana dokumentam ir lieka vai nav iespējama, CSS ir faktiski iezīme, kas ļauj mums pievienot papildu atzīmi bez traucējumiem faktiskais dokuments, proti, pseidoelementi.
Jūs esat dzirdējuši par šo terminu, it īpaši, ja esat sekojis dažām mūsu apmācībām.
Patiesībā ir daži CSS ģimenes locekļi, kas ir klasificēti kā pseidoelementi piemēram, :pirmā līnija, : pirmā burta, :: izvēle, : pirms un : pēc. Taču attiecībā uz šo rakstu mēs ierobežosim savu pārklājumu tikai ar : pirms un : pēc, “pseidoelementi” šeit konkrēti tiks minēti abi. Mēs izskatīsim šo konkrēto tēmu no pamatiem.
Sintakses un pārlūkprogrammas atbalsts
The pseidoelementi kopš tā laika CSS1, bet : pirms un : pēc mēs šeit apspriežam, tika atbrīvoti CSS2.1. Sākumā pseidoelementi izmantot sintaksei vienu kolu, pēc tam, kad web attīstījās, CSS3 the pseidoelementi tika pārskatītas, lai izmantotu dubultkolons - kļūst :: pirms & :: pēc - to atšķirt ar pseido klases (t.i.. : lidināties, : aktīvs, un tā tālāk).
Tomēr neatkarīgi no tā, vai izmantojat vienu kolu vai dubultkolonu, pārlūkprogrammas joprojām atpazīs. Tā kā pārlūkprogramma Internet Explorer 8 atbalsta tikai vienu kolu formātu, ir drošāk izmantot vienu kolu, ja vēlaties plašāku pārlūkprogrammas saderību.
Ko tas dara?
Īsāk sakot, pseidoelementi ievietos papildu elementu iepriekš vai pēc tam satura elementu, tāpēc, pievienojot tos abiem, tie ir tehniski vienādi ar šādu atzīmi.
: pirms Tas ir galvenais saturs. : pēc
Bet šie elementi faktiski netiek radīti dokumentā. Tie joprojām ir redzami uz virsmas, bet jūs tos neatradīsiet uz dokumenta avota, tā praktiski runājot viltus elementiem.
Pseidoelementu izmantošana
Lietošana pseidoelementi ir salīdzinoši viegli; šādu sintaksi selektors: iepriekš pievienos elementu iepriekš satura atlasītājs, kamēr šī sintakse selektors: pēc pievienos pēc tam, un, lai pievienotu saturu tajās, mēs varam izmantot saturu īpašums.
Piemēram, zemāk esošais fragmentu pievienos pēdiņai pirms un pēc bloķēt.
blockquote: pirms saturs: atvērts citāts; blockquote: pēc content: close-quote;
Pseidoelementu veidošana
Neskatoties uz to, ka tas ir viltots elements pseidoelementi faktiski darbojas kā a “reāls” elements; mēs varam pievienot tiem jebkādu stilu deklarāciju, piemēram, krāsas maiņu, fona pievienošanu, fonta lieluma pielāgošanu, teksta iekšpuses un tā tālāk saskaņošanu.
blockquote: pirms saturs: atvērts citāts; fonta lielums: 24pt; teksta saskaņošana: centrs; līnijas augstums: 42px; krāsa: #fff; fons: #ddd; peldēt: pa kreisi; pozīcija: relatīvais; tops: 30px; blockquote: pēc content: close-quote; fonta lielums: 24pt; teksta saskaņošana: centrs; līnijas augstums: 42px; krāsa: #fff; fons: #ddd; pludiņš: pa labi; pozīcija: relatīvais; apakšā: 40px;
Dimensijas norādīšana
Radītie elementi pēc noklusējuma ir inline līmeņa elements, tāpēc, kad mēs gatavojamies noteikt augstumu un platumu, mums vispirms tas ir jādefinē kā bloka elements, izmantojot displejs: bloks deklarāciju.
blockquote: pirms saturs: atvērts citāts; fonta lielums: 24pt; teksta saskaņošana: centrs; līnijas augstums: 42px; krāsa: #fff; fons: #ddd; peldēt: pa kreisi; pozīcija: relatīvais; tops: 30px; robežu rādiuss: 25px; / ** to definē kā bloka elementu ** / displeju: bloku; augstums: 25px; platums: 25px; blockquote: pēc content: close-quote; fonta lielums: 24pt; teksta saskaņošana: centrs; līnijas augstums: 42px; krāsa: #fff; fons: #ddd; pludiņš: pa labi; pozīcija: relatīvais; apakšā: 40px; robežu rādiuss: 25px; / ** to definē kā bloka elementu ** / displeju: bloku; augstums: 25px; platums: 25px;
Pievienojiet fona attēlu
Mēs varam arī aizstāt saturu ar attēlu, nevis tikai vienkāršu tekstu. Lai gan saturu īpašums nodrošina a URL () string, lai ievietotu attēlu, bet vairumā gadījumu es daudz dodu priekšroku fona īpašums nodrošina lielāku kontroli pār pievienoto attēlu.
blockquote: pirms saturs: "; fonta lielums: 24pt; teksta saskaņošana: centrs; līnijas augstums: 42px; krāsa: #fff; peldēt: pa kreisi; pozīcija: relatīvais; tops: 30px; robežu rādiuss: 25px; fons: url (images / quotationmark.png) -3px -3px #ddd; displejs: bloks; augstums: 25px; platums: 25px; blockquote: pēc content: ""; fonta lielums: 24pt; teksta saskaņošana: centrs; līnijas augstums: 42px; krāsa: #fff; pludiņš: pa labi; pozīcija: relatīvais; apakšā: 40px; robežu rādiuss: 25px; fons: url (images / quotationmark.png) -1px -32px #ddd; displejs: bloks; augstums: 25px; platums: 25px;
Tomēr, kā redzams no iepriekš minētā fragmenta, mēs joprojām deklarējam saturu īpašums un šoreiz ar tukšu virkni. The saturu īpašums ir prasība un vienmēr būtu jāpiemēro; pretējā gadījumā pseidoelements nedarbosies vispār.
Apvienošana ar pseido klasēm
Lai gan tie ir cita veida pseido, mēs varam izmantot pseido klases kopā ar pseidoelementi piemēram, vienā CSS noteikumā, ja mēs vēlamies ieslēgt citāts zīme fona nedaudz tumšāks, kad mēs virzāmies virs bloķēt.
blockquote: hover: after, blockquote: hover: pirms fona krāsa: # 555;
Pārejas efekta pievienošana
Un mēs pat varam piemērot pāreju īpašums uz tiem, lai radītu graciozs krāsu pārejas efektu.
pāreja: visi 350ms; -o-pāreja: visi 350ms; -moz-pāreja: visi 350ms; -webkit pāreja: visi 350ms;
Diemžēl pārejas efekts darbojas tikai jaunākajā Firefox versijā. Cerams, ka vairāk pārlūkprogrammu varēs panākt, lai varētu izmantot pārejas īpašumu pseidoelementi nākotnē.
- Demo
- Lejupielādēt avotu
Vairāk iedvesmas
Lai iedvesmotu jūs, mēs esam izvēlējušies trīs atdzist piemērus, kas var sniegt jums idejas jūsu tīmekļa dizainam.
Aizraujošas ēnas
Šajā apmācībā Pauls Undervuds paskaidroja, kā izveidot reālistiskāku un aizraujošu ēnu efektu, izmantojot : pirms un : pēc pseidoelementi. Abi no tiem ir novietoti absolūti un novietoti aizmugurē negatīvs z-indekss vērtību.
Stacked Image Effect
Izmantojot pseidoelementi iespējams izveidot netīrs stacked attēlu efekts tikai ar vienu attēlu uz marķējuma ir arī iespējams. The pseidoelementi tiek izmantots, lai izveidotu ilustrāciju par stacked attēliem faktiskā attēla aizmugurē, izmantojot negatīvu z-indekss.
Secinājums
Pseudo elementi ir vienkārši “atdzesējiet” un galu galā izmantojami, būtībā mums ir divi bonusa elementi par katru elementu, ko pievienojam, neiejaucoties ar faktisko HTML struktūru, un pēc tam tos pārvēršot par gandrīz visu, ko mēs jebkad varam iedomāties.
Patiešām ir daži uzlabojumi pseidoelementi pašlaik strādā, piemēram, ligzdojošie pseidoelementi div :: pirms :: pirms content: "; un vairāki pseidoelementi div :: pirms (3) saturs: "; kas nākotnē radīs daudz vairāk iespēju web dizaina praksē. Kamēr tie tiek īstenoti pašreizējās pārlūkprogrammās, pagaidīsim pacietīgi.
