Link o collegamenti in CSS

Proprietà CSS applicabili ai collegamenti ipertestuali nel documento HTML sono responsabili per l'aspetto finale d'esso. I link sono dei collegamenti ipertestuali  per navigare su internet compreso il vostro sito, quindi l'uso di varie CSS-stili migliorerano la loro percezione visiva.

Il modo principale per la stilizzazione di un link sta nella sua sottolineatura e cambio del colore di testo. È inoltre possibile modificare l'aspetto del cursore con la proprietà cursor.

Stilizzare  collegamenti ipertestuali o link.

1. Pseudo classi di collegamenti  ipertestuali.

La maggior parte dei browser evidenzia quattro stati di base di link, ognuno dei quali ha un proprio pseudo-classe:
Non visitato - a:link
Visitato – che indica collegamento gia usato per passare altrove  - a:visited
Non premuto – lo stato con il puntatore del mouse posizionato sopra  - a:hover
Premuto – lo stato al momento del clic del mouse  - a:active

Utilizzando pseudo-formattazione per ogni stato di collegamento, è possibile fornire agli utenti suggerimenti riguardo i collegamenti dove è gia stato e dove non ancora, vediamo un esempio :

a:link {
  color: #497DDD; 
  border-bottom: 1px dashed; 
}
a:visited {
  color: #EF7D55;
}
a:hover {
  color: #154088; 
  border-bottom: .07em solid;
}
a:active {
  color: #497DDD; 
  border-bottom: 1px dashed;
}

La scrittura del codice CSS nel foglio deve seguire questo ordine altrimenti gli stili non funzioneranno (a causa del meccanismo a cascata).

video prevui

2. Selezionare singoli collegamenti

Per stilizzare singoli collegamenti si dovrebbe semplicemente aggiungere a loro la proprio classe e già per essa prescrivere i stili voluti :

<a href="http://ioeweb.it" class="global">Testo</a>

3. Sottolineatura collegamenti

Come eliminare sottolineatura di un link :

a {
  text-decoration: none;
}

Aggiungere la sottolineatura solo al posizionamento del mouse sopra il link :

a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

L'aspetto del bordo inferiore di collegamenti :

a {
  text-decoration: none;
  border-bottom: 2px dashed DarkOrchid;
  padding-bottom: 3px;
}

3.1 Utilizzo di un'immagine di sfondo

È possibile trasformare l'aspetto dei collegamenti, aggiungendo un'immagine di sfondo come il limite inferiore:

a {
  text-decoration: none;
  background: url(images/underline.png) repeat-x left bottom;
  padding-bottom: 3px;
}

4. L'aspetto del cursore del mouse

Il puntatore del mouse può avere diversi stati nella sua visualizzazione, è possibile anche impostare un'immagine personalizzata come il cursore. Passa con  il mouse sopra le celle della tabella qui sotto per vedere come appare il cursore per ogni valore impostato. Valore predefinito cursor:pointer;.

Puntatore -immagine

cursor: (url)

Cursori uso generale

cursor: auto cursor: default cursor: none

Cursore per un collegamento e lo stato del processo

cursor: context-menu cursor: help cursor: pointer
cursor: progress cursor: wait

Cursore di scelta

cursor: cell cursor: crosshair cursor: text
cursor: vertical-text

Cursori Drag and Drop

cursor: alias cursor: copy cursor: move
cursor: no-drop cursor: not-allowed

Cursori di ridimensionamento.

cursor: zoom-in cursor: zoom-out

Cursori di trascinamento

cursor: grab cursor: grabbing

Cursori per cambiare misura e scorrimento

cursor: e-resize cursor: ne-resize
cursor: n-resize cursor: nw-resize
cursor: w-resize cursor: sw-resize
cursor: s-resize cursor: se-resize
cursor: ew-resize cursor: ns-resize
cursor: nesw-resize cursor: nwse-resize
cursor: col-resize cursor: row-resize
cursor: all-scroll

5. Immagini per collegamenti

Aggiungere un'immagine per un link, è possibile utilizzando proprietà CSS background-image. Dal momento che il tag <a> è inline a {display: inline;}, quindi ha bisogno di essere convertito in un elemento di blocco a {display: block;}.

Per inserire un'immagine o un'icona prima del collegamento, è necessario aggiungere uno spazio con aiuto di proprieta padding-left. Questa tecnica può essere utile quando sulla pagina ci sono i  link per scaricare documenti in vari formati, a questo punto l'immagine o un'icona potrà indicare il tipo del documento.

Se si desidera che l'icona viene automaticamente aggiunta a tutti i link che contengono i documenti dello stesso formato, è possibile utilizzare la seguente costruzione:

a[href$=".pdf"] {
  background-image: url(images/pdf.png);
}

Il simbolo  href$ nel attributo  del selettore  indica al browser di trovare tutti gli attributi href, che terminano in un certo modo (in questo caso, .pdf) e aggiungere ad questi  collegamenti icona appropriata.

6. Link in forma di bottoni

Grazie alla proprietà background-color, border e padding,  i link possono essere trasformati in forma di pulsanti rettangolari, e cambiando la visualizzazione dei link nello stato  hover a:hover, si possa aggiungere effetti interessanti.

Collezione di bottoni

 

7. Esempi di stilizzazione di link

Collegamenti ipertestuali possono essere stilizzati in vari modi, ma il modo principale si basa sul cambiamento dell'aspetto del collegamento al momento del passaggio del cursore del mouse su di esso - lo stato del riferimento è a: hover.

Letto 1038 volte

corso CSS pratica

Impara HTML e CSS da zero al risulto!

Da piccolo hai imparato leggere leggendo libri. E con aiuto del nostro corso imparerai CSS e HTML costruendo un sito web da un templat in PSD .

Scopri il corso