Kaj je cilj v css. Čisti dogodek klika CSS brez: cilja. Kako narediti hiperpovezavo v HTML z uporabo href

Danes bomo govorili o glavnih funkcijah, povezanih s psevdo razredom : cilj in kako ga lahko uporabite za ustvarjanje osupljivih čistih učinkov CSS, naučite se ustvarjati diaprojekcije z uporabo css in še veliko več.

Kaj je: cilj?

h1 (pisava: krepko 30px / 1,5 "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;) h1: cilj (velikost pisave: 50px; okras besedila: podčrtaj; barva: # 37aee4;)

Dodajte animacijo

Popestrimo svoj učinek in dodamo nekaj animacije, na primer lep majhen prehod za spremembo barve. Poglej kako deluje.

h1 (pisava: krepko 30px / 1,5 "Helvetica Neue", Arial, Helvetica, Ženeva, sans-serif; -webkit-transition: barva 0,5s enostavnost; -moz-transition: barva 0,5s enostavnost; -o-transition: barva 0,5 s enostavnost; -ms-transition: barva 0,5 s enostavnost; prehod: barva 0,5 s enostavnost;) h1: cilj (velikost pisave: 50px; okras besedila: podčrtaj; barva: # 37aee4;)

Upravljanje neciljnih objektov

Recimo, da želimo spremeniti sloge odstavka, ki sledi izbranemu naslovu.

To je zelo enostavno narediti z naslednjo kodo. Glej demo.

h1: cilj + p (ozadje: # f7f7f7; padding: 10px;)

Ustvarjanje preproste diaprojekcije s CSS

Razvijalci so pripravili na tone aplikacij z uporabo psevdorazreda : cilj... Ta psevdo izbirnik je lahko uporaben pri ustvarjanju zavihkov ali celo diaprojekcij. Poglejmo, kako lahko implementirate slednje.

Za ustvarimo neurejen seznam. Vsak element na seznamu bo vseboval oznako sidra, ki kaže na ID odrezka, in sliko z ustreznim ID-jem.

• eno
• dva
• trije
• štiri
• pet

Zdaj dodajmo svoje sloge:

* (margin: 0px; padding: 0px;) #slideshow (margin: 50px auto; position: relative; width: 400px;) ul (list-style: none;) li (float: levo; overflow: hidden; margin: 0 20px 0 0;) li a (barva: # 222; okras besedila: brez; pisava: 15px / 1 Helvetica, sans-serif; -webkit-transition: barva 0,5 s enostavnost; -moz-transition: barva 0,5 s enostavnost; -o-transition: barva 0,5s enostavnost; -ms-transition: barva 0,5s enostavnost; prehod: barva 0,5s enostavnost;) li a: lebdenje (barva: # 50b0df;) li img (položaj: absolutno; vrh: 50px; levo: 0; z-indeks: -1; -webkit-transition: motnost 1s enostavnost-in-out; -moz-transition: motnost 1s enostavnost-in-out; -o-transition: motnost 1s enostavnost-in-out; -ms-transition: neprosojnost 1s enostavnost-in-out; prehod: motnost 1s enostavnost-in-out;) li img: cilj (z-indeks: 1;) li img: ne (: cilj) (prosojnost: 0;)

Najprej dodajmo plavaj: levo vse elemente našega seznama. Uporabili smo absolutno in relativno pozicioniranje elementov.

Nato namestite z-indeks: -1 za vse slike in nato nastavite z-indeks: 1 za ciljne slike. To bo povzročilo, da se slika spremeni, ko kliknete element seznama. Da bo prehod bolj gladek, bomo nastavili vrednost motnosti za druge slike. 0 .

Oglejte si predstavitev diaprojekcije v čisti CSS.

Združljivost med brskalniki

Psevdorazred : cilj je izbirnik CSS stopnje 3, kar pomeni, da je podprt v skoraj vseh brskalnikih, razen (ne boste uganili) ... IE. Stari dobri osel podpira selektorje CSS3 samo v različicah 9 in 10.

Kot pri vsaki težavi z upodabljanjem izbirnika CSS3 v IE, je to dokaj enostavno odpraviti s Selectivizr.

Zahvaljujoč temu vtičniku in magiji vuduja bodo zahtevani selektorji CSS3 podprti tudi v IE6.

Zaključek

Uporaba psevdorazredov se morda sprva zdi zastrašujoča, toda zakaj razumete, kako vam lahko olajšajo delo in naredijo vaše spletno mesto bolj zanimivo. Psevdo izbirnik

: cilj je dober primer. Pazite le, da ne pretiravate s stili.

Še en zanimiv primer uporabe : cilj

Ko kliknete povezavo, se privzeto dokument odpre v trenutnem oknu ali okvirju. Po potrebi lahko ta pogoj spremeni ciljni atribut oznake. ... XHTML ne uporablja tega atributa.

Sintaksa

...

Zahtevan atribut

Vrednosti

Vrednost je ime okna ali okvirja, ki ga poda atribut name. Če je nastavljeno neobstoječe ime, se odpre novo okno. Kot rezervirana imena se uporabljajo naslednja imena.

Prazen Naloži stran v novo okno brskalnika. _self Naloži stran v trenutno okno. _parent Naloži stran v nadrejeni okvir, če ni okvirjev, potem ta vrednost deluje kot _self. _top Prekliče vse okvire in naloži stran v celotnem oknu brskalnika, če ni okvirjev, potem ta vrednost deluje kot _self.

Privzeta vrednost

Potrditev

Uporaba tega atributa je opuščena s specifikacijo HTML; veljavna koda je pridobljena samo z uporabo prehodnega .

HTML5 IE Cr Op Sa Fx

Odpri v novem oknu

Pseudo razred: cilj je ena od odličnih lastnosti CSS3. Ujema se z elementom, na katerega kaže identifikator v URI dokumenta.

Identifikator v URI vsebuje znak »#«, ki mu sledi ime identifikatorja, ki se ujema z vrednostjo atributa id element v dokumentu.

Podpora

Ker govorimo o CSS3, psevdorazred podpirajo vsi sodobni brskalniki, razen IE od 6 do 8. Običajne frustracije vas ne bi smele ustaviti pri odločitvi za uporabo: target. IE9 že podpira: ciljni psevdo razred.

Kako uporabljam: cilj?

Ta psevdo razred ima lahko svoj slog, tako kot psevdo razredi. : lebdi, : aktivno oz : fokus za povezave. Pa tudi prej omenjeni psevdo razredi : cilj uporablja pri določenih dejanjih s spletnim mestom. Še posebej, če uporabljate identifikator fragmenta, kot je ta: http://example.com/index.html#lorem-ipsum.

Demonstracija

Demo stran ponuja zelo jasen primer, kako in kdaj uporabiti : cilj... Psevdo razred : cilj lahko izboljša uporabnost vašega vira.

HTML oznake

Spodaj je primer iz demo. Imamo 4 povezave in enako število blokov. Vsaka skupina ima svoj edinstven identifikator.

• Blok 1
• 2. blok
• 3. blok
• Blok 4

CSS

Naslednja koda CSS vam omogoča, da dosežete želeni učinek, s pomočjo katerega izberete blok z ustreznim ID-jem (okrog pravokotnika se pojavi senca).

/ * Dodajte nekaj presledka * / ul, div (margin-bottom: 10px;) / * Privzeti slog bloka * / div (oblazinjenje: 10px; obroba: 1px solid #eaeaea; -moz-border-radius: 5px; border- radius : 5px;) / * Spremenite pogled na izhod, če se ujema z * / div: target (barva obrobe: # 9c9c9c; -moz-box-shadow: 0 0 4px # 9c9c9c; -webkit-box-shadow: 0 0 4px # 9c9c9c ; box-shadow: 0 0 4px # 9c9c9c;)

Spodaj je rezultat dejanja kode. Če kliknete na povezavo, je ustrezni blok označen in postane aktiven.

Ali obstaja način za obdelavo dogodkov klikov v CSS brez uporabe JavaScripta. Metodo lahko uporabite s : cilj... Toda kaj, če ga ni mogoče uporabiti? Obstaja še ena metoda.

Oglejte si demo. V celoti je narejeno v CSS, ne v eni vrstici JavaScript. Temelji na prvotni uporabi izbirnika: aktivno in: lebdeč.

Opis

Najprej morate ustvariti vsebnik, ki bo vseboval gumb in bloke, ki so prikazani s klikom miške. Struktura označevanja bo nekako takole:

Vsebino morate narediti nevidno, dokler ne pritisnete gumba miške na ovoju. Za rešitev težave nastavite lastnost display: none za .content. Nato, ko kliknemo na .wrapper, bomo omogočili lastnost display: block za .content. Če želite to narediti, nastavite lastnost display: block za .wrapper: active .content. V tem stanju bo .content vidna samo, ko pritisnete gumb miške. Če ga opustite, .content ponovno izgine. Za popravljanje bomo naredili tako, da ko je kazalec miške nad .content, se elementu dodeli lastnost display: block. To pomeni, da nastavimo lastnost display: block za .content: hover. Koda CSS bo videti takole:

Vsebina (prikaz: brez;) .wrapper: aktivna .vsebina (prikaz: blok;) .vsebina: lebdenje (zaslon: blok;)

Ostaja le "česati" videz in mu dati jasnost:

Ovitek (položaj: relativno;) .gumb (ozadje: rumeno; višina: 20px; širina: 150px;) .vsebina (položaj: absolutna; padding-top: 20px;) .vsebina li (ozadje: rdeče;)

Besedilo gumba v zgornji kodi bo imelo rumeno ozadje, informacije, prikazane ob pritisku na gumb miške, pa bodo imele rdeče ozadje.

Ciljni psevdorazred: izbere element v dokumentu, na katerega kaže fragment URL-ja. Ta del besedila je na primer ovit z elementom z ID # ciljnega testa. Če sledite povezavi, ta element postane cilj in začnejo veljati slogi psevdorazreda: target.

Lani sem pisal o: ciljnem psevdorazredu v 5 premalo uporabljenih selektorjih CSS (in njihovih aplikacijah). Prvi primer je bil uporaba psevdorazreda: target za označevanje odseka strani, do katerega je bila navigacija. To je lahko na primer dodajanje barve ozadja ali obrobe, kot v primeru z.

Toda pred kratkim sem prišel do zaključka, da lahko bolje uporabljamo psevdorazred: target z ustvarjanjem interaktivnih elementov na strani brez JavaScripta.

Primer # 1: skrivanje in prikazovanje vsebine

Preprost primer uporabe psevdorazreda: target bi bil, da skrijemo in prikažemo vsebino, na katero ciljamo. V blogu lahko tako po kliku uporabnika prikažemo rubriko s komentarji. To naredite tako, da element preprosto skrijete, dokler se ne ujema: cilj.

Prikaži komentarje #comments: ne (: cilj) (prikaz: brez;) #comments: cilj (prikaz: blok;)

Primer # 2: navigacija izvlečna

Naslednji primer je ustvarjanje drsne navigacijske vrstice. Navigacijsko vrstico postavimo fiksno glede na obseg, da zagotovimo, da po kliku uporabnika ne pride do skoka.

#nav (položaj: fiksni; zgoraj: 0; višina: 100 %; širina: 80 %; največja širina: 400 slikovnih pik;) #nav: ne (: cilj) (desno: -100 %; prehod: desno 1,5 s;) #nav: cilj (desno: 0; prehod: desno 1s;)

Primer # 3: pojavno modalno okno

Če nadaljujemo s to idejo, lahko ustvarimo modal, ki zapolni celotno stran.

# modalni vsebnik (položaj: fiksno; zgoraj: 0; levo: 0; širina: 100 %; višina: 100 %; ozadje: rgba (0,0,0,0,8); zaslon: flex; justify-content: center; align-items: center;) .modal (širina: 70 %; ozadje: #fff; padding: 20px; text-align: center;) # modal-container: ne (: cilj) (prosojnost: 0; vidnost: skrita; prehod: motnost 1s, vidnost 1s;) # modalni vsebnik: cilj (prozornost: 1; vidnost: vidna; prehod: motnost 1s, vidnost 1s;)

Primer # 4: spreminjanje globalnih slogov

Zadnjega primera v smislu semantike ni mogoče imenovati pravilnega, gre za uporabo psevdorazreda: target za element z naknadno zamenjavo slogov ali postavitve strani.

#body: ne (: cilj) (glavno (širina: 60 %;) ob strani (širina: 30 %;) .show-sidebar-link (prikaz: brez;)) #body: cilj (glavno (širina: 100 %;); ) na stran (prikaz: brez;) .hide-sidebar-link (prikaz: brez;))

Kaj pa semantika in dostopnost?

Kot sem omenil v članku "Povezave ali gumbi", pri uporabi elementa brskalnik pričakuje, da se bo pomaknil na drugo stran ali drug del strani. V mojih primerih (razen zadnjega) se zgodi prav to. Edini trik je v tem, da je v običajnem stanju stilizirani element skrit, dinamično se prikaže samo v ciljnem stanju.

Kolikor vem, ima ta metoda dve možni pomanjkljivosti:

1. URL se spremeni, kar vpliva na zgodovino brskalnika. To pomeni, da se lahko uporabnik, ko se pomika »nazaj«, nehote pomakne do ciljnega elementa.
2. Če želite zapreti ciljni element, se mora uporabnik pomakniti do drugega elementa ali samo do #. Zadnja možnost (ki jo uporabljam v svojih primerih) ni pomenska in lahko uporabnika preusmeri na začetek članka, na kar uporabnik morda ni pripravljen.

Vendar, če se uporablja pravilno, se ta metoda lahko uporablja kot nadomestna možnost za uporabnike z onemogočenim JavaScriptom. V nekaterih primerih, kot v prvem primeru, je morda celo bolje in enostavneje kot uporaba JavaScripta. Kot vedno je odvisno od posameznega primera.