Co je cíl v css. Cíl v CSS

Pseudotřída:cíl je jednou ze skvělých funkcí CSS3. Odpovídá prvku, na který ukazuje identifikátor v URI dokumentu.

Identifikátor v URI obsahuje znak „#“, za kterým následuje název identifikátoru odpovídající hodnotě atributu id prvek v dokumentu.

Podpěra, podpora

Protože mluvíme o CSS3, pseudo třídu podporuje každý moderní prohlížeče, s výjimkou IE verze 6 až 8. Obvyklé zklamání by vám nemělo bránit v rozhodnutí použít:target. IE9 již podporuje pseudo class:target .

Jak používat:target?

Tato pseudo třída může mít svůj vlastní styl, stejně jako pseudo třídy :vznášet se, :aktivní nebo :soustředit se pro odkazy. Stejné jako zmíněné pseudo třídy :cílová používané pro určité akce s webem. Zejména při použití identifikátoru fragmentu, jako je tento: http://example.com/index.html#lorem-ipsum.

Demonstrace

Demo stránka poskytuje velmi jasný příklad toho, jak a kdy používat :cílová. Pseudo třída :cílová může zlepšit použitelnost vašeho zdroje.

HTML značení

Níže je ukázka z dema. Máme 4 odkazy a stejný počet bloků. Každá skupina má svůj jedinečný identifikátor.

• Blok 1
• Blok 2
• Blok 3
• Blok 4

CSS

Následující CSS kód umožňuje dosáhnout požadovaného efektu, s jehož pomocí se zvýrazní blok s odpovídajícím ID (kolem obdélníku se objeví stín).

/* Přidejte mezeru */ ul, div ( margin-bottom: 10px; ) /* Výchozí styl bloku */ div ( padding: 10px; border: 1px solid #eaeaea; -moz-border-radius: 5px; border- radius : 5px; ) /* Změňte typ výstupu při shodě */ div:target ( border-color: #9c9c9c; -moz-box-shadow: 0 0 4px #9c9c9c; -webkit-box-shadow: 0 0 4px #9c9c9c ; box-shadow: 0 0 4px #9c9c9c; )

Níže je výsledek kódu. Pokud kliknete na odkaz, příslušný blok se zvýrazní a stane se aktivním.

Existuje způsob, jak zvládnout události kliknutí v CSS bez pomocí JavaScriptu. Metodu můžete použít s :cílová. Ale co když se to nedá použít? Existuje další metoda.

Podívejte se na ukázku. Je kompletně vytvořen v CSS, ne v řádku kódu JavaScript. Vychází z původního použití selektorů:active a:hover.

Popis

Nejprve je potřeba vytvořit kontejner, který bude obsahovat tlačítko a bloky, které se zobrazí po stisku myši. Struktura značek bude vypadat nějak takto:

Potřebujeme, aby byl .content neviditelný, dokud nestisknete tlačítko myši na .wrapperu. Chcete-li problém vyřešit, nastavte zobrazení vlastnosti .content: none . Poté, když stisknete tlačítko myši na .wrapper, zahrneme vlastnost display: block pro .content. Proč nastavit vlastnost .wrapper:active .content display: block . V tomto stavu bude obsah .content viditelný pouze po stisknutí tlačítka myši. Pokud jej uvolníte, obsah .content opět zmizí. Abychom to napravili, ujistěte se, že když je kurzor myši nad .content , je prvku přiřazena vlastnost display: block. To znamená, že nastavíme vlastnost display: block pro .content:hover. CSS kód bude vypadat takto:

Obsah ( display: none; ) .wrapper:active .content ( display: block; ) .content:hover ( display: block; )

Zbývá jen „vyčesat“ vzhled a upřesněte:

Wrapper ( pozice: relativní; ) .button ( pozadí: žluté; výška: 20px; šířka: 150px; ) .content ( pozice: absolutní; padding-top: 20px; ) .content li ( pozadí: červená; )

Text tlačítka ve výše uvedeném kódu bude mít žluté pozadí a informace zobrazené po stisknutí tlačítka myši budou mít červené pozadí.

Ve výchozím nastavení se po klepnutí na odkaz dokument otevře v aktuálním okně nebo rámci. V případě potřeby lze tuto podmínku změnit atributem target tagu . Tento atribut není v XHTML povolen.

Syntax

...

Povinný atribut

Hodnoty

Hodnota je název okna nebo rámu určený atributem name. Pokud je nastaveno neexistující jméno, otevře se nové okno. Následující názvy se používají jako vyhrazené názvy.

Prázdné Načte stránku do nového okna prohlížeče. _self Načte stránku do aktuálního okna. _parent Načte stránku do nadřazeného rámce; pokud žádné rámce nejsou, tato hodnota funguje jako _self . _top Zahodí všechny rámce a načte stránku v plném okně prohlížeče; pokud žádné rámce nejsou, tato hodnota funguje jako _self .

Výchozí hodnota

Validace

Použití tohoto atributu specifikace HTML odsuzuje, platný kód se získá pouze při použití přechodu .

HTML5 IE Cr Op Sa Fx

Otevři v novém okně

Dnes budeme hovořit o hlavních funkcích souvisejících s pseudotřídou :cílová a jak jej můžete použít k vytvoření úžasných efektů na čisté CSS, naučte se vytvářet prezentace pomocí css nápověda a mnohem víc.

Co je: cíl?

h1 ( písmo: tučné 30px/1,5 "Helvetica Neue", Arial, Helvetica, Ženeva, bezpatkové; ) h1: target (velikost písma: 50px; dekorace textu: podtržení; barva: #37aee4; )

Přidáme animaci

Pojďme okořenit náš efekt a přidat nějakou animaci, jako pěkný malý přechod pro změnu barvy. Koukej jak to funguje.

h1 ( písmo: tučné 30px/1,5 "Helvetica Neue", Arial, Helvetica, Ženeva, bezpatkové; -webkit-transition: barva 0,5s lehkost; -moz-transition: barva 0,5s lehkost; -o-přechod: barva 0,5 s lehkost; -ms-přechod: barva 0,5 s lehkost; přechod: barva 0,5 s lehkost; ) h1:target (velikost písma: 50px; dekorace textu: podtržení; barva: #37aee4; )

Správa necílových objektů

Řekněme, že chceme změnit styly odstavce, který následuje za vybraným nadpisem.

To lze velmi snadno provést pomocí následujícího kódu. Podívejte se na ukázku.

h1: target + p (pozadí: #f7f7f7; odsazení: 10px; )

Vytvoření jednoduché prezentace pomocí CSS

Vývojáři přišli se spoustou aplikací využívajících pseudo třídu : cílová. Tento pseudoselektor může být užitečný při vytváření záložek nebo dokonce prezentací. Podívejme se, jak lze implementovat to druhé.

Pojďme tvořit neuspořádaný seznam. Každá položka seznamu bude obsahovat kotvu značky ukazující na ID fragmentu a obrázek s odpovídajícím ID.

• Jeden
• Dva
• Tři
• Čtyři
• Pět

Nyní přidáme naše styly:

* ( margin: 0px; padding: 0px; ) #slideshow ( margin: 50px auto; position: relativní; width: 400px; ) ul ( list-style: none; ) li ( float: left; overflow: hidden; margin: 0 20px 0 0; ) li a ( barva: #222; text-decoration: none; font: 15px/1 Helvetica, bezpatkové; -webkit-transition: barva 0,5 s lehkost; -moz-transition: barva 0,5 s lehkost; -o-přechod: barva 0,5s lehkost; -ms-přechod: barva 0,5s lehkost; přechod: barva 0,5s lehkost; ) li a:hover ( barva: #50b0df; ) li img ( pozice: absolutní; nahoře: 50px; vlevo: 0; z-index: -1; -webkit-transition: neprůhlednost 1s náběh-výstup; -moz-přechod: neprůhlednost 1s náběh-výstup; -o-přechod: neprůhlednost 1s náběh-výstup; -ms-transition: neprůhlednost 1s náběh-výstup; přechod: neprůhlednost 1s náběh; ) li img:target ( z-index: 1; ) li img:not(:cíl) ( neprůhlednost: 0; )

Nejprve přidáme plavat vlevo všechny prvky na našem seznamu. Pro prvky jsme použili absolutní a relativní umístění.

Dále pojďme nainstalovat z-index: -1 pro všechny snímky a poté nastavte z-index: 1 pro cílové obrázky. To způsobí, že se obrázek po kliknutí na položku seznamu změní. Aby byl přechod plynulejší, nastavíme hodnotu krytí pro ostatní obrázky 0 .

Podívejte se na ukázku čistě CSS slideshow.

Kompatibilita mezi prohlížeči

Pseudotřída : cílová je selektor CSS třetí úrovně, což znamená, že je podporován téměř ve všech prohlížečích kromě (nikdy neuhodnete) ... IE. Starý dobrý osel podporuje pouze CSS3 selektory ve verzích 9 a 10.

Stejně jako jakýkoli jiný problém se zobrazením selektorů CSS3 v IE je toto poměrně snadná oprava pomocí Selectivizr.

Díky tomuto pluginu a nějakému voodoo kouzlu budou požadované selektory CSS3 podporovány i v IE6.

Závěr

Používání pseudotříd se může na první pohled zdát složité, ale pochopíte, jak vám mohou usnadnit práci a učinit váš web zajímavější. Pseudoselektor

:cílová- dobrý příklad toho. Jen se ujistěte, že to se styly nepřeháníte.

Další zajímavý případ použití :cílová

Pomocí pseudotřídy:target můžete na internetu snadno najít mnoho návodů. Neřiďme se však cizím kodexem, ale zkusme mu porozumět a pochopit, jak funguje? Samozřejmě se neobejdeme bez příkladů.

Co je:target?

V CSS:target je to pseudotřída, která vám umožňuje vybrat celý „kus“ vašeho HTML dokumentu, na kterém bude provedena nějaká akce. Může to být například odstavec textu nebo nadpis.

Pseudotřídy by se neměly zaměňovat s pseudoprvky, které mohou vybrat pouze určitou část prvku, například první písmeno nebo první řádek odstavce.

Pseudotřídy:

• a:link(color:#111)
• a:hover(color:#222)
• div:first-child(color:#333)

Pseudoprvky:

• p::first-letter(color:#444)
• p::první řádek(barva:#555)

Myslím, že ze syntaxe je jasné, co ta či ona pseudotřída nebo pseudoprvek dělá. Nejoblíbenější pseudotřída je :hover, setkávají se s ní všichni webmasteři, popisuje styly prvku při vznášení. target funguje podobně a popisuje styly prvku, když nastane určitá situace.

ID fragmentů

To je zkrátka věc, ke které je naše pseudotřída svázána. Jedná se o hashtag se slovem nebo frází, který je umístěn na konci adresy. Vypadá to takto:

Tuto techniku ​​lze použít pro přechody v rámci článku. Například na začátku článku vytvoříte malý obsah, když kliknete na prvek, z něhož se osoba dostane do sekce, kam odkaz vede, sekce potřebuje přidat identifikátor.

Funguje v čistém HTML, nejsou potřeba žádné triky. Malé identifikátory.

Zpracování kliknutí pomocí:target

Nyní se pokusme ujistit, že když kliknete na požadovanou sekci z naší improvizované nabídky, změní se styl nadpisu, který ukazuje, který odstavec je aktuálně aktivní.

H1 ( písmo: 30px Arial sans-serif; ) h1:target (velikost písma: 50px; zdobení textu: podtržení; barva: #37aee4; )

Kód je velmi jednoduchý – po kliknutí nadpis změní velikost, barvu a podtrhne se. Můžete přidat život (Ruslan, ahoj) a vytvořit animaci pro změnu barvy titulku:

H1 ( písmo: 30px Arial bezpatkové; -webkit-přechod: barva 0,5 s lehkost; -moz-přechod: barva 0,5 s lehkost; -o-přechod: barva 0,5 s lehkost; -ms-přechod: barva 0,5 s lehkost; přechod: barva 0,5s lehkost;)

Zvýraznění aktivního názvu je dobrá věc, ale co když potřebujete změnit vzhled textu, který za ním následuje? CSS nám tuto možnost dává. Vypadá to takto:

H1:target + p (pozadí: #eaeaea; odsazení: 10px; )

V tomto případě znaménko plus znamená, že styl by měl být aplikován na odstavec za nadpisem. Tím pádem, když se změní aktivní záhlaví, změníme také design sekce s textem, který mu „patří“.

Podpora prohlížeče

Cílová pseudotřída patří do třetí edice CSS a je dokonale podporována všemi prohlížeči kromě IE, starší než verze 9. Proto byste ji neměli implementovat, pokud vaše publikum používá tento prohlížeč. I když existuje cesta ven - toto je Selectvizr, knihovna JS, se kterou můžete IE přimět k práci s CSS3. Prostě přidáme scénář a je to, funguje to.

Jediná věc je, že pokud nepoužíváte JQuery nebo MooTools, musíte je připojit, aby tento skript fungoval. Na oficiálních stránkách je tabulka, která ukazuje, které knihovny co podporují. Pokud vás to zajímá, přečtěte si to. Tento .

Závěr

Používání pseudo tříd se může zdát složité, ale jakmile pochopíte, jak fungují, můžete dělat úžasné věci pouze pomocí CSS a ničeho jiného. Pseudotřída:cíl- vynikající potvrzení tohoto. S jeho pomocí můžete radikálně změnit interakci stránky s návštěvníkem. Výše uvedený příklad je nejjednodušší, ale přesto přidává stránce trochu interaktivity. Ale to je jen pár řádků kódu.

Nepřehánějte to s krásou a podporou prohlížeče a vše bude v pořádku.

Hezký den