Traduzione in corso.

Quando si vogliono assegnare gli stili ai link, è importante capire come fare uso delle pseudo-classi per definire efficacemente gli stili dei vari stati dei link, e come attribuire gli stili ai link per il loro uso nei più comuni elementi di interfaccia come i menu di navigazione e le schede. Nel seguente articolo illustreremo tutti questi argomenti.

Prerequisiti: Conoscenza informatica di base, elementi di HTML (leggi Introduction to HTML), elementi di CSS (leggi Introduction to CSS), Fondamenti di testo e font con CSS.
Obbiettivo: Imparare a definire gli stili degli stati dei link, e come utilizzarli efficacemente per i più comuni elementi di interfaccia come i menu di navigazione.

Abbiamo visto come i link possano essere impiegati nel tuo codice HTML in accordo con le best practices viste in Creare gli hyperlink. Nell'articolo aumenteremo ulteriormente questa conoscenza, mostrandoti le best practices per la definizione degli stili dei link.

La prima cosa da capire è il concetto di stato dei link — esistono stati differenti dei link, ai quali è possibile attribuire gli stili utilizzando differenti pseudo-classi:

  • Link (unvisited): è lo stato predefinito in cui il link risiede, quando non è in un altro stato. A questo stato può essere attribuito specificatamente uno stile utilizzando la pseudo-classe :link.
  • Visited: stato del link quando è già stato visitato (esiste nella storia del browser), si può attribuire la pseudo-classe :visited.
  • Hover: stato del link quando si passa il mouse sopra di esso, si può attribuire la pseudo-classe :hover.
  • Focus: stato del link quando è focalizzato (ad esempio se ci si posiziona tramite la tastiera usando il tasto Tab  o simili, oppure via programma usando HTMLElement.focus()) — a questo si può attribuire la pseudo-classe :focus.
  • Active: stato del link quando è attivato (ad esempio cliccandoci sopra), si può attribuire la pseudo-classe :active.

Stili predefiniti

L'esempio seguente mostra il comportamento predefinito di un link (in questo caso il CSS aumenta il font e centra il testo per risaltarlo maggiormente).

<p><a href="#">A simple link</a></p>
p {
  font-size: 2rem;
  text-align: center;
}

Nota: Tutti i link inseriti negli esempi della pagina sono simulati — sono stati inseriti i simboli # (cancelletto) o $ (sterlina) al posto dell'URL reale. Questo perché se fossero inclusi gli URL reali, cliccando su di essi, si interromperebbero gli esempi (si potrebbe verificare un errore, o caricare una pagina da cui non si potrebbe tornare indietro). Il # (cancelletto) invece si connette esclusivamente alla pagina corrente.

Quando esplorerete gli stili predefiniti, si noteranno alcune cose:

  • I link sono sottolineati.
  • I link non visitati sono blu.
  • I link visitati sono viola.
  • Passando il mouse sopra un link, il puntatore si trasforma in una manina.
  • I link con focus attivo sono contornati — dovresti essere in grado di attivare il focus sui link della pagina utilizzando il tasto Tab (su Mac, occorre abilitare l'opzione Full Keyboard Access: All controls premendo Ctrl + F7 ).
  • I link attivi sono rossi (provare a tenere premuto il mouse sul link quando vi si clicca sopra).

E' abbastanza interessante il fatto che questi stili predefiniti sono relativamente gli stessi rispetto a quelli usciti nei primi tempi dei browser verso la metà degli anni 90. Questo perché gli utenti conoscono e si aspettano questo comportamento — se i link avessero stili differenti da questi, confonderebbero un sacco di persone. Questo non significa che non si debbano definire gli stili del tutto, ma solo che non ci si deve allontanare troppo dalla visualizzazione che gli utenti si aspettano. Si dovrebbe almeno:

  • Utilizzare la sottolineatura solo per i link, e non per altri elementi. Se non si vuole usare la sottolineatura per i link, occorrerebbe evidenziarli in qualche altro modo.
  • Far reagire i link quando vi si passa il mouse sopra o li si evidenzia con il focus, ed anche in un modo leggermente diverso quando si attivano.

Gli stili predefiniti possono essere modificati o disattivati utilizzando le seguenti proprietà dei CSS:

  • color per il colore del testo.
  • cursor per lo stile del puntatore del mouse — è consigliabile non disattivare questo stile, a meno che non si abbia una buona ragione.
  • outline per l'outline del testo (l'outline è simile al bordo, la sola differenza è che il bordo occupa spazio nel riquadro mentre l'outline no; esso si colloca esternamente rispetto al background). L'outline è considerato un valido aiuto alla accessibilità, pertanto occorre fare una attenta valutazione prima di disattivarlo; si dovrebbero almeno raddoppiare gli stili dati sia per lo stato hover, che  per lo stato focus.

Nota: tu non sei limitato alle suddette proprietà per definire gli stili dei tuoi link — sentiti libero di utilizzare le proprietà che più ti piacciono. Cerca solo di non diventare troppo fantasioso !

Now we've looked at the default states in some detail, let's look at a typical set of link styles.

To start off with, we'll write out our empty rulesets:

a {

}


a:link {

}

a:visited {

}

a:focus {

}

a:hover {

}

a:active {

}

This order is important because the link styles build on one another, for example the styles in the first rule will apply to all the subsequent ones, and when a link is being activated, it is also being hovered over. If you put these in the wrong order, things won't work properly. To remember the order, you could try using a mnemonic like LoVe Fears HAte.

Now let's add some more information to get this styled properly:

body {
  width: 300px;
  margin: 0 auto;
  font-size: 1.2rem;
  font-family: sans-serif;
}

p {
  line-height: 1.4;
}

a {
  outline: none;
  text-decoration: none;
  padding: 2px 1px 0;
}

a:link {
  color: #265301;
}

a:visited {
  color: #437A16;
}

a:focus {
  border-bottom: 1px solid;
  background: #BAE498;
}

a:hover {
  border-bottom: 1px solid;     
  background: #CDFEAA;
}

a:active {
  background: #265301;
  color: #CDFEAA;
}

We'll also provide some sample HTML to apply the CSS to:

<p>There are several browsers available, such as <a href="#">Mozilla
Firefox</a>, <a href="#">Google Chrome</a>, and
<a href="#">Microsoft Edge</a>.</p>

Putting the two together gives us this result:

So what did we do here? This certainly looks different to the default styling, but it still provides a familiar enough experience for users to know what's going on:

  • The first two rules are not that interesting to this discussion.
  • The third rule uses the a selector to get rid of the default text underline and focus outline (which varies across browsers anyway), and adds a tiny amount of padding to each link — all of this will become clear later on.
  • Next, we use the a:link and a:visited selectors to set a couple of color variations on unvisited and visited links, so they are distinct.
  • The next two rules use a:focus and a:hover to set focused and hovered links to have different background colors, plus an underline to make the link stand out even more. Two points to note here are:
    • The underline has been created using border-bottom, not text-decoration — some people prefer this because the former has better styling options than the latter, and is drawn a bit lower, so doesn't cut across the descenders of the word being underlined (e.g. the tails on g and y).
    • The border-bottom value has been set as 1px solid, with no color specified. Doing this makes the border adopt the same color as the element's text, which is useful in cases like this where the text is a different color in each case.
  • Finally, a:active is used to give the links an inverted color scheme while they are being activated, to make it clear something important is happening!

In this active learning session, we'd like you to take our empty set of rules and add your own declarations to make the links look really cool. Use your imagination, go wild. We are sure you can come up with something cooler and just as functional as our example above.

If you make a mistake, you can always reset it using the Reset button. If you get really stuck, press the Show solution button to insert the example we showed above.

A common practice is to include icons on links to provide more of an indicator as to what kind of content the link points to. Let's look at a really simple example that adds an icon to external links (links that lead to other sites.) Such an icon usually looks like a little arrow pointing out of a box — for this example, we'll use this great example from icons8.com.

Let's look at some HTML and CSS that will give us the effect we want. First, some simple HTML to style:

<p>For more information on the weather, visit our <a href="#">weather page</a>,
look at <a href="#">weather on Wikipedia</a>, or check
out <a href="#">weather on Extreme Science</a>.</p>

Next, the CSS:

body {
  width: 300px;
  margin: 0 auto;
  font-family: sans-serif;
}

p {
  line-height: 1.4;
}

a {
  outline: none;
  text-decoration: none;
  padding: 2px 1px 0;
}

a:link {
  color: blue;
}

a:visited {
  color: purple;
}

a:focus, a:hover {
  border-bottom: 1px solid;
}

a:active {
  color: red;
}

a[href*="http"] {
  background: url('https://mdn.mozillademos.org/files/12982/external-link-52.png') no-repeat 100% 0;
  background-size: 16px 16px;
  padding-right: 19px;
}

So what's going on here? We'll skip over most of the CSS, as it's just the same information you've looked at before. The last rule however is interesting — here we are inserting a custom background image on external links in a similar manner to how we handled custom bullets on list items in the last article — this time however we are using background shorthand instead of the individual properties. We set the path to the image we want to insert, specify no-repeat so we only get one copy inserted, and then specify the position as 100% of the way over to the right of the text content, and 0 pixels from the top.

We also use background-size to specify the size we want the background image to be shown at — it is useful to have a larger icon and then resize it like this as needed for responsive web design purposes. This does however only work with IE 9 and later, so if you need to support those older browsers, you'll just have to resize the image and insert it as is.

Finally, we set some padding-right on the links to make space for the background image to appear in, so we aren't overlapping it with the text.

A final word — how did we select just external links? Well, if you are writing your HTML links properly, you should only be using absolute URLs for external links — it is more efficient to use relative links to link to other parts of your own site. The text "http" should therefore only appear in external links, and we can select this with an attribute selector: a[href*="http"] selects <a> elements, but only if they have an href attribute with a value that contains "http" somewhere inside it.

So that's it — try revisiting the active learning section above and trying this new technique out!

Note: Don't worry if you are not familiar with backgrounds and responsive web design yet; these are explained in other places.

The tools you've explored so far in this article can also be used in other ways. For example, states like hover can be used to style many different elements, not just links — you might want to style the hover state of paragraphs, list items, or other things.

In addition, links are quite commonly styled to look and behave like buttons in certain circumstances — a website navigation menu is usually marked up as a list containing links, and this can be easily styled to look like a set of control buttons or tabs that provide the user with access to other parts of the site. Let's explore how.

First, some HTML:

<ul>
  <li><a href="#">Home</a></li><li><a href="#">Pizza</a></li><li><a href="#">Music</a></li><li><a href="#">Wombats</a></li><li><a href="#">Finland</a></li>
</ul>

And now our CSS:

body,html {
  margin: 0;
  font-family: sans-serif;
}

ul {
  padding: 0;
  width: 100%;
}

li {
  display: inline;
}

a {
  outline: none;
  text-decoration: none;
  display: inline-block;
  width: 19.5%;
  margin-right: 0.625%;
  text-align: center;
  line-height: 3;
  color: black;
}

li:last-child a {
  margin-right: 0;
}

a:link, a:visited, a:focus {
  background: yellow;
}

a:hover {     
  background: orange;
}

a:active {
  background: red;
  color: white;
}

This gives us the following result:

Let's explain what's going on here, focusing on the most interesting parts:

  • Our second rule removes the default padding from the <ul> element, and sets its width to span 100% of the outer container (the <body>, in this case).
  • <li> elements are normally block by default (see types of CSS boxes for a refresher), meaning that they will sit on their own lines. In this case, we are creating a horizontal list of links, so in the third rule we set the display property to inline, which causes the list items to sit on the same line as one another — they now behave like inline elements.
  • The fourth rule — which styles the <a> element — is the most complicated here; let's go through it step by step:
    • As in previous examples, we start by turning off the default text-decoration and outline — we don't want those spoiling our look.
    • Next, we set the display to inline-block<a> elements are inline by default and, while we don't want them to spill onto their own lines like a value of block would achieve, we do want to be able to size them. inline-block allows us to do this.
    • Now onto the sizing! We want to fill up the whole width of the <ul>, leave a little margin between each button (but not a gap at the right hand edge), and we have 5 buttons to accommodate that should all be the same size. To do this, we set the width to 19.5%, and the margin-right to 0.625%. You'll notice that all this width adds up to 100.625%, which would make the last button overflow the <ul> and fall down to the next line. However, we take it back down to 100% using the next rule, which selects only the last <a> in the list, and removes the margin from it. Done!
    • The last three declarations are pretty simple and are mainly just for cosmetic purposes. We center the text inside each link, set the line-height to 3 to give the buttons some height (which also has the advantage of centering the text vertically), and set the text color to black.

Note: You may have noticed that the list items in the HTML are all put on the same line as each other — this is done because spaces/line breaks in between inline block elements create spaces on the page, just like the spaces in between words, and such spaces would break our horizontal navigation menu layout. So we've removed the spaces. You can find more information about this problem (and solutions) at Fighting the space between inline block elements.

Summary

We hope this article has provided you with all you'll need to know about links — for now! The final article in our Styling text module details how to use custom fonts on your websites, or web fonts as they are better known.

 

In this module

 

Tag del documento e collaboratori

 Hanno collaborato alla realizzazione di questa pagina: genoa1893
 Ultima modifica di: genoa1893,