Pochopenie pseudo-prvku pred a po
Kaskádový štýl (CSS) je primárne určený na použitie štýlov na značku HTML, avšak v niektorých prípadoch je pri pridávaní extra značky do dokumentu nadbytočná alebo nie je možná, v skutočnosti existuje funkcia v CSS, ktorá nám umožňuje pridať ďalšie označenie bez narušenia skutočný dokument, konkrétne pseudo-elementy.
Počuli ste o tomto termíne, a to najmä vtedy, keď ste sledovali niektoré z našich cvičení.
Existuje niekoľko členov rodiny CSS, ktoré sú klasifikované ako pseudo-elementy ako :prvá línia, :prvé písmeno, :: výber, : before a : po. Ale pre tento článok obmedzíme naše pokrytie iba na : before a : po, “pseudo-elementy” tu sa konkrétne budeme odvolávať na obidve. Z tejto základnej témy sa budeme zaoberať týmto konkrétnym predmetom.
Syntax a podpora prehliadača
pseudo-elementy odvtedy boli skutočne okolo CSS1, ale : before a : po o ktorých tu diskutujeme, boli prepustené CSS2.1. Na začiatku pseudo-elementy použite jednoduchú dvojbodku pre syntax, potom ako web vyvíjal v CSS3 pseudo-elementy boli revidované, aby sa využil dvojitý dvojbok :: predtým & :: po - rozlíšiť ho pseudo-triedy (tj. :vznášať sa, : aktívny, a tak ďalej).
Ak však použijete formát dvojbodku alebo dvojbodku, prehliadače budú rozpoznávať jeden z nich. A keďže program Internet Explorer 8 podporuje iba formát s dvojbodkou, je bezpečnejšie používať dvojbodku, ak chcete širšiu kompatibilitu prehliadača.
Čo to robí?
Stručne povedané, pseudo-elementy vloží ďalší prvok pred alebo po prvok obsahu, takže keď ich pridáme obaja, sú technicky rovnaké, s nasledujúcou značkou.
: before Toto je hlavný obsah. : po
Tieto prvky však v skutočnosti nie sú na dokumente vygenerované. Oni sú stále viditeľné na povrchu, ale nenachádzate ich na zdroji dokumentov, takže prakticky sú falzifikát prvky.
Použitie pseudo-elementov
Použitím pseudo-elementy je relatívne jednoduché; nasledujúcu syntax Volič: pred pridá prvok pred pre výber obsahu, zatiaľ čo táto syntax Volič: po po ňom pridáme a pridáme do nich obsah, ktorý môžeme použiť obsah vlastnosť.
Napríklad, nižšie uvedený útržok pridá úvodzovku pred a za blockquote.
blockquote: pred obsah: open-quote; blockquote: after content: close-quote;
Štýlové pseudo-prvky
Napriek tomu, že je falošným prvkom, pseudo-elementy vlastne konať ako “reálny” element; sme schopní pridať akékoľvek deklarácie štýlov na ne, ako je zmena farby, pridanie pozadia, úprava veľkosti písma, zarovnanie textu vnútri a tak ďalej.
blockquote: pred obsah: open-quote; veľkosť písma: 24pt; text-align: center; line-height: 42px; farba: #fff; pozadie: #ddd; plavák: vľavo; pozícia: relatívna; top: 30px; blockquote: after content: close-quote; veľkosť písma: 24pt; text-align: center; line-height: 42px; farba: #fff; pozadie: #ddd; float: vpravo; pozícia: relatívna; spodná: 40px;
Určenie dimenzie
Vygenerované prvky sú v predvolenom nastavení elementom na úrovni riadku, takže keď budeme určovať výšku a šírku, musíme ju najskôr definovať ako blokový prvok pomocou zobrazenie: blok vyhlásenie.
blockquote: pred obsah: open-quote; veľkosť písma: 24pt; text-align: center; line-height: 42px; farba: #fff; pozadie: #ddd; plavák: vľavo; pozícia: relatívna; top: 30px; polomer okrajov: 25 pixlov; / ** definovať ako blokový prvok ** / display: block; výška: 25px; šírka: 25px; blockquote: after content: close-quote; veľkosť písma: 24pt; text-align: center; line-height: 42px; farba: #fff; pozadie: #ddd; float: vpravo; pozícia: relatívna; spodná: 40px; polomer okrajov: 25 pixlov; / ** definovať ako blokový prvok ** / display: block; výška: 25px; šírka: 25px;
Pripojte obrázok na pozadí
Obsah môžeme nahradiť aj obrázkom a nie iba obyčajným textom. Napriek tomu obsah nehnuteľnosť poskytuje url () reťazec vložiť obrázok, ale vo väčšine prípadov veľmi radšej používam pozadie vlastnosť pre väčšiu kontrolu nad priloženým obrázkom.
blockquote: pred obsah: ""; veľkosť písma: 24pt; text-align: center; line-height: 42px; farba: #fff; plavák: vľavo; pozícia: relatívna; top: 30px; polomer okrajov: 25 pixlov; pozadie: url (images / quotationmark.png) -3px -3px #ddd; zobrazenie: blok; výška: 25px; šírka: 25px; blockquote: after content: ""; veľkosť písma: 24pt; text-align: center; line-height: 42px; farba: #fff; float: vpravo; pozícia: relatívna; spodná: 40px; polomer okrajov: 25 pixlov; pozadie: url (images / quotationmark.png) -1px -32px #ddd; zobrazenie: blok; výška: 25px; šírka: 25px;
Ako však vidíte z úryvku, stále deklarujeme obsah Vlastnosť a tentoraz s prázdnym reťazcom. obsah nehnuteľnosť je požiadavky a mali by sa vždy uplatňovať; inak pseudo-prvok nebudem pracovať vôbec.
Kombinácia s pseudotriedami
I keď sú inak nepravý, môžeme použiť pseudo-triedy spolu s pseudo-elementy spolu v jednom pravidle CSS, napríklad, ak chceme obrátiť pozadie uvozovky trochu tmavšie, keď sme sa vznášali nad blockquote.
blockquote: hover: po, blockquote: hover: pred background-color: # 555;
Pridanie efektu prechodu
A môžeme ju dokonca použiť prechod vlastnosť na nich vytvoriť elegantný farebný prechodný efekt.
prechod: všetky 350ms; -o-prechod: všetky 350ms; -moz-transition: všetky 350ms; -webkit-transition: všetky 350ms;
Bohužiaľ, zdá sa, že efekt prechodu funguje iba v najnovšej verzii prehliadača Firefox. Dúfajme, že sa viac prehliadačov dostane do úvahy, aby sa umožnilo použiť prechodové vlastníctvo pseudo-elementy v budúcnosti.
- demonštrácie
- Stiahnuť zdroj
Viac inšpirácie
Aby sme vás inšpirovali, vybrali sme tri skvelé príklady, ktoré vám môžu poskytnúť nápady pre váš web dizajn.
Fascinujúce tiene
V tomto tutoriále Paul Underwood vysvetlil, ako vytvoriť realistickejší a fascinujúci efekt tieňa pomocou : before a : po pseudo-elementy. Obaja sú umiestnené absolútne a umiestnené na zadnej strane negatívny z-index hodnota.
Vložený obrazový efekt
Použitie pseudo-elementy na vytvorenie nepríjemného zoskupeného efektu obrázka je možné len s jedným obrázkom na označenie. pseudo-elementy sa používa na vytvorenie ilúzie naskladaných obrázkov na zadnej strane skutočného obrazu pomocou negatívu z-index.
záver
Pseudo-elementy je jednoducho “chladný” a nakoniec použiteľné, v podstate máme dva bonusové prvky pre každý prvok, ktorý pridáme, bez toho, aby sme narušili skutočnú HTML štruktúru a potom ich obrátili na takmer všetko, čo si dokážeme predstaviť.
Naozaj existujú určité zlepšenia pseudo-elementy na ktorom sa práve pracuje, ako napr hniezdiace pseudoelementy div :: pred :: pred obsah: "; a viacerých pseudoelementov div :: pred (3) obsah: "; čo samozrejme v budúcnosti otvorí oveľa viac možností v praxi webového dizajnu. Zatiaľ čo sú implementované v súčasných prehliadačoch, počkajme teraz trpezlivo.
