Čisti CSS klik događaj bez: cilja. Target = "_blank" i druge vrijednosti ciljnog atributa Upravljanje neciljanim objektima

Možete lako pronaći mnoge tutorijale na webu koristeći: target pseudo-klasu. Međutim, nećemo slijediti tuđi kod, već ga pokušati razumjeti i razumjeti kako funkcionira? Naravno, neće ići bez primjera.

Što je: cilj?

U CSS-u: target je pseudo-klasa koja vam omogućuje da odaberete određeni cijeli "komad" vašeg HTML-dokumenta, na kojem će se izvršiti neka radnja. To može biti, na primjer, odlomak teksta ili naslov.

Pseudo-klase ne treba miješati s pseudo-elementima, koji mogu odabrati samo određeni dio elementa, kao što je prvo slovo ili prvi redak odlomka.

Pseudo-klase:

• a: link (boja: # 111)
• a: lebdjeti (boja: # 222)
• div: prvo dijete (boja: # 333)

Pseudoelementi:

• p :: prvo slovo (boja: # 444)
• p :: prvi red (boja: # 555)

Mislim da je iz sintakse jasno što radi ova ili ona pseudo-klasa ili pseudo-element. Najpopularnija pseudo-klasa je: lebdeći, na nju se susreću svi webmasteri, opisuje stilove elementa pri lebdenju. target radi na sličan način i opisuje stilove elementa kada se dogodi određena situacija.

ID-ovi fragmenata

Ukratko, ovo je vrsta stvari za koju je vezana naša pseudo-klasa. Ovo je hashtag s riječju ili frazom na kraju adrese. izgleda ovako:

Ova tehnika se može koristiti za navigaciju unutar članka. Na primjer, na početku članka kreirate mali sadržaj, kada osoba klikne na element od kojeg osoba dolazi do odjeljka do kojeg vodi poveznica, do odjeljka, uz dodavanje identifikatora.

Ovo radi u čistom HTML-u, nisu potrebna podešavanja. Mali identifikatori.

Rukovanje klikom s: target

Pokušajmo se uvjeriti da kada kliknete na željeni odjeljak iz našeg improviziranog izbornika, promijeni se stil naslova, pokazujući koji je odlomak trenutno aktivan.

H1 (font: 30px Arial sans-serif;) h1: cilj (veličina fonta: 50px; ukras teksta: podcrtavanje; boja: # 37aee4;)

Kod je vrlo jednostavan - kada se klikne, naslov mijenja svoju veličinu, boju i podcrtavanje. Možete dodati život (Ruslan, zdravo) i animirati promjenu boje naslova:

H1 (font: 30px Arial sans-serif; -webkit-transition: boja 0,5 s lakoća; -moz-prijelaz: lakoća boja 0,5 s; -o-prijelaz: lakoća boja 0,5 s; -ms-prijelaz: lakoća boja 0,5 s; prijelaz: boja 0,5s lakoća;)

Isticanje aktivnog naslova je dobra stvar, ali što ako trebate promijeniti izgled teksta koji ga slijedi? CSS nam daje ovu priliku. izgleda ovako:

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

U ovom slučaju, plus označava da se stil treba primijeniti na odlomak nakon naslova. Tako, kod promjene aktivnog naslova - mijenjamo i dizajn rubrike s tekstom koji "pripada njemu".

Podrška za preglednik

Ciljana pseudo-klasa je iz treće revizije CSS-a i savršeno je podržana od svih preglednika osim IE starijih od verzije 9. Stoga je ne biste trebali implementirati ako vaša publika koristi ovaj preglednik. Iako postoji izlaz - ovo je Selectvizr, JS biblioteka s kojom možete učiniti da IE radi s CSS3. Samo dodajte skriptu i to je to, radi.

Jedina stvar, ako ne koristite JQuery ili MooTools, morate ih povezati da bi ova skripta radila. Službena stranica ima tablicu koje knjižnice podržavaju. Ako vas zanima, pročitajte. To .

Zaključak

Korištenje pseudo-klasa može se činiti zastrašujućim zadatkom, ali kada shvatite kako rade, možete raditi nevjerojatne stvari samo s CSS-om i ničim drugim. The: ciljna pseudo-klasa- izvrsna potvrda toga. Uz njegovu pomoć možete radikalno promijeniti interakciju stranice s posjetiteljem. Gornji primjer je najjednostavniji, ali također dodaje malo interaktivnosti stranici. Ali ovo je samo nekoliko redaka koda.

Nemojte pretjerivati ​​s ljepotom i podrškom za preglednik i bit ćete dobro.

ugodan dan

Prema zadanim postavkama, kada kliknete na vezu, dokument se otvara u trenutnom prozoru ili okviru. Ako je potrebno, ovaj se uvjet može promijeniti ciljnim atributom oznake. ... XHTML ne koristi ovaj atribut.

Sintaksa

...

Obavezni atribut

Vrijednosti

Vrijednost je ime prozora ili okvira navedenog atributom name. Ako je postavljeno nepostojeće ime, otvorit će se novi prozor. Sljedeći nazivi se koriste kao rezervirani nazivi.

Prazno Učitava stranicu u novi prozor preglednika. _self Učitava stranicu u trenutni prozor. _parent Učitava stranicu u roditeljski okvir, ako nema okvira, tada ova vrijednost radi kao _self. _top Poništava sve okvire i učitava stranicu u cijelom prozoru preglednika, ako nema okvira onda ova vrijednost radi kao _self.

Zadana vrijednost

Validacija

Korištenje ovog atributa zabranjuje HTML specifikacija; valjani kod se dobiva samo korištenjem prijelaznog .

HTML5 IE Cr Op Sa Fx

Otvori u novom prozoru

Postoji li način za rukovanje događajima klikova u CSS-u bez upotrebe JavaScripta. Metodu možete koristiti sa : cilj... Ali što ako se ne može koristiti? Postoji još jedna metoda.

Pogledajte demo. Potpuno je urađeno u CSS-u, a ne u jednom retku JavaScripta. Temelji se na izvornoj upotrebi birača: aktivno i: lebdeći.

Opis

Prvo morate stvoriti spremnik koji će sadržavati gumb i blokove koji se prikazuju klikom miša. Struktura označavanja bit će otprilike ova:

Morate učiniti .sadržaj nevidljivim sve dok se tipka miša ne pritisne na .wrapper. Da biste riješili problem, postavite svojstvo display: none za .content. Zatim, kada kliknemo na .wrapper, omogućit ćemo svojstvo display: block za .content. Da biste to učinili, postavite svojstvo display: block za .wrapper: active .content. U ovom stanju, .content će biti vidljiv samo kada se pritisne tipka miša. Ako ga pustite, .content ponovno nestaje. Radi popravljanja, napravit ćemo tako da kada je pokazivač miša iznad .content, elementu se dodjeljuje svojstvo display: block. To jest, postavili smo svojstvo display: block za .content: hover. CSS kod će izgledati ovako:

Sadržaj (prikaz: nema;) .wrapper: aktivan .sadržaj (prikaz: blok;) .sadržaj: lebdenje (prikaz: blok;)

Ostaje samo "češljati" izgled i dati mu jasnoću:

Omot (položaj: relativan;) .gumb (pozadina: žuta; visina: 20px; širina: 150px;) .sadržaj (položaj: apsolutna; padding-top: 20px;) .sadržaj li (pozadina: crvena;)

Tekst gumba u gornjem kodu imat će žutu pozadinu, a informacije prikazane kada se pritisne tipka miša imat će crvenu pozadinu.

Pozdrav dragi čitatelji blog stranice. Odlučio sam današnju publikaciju posvetiti najvažnijem aspektu webmasteringa, gdje ću sa svim detaljima pokušati objasniti što je hiperveza, neraskidivo povezana, a koja je pak, bez pretjerivanja, osnova interneta.

Ali da biste ispravno stvorili hiperveze i umetnuli ih u kod web stranica (na primjer, vaše web-mjesto), morate proučiti odgovarajuće područje jezika za označavanje hiperteksta (), budući da se ti elementi formiraju pomoću HTML a tag, koji ima mogućnost ažuriranja veze na željenu vrstu.

Dakle, danas ćemo analizirati od kojih se dijelova sastoji hiperveza, kako korištenje ciljnog blank atributa omogućuje otvaranje stranice u novom prozoru (kartici), kako bilo koju sliku učiniti vezom i mnoge druge važne detalje. Između ostalog, ove informacije će vas unaprijediti u učenju HTML jezika.

Što je hiperveza i može li se nazvati vezom?

Odgovarajući na pitanje postavljeno u naslovu, reći ću da pojam "veza" ima širi semantički raspon (veza na Sibir, banka za identifikaciju platitelja, tekst u knjizi itd.), uključujući značenje koje je inherentno pojmu "hiperveza" , koja je povezana samo s hipertekstom, što omogućuje nelinearnu percepciju informacija.

Tako, hiperveza je poseban slučaj veze, stoga ih je sasvim moguće ravnopravno koristiti u današnjoj temi. To je ono što ću iskoristiti u svojim "sebičnim interesima" tijekom današnje publikacije, koristeći oba ova pojma kako bih izbjegao nepotrebnu neželjenu poštu ključnih riječi.

Ali postoje i nevidljive usluge koje su stvorene uz pomoć i unutar granica, čiji je zadatak slati brojne signale i naredbe preglednicima za obavljanje određene funkcije.

Na primjer, pomoću hiperveza usluga moguće je prikazati ikonu. Mogu se vidjeti samo kao dio HTML koda (da biste to učinili, kliknite za bilo koju stranicu otvorenu u pregledniku):

Za sada ostavimo servisne veze na miru i razmotrimo opći obrazac stvaranja hiperveza. Zajedničko im je da svi imaju potreban atribut href, čija je vrijednost adresa dokumenta (). HTML veza može voditi i na internu stranicu web-mjesta i na vanjski dokument.

Još jedna važna napomena. Korištenje atributa href čini hiperveze klikabilnim, odnosno omogućuje korisnicima da automatski odu na odgovarajuću stranicu web stranice kao rezultat klika na njih.

Kako napraviti hipervezu u HTML-u koristeći href

Dakle, već znamo da su za stvaranje veze potrebni a tag i href atribut, čiji parametri mogu biti URL-ovi različitih tipova. Ukoliko a ovo, zatim između otvora i zatvaranje sadrži sadržaj koji će biti prikazan na web stranici.

to sadržaj se naziva sidro a može se predstaviti u obliku teksta ili slike (u nastavku ćemo detaljnije govoriti o tome kako sliku napraviti poveznicom). Kao što sam već napomenuo, sidro će se moći kliknuti. Razmotrimo primjer hiperveze s tekstualnim sadržajem. Ovako će izgledati njegova konstrukcija u HTML kodu:

malo o sidrima

Osim HTTP-a, može se koristiti i siguran HTTPS protokol. Veza ne mora voditi na web stranicu. Sve ovisi o vrijednosti href, koja može biti put do neke datoteke:

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

preuzimanje datoteka

Na web stranici ova će poveznica poprimiti sljedeći izgled:

Preglednik "shvaća" da se objekt s ekstenzijom .zip može koristiti samo za preuzimanje, što korisnik predlaže.

Usput, put do bilo koje datoteke ponekad se navodi putem FTP-a (). Zatim, u URL-u koji se koristi kao parametar atributa href, trebate jednostavno zamijeniti HTTP (HTTPS) protokol s FTP. Veza na datoteku će izgledati ovako:

preuzeti sa servera

Ali to nije sve. Na sličan način poveznica na e-poštu kreira se pomoću pseudo-mailto protokola za brzi pristup alatu za pisanje slova:

pisati pisma

Nakon klika na takvu poveznicu trebao bi se pojaviti prozor zadanog klijenta e-pošte u kojem možete sastaviti tekst poruke i poslati je na već navedenu adresu, preuzetu, kao što ste vjerojatno pretpostavili, iz href.

U praksi su hiperveze na poštu prije vrlo često koristili webmasteri i vlasnici velikih resursa kako bi osigurali udobnost korisnika i klijenata koji jednim klikom mogu pristupiti obrascu za slanje pošte.

Ali ova vrsta komunikacije na web-resursima više nije toliko popularna (pogotovo jer se može uspostaviti, na primjer), jer mail adrese otvorene na taj način aktivno presreću softver i koriste ih razni spameri.

Naveo sam kao primjer samo najčešće protokole uključene u URL, koji je, pak, parametar href atributa prilikom formiranja hiperveze. Uz HTTP (HTTPS), FTP i mailto, postoje i drugi za rješavanje problema užeg profila. Možda ćemo ih detaljnije razmotriti u drugim publikacijama.

Vrste hiperveza

Pokušajmo sada klasificirati veze prema jednoj ili drugoj osobini.

Po svom području djelovanja:

1. Vanjski- vode do stranica koje se nalaze izvan stranice na kojoj su objavljene;

2. Unutarnji- povezuju web stranice koje se nalaze unutar istog web resursa.

Po formatu:

2. Grafički f - u ovom slučaju, sidro hiperveze je slika (uključujući minijaturu), banner, gumb itd.

Prema vrsti URL-a koji služi kao vrijednost atributa href:

1. Apsolutno, koji sadrže eksplicitnu naznaku protokola prijenosa podataka (na primjer, HTTP) i naziv domene stranice (u svemu o domenama).

Ove veze se češće koriste kada se povezuju na stranice vanjskih resursa. U ovom slučaju, vrijednost href će uključivati ​​puni put do potrebne datoteke ili web-stranice. Evo primjera apsolutne hiperveze:

Kontekst - što je to

2. Relativno, jedna od opcija za kreiranje koje će biti put specificiran u odnosu na korijensku mapu web stranice (otuda naziv ove vrste hiperveza). U tom slučaju, protokol (HTTP) i domena web-mjesta bit će uklonjeni iz URL adrese:

Kontekst - što je to

Relativne hiperveze na web stranici mogu pružiti veze na interne stranice. Kao takvi, kraći su, što čini HTML lakšim za korištenje. Naravno, sve nije tako jednostavno, i zahtijeva širu pokrivenost, što možete vidjeti ako slijedite navedeni link.

Atributi oznake

Sada da vidimo koji drugi atributi, osim potrebnog href, postoje i kako mogu utjecati na stvaranje hiperveze. Najpotpuniji podaci po tom pitanju, da tako kažem, „iz prve ruke“ mogu se pronaći na službenim stranicama međunarodnog konzorcija W3C, gdje se najbrže pojavljuju najnovije informacije.

Potpuno su identični i pokreću otvaranje web stranice u trenutnoj kartici. Ako želite da se stranice otvaraju u novoj kartici kada kliknete na linkove, trebali biste dodati prilikom formiranja veze ciljni atribut s praznim parametrom:

Kontekst - što je to

Iako neki webmasteri i SEO-ovi smatraju da je bolje da posjetitelj ima priliku birati (tj. ne pisati cilj prazno), jer ako je potrebno, stranica se može otvoriti u novoj kartici pomoću kontekstnog izbornika (pomaknite postavite pokazivač na vezu, kliknite desnom tipkom miša i kliknite na odgovarajuću stavku):

Štoviše, kao što vidite, u ovom slučaju korisnik ima prednost što je moguće otvoriti web stranicu ne samo u novoj kartici, već i u novom prozoru(Ova se opcija ne može implementirati pomoću HTML-a, samo pomoću skripti).

Ali vjerujem da nisu svi korisnici početnici u potpunosti upoznati s mogućnostima i postavkama popularnih preglednika (). Sasvim je moguće da će čitatelj, nakon što je slijedio vanjsku hipervezu i izgubio iz vida izvornu stranicu (umjesto nje, pojavit će se dokument primatelja), jednostavno zatvoriti karticu u svojim srcima.

Dakle, vlasnik web-resursa može ne samo izgubiti obećavajućeg posjetitelja, već i dodatno pogoršati čimbenike ponašanja (), što će za posljedicu imati gubitak pozicija na stranici pri rangiranju.

Osim toga, otvaranje stranice na susjednoj kartici vrlo je zgodno s gledišta upotrebljivosti (). Korisnik prati hipervezu na web stranicu, dobiva dodatne informacije i, kao da se ništa nije dogodilo, nastavlja proučavati glavni materijal.

Kako bi se stvorila objektivna slika, treba dodati da je primjena "target =" _blank "" na bilo koje vanjske veze, ispostavilo se, ispunjena određenim sigurnosnim rizikom. Ako nekoga zanima, možete pročitati gdje se daju preporuke za otklanjanje problema pri korištenju target blanka, kao i alternativne opcije za implementaciju zadatka otvaranja web stranice u novoj kartici.

Čini se da je zabilježio sve prednosti i nedostatke korištenja prazne vrijednosti za otvaranje hiperveze u novoj kartici. Ako čitate članke na mom blogu, vjerojatno ste već pogodili moj stav prema ovom parametru ciljnog atributa.

Trenutno su za mene njegovi plusevi veći od minusa i bezuvjetni sam ga zagovornik. Na temelju gore navedenih činjenica možete stvoriti vlastito mišljenje o ovom pitanju. Iako ... s obzirom na pojavu novih okolnosti, i to se može promijeniti.

Kako kreirati hash linkove, sidra i zašto su oni potrebni?

Zatim, skrećem vam pozornost na drugu vrstu hiperveza koje mogu biti korisne ako je materijal na web stranici prilično obiman i treba biti strukturiran tako da poboljša navigaciju.

Za primjer ne morate ići daleko, samo pogledajte sadržaj ove publikacije na samom početku. Vidite, postoji popis dijelova članka? Hiperveze na ove odjeljke samo su hash veze. Nakon što kliknete na bilo koji od njih, preglednik će pomicati stranicu do točke gdje počinje odgovarajući dio.

Takve veze su dizajnirane prilično jednostavno. Prvo morate stvoriti sidro postavljanjem odgovarajuće oznake na potrebno mjesto na stranici u obliku ID-a, koji je jedan od globalnih atributa koji se primjenjuje na bilo koju HTML oznaku.

Zbog univerzalnosti ID-ova, takve oznake sidra mogu se postaviti gotovo bilo gdje na web stranici. Budući da je tekst obično podijeljen u odlomke, oni se mogu primijeniti na. Uglavnom postavljam sidra koja dijele članke na logične dijelove:

Nakon što smo na ovaj način označili sva potrebna mjesta u HTML kodu, stvaramo hiperveze na njih. Da bismo to učinili, na kraju iza zadnje kose crte "/" u URL-u (što je, kao što već znate, vrijednost atributa href), upisujemo uzastopno znak funte "#" i naziv oznake ( ISKAZNICA):

Kako generirati hash veze i sidra?

Štoviše, ako je takva veza sidra postavljena na istoj stranici kao i sidra, tada se dio url-a do zadnje kose crte prije uključivog hasha može izostaviti i samo "#" plus naziv ID-a može se koristiti kao href parametar (u stvari, ovo je jedna od relativnih poveznica):

Kako generirati hash veze i sidra?

To jest, kada sastavljate tablicu sadržaja za priručnik za optimizaciju HTML koda, možete jednostavno koristiti ovu laganu opciju. Ako stavite samo jedan znak funte kao URL, bez naziva identifikatora, tada će se od mjesta gdje se nalazi takva poveznica stranica pomicati sve do vrha:

Do vrha

Zapravo, ovo je najjednostavnija opcija, koja opet služi kao dodatna prednost iskoristivosti resursa, jer svojim posjetiteljima olakšava život. Atraktivna slika može se koristiti kao sidro za stvaranje gumba.

Uklonite podcrtavanje i promijenite boju veze

HTML programeri su smislili gotovo sve nijanse koje mogu pomoći u optimizaciji jednog ili drugog aspekta, isto se odnosi i na hiperveze. Na primjer, slijedeći hipervezu na drugu web stranicu, a zatim se vraćajući natrag, korisnik će vidjeti da je hiperveza promijenila boju.

Ako takve radnje treba ponoviti više puta, tada će moći brzo odrediti koje je linkove već kliknuo, a koje nije. Ova je opcija uključena u gotovo svaki preglednik. Ne treba objašnjavati koliko je to praktično i koliko štedi vremena.

Prema zadanim postavkama i bez korištenja CSS hiperveza istaknuto podcrtavanjem i tri opcije boja, od kojih svaki ima svoj atribut za:

• link - postavlja boju hiperveze na web stranici (plava prema zadanim postavkama, označena s # 0000ff);
• alink - boja aktivne hiperveze sve dok je web preglednik obrađuje (crvena # ff0000);
• vlink - boja poveznice koju je korisnik posjetio (ljubičasta, # 800080).

Kako zamijeniti boje poveznica koje prikazuju preglednici za vašu web-lokaciju? Pa, za jednostavnu HTML stranicu na kojoj se stranice formiraju ručno (a mislim da u modernoj stvarnosti praktički ne postoje potpuni resursi ove vrste, osim jednostavnih dnevnika i odredišnih stranica), samo trebate pronaći početnu oznaku i propisati potrebne parametre za njega (usput, možete koristiti njegov naziv za označavanje boje), na primjer:

Ako ste instalirali sustav za upravljanje sadržajem () za administriranje vašeg web resursa, tada, bez obzira na tip motora koji koristite, morate otvoriti za uređivanje datoteku odgovornu za izlaz zaglavlja (zaglavlja), gdje se otvara oznaka je prisutna .

Ako vaš resurs radi pod kontrolom WordPressa, tada ga za praktičnu provedbu ove ideje možete koristiti kao alat za automatsko umetanje slike unutar hiperveze, gdje prvo odaberete iz biblioteke ili učitate željenu sliku i umetnete to u tekstu:

Zatim odaberite rezultirajući kod slike i pritisnite gumb "link" uređivača, a zatim zalijepite željenu kopiranu hipervezu u prozor koji se pojavi:

Za prijelaz na odabrani fragment dokumenta, u adresi se upisuje simbol # i navodi se naziv identifikatora. Na primjer, u adresi http://www.w3.org/TR/css3-selectors/#target-pseudo dolazi do prijelaza na element čiji je atribut id postavljen kao target-pseudo. Ovaj adresni zapis naziva se "ciljna stavka". Pseudo-klasa: target primjenjuje se na ciljni element, drugim riječima, identifikator koji je naveden u adresnoj traci preglednika.

Oznake

	Opis	Primjer
<тип>	Označava vrstu vrijednosti.	<размер>
A && B	Vrijednosti moraju biti prikazane prikazanim redoslijedom.	<размер> && <цвет>
A | B	Označava da treba odabrati samo jednu od predloženih vrijednosti (A ili B).	normalno | male kapice
A || B	Svaka vrijednost može se koristiti samostalno ili u kombinaciji s drugima bilo kojim redoslijedom.	širina || računati
	Grupne vrijednosti.	[usjev || križ]
*	Ponovite nula ili više puta.	[,<время>]*
+	Ponovite jedan ili više puta.	<число>+
?	Navedena vrsta, riječ ili grupa nije obavezna.	umetnuti?
(A, B)	Ponovite najmanje A, ali ne više od B puta.	<радиус>{1,4}
#	Ponovite jedan ili više puta, odvojeno zarezima.	<время>#

×

Primjer

• Priča 1
• Priča 2

Priča 1

Priča o tome kako je trebalo napraviti grob, počeli su ga kopati, pa zatrpati, i što je od toga bilo.

Priča 2

Priča o tome kako su se u blizini blagovaonice pojavili misteriozni ružičasti otisci stopala sa šest prstiju i zašto se to dogodilo.

U ovom primjeru, ciljni element je istaknut bojom pozadine.

Bilješka

U Safariju prije 3.0, pravila stila se ne primjenjuju ako korisnik koristi navigaciju preglednikom (gumbi Natrag i Naprijed).

Specifikacija

Svaka specifikacija prolazi kroz nekoliko faza odobrenja.

• Preporuka - Ovu specifikaciju je odobrio W3C i preporučuje se kao standard.
• Preporuka kandidata ( Moguća preporuka) - skupina odgovorna za standard je zadovoljna da je u skladu s njegovim ciljevima, ali je za implementaciju standarda potrebna pomoć razvojne zajednice.
• Predložena preporuka ( Predložena preporuka) - U ovom trenutku dokument se podnosi Savjetodavnom vijeću W3C na konačno odobrenje.
• Radni nacrt - zrelija verzija nacrta nakon rasprave i amandmana za reviziju zajednice.
• Nacrt urednika ( Urednički nacrt) - nacrt standarda nakon uređivanja od strane urednika projekta.
• Nacrt ( Nacrt specifikacije) je prvi nacrt standarda.

×

Preglednici

U tablici preglednika koriste se sljedeće konvencije.