Čisti dogodek klika CSS brez: cilja. Target = "_blank" in druge vrednosti ciljnega atributa Upravljanje neciljnih predmetov

Z psevdorazredom: target lahko preprosto najdete veliko vadnic na spletu. Vendar ne bomo sledili kodi nekoga drugega, ampak jo poskušali razumeti in razumeti, kako deluje? Seveda brez primerov ne bo šlo.

Kaj je: cilj?

V CSS: target je psevdorazred, ki vam omogoča, da izberete določen cel "kos" vašega HTML-dokumenta, na katerem se izvede nekaj dejanj. To je lahko na primer odstavek besedila ali naslov.

Psevdorazredov ne smemo zamenjevati s psevdoelementi, ki lahko izberejo le določen del elementa, kot je prva črka ali prva vrstica odstavka.

Psevdo-razredi:

• a: povezava (barva: #111)
• a: lebdi (barva: # 222)
• div: prvi otrok (barva: # 333)

Psevdoelementi:

• p :: prva črka (barva: # 444)
• p :: prva vrstica (barva: # 555)

Mislim, da je iz sintakse jasno, kaj počne ta ali oni psevdorazred ali psevdoelement. Najbolj priljubljen psevdorazred je: hover, nanj se srečujejo vsi spletni skrbniki, opisuje sloge elementa pri lebdenju. target deluje na podoben način in opisuje sloge elementa, ko se pojavi določena situacija.

ID-ji fragmentov

Skratka, na to je vezan naš psevdorazred. To je hashtag z besedo ali frazo na koncu naslova. Izgleda takole:

To tehniko lahko uporabite za krmarjenje po članku. Na primer, na začetku članka ustvarite majhno kazalo vsebine, ko oseba klikne na element, katerega oseba pride do razdelka, kamor vodi povezava, do razdelka, pri čemer doda identifikator.

To deluje v čistem HTML-ju, prilagajanje ni potrebno. Majhni identifikatorji.

Obravnava klika z: target

Zdaj pa poskusimo zagotoviti, da se ob kliku na želeni razdelek v našem improviziranem meniju spremeni slog naslova, ki prikazuje, kateri odstavek je trenutno aktiven.

H1 (font: 30px Arial sans-serif;) h1: cilj (velikost pisave: 50px; okras besedila: podčrtaj; barva: #37aee4;)

Koda je zelo preprosta – ob kliku naslov spremeni svojo velikost, barvo in podčrtaj. Dodate lahko življenje (Ruslan, zdravo) in animirate spremembo barve naslova:

H1 (pisava: 30px Arial sans-serif; -webkit-transition: barva 0,5s enostavnost; -moz-transition: barva 0,5s enostavnost; -o-transition: barva 0,5s enostavnost; -ms-transition: barva 0,5s enostavnost; prehod: barva 0,5s enostavnost;)

Označevanje aktivnega naslova je dobro, kaj pa, če morate spremeniti videz besedila, ki mu sledi? CSS nam daje to priložnost. Izgleda takole:

H1: cilj + p (ozadje: #eaeaea; padding: 10px;)

V tem primeru plus pomeni, da je treba slog uporabiti za odstavek, ki sledi naslovu. V to smer, ob spremembi aktivnega naslova - spremenimo tudi zasnovo rubrike z besedilom, ki "pripada njemu".

Podpora za brskalnik

Ciljni psevdorazred je iz tretje revizije CSS in ga popolnoma podpirajo vsi brskalniki, razen IE, starejši od različice 9. Zato ga ne bi smeli izvajati, če vaše občinstvo uporablja ta brskalnik. Čeprav obstaja izhod - to je Selectvizr, knjižnica JS, s katero lahko IE omogočite, da deluje s CSS3. Samo dodajte skript in to je to, deluje.

Edina stvar, če ne uporabljate JQuery ali MooTools, jo morate povezati, da bo ta skript deloval. Uradna stran ima tabelo, katere knjižnice podpirajo. Če vas zanima, preberite. ta .

Zaključek

Uporaba psevdorazredov se morda zdi zastrašujoča naloga, a ko razumete, kako delujejo, lahko naredite neverjetne stvari samo s CSS in nič drugega. The: ciljni psevdorazred- odlična potrditev tega. Z njegovo pomočjo lahko korenito spremenite interakcijo strani z obiskovalcem. Zgornji primer je najpreprostejši, vendar strani doda tudi malo interaktivnosti. Ampak to je le nekaj vrstic kode.

Ne pretiravajte z lepoto in podporo za brskalnike in vse bo v redu.

Imej lep dan

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 okvirje 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

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 popravilo 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.

Pozdravljeni, dragi bralci spletnega mesta bloga. Odločil sem se, da bom današnjo objavo posvetil najpomembnejšemu vidiku spletnega skrbništva, kjer bom poskušal z vsemi podrobnostmi razložiti, kaj je hiperpovezava, s čimer je neločljivo povezana, ki pa je brez pretiravanja osnova interneta.

Toda, da bi pravilno ustvarili hiperpovezave in jih vstavili v kodo spletnih strani (na primer vaše spletno mesto), morate preučiti ustrezno področje hiperbesedilnega označevalnega jezika (), saj so ti elementi oblikovani s pomočjo HTML a oznaka, ki ima možnost posodobitve povezave do želene vrste.

Torej, danes bomo analizirali, iz katerih delov je hiperpovezava sestavljena, kako uporaba ciljnega praznega atributa omogoča odpiranje strani v novem oknu (zavihku), kako katero koli sliko narediti povezavo in številne druge pomembne podrobnosti. Te informacije vam bodo med drugim pomagale pri učenju jezika HTML.

Kaj je hiperpovezava in ali jo lahko imenujemo povezava?

Na vprašanje, zastavljeno v naslovu, bom rekel, da ima izraz "povezava" širši pomenski razpon (povezava do Sibirije, banka za identifikacijo plačnika, besedilo v knjigi itd.), vključno s pomenom, ki je del koncepta "hiperpovezava" , ki je povezana le s hipertekstom, kar omogoča nelinearno zaznavanje informacij.

V to smer, hiperpovezava je poseben primer povezave, zato jih je povsem mogoče enakovredno uporabiti v današnji temi. To je tisto, kar bom izkoristil v svojih "sebičnih interesih" v teku današnje objave, pri čemer bom uporabil oba izraza, da se izognem nepotrebni vsiljeni ključni besedi.

Obstajajo pa tudi nevidne storitve, ustvarjene z uporabo in v mejah, katerih naloga je pošiljanje številnih signalov in ukazov brskalnikom za izvajanje določene funkcije.

Na primer z uporabo hiperpovezav storitev je mogoče prikazati ikono. Vidite jih lahko samo kot del kode HTML (če želite to narediti, kliknite za katero koli stran, ki se odpre v brskalniku):

Za zdaj pustimo storitvene povezave pri miru in razmislimo o splošnem vzorcu ustvarjanja hiperpovezav. Skupno jim je, da imajo vsi zahtevani atribut href, katerega vrednost je naslov dokumenta (). Povezava HTML lahko vodi tako do notranje strani spletnega mesta kot do zunanjega dokumenta.

Še ena pomembna opomba. Uporaba atributa href omogoča klikanje hiperpovezav, kar pomeni, da uporabnikom omogoča, da samodejno obiščejo ustrezno stran spletnega mesta kot rezultat klika nanje.

Kako narediti hiperpovezavo v HTML z uporabo href

Torej že vemo, da sta za ustvarjanje povezave potrebna oznaka a in atribut href, katerih parametri so lahko URL-ji različnih vrst. V kolikor a to, nato med odprtino in zapiranje vsebuje vsebino, ki bo prikazana na spletni strani.

tole vsebina se imenuje sidro in je lahko predstavljen v obliki besedila ali slike (spodaj bomo podrobneje govorili o tem, kako sliko narediti povezavo). Kot sem že omenil, bo sidro mogoče klikniti. Razmislite o primeru hiperpovezave z besedilno vsebino. Takole bo videti njegova konstrukcija v kodi HTML:

malo o sidrih

Poleg HTTP se lahko uporablja tudi varen protokol HTTPS. Ni nujno, da povezava vodi na spletno stran. Vse je odvisno od vrednosti href, ki je lahko pot do neke datoteke:

//site/wp-content/uploads/2012/05/giperssylqi-v-html.jpg

Prenesi

Na spletni strani bo ta povezava prevzela naslednjo preobleko:

Brskalnik »razume«, da je predmet s končnico .zip mogoče uporabiti samo za prenos, kar uporabnik predlaga.

Mimogrede, pot do katere koli datoteke je včasih določena prek FTP (). Nato v URL-ju, ki se uporablja kot parameter atributa href, preprosto zamenjajte protokol HTTP (HTTPS) s FTP. Povezava do datoteke bo videti takole:

prenos s strežnika

Ampak to še ni vse. Na podoben način povezava do e-pošte je ustvarjena s protokolom psevdo-mailto za hiter dostop do orodja za pisanje črk:

pisati pisma

Po kliku na takšno povezavo bi se moralo prikazati okno privzetega poštnega odjemalca, v katerem lahko sestavite besedilo sporočila in ga pošljete na že določen naslov, vzet, kot ste verjetno uganili, iz href.

V praksi so hiperpovezave do pošte zelo pogosto uporabljali spletni skrbniki in lastniki velikih virov, da bi zagotovili udobje uporabnikov in strank, ki lahko dostopajo do poštnega obrazca z enim klikom.

Toda ta vrsta komunikacije na spletnih virih ni več tako priljubljena (še posebej, ker jo je na primer mogoče vzpostaviti), saj tako odprte e-poštne naslove aktivno prestreže programska oprema in jih uporabljajo vse vrste pošiljateljev neželene pošte.

Kot primer sem navedel le najpogostejše protokole, ki so vključeni v URL, ki je pri oblikovanju hiperpovezave parameter atributa href. Poleg HTTP (HTTPS), FTP in mailto obstajajo še drugi za reševanje problemov ožjega profila. Morda jih bomo podrobneje obravnavali v drugih publikacijah.

Vrste hiperpovezav

Zdaj pa poskusimo razvrstiti povezave glede na eno ali drugo značilnost.

Po svojem območju delovanja:

1. Zunanji- vodijo na strani, ki se nahajajo zunaj spletnega mesta, na katerem so objavljene;

2. Notranji- povezovanje spletnih strani, ki se nahajajo znotraj istega spletnega vira.

Po formatu:

2. grafično f - v tem primeru je sidro hiperpovezave slika (vključno s sličico), pasica, gumb itd.

Glede na vrsto URL-ja, ki služi kot vrednost atributa href:

1. Absolutno, ki vsebujejo izrecno navedbo protokola za prenos podatkov (na primer HTTP) in ime domene spletnega mesta (v vsem o domenah).

Te povezave se pogosteje uporabljajo pri povezovanju na strani zunanjih virov. V tem primeru bo vrednost href vključevala celotno pot do zahtevane datoteke ali spletne strani. Tukaj je primer absolutne hiperpovezave:

Kontekst - kaj je to

2. Relativno, ena od možnosti za ustvarjanje, ki bo pot, določena glede na korensko mapo spletnega mesta (od tod tudi ime te vrste hiperpovezav). V tem primeru bosta protokol (HTTP) in domena spletnega mesta odstranjena iz naslova URL:

Kontekst - kaj je to

Relativne hiperpovezave na spletni strani lahko zagotavljajo povezave do notranjih strani. Kot taki so krajši, kar olajša uporabo HTML. Seveda vse ni tako preprosto in zahteva širšo pokritost, kar lahko vidite, če sledite navedeni povezavi.

Atributi oznake

Zdaj pa poglejmo, kateri drugi atributi poleg zahtevanega href obstajajo in kako lahko vplivajo na ustvarjanje hiperpovezave. Najbolj popolne podatke v zvezi s tem tako rekoč "iz prve roke" najdete na uradni spletni strani mednarodnega konzorcija W3C, kjer se najhitreje pojavijo najnovejše informacije.

So popolnoma enaki in sprožijo odpiranje spletne strani v trenutnem zavihku. Če želite, da se strani ob kliku na povezave odprejo v novem zavihku, dodajte pri oblikovanju povezave ciljni atribut s praznim parametrom:

Kontekst - kaj je to

Čeprav nekateri spletni skrbniki in SEO-ji menijo, da je bolje, če ima obiskovalec možnost izbire (tj. ne piše praznega cilja), saj se po potrebi stran lahko odpre v novem zavihku s pomočjo kontekstnega menija (premaknite kazalec na povezavo, z desno tipko miške kliknite in kliknite na ustrezen element):

Poleg tega, kot lahko vidite, ima uporabnik v tem primeru prednost, da lahko odpre spletno stran ne le v novem zavihku, ampak tudi v novem oknu(Te možnosti ni mogoče implementirati z uporabo HTML, samo s skripti).

Vendar verjamem, da vsi novi uporabniki niso popolnoma seznanjeni z zmogljivostmi in nastavitvami priljubljenih brskalnikov (). Povsem možno je, da bo bralec, potem ko je sledil zunanji hiperpovezavi in ​​je izgubil pogled na izvorno stran (namesto nje se bo prikazal dokument prejemnika), preprosto zaprl zavihek v svojih srcih.

Tako lahko lastnik spletnega vira ne le izgubi obetavnega obiskovalca, temveč tudi poslabša vedenjske dejavnike (), kar bo povzročilo izgubo pozicij strani pri razvrščanju.

Poleg tega je odpiranje strani na sosednjem zavihku zelo priročno z vidika uporabnosti (). Uporabnik sledi hiperpovezavi do spletne strani, prejme dodatne informacije in, kot da se nič ne bi zgodilo, nadaljuje s preučevanjem glavnega gradiva.

Če želite ustvariti objektivno sliko, je treba dodati, da je uporaba "target =" _blank "" za vse zunanje povezave polna določenega varnostnega tveganja. Če koga zanima, si lahko preberete, kje so podana priporočila za odpravo težav pri uporabi ciljne praznine, predstavljene pa so tudi alternativne možnosti za izvedbo naloge odpiranja spletne strani v novem zavihku.

Zdi se, da je opazil vse prednosti in slabosti uporabe prazne vrednosti za odpiranje hiperpovezave v novem zavihku. Če berete članke na mojem blogu, ste verjetno že uganili o mojem odnosu do tega parametra ciljnega atributa.

Trenutno zame njegovi plusi odtehtajo minuse in sem ga brezpogojno zagovornik. Na podlagi zgornjih dejstev si lahko ustvarite svoje mnenje o tem vprašanju. Čeprav ... se lahko glede na pojav novih okoliščin spremeni.

Kako ustvariti hash povezave, sidra in zakaj so potrebne?

Nato vas opozarjam na drugo vrsto hiperpovezav, ki so lahko uporabne, če je gradivo na spletni strani precej obsežno in mora biti strukturirano tako, da izboljša navigacijo.

Za primer vam ni treba iti daleč, le na začetku si oglejte kazalo te publikacije. Vidite, obstaja seznam razdelkov članka? Hiperpovezave do teh razdelkov so le hash povezave. Po kliku na katerega koli od njih se brskalnik pomakne po strani do točke, kjer se začne ustrezni del.

Takšne povezave so zasnovane precej preprosto. Najprej morate ustvariti sidro tako, da na zahtevano mesto na strani postavite ustrezno oznako v obliki ID-ja, ki je eden od globalnih atributov, uporabljenih za katero koli oznako HTML.

Zaradi univerzalnosti ID-jev lahko takšne oznake sidra postavite skoraj povsod na spletni strani. Ker je besedilo običajno razdeljeno na odstavke, jih je mogoče uporabiti. V glavnem postavljam sidra, ki delijo članke na logične dele:

Ko na ta način označimo vsa potrebna mesta v kodi HTML, nato ustvarimo hiperpovezave do njih. Če želite to narediti, na koncu za zadnjo poševnico "/" v URL-ju (ki je, kot že veste, je vrednost atributa href), zaporedno napišemo znak funta "#" in ime oznake ( ID):

Kako ustvariti hash povezave in sidra?

Poleg tega, če je takšna sidrna povezava postavljena na isto stran kot sidra, je mogoče del URL-ja do zadnje poševnice pred vključno zgoščevalne črte izpustiti in kot parameter href lahko uporabite samo "#" in ime ID-ja. (pravzaprav je to ena od relativnih povezav):

Kako ustvariti hash povezave in sidra?

To pomeni, da lahko pri sestavljanju kazala vsebine za priročnik za optimizacijo kode HTML enostavno uporabite to lahkotno možnost. Če kot URL vnesete samo en znak funta, brez imena identifikatorja, se bo stran od mesta, kjer se nahaja taka povezava, pomaknila vse do vrha:

Na vrh

Pravzaprav je to najpreprostejša možnost, ki spet služi kot dodatna prednost uporabnosti vira, saj obiskovalcem olajša življenje. Kot sidro za ustvarjanje gumba lahko uporabite privlačno sliko.

Odstranite podčrtaj in spremenite barvo povezave

Razvijalci HTML so pomislili na skoraj vse nianse, ki lahko pomagajo pri optimizaciji enega ali drugega vidika, enako velja za hiperpovezave. Na primer, če sledi hiperpovezavi na drugo spletno stran in se nato vrne nazaj, bo uporabnik videl, da je hiperpovezava spremenila barvo.

Če bo moral takšna dejanja ponoviti več kot enkrat, bo lahko hitro ugotovil, katere povezave je že kliknil in katere ne. Ta možnost je vključena v skoraj vsak brskalnik. Ni vam treba razlagati, kako priročno je in koliko časa prihrani.

Privzeto in brez uporabe hiperpovezav CSS poudarjeno s podčrtajem in tremi barvnimi možnostmi, od katerih ima vsak svoj lasten atribut za:

• povezava - nastavi barvo hiperpovezave na spletni strani (privzeto modra, označena s # 0000ff);
• alink - barva aktivne hiperpovezave, dokler jo spletni brskalnik obdeluje (rdeča # ff0000);
• vlink - barva povezave, ki jo je obiskal uporabnik (vijolična, # 800080).

Kako zamenjate barve povezav, ki jih prikazujejo brskalniki za vaše spletno mesto? No, za preprosto spletno mesto HTML, kjer se strani oblikujejo ročno (in menim, da v sodobnih realnostih praktično ni takšnih polno funkcionalnih virov, razen preprostih dnevnikov in ciljnih strani), morate le najti začetno oznako in zanj predpišite potrebne parametre (mimogrede, njegovo ime lahko uporabite za označevanje barve), na primer:

Če ste namestili sistem za upravljanje vsebin () za upravljanje vašega spletnega vira, potem morate ne glede na vrsto motorja, ki ga uporabljate, odpreti za urejanje datoteke, ki je odgovorna za izhod glave (glave), kjer je odprtje oznaka je prisotna .

Če vaš vir deluje pod nadzorom WordPressa, ga lahko za praktično izvedbo te ideje uporabite kot orodje za samodejno vstavljanje slike v hiperpovezavo, kjer najprej izberete iz knjižnice ali naložite želeno sliko in vstavite to v besedilo:

Nato izberite nastalo kodo slike in pritisnite gumb "povezava" urejevalnika, nato pa v okno, ki se prikaže, prilepite želeno kopirano hiperpovezavo:

Za prehod na izbrani fragment dokumenta je v naslovu napisan simbol # in navedeno ime identifikatorja. Na primer v naslovu http://www.w3.org/TR/css3-selectors/#target-pseudo pride do prehoda na element, katerega atribut id je nastavljen kot ciljni psevdo. Ta zapis naslova se imenuje "ciljna postavka". Psevdorazred: target velja za ciljni element, z drugimi besedami, identifikator, ki je podan v naslovni vrstici brskalnika.

Oznake

	Opis	Primer
<тип>	Označuje vrsto vrednosti.	<размер>
A && B	Vrednosti morajo biti prikazane v prikazanem vrstnem redu.	<размер> && <цвет>
A | B	Označuje, da je treba izbrati samo eno od predlaganih vrednosti (A ali B).	normalno | male črke
A || B	Vsako vrednost je mogoče uporabiti samostojno ali v povezavi z drugimi v poljubnem vrstnem redu.	širina || šteti
	Skupine vrednosti.	[prirezek || križ]
*	Ponovite nič ali večkrat.	[,<время>]*
+	Ponovite enkrat ali večkrat.	<число>+
?	Določena vrsta, beseda ali skupina ni obvezna.	vložek?
(A, B)	Ponovite vsaj A, vendar ne več kot B-krat.	<радиус>{1,4}
#	Ponovite enkrat ali večkrat, ločeno z vejicami.	<время>#

×

Primer

• Zgodba 1
• Zgodba 2

Zgodba 1

Zgodba o tem, kako je bilo treba narediti grob, so ga začeli kopati in nato zakopati in kaj je iz tega prišlo.

Zgodba 2

Zgodba o tem, kako so se v bližini jedilnice pojavili skrivnostni rožnati odtisi s šestimi prsti in zakaj se je to zgodilo.

V tem primeru je ciljni element označen z barvo ozadja.

Opomba

V Safariju pred različico 3.0 se slogovna pravila ne uporabljajo, če uporabnik uporablja navigacijo brskalnika (gumba Nazaj in Naprej).

Specifikacija

Vsaka specifikacija gre skozi več stopenj odobritve.

• Priporočilo - To specifikacijo je potrdil W3C in se priporoča kot standard.
• Priporočilo kandidata ( Možno priporočilo) - skupina, odgovorna za standard, je zadovoljna, da je v skladu z njegovimi cilji, vendar je za implementacijo standarda potrebna pomoč skupnosti razvijalcev.
• Predlagano priporočilo ( Predlagano priporočilo) - Na tej točki je dokument predložen svetovalnemu svetu W3C v dokončno odobritev.
• Delovni osnutek – bolj zrela različica osnutka po razpravi in ​​spremembah za pregled skupnosti.
• Urednikov osnutek ( Uredniški osnutek) - osnutek različice standarda po urejanju s strani urednikov projekta.
• Osnutek ( Osnutek specifikacije) je prvi osnutek standarda.

×

Brskalniki

V tabeli brskalnika se uporabljajo naslednje konvencije.