Estilitzar enllaços

This translation is incomplete. Please help translate this article from English.

En dissenyar enllaçoss, és important entendre com fer ús de pseudo-classes per crear estils d'enllaços de manera efectiva i com dissenyar enllaços per utilitzar-los en característiques variades d'interfícies comunes , com a menús de navegació i pestanyes. Veurem tots aquests temes en aquest article.

Requisits previs: Coneixements bàsics d'informàtica , els fonaments d'HTML (estudi Introducció a HTML ), fonaments CSS (estudi Introducció a CSS) , fonaments del text i font CSS.
Objectiu: Aprendre com dissenyar els estats d'enllaç i sobre com utilitzar els enllaços de forma efectiva en característiques d'interfície d'usuari comuns, com ara els menús de navegació.

Vegem alguns enllaços

Hem vist com s'implementen els enllaços en el vostre codi HTML d'acord amb les millors pràctiques en la Creació de hipervincles. En aquest article, aprofundirem en aquest coneixement, mostrant-vos les millors pràctiques per dissenyar enllaços.

Estats d'enllaç

El primer que heu d'entendre és el concepte d'estats d'enllaç  - poden existirr estats diferents en els enllaços, que es poden dissenyar utilitzant diferents pseudo-classes:

  • Link (no visitat): L'estat per defecte en què es troba un enllaç, quan no es troba en cap altre estat. Això es pot dissenyar específicament utilitzant la pseudo classe :link.
  • Visited: Un enllaç quan ja ha estat visitat (existeix en el històrial del navegador), es dissenya utilitzant la pseudo classe :visited.
  • Hover: Un enllaç quan el punter del ratolí de l'usuari passa per damunt, es dissenya amb la pseudo classe :hover.
  • Focus: Un enllaç quan s'ha enfocat (per exemple, desplaçat per un usuari de teclat mitjançant la tecla Tab o similar, o enfocat mitjançant programació amb HTMLElement.focus()) - es dissenya amb la pseudo classe :focus.
  • Active: Un enllaç quan s'està activant (p. ex., feu clic a), es dissenya amb la pseudo classe :active.

Estils predeterminats

El següent exemple il·lustra com es comportarà un enllaç de manera predeterminada (El CSS simplement amplia i centra el text perquè destaqui més).

<p><a href="https://mozilla.org">A link to the Mozilla homepage</a></p>
p {
  font-size: 2rem;
  text-align: center;
}

Us adonareu d'algunes coses a mesura que exploreu els estils predeterminats:

  • Els enllaços es subratllen.
  • Els enllaços no visitats són blaus.
  • Els enllaços visitats són violeta.
  • En passar per sobre d'un enllaç fa que el punter del ratolí canviï a una petita icona de mà
  • Els enllaços enfocats tenen un contorn al voltant d'ells: hauríeu de poder centrar-vos en els enllaços d'aquesta pàgina amb el teclat, prement la tecla de tabulador (A Mac, és possible que hàgiu d'habilitar la opció Full Keyboard Access: All controls, prement Ctrl + F7 abans de que aixó funcioni).
  • Els enllaços actius són de color vermell (proveu de prémer el botó del ratolí a l'enllaç mentre feu clic).

Curiosament, aquests estils predeterminats són pràcticament els mateixos que en els primers dies dels navegadors a mitjans dels anys 90. Això és perquè els usuaris saben i esperan aquest comportament - si els enllaços estiguessin dissenyats de manera diferent, confondrien a molta gent. Això no vol dir que no pogueu donar estil els enllaços, en absolut, només que no us heu d'allunyar del comportament esperat. Haurieu com a mínim:

  • Utilitzar el subratllat per als enllaços, però no per altres coses. Si no voleu subratllar els enllaços, almenys ressalteu-los d'alguna altra manera.
  • Fer que reaccionin d'alguna manera quan es planegi per damunt/ enfocats i d'una manera lleugerament diferent quan s'activi.

Els estils predeterminats es poden desactivar/modificar utilitzant les següents propietats CSS:

  • color per al color del text.
  • cursor per a l'estil del punter del ratolí - no hauríeu de desactivar-lo tret que tingueu una bona raó.
  • outline per el contorn del text (un contorn és similar a una vora, l'única diferència és que la vora ocupa espai en la caixa i un contorn no; es troba a la part superior del fons). El contorn és una ajuda d'accessibilitat útil, així que penseu acuradament abans de desactivar-lo; Hauríeu d'almenys duplicar els estils donats a l'estat de desplaçament en el enllaç també en l'estat d'enfocament.

Nota: No només es limita a les propietats anteriors per dissenyar els enllaços - podeu utilitzar qualsevol propietat que vulgueu. Proveu de no anar massa bojos!

Estilitzar alguns enllaços

Ara hem examinat els estats per defecte amb cert detall, vegem un conjunt típic d'estils d'enllaç.

Per començar, escriurem els nostres conjunts de regles buides:

a {

}


a:link {

}

a:visited {

}

a:focus {

}

a:hover {

}

a:active {

}

Aquest ordre és important perquè els estils d'enllaç es construeixen els uns sobre als altres, per exemple, els estils de la primera regla s'aplicaran a tots els subsegüents, i quan s'activi un enllaç, també s'està passant per sobre. Si els posem en l'ordre equivocat, les coses no funcionaran correctament. Per recordar l'ordre, podeu provar d'usar un mnemotècnic com LoVe Fears HAte.

Ara anem a afegir una mica més d'informació per obtenir aquest estil adequadament:

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;
}

També proporcionarem un exemple d'HTML per aplicar el CSS a:

<p>There are several browsers available, such as <a href="https://www.mozilla.org/en-US/firefox/">Mozilla
Firefox</a>, <a href="https://www.google.com/chrome/index.html">Google Chrome</a>, and
<a href="https://www.microsoft.com/en-us/windows/microsoft-edge">Microsoft Edge</a>.</p>

Posar els dos junts ens dóna aquest resultat:

Llavors, què hem fet aquí? Sens dubte, això es diferent de l'estil predeterminat, però encara proporciona una experiència prou familiar perquè els usuaris coneguin el que està passant:

  • Les dues primeres regles no són tan interessants per a aquesta debat.
  • La tercera regla utilitza el selector per desfer-se del text per defecte subratllat i l'enfocament del contorn (que varia d'un navegador a un altre), i afegeix una petita quantitat de farcit a cada enllaç - tot això quedarà clar més endavant.
  • A continuació, s'utilitza els selectors a:link i a:visited per establir un parell de variacions de color en els enllaços no visitats i visitats, de manera que són diferents.
  • Les següents dues regles utilitzen a:focus i a:hover per establir enllaços focalitzats i desplaçament per damunt, tinguen diferents colors de fons, a més d'un subratllat per fer que l'enllaç destaqui encara més. Dos punts a destacar són:
    • El subratllat s'ha creat usant border-bottom, no text-decoration  - algunes persones prefereixen això perquè el primer té millors opcions d'estil que aquest últim, i és dibuixat una mica més a baix, de manera que no es tallan els descendents de la paraula que es subratlla (p. ex., Les cues de la g i y).
    • El valor border-bottom s'ha establert amb 1px sòlid, sense especificar el color. D'aquesta manera, la vora adopta el mateix color que el text de l'element, que és útil en casos com aquest on el text té un color diferent en cada cas.
  • Finalment, a:active s'utilitza per donar als enllaços un esquema de color invertit mentre estan sent activats, per deixar clar que està passant alguna cosa important!

Aprenentatge actiu: Dissenya els teus propis enllaços

En aquesta sessió d'aprenentatge actiu, ens agradaria que prenguéssiu el nostre conjunt de regles buides i afegíssiu les vostres pròpies declaracions per fer que els enllaços es veiessin realment bé. Utilitzeu la vostra imaginació, deixa't anar. Estem segurs que podeu trobar alguna cosa més fresca i tan funcional com el nostre exemple anterior.

Si cometeu un error, sempre podeu restablir-lo mitjançant el botó Reset. Si us trobeu molt atrapats, premeu el botó Show solution per inserir l'exemple mostrat anteriorment.

Incloure icones en els enllaços

Una pràctica comuna és incloure icones en els enllaços per proporcionar més d'un indicador en quant a quin tipus de contingut apunta l'enllaç. Vegem un exemple realment senzill que afegeix una icona als enllaços externs (enllaços que donen lloc a altres llocs). Aquesta icona normalment sembla una petita fletxa que apunta fora d'una caixa: per a aquest exemple, utilitzarem aquest gran exemple de icons8.com.

Vegem alguns HTML i CSS, que ens donarà l'efecte que volem. En primer lloc, alguns simple HTML a l'estil:

<p>For more information on the weather, visit our <a href="weather.html">weather page</a>,
look at <a href="https://en.wikipedia.org/wiki/Weather">weather on Wikipedia</a>, or check
out <a href="http://www.extremescience.com/weather.htm">weather on Extreme Science</a>.</p>

A continuació, el 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;
}

Llavors, què està passant aquí? Passarem la major part del CSS, ja que és la mateixa informació que heu vist anteriorment. Tanmateix, l'última regla és interessant - aquí estem inserint una imatge de fons personalitzada als enllaços externs d'una manera similar a com hem manejat les vinyetes personalitzades als elements de la llista de l'últim article - però estem fent servir background en forma abreujada, en comptes de les propietats individuals. Establim la ruta a la imatge que volem inserir, especificant no-repeat, de manera que només s'obtingui una còpia inserida i, a continuació, especifiquem la posició al 100% més a la dreta de la imatge i 0 píxels de la part superior.

També fem servir background-size per especificar la mida que volem que es mostri la imatge de fons - és útil tenir una icona més gran i canviar-li la mida tal com és necessari per als propòsits de disseny web sensibles. Tanmateix, això només funciona amb IE 9 i posterior, de manera que si necessiteu donar suport a aquests navegadors antics, només haureu de canviar la mida de la imatge i inserir-la tal qual.

Finalment, hem d'establir padding-right als enllaços per tal que aparegui espai per a la imatge de fons, de manera que no estiguin superposades amb el text.

Una última paraula - com podem seleccionar enllaços externs? Bé, si esteu escrivint correctament els vostres enllaços HTML només haurieu d'utilitzar URLs absolutes per als enllaços externs - és més eficient utilitzar enllaços relatius per enllaçar a altres parts del vostre propi lloc. Per tant, el text "http" només hauria d'aparèixer en enllaços externs i podem seleccionar-ho amb un selector d'attributs: a[href*="http"], selecciona elements <a>, però només si tenen un atribut href amb un valor que contingui "http" en algun lloc dins d'ell.

Això és tot - torneu a visitar la secció d'aprenentatge actiu anterior i proveu aquesta nova tècnica.

Nota: No us preocupeu si no esteu familiaritzats amb els fons  i el disseny web sensible encara; aquests s'expliquen en altres llocs.

Estilitzar enllaços com a botons

Les eines que heu explorat fins ara en aquest article també es poden utilitzar d'altres maneres. Per exemple, els estats com el flotant (hover) es poden utilitzar per dissenyar molts elements diferents, no només enllaços - és possible que vulgueu dissenyar l'estat flotant (hover) de paràgrafs, elements de llista o altres elements.

A més, els enllaços tenen un estil bastant comú per cercar-se i comportar-se com a botons en determinades circumstàncies - un menú de navegació del lloc web sol ser marcat com una llista que conté enllaços, i això es pot configurar fàcilment perquè sembli un conjunt de botons o pestanyes de control que proporcionen a l'usuari amb accés a altres parts del lloc. Expliquem com fer-ho.

Primer, algun 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>

I ara el nostre 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;
}

Això ens dóna el següent resultat:

Expliquem el que està passant aquí, centrant-nos en les parts més interessants:

  • La nostra segona regla elimina el padding per defecte de l'element <ul> i estableix el seu ample per abastar el 100% del contenidor exterior (el body , en aquest cas).
  • Els elements <li> normalment són bloc per defecte (vegeu els tipus de caixes CSS per refrescar), el que significa que s'asseuran a les seves pròpies línies. En aquest cas, estem creant una llista horitzontal d'enllaços, de manera que a la tercera regla, establim la propietat display en línia, la qual cosa fa que els elements de la llista es mostrin a la mateixa línia que els altres - Ara es comporten com elements en línia.
  • La quarta regla - que dissenya l'element <a>, és la més complicada aquí - anem a fer-ho pas a pas:
    • Com en els exemples anteriors, comencem per desactivar el valor defecte de text-decoration i outline - no volem que espatllin la nostra aparença.
    • A continuació, establim display a inline-block - els elements <a> estan en línia per defecte i, si bé no volem que es desbordin de les seves pròpies línies, amb un valor  block ho aconseguiríem, volem ser capaços de dimensionar-los. inline-block ens permet fer això.
    • Ara, a la mida! Volem omplir tot l'ample de <ul>, deixant un petit marge entre cada botó (però no hi ha un buit a la vora dreta),  i tenim 5 botons per acollir que tot han de ser de la mateixa mida. Per a això, establim el width al 19,5%, i el margin-right al 0,625%. Notareu que tot aquest ample s'afegeix al 100,625%, el que fa que l'últim botó desbordi el <ul> i caigui a la següent línia. Tanmateix, recuperem el 100% amb la següent regla, que només selecciona l'última <a> de la llista i elimina el marge d'aquesta. Fet!
    • Les tres últimes declaracions són bastant simples i solen ser amb finalitats cosmètiques. Centrem el text dins de cada enllaç, establint line-height en 3 per donar als botons una mica d'alçada (que també té l'avantatge de centrar el text verticalment), i establir el color del text en negre.

Nota: És possible que hàgiu notat que els elements de la llista de l'HTML es col·loquen en la mateixa línia que els altres - això es fa perquè els espais/línies entre els elements de la línia en bloc creen espais a la pàgina, com els espais entre paraules i aquests espais trencarían el disseny de menú de navegació horitzontal. Així que hem eliminat els espais. Podeu trobar més informació sobre aquest problema (i solucions) a Combatente l'espai entre els elements de bloc en línia.

Resum

Esperem que aquest article us hagi proporcionat tot el que necessiteu saber sobre els enllaços - per ara. L'article final del nostre mòdul de text Styling explica com utilitzar fonts personalitzades als vostres llocs web o fonts web, ja que són més conegudes.

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,