Počítače, Programování
CSS, pseudo, pseudo: hover, dítě, cílový
Tím, že kombinuje HTML a CSS, můžete ovládat naprosto všechny prvky webových stránek. Se styly můžete snadno změnit vzhled libovolného bloku nebo lince. Často kodér je třeba provést složitější úkol - změnit vzhled prvku samotného není, jako samostatná část nebo určitém stavu. V tomto případě, na pomoc pseudo CSS.
Pseudo-pracují na stejném principu jako u běžných tříd v značek, ale fyzicky nejsou přítomny zde. Mohou být vybrány na základě informací, které nejsou zahrnuty v informacích o dokumentu, které nebudou vybrané obvyklé voliče. Zde je jednoduchý příklad: máte červené tlačítko, a chcete-li, když najedete se stala modrá. Teoreticky to může být implementována v JavaScriptu, ale proč je to tak těžké? Mnohem vhodnější použít : vznášet CSS. S jeho pomocí si můžete dát libovolnou jednotku parametry, které budou spuštěny pouze tehdy, když kurzor myši.
Seznam CSS pseudotříd jsou pravidelně aktualizovány. Možná, že když budete číst tento materiál, několik nových objeví. Za prvé, vzít v úvahu ty, které se objevily ve specifikaci CSS3.
: N-tý-of-type
Předpokládejme, že máte seznam, ve kterém chcete použít střídající barvy, tedy na prvním řádku je, například, psaný v červených písmen a druhá - .. modrá, červená opět třetí, čtvrtý opět modře. Dříve bylo nutné k vytvoření nové třídy. Dispozice minulosti přidána do každého prvku na seznamu třídy, a pak změnil jejich vzhled v stylů. To nebylo příliš pohodlné a znečišťují rozložení.
Nyní je všechno jednodušší. Použít CSS pseudo-třídu: nth-of-type. To vám dá možnost získat požadovaný vizuální efekt, aniž by se cokoliv změnilo v značek. Princip je jednoduchý: zadat voliče a v závorce za jménem napsat vzorec nebo klíčové slovo, které bude najít požadované prvky. Například ,: n-tého o-typu (i) se všechny prvky i, a: n-tého o-typu (lichý) - odd. Existuje velké množství vzorců slouží k přesnému řízení. Tyto závorky označují možný počet - v tomto případě stylů, které mají být aplikovány na prvek, jehož index je roven tomuto číslu.
: N-tá-dítě
Tento CSS pseudo-class na principu akce je podobný předchozímu, ale na rozdíl od pracuje výhradně s dětmi vybrané položky. Například, pokud chcete, aby jej použít k přizpůsobení vzhledu je mateřskou
Pro přesné řízení obecného vzorce mohou být použity. Jsou poměrně obtížné pro začátečníka, ale stojí za to trochu hlouběji do syntaxe, jak to všechno bude jednodušší. Vzorce jsou následující: an + b, kde - je faktor, a b - posunutí. Například, je-li v závorkách označují N, pseudo-vybere všechny podřízené prvky (protože není zadán další podmínky ve formě a a b). Zadáte-li n + 2, všechny prvky, kromě první (protože posun je roven dvěma) bude vybrán. Nejlepší ze všeho je, tentokrát studovat v praxi. Experimentovat s dětskými komponent a různých vzorců.
: Last-dítě
Vše je jednoduché. CSS dítě pseudo-třídy se používají k výběru konkrétní položku. Tím se zvolí poslední dítě nadřazené složky. Se používá poměrně často, například, vyberte poslední řádek v tabulce nebo odebrat odsazení od posledního bloku, aby nedošlo k jeho převodu na další řádek.
: Tá-last-child
V principu činnosti je podobný jako již zmíněné n-tém-dítě, ale působí v opačném směru, tj. E. Při použití prvků se bude pohybovat směrem nahoru. To je užitečné, pokud potřebujete najít několik posledních položek.
Můžete si myslet, že tyto pseudo-třídy a pseudo-prvky CSS k ničemu, protože si můžete dělat věci dobře běžnými třídami. Není tomu tak. : Nth-child ,: nth- poslední dítě a jejich analogy jsou velmi výhodné při práci na velkých projektech - například v případech, kdy je blok má obrovské množství dětí. Ručně uspořádat tříd dlouhá a těžká.
Ovládání pseudo-state
Co když budete muset změnit vzhled prvku v určitém státě? Tento případ poskytuje CSS pseudo-klikání, polohovací a dalších zákonů. Pojďme je podrobně prohlédnout.
: link
Tento pseudo CSS reference, ne všechny, ale pouze ty, které dosud nenavštívili. V něm můžete zadat styly pro prvky , pro které uživatel dosud neuplynula.
: visited
Analog předchozího provedení, která ovládá pouze již na odkazy. Kombinací těchto dvou pseudotříd, můžete přizpůsobit vzhled značek přesně tak, jak budete potřebovat. Je ovšem nutné poznamenat, že státy jsou vypočítány pro konkrétní prohlížeče a které jsou vypouštěny po historii léčby.
Pseudo-třída: cílová CSS
Jedním z nejzajímavějších pseudotříd, které pokud se používá do jisté míry nahradí používání JavaScriptu. To umožňuje kontrolu, že je identifikátor zahrnut v řádku adresu stránky. Ano, poprvé je těžké pochopit. Pokusit se analyzovat příklad.
Řekněme, že jsme na straně 3 bloky div s určitým ID: ID1, ID2, ID3. Máme také tři odkazy na odpovídající hodnoty href: # ID1, ID2 #, # id3. Když kliknete na první odkaz v řadě adresu stránky po odkazu na odpovídající id bude samotná stránka.
CSS pro všechny div bloků specifikovaných displej vlastnost: none, to znamená, že nejsou zobrazeny ve výchozím nastavení. Používáme cíl: div a dát mu displej vlastnost: blok. Nyní, když kliknete na odkazy s určitou href, bloky odpovídající ID bude přiřazen k zobrazení: bloku, a proto se začnou objevovat na stránce! Když kliknete na odkaz a href = http: // site / article / 319683 /% E2% 80% 9D # id1% E2% 80% 9D zablokuje s ID1, a tak dále ..
Pořád nechápu, co? Zkuste experimentovat. Vytvoření rozvržení stránky a styly popsané výše. O několik minut později máte velkou postavou všechno ven.
Pseudo, který může být aplikován na jakýkoliv prvek
Většina z výše uvedených pseudo-vazeb potřebných pro tuto práci. Nicméně, ne všechny prvky potřebují . Několik provedení může být aplikován na jakékoliv části stránky úplně.
- : Aktivní slouží k stylových prvků, na které uživatel klikne na levé tlačítko myši;
- : Hover - CSS pro prvky, k nimž se uživatel pohybuje nad;
- : Focus - pro ty části stránky, které jsou nyní v centru pozornosti. Tento pseudo-třída je často používán pro práci s formuláři. Například, chcete-li zvolit své uživatelské jméno výzvu, když návštěvník nastaví kurzor nad ním a začne volit znaky.
Nezapomeňte, že: aktivní pouze platné v okamžiku stisknutí. Bezprostředně po ukončení levého tlačítka myši se nastavuje pomocí stylů zmizí a položka bude zobrazena jako je zobrazen ve výchozím nastavení. Ve většině případů je tento pseudo-třída se používá pro práci s tlačítky. Můžete nastavit na velkém počtu států. Například výchozí tlačítko je modrá, vznášet - zelená, stisknutím tlačítka - červená, atd ...
Samozřejmě, jen pseudo-třídy jsou plně podporuje moderní prohlížeče. Například v IE6 a 7 nebudou moci využívat zaměření, a vznášet se a aktivní pouze pro referenční práci v IE6. Doufejme, že nebudete muset pracovat s těmito prohlížeči, ale pokud jste ještě vyvstala potřeba použít podmíněné komentáře.
další pseudo
Uvedené možnosti seznam nekončí. Pouze samostatné prvky mohou být získány díky moderní CSS (: zapnuto), nebo jen vystřižené (: vypnuto), přepne pouze označen checkbox a radio (: zaškrtnuto). Stručně popsat několik dalších možností, které můžete použít pro důkladnější určují vzhled obsahu.
- : Jde jen o dítě - spláchne možné aplikovat styl na prvek, který je jedináček element;
- : Lang - pracovat s prvky, které daly jazyk pomocí atributu lang;
- : Kořen - slouží k výběru kořenový prvek. V souladu s tím, jako HTML tag ;
- : Ne - velmi mocný nástroj. To umožňuje omezit použití určitých stylů selektorů. Zde je příklad: .blue-color: ne (span ). Volič použít styl pro všechny prvky s třídou modrou barvu, nejsou-li .
Úplný seznam pseudotříd nemůže být natahován na jedné stránce. Většina webových návrháři používají v praxi, pouze některé z nich, raději řídit podmínku s aktivním JavaScript. Ano, je to pohodlné, ale tam jsou některé momenty, kdy bude dosaženo lepších výsledků jednodušší, s použitím vhodného pseudo.
Similar articles
Trending Now