Domovská » Kódování » Pochopení Pseudo-prvku před a po

    Pochopení Pseudo-prvku před a po

    Šablona stylů kaskádových stylů (CSS) je primárně určena pro použití stylů do značek HTML, ale v některých případech, když je přidání dokumentu do dokumentu nadbytečné nebo není možné, je v CSS vlastně funkce, která nám umožňuje přidat další značky bez narušení skutečný dokument, jmenovitě pseudo-elementy.

    Slyšeli jste o tomto termínu, zvláště když jste sledovali některé z našich výukových programů.

    Existuje vlastně několik členů rodiny CSS, kteří jsou klasifikováni jako pseudo-elementy Jako :první řada, :první dopis, ::výběr, :před a :po. Ale pro tento článek omezíme naše pokrytí pouze na :před a :po, “pseudo-elementy” zde bude konkrétně odkazovat na oba. Podíváme se na tento konkrétní předmět ze základů.

    Syntaxe a podpora prohlížeče

    pseudo-elementy byly asi od té doby CSS1, ale :před a :po které jsme zde diskutovali, byly zveřejněny CSS2.1. Na začátku pseudo-elementy pro syntaxi použijte jedno-dvojtečku, pak, jak se web vyvinul, v CSS3 the pseudo-elementy byly revidovány tak, aby používaly dvojité dvojtečky - staly se ::před & ::po - odlišit pseudo-třídy (tj. :vznášet se, :aktivní, a tak dále).

    Ať už používáte formát s dvojtečkou nebo dvojtečkou, prohlížeče budou stále rozpoznávat. A protože aplikace Internet Explorer 8 podporuje pouze formát s jedním dvojtečkou, je bezpečnější používat jednočarové, pokud chcete širší kompatibilitu prohlížeče.

    Co to dělá?

    Stručně řečeno pseudo-elementy vloží další prvek před nebo po elementu obsahu, takže když je přidáme oba, jsou technicky rovnocenné, s následujícím značením.

     

    :před To je hlavní obsah. :po

    Tyto prvky však nejsou v dokumentu generovány. Jsou stále viditelné na povrchu, ale nenajdete je na zdroji dokumentu, takže jsou prakticky řečeno falešný Prvky.

    Použití pseudoprvků

    Použitím pseudo-elementy je poměrně snadné; následující syntaxi volič: dříve přidá prvek před volič obsahu, zatímco tato syntaxe volič: po přidáme po něm a přidáme do nich obsah obsah vlastnictví.

    Níže uvedený úryvek například přidá uvozovku před a po blockquote.

     blockquote: before content: open-quote;  blockquote: after content: close-quote;  

    Styling pseudo-elementy

    Navzdory tomu, že je to falešný prvek, pseudo-elementy vlastně se chová jako “nemovitý” živel; jsme schopni k nim přidat libovolnou deklaraci stylů, jako je změna barvy, přidání pozadí, nastavení velikosti písma, zarovnání textu uvnitř a podobně.

     blockquote: before content: open-quote; velikost písma: 24pt; zarovnání textu: střed; výška řádku: 42px; barva: #ff; pozadí: #ddd; plavat vlevo; poloha: relativní; top: 30px;  blockquote: after content: close-quote; velikost písma: 24pt; zarovnání textu: střed; výška řádku: 42px; barva: #ff; pozadí: #ddd; float: right; poloha: relativní; dno: 40px;  

    Určení kóty

    Generované elementy jsou standardně elementem inline-level, takže když chceme specifikovat výšku a šířku, musíme ji nejprve definovat jako element bloku pomocí zobrazit: blok prohlášení.

     blockquote: before content: open-quote; velikost písma: 24pt; zarovnání textu: střed; výška řádku: 42px; barva: #ff; pozadí: #ddd; plavat vlevo; poloha: relativní; top: 30px; hraniční rádius: 25px; / ** definovat jako prvek bloku ** / zobrazení: blok; výška: 25px; šířka: 25px;  blockquote: after content: close-quote; velikost písma: 24pt; zarovnání textu: střed; výška řádku: 42px; barva: #ff; pozadí: #ddd; float: right; poloha: relativní; dno: 40px; hraniční rádius: 25px; / ** definovat jako prvek bloku ** / zobrazení: blok; výška: 25px; šířka: 25px;  

    Připojit obrázek na pozadí

    Můžeme také nahradit obsah spíše obrazem než pouze prostým textem. Ačkoliv obsah nemovitost poskytuje a url () řetězec pro vložení obrázku, ale ve většině případů dávám přednost použití Pozadí vlastnost pro větší kontrolu nad připojeným obrázkem.

     blockquote: before content: ""; velikost písma: 24pt; zarovnání textu: střed; výška řádku: 42px; barva: #ff; plavat vlevo; poloha: relativní; top: 30px; hraniční rádius: 25px; background: url (images / quotationmark.png) -3px -3px #ddd; zobrazení: blok; výška: 25px; šířka: 25px;  blockquote: after content: ""; velikost písma: 24pt; zarovnání textu: střed; výška řádku: 42px; barva: #ff; float: right; poloha: relativní; dno: 40px; hraniční rádius: 25px; background: url (images / quotationmark.png) -1px -32px #ddd; zobrazení: blok; výška: 25px; šířka: 25px;  

    Jak však můžete vidět z úryvku výše, stále deklarujeme obsah vlastnost a tentokrát s prázdným řetězcem. obsah nemovitost je Požadavek a měla by být vždy uplatňována; jinak pseudo-element to nebude fungovat vůbec.

    Kombinace s pseudo-třídami

    I když jsou jiné pseudo, můžeme použít pseudo-třídy spolu s pseudo-elementy společně v jednom pravidle CSS, například pokud chceme obrátit pozadí uvozovky trošku tmavší, když se vznášíme nad blockquote.

     blockquote: hover: after, blockquote: vznášet se: před background-color: # 555;  

    Přidání efektu přechodu

    A můžeme použít i přechod na nich vytvořit elegantní efekt přechodu barev.

     přechod: všech 350ms; -o-přechod: všech 350ms; -moz-přechod: všech 350ms; -webk-přechod: všechny 350ms; 

    Zdá se však, že přechodový efekt funguje pouze v nejnovější verzi Firefoxu. Doufejme, že více prohlížečů dohoní, aby mohla být použita vlastnost přechodu pseudo-elementy v budoucnu.

    • Demo
    • Stáhněte si zdroj

    Další inspirace

    Abychom vás mohli inspirovat, vybrali jsme tři skvělé příklady, které vám mohou poskytnout nápady pro váš webový design.

    Fascinující stíny

    V tomto tutoriálu Paul Underwood vysvětlil, jak vytvořit realističtější a fascinující stínový efekt pomocí :před a :po pseudo-elementy. Oba z nich jsou umístěny absolutně a umístěny zcela vzadu negativní z-index hodnota.

    Skládaný obrazový efekt

    Za použití pseudo-elementy pro vytvoření chaotického skládaného obrazového efektu je také možný pouze jeden obraz na značce. pseudo-elementy se používá k vytvoření iluze naskládaných obrazů v zadní části skutečného obrazu pomocí negativu z-index.

    Závěr

    Pseudo-elementy je prostě “chladný” a nakonec použitelné, v podstatě máme dva bonusové prvky pro každý prvek přidáváme, aniž bychom zasahovali do skutečné struktury HTML, a pak je přeměňujeme na téměř vše, co si dokážeme představit.

    Tam jsou vlastně nějaké zlepšení pro pseudo-elementy které se v současné době pracuje, jako např hnízdící pseudoprvky div :: before :: before content: "; a více pseudoprvků div :: before (3) content: "; což samozřejmě otevře v budoucnu mnohem více možností v praxi web design. Zatímco jsou implementovány v aktuálních prohlížečích, počkejte trpělivě.