CSS: pseudo-elementy a pseudotřídy

Občas se zdá, že pro to, abyste přežili v moderním světě, musíte vědět, jak vytvořit webové stránky. Dokonce i ve školách učí základy HTML.

Co to je?

Neoficiálními zákony všechny styly, které webmaster zapisuje do značky CSS, se používají pro ty prvky struktury, které lze vidět ve zdrojovém kódu. Existují však skupiny prvků, které nejsou předepsány v dokumentu HTML, ale také musí specifikovat styly.

Například v souboru HTML neexistuje žádná značka, která by byla zodpovědná za návrh velkého písmena nového odstavce nebo oblasti, která je před určitým prvkem. Značky nemohou zobrazit aktivitu propojení ani měnit obrázek, když kurzor myši směřuje k němu. Formalizovat tyto a mnoho dalších významů existují selektory CSS: pseudotříd a pseudoelementů.

Pseudotřídy se nazývají selektory, které ovlivňují stávající prvky dokumentu. Pseudo-prvky obvykle určují a mění oblast, která původně chyběla ze zdrojového souboru. Jednoduše řečeno, pseudo-elementy nastavují nové stránky, které nebyly v HTML značení, a pseudotřídy definují stav objektů za určitých podmínek.

Po: po

První věc, kterou byste měli věnovat pozornost, jsou pseudoelementy CSS předtím a poté, jak je každý zdroj, který respektuje sebe sama, využívá ke zlepšení vzhledu, čitelnosti a přitažlivosti místa. Tyto prvky umožňují přidávat nové oblasti, štítky a styly před nebo po originálu dokumentu.

Každý musí mít alespoň jednou vidět na všech on-line oznámení o publikacích, po kterém bylo napsáno: „New“, „nová“ nebo „šok“, „Oblíbené“, „nejlepší“, „Super“, atd. To .. objekty byly zadány pomocí CSS po pseudo-prvku.

Chcete-li vytvořit takovou pozici, musíte přidat do následujícího kaskádového stylu následující kód:

Zde slovo nové specifikuje název nové třídy, takže před potřebným odstavcem v značce HTML musíte zadat: class = "new". Název třídy musí být mezi závorky počáteční značky. Pokud je vše správně provedeno, po skončení odstavce na stránce prohlížeče se objeví nápis "Něco nového".

Samozřejmě v příkladu je nastaven skript pro jednoduchý nápis, ale nikdo neřekl, že nemůžete změnit velikost, barvu a umístění. Veškeré potřebné parametry lze po zadání obsahu zadat do nové třídy. Oddělte je středníkem a na konci zavřete doraz.

Předtím: předtím

Téměř identické vlastnosti mají pseudo-element CSS dříve. S jedním malým rozdílem: je určen k přidání potřebných prvků před objekt. Je napsán přesně stejným způsobem jako po předchozím slově.

Před dalším odstavcem textu můžete přidat slova, která přitahují pozornost, nebo jednoduše umístit obrázek nebo prvek Unicode před text. Například úvodní citace nebo odrážky. Chcete-li toto provést, musíte do značky CSS přidat novou třídu a zadat potřebné vlastnosti. Nejjednodušší řešení by vypadalo takto:

Chcete-li odsadit konec dokumentu, musíte vytvořit po pseudotřídě a místo toho obsah: otevřít psát obsah: zavřít, odpovídajícím způsobem změnit polohu. Pokud v pseudotřídě před zarážkou byla od levého okraje, pak v třídě po třídě musí být od pravé. Také v označení můžete přidat obrázek (např. Stejné uvozovky) a text již nebude vypadat jako matný list.

Epická sága: první

Pseudo-element CSS je také velmi populární při vytváření nových projektů. Jedná se zejména o projekty s zábavnými a rozprávkovými předměty, jakož i o webové zdroje historického a vědeckého směru.

Tento pseudo-element CSS má dvě charakteristiky - řádek a písmeno:

• Dopis - změní první písmeno fragmentu textu, ke kterému je přidán. Tudíž vytváří drop-drop - prvek, ve kterém je základní linie několik řádků nižší než hlavní text. Chcete-li nastavit tento parametr v kaskádovém stylu, musíte nastavit vlastnosti odstavce. Například, P: první písmeno {***} - a již mezi závorkami ukazují všechny potřebné parametry, jako je barva, písmo, velikost. Pokud má být počáteční písmeno vytvořeno pouze pro první odstavec, vytvoří se nová třída (stejně jako v příkladu s nové: po).
• Linka - tato pozice zcela změní první řádek odstavce. Je velmi vhodné používat ve vědeckých publikacích, pokud potřebujete zvýraznit důležité informace. Je napsán stejným způsobem jako jiné příklady. Ale tady je důležité mít na paměti, že pseudo-element nevybírá větu, nýbrž řetězec. V závislosti na tom, který prohlížeč uživatel používá, první řádek může být delší nebo kratší, takže je důležité se ujistit, že tento výběr nevypadá směšně. V takových případech byl v CSS vytvořen pseudo-prvek zlomu řádku.

Nový řádek

Ve skutečnosti se tento prvek používá jen zřídka, protože úspěšně nahrazuje tag
. Existují ovšem situace, kdy je třeba určit pauzu čáry. K těmto účelům můžete použít stejný postup. Za tímto účelem je napsán následující kód: po {content: ` A`- bílý-space: pre-}. Název třídy by měl být napsán mezi závorky počáteční značky, jakmile se uzavře, řádek řádku následuje po ní.

Tato možnost trvá více času při vytváření čitelného obsahu a pokud nepotřebujete pracovat s anomálně neprobírajícími prohlížeči, je lepší omezit značku
.

Syntaxe pseudotříd

Jak již bylo zmíněno, pseudotřídy definují stav prvků, se kterými uživatel interaguje. Na rozdíl od pseudo-prvků CSS, které specifikují neviditelné strukturní charakteristiky, jsou imaginární třídy orientovány na behaviorální faktory. Abychom byli jasnější, můžeme dát malý příklad. Předpokládám, že na místě je seznam užitečných odkazů, uživatel klikne na to, přečtěte si informace, ale po obsahu při setkání s, který již viděl. Právě se vrátil na tuto stránku, protože existuje spousta odkazů a nejsou jiná. Aby se tomu zabránilo, webmasteři přidat pseudo, která mění barvu navštívených odkazů, pak uživatel bude přesně vědět, co četl, a které dosud neuplynula.

Všechny pseudotřídy jsou zapsány do tabulky kaskádových stylů pomocí jednoduché a ověřené syntaxe:

• Selektor: Pseudo-třída {charakteristika stylu: barva, velikost, odsazení, polohování atd.}

Tyto třídy lze rozdělit do tří hlavních skupin:

• Ty, které určují stav prvku;
• ty, které patří k pseudoelemenům;
• fiktivní třídy, které definují jazyk obsahu.

Pseudotřídy a stav prvků

Zvažte stejný pořadí jako pseudotřídy. První poddruh je charakterizován změnou stavu prvku v závislosti na jeho stavu v určitém okamžiku. Takto to bylo ve výše uvedeném příkladu: pokud je odkaz předán, změní se barva. To zahrnuje takové pseudo-třídy:

• :aktivní. Použijete-li tuto pseudo-třídu, pak při přejíždění nad samostatný fragment se stává aktivní. Výsledkem bude změna barvy, nárůst velikosti nebo animace.
• :odkaz. V zásadě platí pro odkazy, které uživatel ještě nenavštívil. Zůstávají nezměněny.
• : zaostření. Nejčastěji se používá pro textové dokumenty, když uživatel může nastavením kurzoru na pole změnit barvu textu. Někdy se používá pro obrázky. Například vystavují obraz stínovaný, ale když klikne, dostane přirozenou barvu.
• :hover. Když uživatel jednoduše přesahuje určitý objekt, může změnit barvu nebo tvar a nemusí kliknout.
• :navštívil. V podstatě tato pseudo-třída je pro navštívené odkazy, které ve výchozím nastavení mění barvu na fialovou.

Začátečníci mylně předpokládají, že tyto pseudo-třídy jsou jen pro odkazy, ale se správnou touhou a fantazií můžete změnit jakýkoli prvek stránky.

Konkrétně pro pseudo-prvky CSS

Do této skupiny selektorů jsou pseudotřídy, které mohou změnit pseudo-elementy. Taková pseudotřídka je : první dítě. V kaskádovém stylu musíte vytvořit novou třídu : první dítě a nastavte barvu textu nebo jeho velikost. Výsledek bude vypadat takto:

• B: první dítě {barva: červená-}

Nejčastěji se to děje, když je nutné vybrat několik fragmentů textu tučným písmem a pouze začátek odstavce by se měl lišit. Proto je třída pojmenována stejně jako značka, která odpovídá za tučný text. Použijete-li tuto skutečnost v praxi, pak díky pseudoklasatu bude mít pouze první zkrácený fragment červenou barvu, zbývající slova budou standardní černé barvy.

Také : první dítě použijte k odstranění odsazení v prvním odstavci a poté místo barva: červená- bude nutné psát text-odrážka: 0-, a B je nahrazeno písmenem P (označuje také značku, která odpovídá za začátek odstavce).

Jazyk obsahu

Pseudotřídní : lang v zásadě platí pro texty psané v různých jazycích. Například pokud článek má citace v původním jazyce, můžete pro ně specifikovat samostatné charakteristiky. Syntaxe tohoto clusteru bude:

• Název třídy: lang (jazyk) {textové vlastnosti (barva, font, view atd.)}

Pokud jde o pozici "jazyk", je určena podle přijatých norem. Například angličtina - en, ruština - ru, němčina - de, atd. Díky této pseudotřídě můžete změnit styl cizího textu v celém dokumentu.

Závěry

Pseudo-třídy a pseudo-elementy CSS jsou jednou z těch otázek o kaskádovém stylu, které způsobují potíže s porozuměním. Nic zde však není nic komplikovaného, ​​hlavní věcí je pochopit, že pseudotřídou je určitý stát, který je splněn za podmínek stanovených dříve. Například při pohybu nad myší nebo kliknutím myší. Pseudo-element je samostatná součást dokumentu, který není součástí značky HTML, ale může mít svůj vlastní styl. Dokonce můžete říci, že jde o virtuální HTML. Pokud se podíváte na situaci z této strany, všechno se stává extrémně jednoduchým a srozumitelným a díky těmto znalostem můžete začít vytvářet stránky.