path: root/files/ca/learn/css/styling_text/styling_links/index.html

---
title: Aplicar estils a enllaços
slug: Learn/CSS/Styling_text/Styling_links
translation_of: Learn/CSS/Styling_text/Styling_links
original_slug: Learn/CSS/Estilitzar_text/Estilitzar_enllaços
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</div>

<p class="summary">Quan s’aplica estil a <a href="/ca/docs/Learn/HTML/Introducció_al_HTML/Crear_hipervincles">enllaços</a> és important entendre com fer ús de les pseudoclasses per a donar estil als estats de l’enllaç d’una manera efectiva, i com donar estil als enllaços per a utilitzar-los en diverses interfícies d’usuari característiques comunes, com ara menús de navegació i pestanyes. En aquest article tractarem tots aquests temes.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Requisits previs:</th>
   <td>Coneixements bàsics d'informàtica, fonaments d'HTML (consulta la <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l’HTML</a>), fonaments de CSS (consulta la <a href="/ca/docs/Learn/CSS/First_steps">Introducció al CSS</a>), <a href="/ca/docs/Learn/CSS/Estilitzar_text/Text_fonamental">fonaments d’aplicació d’estil i tipus de lletra als textos amb CSS</a>.</td>
  </tr>
  <tr>
   <th scope="row">Objectiu:</th>
   <td>Aprendre a dissenyar els estats d'un enllaç i a fer servir enllaços de manera efectiva en interfícies d'usuari característiques comunes, com ara els menús de navegació.</td>
  </tr>
 </tbody>
</table>

<h2 id="Un_cop_d’ull_a_alguns_enllaços"><span id="result_box" lang="ca">Un cop d’ull a alguns enllaços</span></h2>

<p>En la secció <a href="/ca/docs/Learn/HTML/Introducció_al_HTML/Crear_hipervincles">Creació d’hipervincles</a> hem vist com has d’implementar els enllaços en el teu codi HTML d'acord amb les bones pràctiques. En aquest article aprofundirem en aquest coneixement i et mostrarem les bones pràctiques que has de tenir en compte per a aplicar estil als enllaços.</p>

<h3 id="Els_estats_dun_enllaç">Els estats d'un enllaç</h3>

<p>El primer que has d'entendre és el concepte d'estats d'un enllaç; els enllaços poden tenir diversos estats, i se’ls pot aplicar estil fent servir diverses <a href="/ca/docs/Learn/CSS/Building_blocks/Selectors_CSS">pseudoclasses</a>:</p>

<ul>
 <li><strong>link</strong>: L'estat per defecte en què es troba un enllaç, quan no es troba en cap altre estat; s’hi pot aplicar estil específicament utilitzant la pseudoclasse {{cssxref(":link")}}.</li>
 <li><strong>visited</strong>: Un enllaç quan ja ha estat visitat (apareix en l’historial del navegador); s’hi pot aplicar estil utilitzant la pseudoclasse {{cssxref(":visited")}}.</li>
 <li><strong>hover</strong>: Un enllaç quan el punter del ratolí de l'usuari hi passa per damunt; s’hi pot aplicar estil utilitzant la pseudoclasse {{cssxref(":hover")}}.</li>
 <li><strong>focus</strong>: Un enllaç quan té el focus (per exemple, perquè un usuari es desplaça per la pàgina web amb la tecla <kbd>Tab</kbd> del teclat, o una altra, o se li ha assignat el focus per programació amb {{domxref("HTMLElement.focus()")}}); s’hi pot aplicar estil utilitzant la pseudoclasse {{cssxref(":focus")}}.</li>
 <li><strong>active</strong>: Un enllaç quan s'activa (per exemple, perquè hi has fet clic); s’hi pot aplicar estil utilitzant la pseudoclasse {{cssxref(":active")}}.</li>
</ul>

<h3 id="Estils_predeterminats"><span id="result_box" lang="ca">Estils predeterminats</span></h3>

<p>L’exemple següent il·lustra com es comporta un enllaç de manera predeterminada (el CSS simplement amplia i centra el text perquè destaqui més).</p>

<pre class="brush: html notranslate">&lt;p&gt;&lt;a href="https://mozilla.org"&gt;A link to the Mozilla homepage&lt;/a&gt;&lt;/p&gt;
</pre>

<pre class="brush: css notranslate">p {
  font-size: 2rem;
  text-align: center;
}</pre>

<p>{{ EmbedLiveSample('Estils_predeterminats', '100%', 120) }}</p>

<div class="blockIndicator note">
<p><strong>Nota:</strong> Tots els enllaços d'aquesta pàgina són falsos — s'ha posat un <code>#</code> en comptes d'un URL real. Això és perquè si incloïssim enllaços reals, fer-hi clic trencaria els exemples (acabaries amb un error, o una pàgina càrregada en l'exemple incrustat de la què no podries tornar.). <code>#</code> simplement enllaça a la pàgina actual.</p>
</div>

<p>A mesura que exploris els estils predeterminats t’adonaràs d'algunes coses:</p>

<ul>
 <li>Els enllaços es subratllen.</li>
 <li>Els enllaços no visitats són blaus.</li>
 <li>Els enllaços visitats són violeta.</li>
 <li>En passar per sobre d'un enllaç, el punter del ratolí canvia a una petita icona en forma de mà.</li>
 <li>Els enllaços que tenen el focus tenen un contorn que els envolta: hauries de poder saltar pels enllaços d'aquesta pàgina amb el teclat, prement la tecla de tabulació (en Mac, és possible que hagis d'habilitar l’opció <em>Full Keyboard Access: All controls</em>, prement <kbd>Ctrl</kbd> + <kbd>F7</kbd> abans que això funcioni).</li>
 <li>Els enllaços actius són de color vermell (deixa pres el botó del ratolí en fer clic en l’enllaç).</li>
</ul>

<p>Curiosament, aquests estils predeterminats són gairebé idèntics que els dels primers dies dels navegadors a mitjan anys 90. Això és perquè els usuaris coneixen aquest comportament i l’esperen; si els enllaços estiguessin dissenyats de manera diferent, molta gent es confondria. Això no vol dir en absolut que no puguis aplicar estil als enllaços, només que no t’has d'allunyar del comportament que se n’espera. Com a mínim hauries de complir el següent:</p>

<ul>
 <li>Utilitzar el subratllat per als enllaços, però no per a altres coses. Si no vols subratllar els enllaços, almenys ressalta’ls d'alguna altra manera.</li>
 <li>Fes que reaccionin d'alguna manera quan el punter del ratolí hi passa per sobre o quan adquireixen el focus, i d'una manera lleugerament diferent, quan s'activen.</li>
</ul>

<p>Els estils predeterminats es poden desactivar/modificar amb les propietats CSS següents:</p>

<ul>
 <li>{{cssxref("color")}} per al color del text.</li>
 <li>{{cssxref("cursor")}} per a l'estil del punter del ratolí; no l’hauries de desactivar, tret que hi hagi una raó molt bona.</li>
 <li>{{cssxref("outline")}} per al contorn del text (un contorn és similar a una vora, l'única diferència és que la vora ocupa espai de la caixa, i un contorn no; és a la part superior del fons). El contorn és una ajuda d'accessibilitat útil, de manera que pensa-t’ho bé abans de desactivar aquesta propietat; com a mínim hauries de duplicar els estils per a l’estat de passar-hi el punter del ratolí per sobre l'estat amb el focus.</li>
</ul>

<div class="note">
<p><strong>Nota</strong>: No està limitat només a les propietats anteriors per al disseny dels enllaços; pots utilitzar qualsevol propietat que vulguis. Només procura no esbojarrar-te!</p>
</div>

<h3 id="Aplicar_estil_a_enllaços">Aplicar estil a enllaços</h3>

<p>Ara que hem examinat amb una mica de detall els estats per defecte dels enllaços, vegem un conjunt típic d'estils d'enllaç.</p>

<p>Per començar, escriurem un conjunt de regles buides:</p>

<pre class="brush: css notranslate">a {

}


a:link {

}

a:visited {

}

a:focus {

}

a:hover {

}

a:active {

}</pre>

<p>Aquest ordre és important perquè els estils d'enllaç es construeixen els uns sobre els altres, per exemple, els estils de la primera regla s'aplicaran a tots els subsegüents, i quan s'activa un enllaç, també s'hi passa per sobre. Si els posem en l'ordre equivocat, les coses no funcionaran correctament. Per recordar l'ordre, pots provar d'usar un mnemotècnic com <strong>L</strong>o<strong>V</strong>e <strong>F</strong>ears <strong>HA</strong>te.</p>

<p>Ara afegim una mica més d'informació per a obtenir aplicar-hi els estils adequats:</p>

<pre class="brush: css notranslate">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;
}</pre>

<p><span id="result_box" lang="ca">També et proporcionem un exemple d'HTML al qual aplicar el CSS:</span></p>

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

<p>Si ho posem tot junt, obtenim aquest resultat:</p>

<p>{{ EmbedLiveSample('Aplicar_estil_a_enllaços', '100%', 150) }}</p>

<p>Què hem fet aquí? Sens dubte, això es diferent de l'estil predeterminat, però encara proporciona una experiència prou familiar perquè els usuaris sàpiguen què passa:</p>

<ul>
 <li>Les dues primeres regles no proporcionen gaires elements de discussió.</li>
 <li>La tercera regla utilitza el selector per a desfer-se del subratllat per defecte i el contorn de l’estat amb el focus (que varia d'un navegador a un altre), i afegeix una petita quantitat de farciment a cada enllaç; tot això ho acabarem d’aclarir més endavant.</li>
 <li>A continuació, s'utilitzen els selectors <code>a:link</code> i <code>a:visited</code> per a establir un parell de variacions de color en els enllaços no visitats i visitats, de manera que siguin diferents.</li>
 <li>Les dues regles següents utilitzen <code>a:focus</code> i <code>a:hover</code> per a establir que els estats d’enllaç amb el focus i enllaç activat pel desplaçament del punter del ratolí tinguin colors de fons diferents, i un subratllat perquè l'enllaç destaqui encara més. Dos punts que cal destacar són:
  <ul>
   <li>El subratllat s'ha creat amb {{cssxref("border-bottom")}}, no amb {{cssxref("text-decoration")}}; hi ha qui ho prefereix perquè la primera propietat té més opcions d'estil que la darrera, i el subratllat es dibuixa una mica més avall, de manera que no talla els traços descendents de la paraula que es subratlla (per exemple, les cues de la g i la j).</li>
   <li>El valor {{cssxref("border-bottom")}} s'ha establert a <code>1px solid</code>, sense especificar-ne el color. D'aquesta manera, la vora adopta el mateix color que el text de l'element, i és útil en casos com aquest, en què el text té un color diferent en cada cas.</li>
  </ul>
 </li>
 <li>Finalment, <code>a:active</code> s'utilitza per a donar als enllaços un esquema de color invertit quan s’activen, per deixar clar que passa alguna cosa important.</li>
</ul>

<h3 id="Aprenentatge_actiu_Fes_el_teu_propi_disseny_d’enllaç">Aprenentatge actiu: Fes el teu propi disseny d’enllaç</h3>

<p>En aquesta sessió d'aprenentatge actiu, et proposem que aprenguis el nostre conjunt de regles buides i hi afegeixis les teves declaracions pròpies perquè els teus enllaços llueixin fantàstics! Utilitza la imaginació, deixa't anar! Segur que pots trobar alguna cosa tan funcional com el nostre exemple, i més fresca!</p>

<p>Si t’equivoques, sempre pots tornar a començar amb el botó <em>Reinicia</em>. Si t’encalles, prem el botó <em>Mostra la solució</em> per a inserir l'exemple mostrat a dalt.</p>

<div class="hidden">
<h6 id="Playable_code">Playable code</h6>

<pre class="brush: html notranslate">&lt;div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"&gt;
  &lt;h2&gt;HTML Input&lt;/h2&gt;
  &lt;textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;&lt;p&gt;There are several browsers available, such as &lt;a href="https://www.mozilla.org/en-US/firefox/"&gt;Mozilla
 Firefox&lt;/a&gt;, &lt;a href="https://www.google.com/chrome/index.html"&gt;Google Chrome&lt;/a&gt;, and
&lt;a href="https://www.microsoft.com/en-us/windows/microsoft-edge"&gt;Microsoft Edge&lt;/a&gt;.&lt;/p&gt;&lt;/textarea&gt;

  &lt;h2&gt;CSS Input&lt;/h2&gt;
  &lt;textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;a {

}

a:link {

}

a:visited {

}

a:focus {

}

a:hover {

}

a:active {

}&lt;/textarea&gt;

  &lt;h2&gt;Output&lt;/h2&gt;
  &lt;div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"&gt;&lt;/div&gt;
  &lt;div class="controls"&gt;
    &lt;input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"&gt;
    &lt;input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;"&gt;
  &lt;/div&gt;
&lt;/div&gt;
</pre>

<pre class="brush: js notranslate">var htmlInput = document.querySelector(".html-input");
var cssInput = document.querySelector(".css-input");
var reset = document.getElementById("reset");
var htmlCode = htmlInput.value;
var cssCode = cssInput.value;
var output = document.querySelector(".output");
var solution = document.getElementById("solution");

var styleElem = document.createElement('style');
var headElem = document.querySelector('head');
headElem.appendChild(styleElem);

function drawOutput() {
  output.innerHTML = htmlInput.value;
  styleElem.textContent = cssInput.value;
}

reset.addEventListener("click", function() {
  htmlInput.value = htmlCode;
  cssInput.value = cssCode;
  drawOutput();
});

solution.addEventListener("click", function() {
  htmlInput.value = htmlCode;
  cssInput.value = 'p {\n  font-size: 1.2rem;\n  font-family: sans-serif;\n  line-height: 1.4;\n}\n\na {\n  outline: none;\n  text-decoration: none;\n  padding: 2px 1px 0;\n}\n\na:link {\n  color: #265301;\n}\n\na:visited {\n  color: #437A16;\n}\n\na:focus {\n  border-bottom: 1px solid;\n  background: #BAE498;\n}\n\na:hover {\n  border-bottom: 1px solid;\n  background: #CDFEAA;\n}\n\na:active {\n  background: #265301;\n  color: #CDFEAA;\n}';
  drawOutput();
});

htmlInput.addEventListener("input", drawOutput);
cssInput.addEventListener("input", drawOutput);
window.addEventListener("load", drawOutput);
</pre>
</div>

<p>{{ EmbedLiveSample('Playable_code', 700, 800) }}</p>

<h2 id="Icones_en_els_enllaços">Icones en els enllaços</h2>

<p>Una pràctica comuna és incloure icones en els enllaços per a proporcionar més d'un indicador quant al tipus de contingut al qual apunta l'enllaç. Vegem-ne un exemple molt senzill, que afegeix una icona als enllaços externs (enllaços que apunten cap a altres llocs web). Aquesta icona normalment té l’aspecte d’una petita fletxa que apunta cap enfora d'una caixa: per a aquest exemple, utilitzarem <a href="https://icons8.com/web-app/741/external-link">aquest fantàstic exemple de icons8.com</a>.</p>

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

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

<p><span class="short_text" id="result_box" lang="ca">A continuació, el CSS</span>:</p>

<pre class="brush: css notranslate">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;
}</pre>

<p>{{ EmbedLiveSample('Icones_en_els_enllaços', '100%', 150) }}</p>

<p>Què passa aquí, doncs? Ens saltarem la major part del CSS, perquè és la mateixa informació que ja has vist abans. Tanmateix, l'última regla és interessant perquè inserim una imatge de fons personalitzada en els enllaços externs d'una manera similar a com hem tractat les <a href="https://wiki.developer.mozilla.org/ca/docs/Learn/CSS/Estilitzar_text/Llistes_estil#%C3%9As_duna_imatge_de_vinyeta_personalitzada">vinyetes personalitzades dels elements de llista</a> de l'article anterior, però fem servir la propietat abreujada {{cssxref("background")}}, en comptes de les propietats individuals. Establim la ruta a la imatge que volem inserir i especifiquem <code>no-repeat</code> perquè només se’n vegi una còpia, i a continuació especifiquem la posició com al 100% a la dreta del contingut de text i a 0 píxels de l’extrem superior.</p>

<p>També fem servir {{cssxref("background-size")}} per a especificar la mida amb què volem que es mostri la imatge de fons; és útil tenir una icona més gran i canviar-ne la mida per a propòsits de disseny de webs adaptatius. Tanmateix, això només funciona amb IE 9 i posteriors, de manera que si has de donar suport a aquests navegadors antics, només has de canviar la mida de la imatge i inserir-la tal qual.</p>

<p>Finalment, establim una mica de {{cssxref("padding-right")}} als enllaços perquè la imatge de fons tingui espai i no es superposi amb el text.</p>

<p>Per acabar, com etiquetem els enllaços externs? Bé, si escrius els teus <a href="/ca/docs/Learn/HTML/Introducció_al_HTML/Crear_hipervincles">enllaços HTML</a> correctament, només has d'utilitzar URL absoluts en el codi d’etiquetatge dels enllaços externs; per enllaçar a altres parts del teu lloc web propi és més eficient utilitzar enllaços relatius. Per tant, el text «http» només hauria d'aparèixer en enllaços externs i pots etiquetar-los amb un <a href="https://wiki.developer.mozilla.org/ca/docs/Learn/CSS/Building_blocks/Selectors_CSS#Selectors_datribut">selector d'atributs</a>: <code>a[href*="http"]</code> selecciona elements {{htmlelement("a")}}, però només si tenen un atribut {{htmlattrxref("href","a")}} amb un valor que conté «http» en algun lloc.</p>

<p>Això és tot — torna a visitar la secció d'aprenentatge actiu anterior i prova aquesta tècnica nova.</p>

<div class="note">
<p><strong>Nota</strong>: No et preocupis si encara no tens prou familiaritat amb els <a href="/ca/docs/Learn/CSS/Building_blocks">fons</a> i el <a href="/en-US/docs/Web/Apps/Progressive/Responsive/responsive_design_building_blocks">disseny web adaptatiu</a> perquè s’expliquen en altres articles.</p>
</div>

<h2 id="Enllaços_amb_estil_de_botó">Enllaços amb estil de botó</h2>

<p>Les eines que has explorat fins ara en aquest article també es poden utilitzar d'altres maneres. Per exemple, els estats com el flotant (<em>hover</em>) es poden utilitzar per a dissenyar molts elements diferents, no només enllaços; pot ser que vulguis dissenyar estats flotants (<em>hover</em>) per a paràgrafs, elements de llista o altres elements.</p>

<p>A més, és habitual aplicar estil als enllaços perquè semblin i es comportin com botons en determinades circumstàncies — el menú de navegació d’un lloc web s’acostuma a marcar com una llista que conté enllaços, i es pot configurar fàcilment perquè sembli un conjunt de botons o pestanyes de control que proporcionen a l'usuari accés a les altres parts del lloc web. Expliquem com es fa.</p>

<p>Primer, una mica d’HTML:</p>

<pre class="brush: html notranslate">&lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;Pizza&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;Music&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;Wombats&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a href="#"&gt;Finland&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</pre>

<p>I ara, el nostre CSS:</p>

<pre class="brush: css notranslate">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;
}</pre>

<p><span id="result_box" lang="ca">Això ens dona el resultat següent:</span></p>

<p>{{ EmbedLiveSample('Enllaços_amb_estil_de_botó', '100%', 100) }}</p>

<p>Expliquem què passa aquí, i ens centrem en les parts més interessants:</p>

<ul>
 <li>La segona regla elimina el {{cssxref("padding")}} per defecte de l'element {{htmlelement ("ul")}} i n’estableix una amplada que abasta el 100% del contenidor exterior (l’element {{htmlelement("body")}}, en aquest cas).</li>
 <li>Els elements {{htmlelement("li")}} normalment són elements de bloc per defecte (vegeu els <a href="/ca/docs/Learn/CSS/Building_blocks/The_box_model">tipus de caixes CSS</a> per refrescar la memòria), que significa que cadascun ocuparà la seva línia pròpia. En aquest cas, creem una llista d'enllaços horitzontal, i en la tercera regla establim la propietat {{cssxref("display")}} en el valor <code>inline</code>, que fa aparèixer tots els elements de la llista en la mateixa línia. Ara es comporten com elements de línia.</li>
 <li>La quarta regla, que dissenya l'element {{htmlelement("a")}}, és la més complicada aquí. Anem pas a pas:
  <ul>
   <li>Com en els exemples anteriors, comencem per desactivar el valor per defecte de {{cssxref("text-decoration")}} i {{cssxref("outline")}}; no volem que espatllin la nostra aparença.</li>
   <li>A continuació, establim la propietat {{cssxref("display")}} a <code>inline-block</code>; els elements {{htmlelement ("a")}} estan en línia per defecte, i si bé no volem que desbordin de la seva línia com passaria amb un valor <code>block</code>, volem ser capaços de dimensionar-los. La propietat <code>inline-block</code> ens permet fer-ho.</li>
   <li>Ara, passem a la mida! Volem omplir tot l'ample de {{htmlelement ("ul")}} i deixarem un petit marge entre cada botó (però no hi ha un buit a la vora dreta), i hi han de cabre 5 botons que han de ser de la mateixa mida. Per a això, establim l’amplada {{cssxref("width")}} al 19,5%, i el {{cssxref("margin-right")}} al 0,625%. Observa que tot aquest ample suma 100,625%, que fa desbordar l'últim botó <code>&lt;ul&gt;</code>, que cau a la línia següent. Tanmateix, recuperem el 100% amb la regla següent, que selecciona només l'última <code>&lt;a&gt;</code> de la llista i n’elimina el marge. Fet!</li>
   <li>Les tres últimes declaracions són força senzilles i acostumen a tenir finalitats cosmètiques. Centrem el text dins de cada enllaç, establim {{cssxref("line-height")}} a 3 per a donar una mica d'alçada als botons (que també té l'avantatge de centrar el text verticalment), i establim el color del text en negre.</li>
  </ul>
 </li>
</ul>

<div class="note">
<p><strong>Nota</strong>: És possible que hagis observat que en l’HTML hem col·locat tots els elements de llista en la mateixa línia; fem això perquè els espais / les línies entre els elements de línia de bloc creen espais a la pàgina, com els espais que hi ha entre les paraules, i aquests espais trencarien el disseny de menú de navegació horitzontal. De manera que hem eliminat els espais. Pots trobar més informació sobre aquest problema (i les solucions) a <a href="https://css-tricks.com/fighting-the-space-between-inline-block-elements/">Fighting the space between inline block elements</a>.</p>
</div>

<h2 id="Resum">Resum</h2>

<p>Esperem que aquest article t’hagi proporcionat tot el que has de saber sobre els enllaços, per ara. L'article final del nostre mòdul de text «Aplicació d’estils» explica com pots utilitzar tipus de lletra personalitzats en els teus llocs web o tipus de lletra per a web, com es coneixen més sovint.</p>

<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</p>