Nwlapcug.com


Come stile il testo del titolo di un Href

Come stile il testo del titolo di un Href


Quando si crea un collegamento ipertestuale in una pagina HTML utilizzando un elemento di ancoraggio, questo elemento ha normalmente un attributo "href"..--per riferimento ipertestuale..--che indica la posizione della pagina collegata o della risorsa. L'elemento di ancoraggio può anche avere un attributo di titolo che viene visualizzato quando l'utente passa il mouse sopra il link. Utilizzando il codice CSS (Cascading Style Sheet), è possibile determinare l'aspetto visivo per gli elementi HTML in una pagina. Codice CSS non è stile l'attributo titolo stesso, ma può stile l'elemento di ancoraggio in un modo che consente di personalizzare ciò che accade quando l'utente passa sopra di esso.

Istruzioni

1

Creare l'elemento di ancoraggio nella tua pagina. Se non avete già un elemento di ancoraggio a lavorare con, è possibile crearne uno utilizzando nell'esempio di markup riportato di seguito:

< un href="page.html" class = "tooltip" > pagina A < span > visitare una pagina < / span >< /a >

Modificare l'attributo "href" per soddisfare la posizione della pagina che si desidera che il punto di ancoraggio a cui collegarsi. Alterare il contenuto dell'elemento span per riflettere il testo che si desidera visualizzare quando l'utente sposta il mouse sopra questo link. Si creerà il codice CSS che impedisce che l'intervallo di visualizzazione tranne quando l'utente sposta il mouse su di esso.

2

Creare il codice CSS. Se non avete già una sezione per il codice CSS, aprire un nuovo file in un editor di testo e salvarlo nella stessa directory come la pagina con l'estensione "CSS" extensiom. Ad esempio, utilizzare "linkstyles.css" o un altro nome che ha senso per te. Aggiungere un link al file CSS nella sezione head della tua pagina come segue:

< link rel = "stylesheet" type = "text/css" href="linkstyles.css" / >

Modificare l'attributo "href" corrisponda al nome del vostro file CSS.

3

Aggiungere il codice CSS per selezionare l'elemento di ancoraggio e applicare gli stili ad esso. Utilizzando il seguente codice di esempio in CSS, identificare il punto di ancoraggio utilizzando l'attributo di classe, applicando le regole di stile che ti piace ad esso.

a.ToolTip () {

Proprietà Text-decoration: none;

}

Includere tutte le dichiarazioni per le proprietà font, colore e sfondo che è necessario.

4

Aggiungere le dichiarazioni CSS per applicare uno stile tuo durata del titolo. Anziché utilizzare l'attributo title, questo codice crea una descrizione comandi personalizzata utilizzando i CSS. Il contenuto della punta dell'utensile è nell'intervallo, quindi non deve essere visibile a meno che l'utente abbia passa loro mouse sopra esso. Utilizzare il seguente codice CSS.

a.ToolTip span {

display: none;

}

Identifica gli elementi span all'interno di eventuali elementi di ancoraggio con l'attributo di classe specificata, rendendo questi intervalli invisibile per impostazione predefinita.

5

Aggiungere le regole CSS per visualizzare la durata del titolo. Per rendere il browser visualizzare l'intervallo quando il mouse dell'utente è sopra esso, modificarne le proprietà CSS come nel codice di esempio seguente.

a.ToolTip:hover span {

Posizione: assoluta;

display: block;

z-indice: 100;

border: 1px #666666 solido;

Priorità bassa: #cccccc;

Proprietà Text-decoration: none;

testo-size: 0.8 em;

margin-top:-5px;

margin-left: 20px;

padding: 3px;

}

Alterare queste dichiarazioni per soddisfare le proprie esigenze di stile. Fanno il titolo contenuto nell'elemento span appaiono quando l'utente passa sopra il link, posizionare l'elemento in cima il testo del link e la creazione di un bordo intorno a esso.

Consigli & Avvertenze

  • CSS fornisce la possibilità di dettare stile sull'interazione dell'utente con elementi di ancoraggio senza la necessità per lo scripting.
  • Codice CSS rende i siti vengono visualizzati in modo diverso tra i vari browser, quindi è fondamentale per controllare le pagine in come molti come si può.