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ě.
