Evento click CSS puro senza: target. Target = "_blank" e altri valori dell'attributo target Gestione di oggetti non target

Puoi facilmente trovare molti tutorial sul web usando: la pseudo-classe target. Tuttavia, non seguiremo il codice di qualcun altro, ma cercheremo di capirlo e capire come funziona? Naturalmente, non farà a meno di esempi.

Che cos'è: obiettivo?

In CSS: target è una pseudo-classe che ti permette di selezionare un certo "pezzo" intero del tuo documento HTML, su cui verrà eseguita qualche azione. Può trattarsi, ad esempio, di un paragrafo di testo o di un'intestazione.

Le pseudo-classi non devono essere confuse con gli pseudo-elementi, che possono selezionare solo una certa parte di un elemento, come la prima lettera o la prima riga di un paragrafo.

Pseudo-classi:

• a: collegamento (colore: # 111)
• a: al passaggio del mouse (colore: # 222)
• div: primo figlio (colore: # 333)

Pseudo-elementi:

• p :: prima lettera (colore: # 444)
• p :: prima riga (colore: # 555)

Penso che sia chiaro dalla sintassi cosa fa questa o quella pseudo-classe o pseudo-elemento. La pseudo-classe più popolare è: hover, è incontrata da tutti i webmaster, descrive gli stili dell'elemento al passaggio del mouse. target funziona in modo simile e descrive gli stili di un elemento quando si verifica una determinata situazione.

ID frammento

In breve, questo è il genere di cose a cui è legata la nostra pseudo-classe. Questo è un hashtag con una parola o una frase alla fine dell'indirizzo. Sembra così:

Questa tecnica può essere utilizzata per navigare all'interno di un articolo. Ad esempio, all'inizio dell'articolo, crei un piccolo sommario, quando una persona fa clic su un elemento di cui la persona arriva alla sezione in cui conduce il collegamento, alla sezione, aggiungendo un identificatore.

Funziona in puro HTML, non sono necessarie modifiche. Piccoli identificatori.

Gestire un clic con: target

Ora proviamo a fare in modo che quando clicchi sulla sezione desiderata dal nostro menu estemporaneo, lo stile dell'intestazione cambi, mostrando quale paragrafo è attualmente attivo.

H1 (font: 30px Arial sans-serif;) h1: target (font-size: 50px; decorazione del testo: sottolineato; colore: # 37aee4;)

Il codice è molto semplice: quando si fa clic, il titolo cambia dimensione, colore e sottolineatura. Puoi aggiungere vita (Ruslan, ciao) e animare il cambio di colore del titolo:

H1 (font: 30px Arial sans-serif; -webkit-transition: colore 0.5s facilita; -moz-transition: colore 0.5s facilita; -o-transition: colore 0.5s facilita; -ms-transition: colore 0.5s facilita; transizione: facilità di colore 0,5 secondi;)

Evidenziare il titolo attivo è una buona cosa, ma cosa succede se è necessario modificare l'aspetto del testo che lo segue? CSS ci offre questa opportunità. Sembra così:

H1: target + p (sfondo: #eaeaea; padding: 10px;)

In questo caso, il più significa che lo stile deve essere applicato al paragrafo che segue l'intestazione. Così, quando si cambia il titolo attivo, cambiamo anche il design della sezione con il testo che "gli appartiene".

Supporto browser

La pseudo-classe di destinazione proviene dalla terza revisione di CSS ed è perfettamente supportata da tutti i browser tranne IE precedente alla versione 9. Pertanto, non dovresti implementarla se il tuo pubblico utilizza questo browser. Tuttavia, c'è una via d'uscita: questa è Selectvizr, una libreria JS con cui puoi far funzionare IE con CSS3. Basta aggiungere lo script e il gioco è fatto, funziona.

L'unica cosa, se non usi JQuery o MooTools, devi collegarlo affinché questo script funzioni. Il sito ufficiale ha una tabella di quali librerie supportano quali. Se sei interessato, leggilo. Esso .

Conclusione

L'uso di pseudo-classi può sembrare un compito arduo, ma una volta compreso come funzionano, puoi fare cose incredibili solo con CSS e nient'altro. La: pseudo-classe target- un'ottima conferma di ciò. Con il suo aiuto, puoi cambiare radicalmente l'interazione della pagina con il visitatore. L'esempio sopra è il più semplice, ma aggiunge anche un po' di interattività alla pagina. Ma questo è solo un paio di righe di codice.

Non esagerare con la bellezza e il supporto del browser e andrà tutto bene.

Buona giornata

Per impostazione predefinita, quando si fa clic su un collegamento, il documento si apre nella finestra o cornice corrente. Se necessario, questa condizione può essere modificata dall'attributo di destinazione del tag. ... XHTML non usa questo attributo.

Sintassi

...

Attributo richiesto

I valori

Il valore è il nome della finestra o del frame specificato dall'attributo name. Se viene impostato un nome inesistente, verrà aperta una nuova finestra. I seguenti sono usati come nomi riservati.

Vuoto Carica la pagina in una nuova finestra del browser. _self Carica la pagina nella finestra corrente. _parent Carica la pagina nel frame genitore, se non ci sono frame, allora questo valore funziona come _self. _top Annulla tutti i frame e carica la pagina nella finestra del browser completa, se non ci sono frame allora questo valore funziona come _self.

Valore predefinito

Convalida

L'uso di questo attributo è deprecato dalle specifiche HTML; il codice valido si ottiene solo utilizzando un transitorio .

HTML5 IE Cr Op Sa Fx

Apri in una nuova finestra

C'è un modo per gestire gli eventi di clic in CSS senza utilizzare JavaScript. Puoi usare il metodo con : obbiettivo... Ma cosa succede se non può essere utilizzato? C'è un altro metodo.

Guarda una demo. È completamente fatto in CSS, non una singola riga di JavaScript. Si basa sull'uso originale dei selettori: active e: hover.

Descrizione

Innanzitutto, è necessario creare un contenitore che conterrà il pulsante e i blocchi visualizzati facendo clic con il mouse. La struttura del markup sarà qualcosa del genere:

Devi rendere invisibile il .content finché non viene premuto il pulsante del mouse sul .wrapper. Per risolvere il problema, impostare la proprietà display: none per .content. Quindi, quando clicchiamo sul .wrapper, abiliteremo la proprietà display: block per il .content. Per fare ciò, imposta la proprietà display: block per .wrapper: active .content. In questo stato, il .content sarà visibile solo quando viene premuto il pulsante del mouse. Se lo lasci andare, il .content scompare di nuovo. Per correggere, faremo in modo che quando il cursore del mouse si trova su .content, la proprietà display: block sia assegnata all'elemento. Cioè, impostiamo la proprietà display: block per .content: hover. Il codice CSS sarà simile a questo:

Contenuto (display: nessuno;) .wrapper: attivo .content (display: block;) .content: hover (display: block;)

Resta solo da "pettinare" l'aspetto e dargli chiarezza:

Wrapper (posizione: relativa;) .button (sfondo: giallo; altezza: 20px; larghezza: 150px;) .content (posizione: assoluta; padding-top: 20px;) .content li (sfondo: rosso;)

Il testo del pulsante nel codice sopra avrà uno sfondo giallo e le informazioni visualizzate quando si preme il pulsante del mouse avranno uno sfondo rosso.

Ciao cari lettori del sito blog. Ho deciso di dedicare la pubblicazione di oggi all'aspetto più importante del webmastering, dove cercherò di spiegare con tutti i dettagli cos'è un collegamento ipertestuale, a cui è indissolubilmente legato, che a sua volta, senza esagerazione, è la base di Internet.

Ma per creare correttamente collegamenti ipertestuali e inserirli nel codice delle pagine Web (ad esempio il tuo sito), è necessario studiare l'area corrispondente del linguaggio di markup ipertestuale (), poiché questi elementi sono formati utilizzando l'HTML a tag, che ha la capacità di aggiornare il collegamento alla specie desiderata.

Quindi, oggi analizzeremo in quali parti è costituito un collegamento ipertestuale, come l'utilizzo dell'attributo vuoto di destinazione consente di aprire una pagina in una nuova finestra (scheda), come rendere qualsiasi immagine un collegamento e molti altri dettagli importanti. Tra le altre cose, queste informazioni ti faranno avanzare nell'apprendimento del linguaggio HTML.

Che cos'è un collegamento ipertestuale e può essere chiamato collegamento?

Rispondendo alla domanda posta nel titolo, dirò che il termine "collegamento" ha un raggio semantico più ampio (collegamento alla Siberia, banca per identificare il pagatore, testo in un libro, ecc.), compreso il significato inerente al concetto di "hyperlink", che è associato solo all'ipertesto, che rende possibile la percezione non lineare delle informazioni.

Così, un collegamento ipertestuale è un caso speciale di collegamento, quindi, è del tutto possibile usarli nell'argomento di oggi su una base paritaria. Questo è ciò di cui trarrò vantaggio nei miei "interessi egoistici" nel corso della pubblicazione di oggi, utilizzando entrambi questi termini per evitare inutili spam di parole chiave.

Ma ci sono anche quelli di servizio invisibili creati con l'aiuto di e nei limiti, il cui compito è inviare numerosi segnali e comandi ai browser per eseguire una determinata funzione.

Ad esempio, utilizzando i collegamenti ipertestuali di servizio, è possibile visualizzare un'icona. Possono essere visti solo come parte del codice HTML (per farlo, clicca per qualsiasi pagina aperta nel browser):

Per ora, lasciamo stare i collegamenti di servizio e consideriamo il modello generale di creazione dei collegamenti ipertestuali. Quello che hanno in comune è che hanno tutti attributo href obbligatorio, il cui valore è l'indirizzo del documento (). Un collegamento HTML può portare sia a una pagina interna del sito che a un documento esterno.

Un'altra nota importante. L'uso dell'attributo href rende i collegamenti ipertestuali cliccabili, ovvero consente agli utenti di andare automaticamente alla pagina corrispondente del sito Web dopo aver fatto clic su di essi.

Come creare un collegamento ipertestuale in HTML usando href

Quindi, sappiamo già che per creare un collegamento sono necessari il tag a e l'attributo href, i cui parametri possono essere URL di vario tipo. Nella misura in cui un questo, poi tra l'apertura e chiudendo contiene il contenuto che verrà visualizzato nella pagina web.

esso il contenuto si chiama ancora e può essere presentato sotto forma di testo o immagine (parleremo più dettagliatamente di seguito come rendere un'immagine un collegamento). Come ho già notato, l'ancora sarà cliccabile. Considera un esempio di collegamento ipertestuale con contenuto di testo. Ecco come apparirà la sua costruzione nel codice HTML:

un po' di ancore

Oltre a HTTP, è possibile utilizzare il protocollo sicuro HTTPS. Il collegamento non deve necessariamente portare alla pagina web. Tutto dipende dal valore href, che può essere il percorso di alcuni file:

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

Scarica

Nella pagina web, questo collegamento assumerà la seguente veste:

Il browser "capisce" che un oggetto con estensione .zip può essere utilizzato solo per il download, come suggerisce l'utente.

A proposito, il percorso di qualsiasi file a volte viene specificato tramite FTP (). Quindi, nell'URL utilizzato come parametro dell'attributo href, dovresti semplicemente sostituire il protocollo HTTP (HTTPS) con FTP. Il collegamento al file sarà simile a questo:

scarica dal server

Ma non è tutto. In un modo simile viene creato un collegamento a un'e-mail utilizzando il protocollo pseudo-mailto per un rapido accesso allo strumento di scrittura delle lettere:

scrivere lettere

Dopo aver cliccato su tale collegamento, dovrebbe apparire una finestra del client di posta predefinito, in cui è possibile comporre il testo del messaggio e inviarlo all'indirizzo già specificato, preso, come probabilmente intuito, da href.

In pratica, i collegamenti ipertestuali alla posta erano molto spesso utilizzati in precedenza da webmaster e proprietari di grandi risorse per garantire la comodità di utenti e clienti che possono accedere al modulo di invio con un clic.

Ma questo tipo di comunicazione sulle risorse web non è più così diffuso (soprattutto perché può essere stabilito, ad esempio,), perché gli indirizzi di posta aperti in questo modo vengono attivamente intercettati tramite software e utilizzati da tutti i tipi di spammer.

Ho citato come esempio solo i protocolli più comuni inclusi nell'URL, che a sua volta è un parametro dell'attributo href quando si forma un collegamento ipertestuale. Oltre a HTTP (HTTPS), FTP e mailto, ce ne sono altri per risolvere problemi di profilo più stretto. Forse li considereremo più in dettaglio in altre pubblicazioni.

Tipi di collegamenti ipertestuali

Ora proviamo a classificare i collegamenti in base all'una o all'altra caratteristica.

Per la loro area di azione:

1. Esterno- portano a pagine ubicate al di fuori del sito su cui sono pubblicati;

2. Interno- collegare pagine web situate all'interno della stessa risorsa web.

Per formato:

2. Graficamente f - in questo caso, l'ancora del collegamento ipertestuale è un'immagine (inclusa una miniatura), un banner, un pulsante, ecc.

In base al tipo di URL che funge da valore dell'attributo href:

1. Assoluto, che contengono un'indicazione esplicita del protocollo di trasferimento dati (ad esempio HTTP) e del nome di dominio del sito (in tutto ciò che riguarda i domini).

Questi collegamenti sono più comunemente utilizzati quando si collegano a pagine di risorse esterne. In questo caso, il valore href includerà il percorso completo del file o della pagina web richiesti. Ecco un esempio di collegamento ipertestuale assoluto:

Contesto - che cos'è?

2. Parente, una delle opzioni per la creazione che sarà il percorso specificato relativo alla cartella radice del sito web (da cui il nome di questo tipo di collegamenti ipertestuali). In questo caso, il protocollo (HTTP) e il dominio del sito verranno rimossi dall'indirizzo URL:

Contesto - che cos'è?

I relativi collegamenti ipertestuali su una pagina Web possono fornire collegamenti a pagine interne. In quanto tali, sono più brevi, rendendo l'HTML più facile da usare. Ovviamente tutto non è così semplice, e richiede una copertura più ampia, come puoi vedere se segui il link fornito.

Un tag attributi

Vediamo ora quali altri attributi, oltre all'href richiesto, esistono e come possono influenzare la creazione di un collegamento ipertestuale. I dati più completi al riguardo, per così dire, "di prima mano" possono essere trovati sul sito ufficiale del W3C International Consortium, dove le informazioni più recenti appaiono le più veloci.

Sono completamente identici e avviano l'apertura di una pagina web nella scheda corrente. Se vuoi che le pagine si aprano in una nuova scheda quando fai clic sui collegamenti, dovresti aggiungere quando crei il collegamento attributo di destinazione con parametro vuoto:

Contesto - che cos'è?

Sebbene alcuni webmaster e specialisti SEO ritengano che sia meglio dare al visitatore la possibilità di scegliere (cioè non scrivere target vuoto), perché se necessario, la pagina può essere aperta in una nuova scheda utilizzando il menu contestuale (sposta il cursore sul collegamento, fare clic con il pulsante destro del mouse e fare clic sull'elemento corrispondente):

Inoltre, come puoi vedere, in questo caso l'utente ha il vantaggio che è possibile aprire una pagina web non solo in una nuova scheda, ma anche in una nuova finestra(Questa opzione non può essere implementata usando HTML, solo usando script).

Ma credo che non tutti gli utenti inesperti abbiano piena familiarità con le capacità e le impostazioni dei browser più diffusi (). È del tutto possibile che il lettore, dopo aver seguito il collegamento ipertestuale esterno e aver perso di vista la pagina di origine (invece di essa, apparirà il documento destinatario), chiuderà semplicemente la scheda nei loro cuori.

Pertanto, il proprietario di una risorsa Web potrebbe non solo perdere un visitatore promettente, ma anche ottenere un peggioramento dei fattori comportamentali () in aggiunta, che comporterà una perdita di posizioni di pagina durante il ranking.

Inoltre, l'apertura di una pagina in una scheda adiacente è molto comoda dal punto di vista dell'usabilità (). L'utente segue il collegamento ipertestuale alla pagina web, riceve informazioni aggiuntive e, come se nulla fosse, continua a studiare il materiale principale.

Per creare un'immagine obiettiva, va aggiunto che l'applicazione di "target =" _blank "" a qualsiasi collegamento esterno, risulta essere irto di alcuni rischi per la sicurezza. Se qualcuno è interessato, puoi leggere dove vengono fornite le raccomandazioni per eliminare i problemi quando si utilizza lo spazio vuoto di destinazione, nonché vengono presentate opzioni alternative per implementare l'attività di apertura di una pagina Web in una nuova scheda.

Sembra aver notato tutti i pro ei contro dell'utilizzo del valore vuoto per aprire un collegamento ipertestuale in una nuova scheda. Se stai leggendo articoli sul mio blog, probabilmente hai già indovinato il mio atteggiamento nei confronti di questo parametro dell'attributo target.

Al momento, per me, i suoi vantaggi superano gli svantaggi e ne sono un sostenitore incondizionato. Sulla base dei fatti di cui sopra, puoi formare la tua opinione su questo problema. Sebbene ... dato l'emergere di nuove circostanze, potrebbe cambiare.

Come creare collegamenti hash, ancoraggi e perché sono necessari?

Successivamente, attiro la tua attenzione su un altro tipo di collegamenti ipertestuali che possono essere utili se il materiale sulla pagina web è abbastanza voluminoso e dovrebbe essere strutturato per migliorare la navigazione.

Non devi andare lontano per un esempio, basta dare un'occhiata al sommario di questa pubblicazione all'inizio. Vedi, c'è un elenco di sezioni dell'articolo? I collegamenti ipertestuali a queste sezioni sono solo collegamenti hash. Dopo aver cliccato su uno di essi, il browser farà scorrere la pagina fino al punto in cui inizia la parte corrispondente.

Tali collegamenti sono progettati in modo abbastanza semplice. Per prima cosa devi creare ancora posizionando l'etichetta appropriata nella posizione richiesta sulla pagina sotto forma di ID, che è uno degli attributi globali applicati a qualsiasi tag HTML.

A causa dell'universalità degli ID, tali tag di ancoraggio possono essere posizionati quasi ovunque su una pagina web. Poiché il testo è solitamente diviso in paragrafi, possono essere applicati. Principalmente metto delle ancore che dividono gli articoli in parti logiche:

Dopo aver contrassegnato in questo modo tutti i posti necessari nel codice HTML, creiamo collegamenti ipertestuali ad essi. Per fare ciò, alla fine dopo l'ultima barra "/" nell'URL (che, come già saprai, è il valore dell'attributo href), scriviamo in sequenza il cancelletto "#" e il nome del tag ( ID):

Come generare link hash e anchor?

Inoltre, se tale link di ancoraggio è posizionato sulla stessa pagina delle ancore, allora parte dell'URL fino all'ultima barra prima dell'hash incluso può essere omessa e solo "#" più il nome ID può essere usato come parametro href (infatti questo è uno dei link relativi):

Come generare link hash e anchor?

Cioè, quando si compila un sommario per il manuale per ottimizzare il codice HTML, è possibile utilizzare facilmente questa opzione leggera. Se inserisci solo un cancelletto come URL, senza il nome dell'identificatore, dal punto in cui si trova tale collegamento, la pagina scorrerà fino in cima:

Verso l'alto

In realtà, questa è l'opzione più semplice, che serve ancora come ulteriore vantaggio dell'usabilità delle risorse, poiché semplifica la vita ai suoi visitatori. Un'immagine attraente può essere utilizzata come ancoraggio per la creazione di un pulsante.

Rimuovi la sottolineatura e cambia il colore del collegamento

Gli sviluppatori HTML hanno pensato a quasi tutte le sfumature che possono aiutare a ottimizzare un aspetto o l'altro, lo stesso vale per i collegamenti ipertestuali. Ad esempio, seguendo un collegamento ipertestuale a un'altra pagina Web e quindi tornando indietro, l'utente vedrà che il collegamento ipertestuale ha cambiato colore.

Se ha bisogno di ripetere tali azioni più di una volta, sarà in grado di determinare rapidamente quali collegamenti ha già cliccato e quali no. Questa opzione è inclusa in quasi tutti i browser. Non c'è bisogno di spiegare quanto sia conveniente e quanto tempo fa risparmiare.

Per impostazione predefinita e senza utilizzare i collegamenti ipertestuali CSS evidenziato con sottolineatura e tre opzioni di colore, ognuno dei quali ha il proprio attributo per:

• link - imposta il colore del collegamento ipertestuale sulla pagina web (blu per impostazione predefinita, indicato da # 0000ff);
• alink - il colore del collegamento ipertestuale attivo fintanto che viene elaborato dal browser web (rosso # ff0000);
• vlink - il colore del link visitato dall'utente (viola, #800080).

Come sostituisci i colori dei link visualizzati dai browser per il tuo sito? Ebbene, per un semplice sito HTML in cui le pagine vengono formate manualmente (e penso che non ci siano praticamente risorse complete di questo tipo nelle realtà moderne, ad eccezione di semplici diari e landing page), basta trovare il tag di apertura e prescrivere i parametri necessari per esso (a proposito, puoi usare il suo nome per designare un colore), ad esempio:

Se hai installato un sistema di gestione dei contenuti () per amministrare la tua risorsa web, allora, indipendentemente dal tipo di motore che stai utilizzando, devi aprire per la modifica il file responsabile dell'output dell'intestazione (intestazione), dove l'apertura il tag è presente .

Se la tua risorsa è in esecuzione sotto il controllo di WordPress, quindi per l'implementazione pratica di questa idea, puoi utilizzarla come strumento per l'inserimento automatico di un'immagine all'interno di un collegamento ipertestuale, dove prima selezioni dalla libreria o carichi l'immagine desiderata e inserisci nel testo:

Quindi seleziona il codice dell'immagine risultante e premi il pulsante "link" dell'editor, quindi incolla il collegamento ipertestuale copiato desiderato nella finestra che appare:

Per passare al frammento selezionato del documento, nell'indirizzo viene scritto il simbolo # e viene indicato il nome dell'identificatore. Ad esempio, nell'indirizzo http://www.w3.org/TR/css3-selectors/#target-pseudo c'è una transizione all'elemento, il cui attributo id è impostato come target-pseudo. Questo record di indirizzo è chiamato "elemento di destinazione". La pseudo-classe target si applica all'elemento target, in altre parole, l'identificatore che è specificato nella barra degli indirizzi del browser.

designazioni

	Descrizione	Esempio
<тип>	Indica il tipo di valore.	<размер>
A && B	I valori devono essere visualizzati nell'ordine mostrato.	<размер> && <цвет>
A | B	Indica che deve essere selezionato solo uno dei valori suggeriti (A o B).	normale | maiuscoletto
A || B	Ciascun valore può essere utilizzato da solo o insieme ad altri in qualsiasi ordine.	larghezza || contare
	Valori dei gruppi.	[ritaglia || attraverso]
*	Ripeti zero o più volte.	[,<время>]*
+	Ripetere una o più volte.	<число>+
?	Il tipo, la parola o il gruppo specificato è facoltativo.	inserto?
(A, B)	Ripeti almeno A, ma non più di B volte.	<радиус>{1,4}
#	Ripetere una o più volte, separate da virgole.	<время>#

×

Esempio

• Storia 1
• Storia 2

Storia 1

La storia di come era necessario fare una tomba, iniziarono a scavarla, e poi seppellirla, e cosa ne è venuto fuori.

Storia 2

La storia di come misteriose impronte rosa con sei dita sono apparse vicino alla sala da pranzo e perché è successo.

In questo esempio, l'elemento di destinazione è evidenziato con un colore di sfondo.

Nota

In Safari precedente alla 3.0, le regole di stile non vengono applicate se l'utente utilizza la navigazione del browser (pulsanti Indietro e Avanti).

Specifiche

Ogni specifica passa attraverso diverse fasi di approvazione.

• Raccomandazione - Questa specifica è stata approvata dal W3C ed è raccomandata come standard.
• Raccomandazione del candidato ( Possibile raccomandazione) - il gruppo responsabile dello standard è convinto che sia in linea con i suoi obiettivi, ma è necessario l'aiuto della comunità di sviluppatori per implementare lo standard.
• Raccomandazione proposta ( Raccomandazione suggerita) - A questo punto, il documento viene sottoposto all'Advisory Council del W3C per l'approvazione finale.
• Bozza di lavoro - Una versione più matura della bozza dopo la discussione e gli emendamenti per la revisione della comunità.
• Bozza dell'editore ( Bozza editoriale) - una bozza della norma dopo la modifica da parte degli editori del progetto.
• Brutta copia ( Bozza di specifica) è la prima bozza della norma.

×

Browser

Nella tabella del browser vengono utilizzate le seguenti convenzioni.