Někdy se zdá, že abys přežil v moderním světě, musíš vědět, jak vytvořit stránky. Dokonce i školy učí základy HTML. Ale k vytvoření kvalitního zdroje to nestačí. Musíte znát základy kaskádových stylů, včetně pseudotříd a pseudo-elementů CSS.
Co to je?
Podle tajných zákonů se všechny styly, které webmaster zapisuje do značky CSS, používají pro ty prvky struktury, které lze vidět ve zdrojovém kódu. Existují však skupiny prvků, které nejsou v dokumentu HTML zapsány, ale také musí specifikovat styly.
Například v souboru HTML neexistuje žádná značka, která by byla zodpovědná za návrh kapitalizace nového odstavce nebo oblasti, která je před určitým prvkem. Značky nemohou zobrazovat aktivitu odkazů ani měnit obrázek, když kurzor myši k němu vede. Pro vytvoření těchto a mnoha dalších hodnot existují voliče CSS: pseudo-třídy a pseudo-elementy. Pseudo třídy se nazývají selektory, které ovlivňují stávající prvky dokumentu. Pseudo-elementy se obvykle ptají a mění oblast, která původně chyběla ve zdrojovém souboru. Jednoduše řečeno, pseudo-elementy specifikují nové stránky, které nebyly v označení HTML, a pseudotřídy určují stav objektů za určitých podmínek.
Po: po
První věc, na kterou je třeba věnovat pozornost, je pseudo-elementy CSS před a po, protože každý z nich seberealizující prostředek je používá k zlepšení vzhledu, čitelnosti a přitažlivosti místa. Tyto prvkyPoskytněte možnost přidávat nové oblasti, nápisy a styly před zdrojovým dokumentem nebo po něm.
Každý člověk pravděpodobně alespoň jednou viděl na webu oznámení o publikacích, po němž stáli slova: "Novinka", "Nový" nebo "Šok", "Oblíbené", " », Atd. Tyto objekty byly zadány pomocí CSS po pseudo-prvku. Chcete-li vytvořit tuto pozici, musíte do kaskádního stylu přidat následující kód:
Zde slovo nové specifikuje název nové třídy, takže před zadáním požadovaného odstavce HTML značení: class = "new". Jméno třídy by se mělo nacházet mezi závorkami otvírací značky. Pokud je vše provedeno správně, po ukončení odstavce na stránce prohlížeče se objeví "něco nového".
Samozřejmě, v příkladu daném jednoduchým skriptem pro nápis, ale nikdo neřekl, že nemůžete změnit velikost, barvu a umístění. Veškeré potřebné parametry lze za obsahovou charakteristiku zadat do nové třídy. Oddělte je středníkem, na konci uzavřete kuželový držák.
Komu: před
CSS před pseudo-prvkem je prakticky totožný. S jedním malým rozdílem: je určen k přidání potřebných prvků před objekt. Nahrává se stejným způsobem jako po, pouze se slovem předtím. Před dalším odstavcem textu můžete přidat slova, která upozorňují, nebo jednoduše umístit obrázek nebo prvek Unicode před text. Například otevírání karet nebo odrážek. Chcete-li to provést, musíte do značky CSS přidat novou třídu a nastavit požadované vlastnosti. Nejjednodušší způsobřešení by vypadalo takto:
Chcete-li vytvořit odrážky na konci dokumentu, je třeba vytvořit místo pseudo-třídy místo obsahu: otevřít obsah zápisu: zavřít, resp. Změnit pozici. Je-li v pseudoklasu před odrážkou z levého pole, pak ve třídě poté, co by mělo být od pravé. Můžete také přidat obrázky (například stejné uvozovky) do značky a text již nebude vypadat jako přenosný list.
Epická sága: první
Pseudo-element CSS je nejprve velmi populární při vytváření nových projektů. Jedná se zejména o projekty s zábavnými a pohádkovými tématy, stejně jako o webové zdroje historického a vědeckého směru. Tento pseudo-prvek CSS má dvě charakteristiky - řádek a písmeno:
Písmeno - změní první písmeno fragmentu textu, ke kterému je přidán. Tvoří tedy dopis - prvek, jehož základní čára je o několik řádků nižší ve vztahu k hlavnímu textu. Chcete-li nastavit tento parametr na kaskádový stylový list, musíte zadat charakteristiky odstavce. Například P: první písmeno {***} - a již v závorkách uveďte všechny potřebné parametry, jako je barva, písmo, velikost. Pokud potřebujete vytvořit první písmeno pro první odstavec, vytvoří se nová třída (stejně jako v příkladu s novým: after).
Linka - tato pozice zcela změní první řádek odstavce. Je velmi vhodné používat ve vědeckých publikacích, pokud chcete zvýraznit důležité informace. Nahrává se stejným způsobem jako u ostatních příkladů. Zde je však důležité si uvědomit, že pseudoelement nenabízí návrh, alelinku samotnou. V závislosti na tom, který prohlížeč uživatel používá, může být jeho první řádek delší nebo kratší, takže je důležité zajistit, aby tento výběr nevypadal hloupě. V těchto případech byl vytvořen pseudo-element CSS linky.
Nový řádek
Ve skutečnosti je tento prvek zřídka používán, protože úspěšně nahrazuje značku .Nicméně existují situace, kdy je nutné specifikovat přerušení čáry s pseudo-prvky. Pro tyto účely můžete použít stejný postup. K tomu je napsán následující kód: after {content: 'A'; white-space: pre;}. Název třídy musí být vložen mezi závorky otvírací značky, jakmile se zavře, po ní a bude následovat přerušení řádku. Tato volba trvá více času na vytvoření čitelného obsahu a pokud není potřeba pracovat s neobvykle neznámými prohlížeči, je lepší omezit značku .
Syntaxe pseudotříd
Jak již bylo uvedeno, pseudotřídy určují stav prvků, s nimiž uživatel interaguje. Na rozdíl od pseudo-prvku CSS, který definuje neviditelnou strukturu charakteristiky, imaginární třídy jsou orientovány na behaviorální faktory. Abychom byli jasnější, můžeme dát malý příklad. Předpokládejme, že stránky obsahují seznam užitečných odkazů, uživatel přechází nad nimi, čte informace, ale po nějakém čase narazí na obsah, který byl již viděn. Právě se vrátil na tuto stránku, protože existuje mnoho odkazů a nejsou jiná. Chcete-li tomu zabránit, webmasteři přidávají pseudotříduzmění barvu navštívených odkazů, pak uživatel přesně ví, co čte a kde ještě neprošel.
Všechny pseudo v tabulce šablony stylů jednoduché a osvědčené syntaxi:
voliče: pseudo {charakteristika, barvu, velikost, vzdálenost, umístění a tak dále D..}
Tyto třídy mohou být rozděleny do tří hlavních skupin:
ty, které určují stav prvku;
ty týkající se pseudoelementu;
fiktivní třídy definující jazyk obsahu.
Pseudotřídy a stav prvků
Uvažujme o pořadí, ve kterém mohou být pseudo-třídy. U prvního poddruhu změna stavu prvku závisí na jeho stavu v určitém okamžiku. Toto bylo v příkladu výše: pokud je odkaz překročen, změní se barva. Patří sem následující pseudotřídy:
: aktivní. Použijete-li tuto pseudotřídu, pak se myš po samostatném fragmentu stane aktivní. Bude to ve změně barvy, zvětšení velikosti nebo se objeví animace.
: odkaz. Obvykle se vztahují na odkazy, které uživatel dosud nenavštívil. Zůstávají nezměněny.
: zaostření. Nejčastější použití pro textové dokumenty, když je nastavení uživatele na pole může změnit barvu textu. Občas se používá pro obrázky. Například obrázek je stínovaný, ale když klikne, získává přirozenou barvu.
: vznášejte se. Když uživatel přináší myši na určitý objekt, může to změnit barvu nebo tvar, a proto není nutné klepnout na tlačítko.
: navštívil. Inv podstatě je tato pseudotřída určena pro navštívené odkazy, které ve výchozím nastavení změní barvu na fialovou.
Noví lidé mylně předpokládají, že tyto pseudo-třídy jsou jen pro reference, ale se správnou touhou a představivostí můžete změnit jakýkoli prvek stránky.
Speciálně pro pseudo-element CSS
Tato skupina selektorů obsahuje pseudo-třídy, které mohou měnit pseudo-elementy. Následující pseudo-třída je: první-dítě. V kaskádovém stylu musíte vytvořit novou třídu pro: first-child a určit barvu textu nebo jeho velikost. Výsledek bude vypadat takto:
B: first-child {barva: červená;}
To se nejčastěji děje, když je třeba přidělit některé fragmenty textu tučným písmem a pouze začátek odstavce by měl být jiný. Proto je třída nazývána stejná jako značka, která je zodpovědná za tučný text. Pokud ji uplatníte v praxi, pak díky pseudotřídnímu prvku bude mít jen první zvýrazněný tučný fragment červenou barvu, ostatní slova budou standardní černá.
Také: první dítě se používá k odstranění odsazení v prvním odstavci, poté místo barvy: červená; bude muset napsat text-indent: 0; , a B je nahrazeno písmenem P (také je označena značka, která odpovídá začátku odstavce).
Jazyk obsahu
Pseudo-class: jazyk se vztahuje hlavně na texty psané v různých jazycích. Například pokud článek obsahuje citace v původním jazyce, pak je pro ně možné uvést samostatné charakteristiky. Syntaxe tohoto clusteru bude vypadat takto:
Název třídy: lang (jazyk){charakteristika textu (barva, písmo, typ atd.)}
Pokud jde o pozici "jazyk", je to uvedeno v souladu s přijatými pravidly. Například angličtina - en, ruština - ua, 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
Pseudoklasy a pseudoelementy CSS jsou jednou z otázek týkajících se kaskádových stylů, které způsobují potíže s porozuměním. Nicméně zde není nic komplikovaného, hlavní věc - pochopit, že pseudotřídou je určitý stav, který se provádí za dříve dohodnutých podmínek. Například při pohybu myší nebo kliknutí myší. Pseudo-element je samostatná součást dokumentu, který není součástí značky HTML, ale může mít svůj vlastní styl. Můžete dokonce říci, že jde o virtuální HTML. Pokud se podíváte na situaci na takové straně, pak se vše stane velmi jednoduchým a srozumitelným, ale s takovými znalostmi můžete začít vytvářet stránky.
