diff options
Diffstat (limited to 'files/ca/learn/css/styling_text')
| -rw-r--r-- | files/ca/learn/css/styling_text/fundamentals/index.html | 740 | ||||
| -rw-r--r-- | files/ca/learn/css/styling_text/index.html | 56 | ||||
| -rw-r--r-- | files/ca/learn/css/styling_text/styling_links/index.html | 425 | ||||
| -rw-r--r-- | files/ca/learn/css/styling_text/styling_lists/index.html | 383 | ||||
| -rw-r--r-- | files/ca/learn/css/styling_text/typesetting_a_homepage/index.html | 113 | ||||
| -rw-r--r-- | files/ca/learn/css/styling_text/web_fonts/index.html | 194 |
6 files changed, 1911 insertions, 0 deletions
diff --git a/files/ca/learn/css/styling_text/fundamentals/index.html b/files/ca/learn/css/styling_text/fundamentals/index.html new file mode 100644 index 0000000000..2d8295df54 --- /dev/null +++ b/files/ca/learn/css/styling_text/fundamentals/index.html @@ -0,0 +1,740 @@ +--- +title: Text fonamental i estil de font +slug: Learn/CSS/Styling_text/Fundamentals +tags: + - Article + - Beginner + - CSS + - Guide + - Style + - Text + - alignment + - family + - font + - shorthand + - spacing + - weight +translation_of: Learn/CSS/Styling_text/Fundamentals +original_slug: Learn/CSS/Estilitzar_text/Text_fonamental +--- +<div>{{LearnSidebar}}</div> + +<div>{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}</div> + +<p class="summary">En aquest article t'iniciem en el viatge cap al domini de l'aplicació d’estil a text amb {{glossary("CSS")}}. Aquí passarem amb detall per tots els fonaments bàsics de l'aplicació d’estil a textos / tipus de lletra, inclosos el gruix, la família i l'estil del tipus de lletra, les propietats abreviades per al tipus de lletra, l'alineació del text i altres efectes, i l’interlineat i l’interlletratge.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Requisits previs:</th> + <td>Coneixements bàsics d'informàtica, fonaments bàsics d'HTML (consulta l’article <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l’HTML</a>), fonaments de CSS (consulta l’article <a href="/ca/docs/Learn/CSS/First_steps">Introducció al CSS</a>).</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Aprendre les propietats i tècniques bàsiques necessàries per a l'aplicació d’estil al text de les pàgines web.</td> + </tr> + </tbody> +</table> + +<h2 id="Què_implica_laplicació_d’estil_al_text_en_CSS">Què implica l'aplicació d’estil al text en CSS?</h2> + +<p>Com ja deus conèixer d’haver treballat amb l’HTML i el CSS, el text dins d'un element es defineix dins de la caixa de contingut de l'element. Comença a la part superior esquerra de l'àrea de contingut (o a la part superior dreta, en el cas de contingut en idiomes RTL, o right-to-left, que s'escriuen de dreta a esquerra) i flueix cap al final de la línia. Quan arriba al final, passa a la línia següent i continua; i després, a la següent línia, fins que tot el contingut s'ha col·locat a la caixa. El contingut de text es comporta en efecte com un seguit d'elements en línia, es distribueix en línies adjacents entre si, i no crea salts de línia fins que s’ateny el final de la línia, o tret que s'obligui a un salt de línia manual de l'element {{htmlelement("br")}}.</p> + +<div class="note"> +<p><strong>Nota</strong>: Si el paràgraf anterior et sembla confós, no t’hi amoïnis, torna enrere i fes un repàs de la teoria del model de caixa que s’explica en l’article <a href="/ca/docs/Learn/CSS/Building_blocks/The_box_model">El model de caixa</a> abans de continuar.</p> +</div> + +<p>Les propietats CSS que s'utilitzen per a escriure text generalment es divideixen en dues categories, que veurem per separat en aquest article:</p> + +<ul> + <li><strong>Els estils dels tipus de lletra</strong>: són les propietats que afecten el tipus de lletra que es fa servir per al text, que afecta el tipus de lletra que s’empra, la mida, els formats de negreta, cursiva, etc.</li> + <li><strong>Els estils de text en el disseny de pàgina</strong>: són les propietats que afecten l'espaiat i altres funcions de disseny de pàgina relacionades amb el text, que permeten la manipulació de, per exemple, l'espai entre línies i lletres, i la manera com s’alinea el text dins de la caixa de contingut.</li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: Tingues en compte que les propietats que afecten el text dins d'un element hi actuen com una única entitat. No pots seleccionar i modificar l'estil de les subseccions de text si no les etiquetes amb un element apropiat (com ara {{htmlelement("span")}} o {{htmlelement("strong")}}) o utilitzes un pseudoelement específic per a text com <a href="/ca/docs/Web/CSS/::first-letter">::first-letter</a> (selecciona la primera lletra del text d'un element), <a href="/ca/docs/Web/CSS/::first-line">::first-line</a> (selecciona la primera línia del text d'un element) o <a href="/ca/docs/Web/CSS/::selection">::selection</a> (selecciona el text que el cursor ressalta en aquell moment).</p> +</div> + +<h2 id="Tipus_de_lletra">Tipus de lletra</h2> + +<p>Continuem endavant per veure les propietats d'estil dels tipus de lletra. En aquest exemple aplicarem algunes propietats CSS diferents a la mateixa mostra d’HTML, que té l’aspecte següent:</p> + +<pre class="brush: html notranslate"><h1>Tommy the cat</h1> + +<p>I remember as if it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p></pre> + +<p>Podeu trobar l'<a href="http://mdn.github.io/learning-area/css/styling-text/fundamentals/">exemple acabat en GitHub</a> (vegeu-ne també <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/fundamentals/index.html">el codi font</a>).</p> + +<h3 id="Color">Color</h3> + +<p>La propietat {{cssxref("color")}} estableix el color del contingut de primer pla dels elements seleccionats (que normalment és el text, però també pot incloure un parell d'altres coses, com ara un subratllat o un sobreratllat en el text, amb la propietat {{cssxref("text-decoration")}}).</p> + +<p>La propietat <code>color</code> pot acceptar qualsevol <a href="/ca/docs/Learn/CSS/Building_blocks/Valors_i_unitats_CSS">unitat de color CSS</a>, per exemple:</p> + +<pre class="brush: css notranslate">p { + color: red; +}</pre> + +<p>Això fa que els paràgrafs es converteixin en vermells, en comptes del negre estàndard per defecte del navegador, així:</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Tommy the cat</h1> + +<p>I remember as if it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p></pre> +</div> + +<p>{{ EmbedLiveSample('Color', '100%', 220) }}</p> + +<h3 id="Famílies_de_tipus_de_lletra">Famílies de tipus de lletra</h3> + +<p>Per a establir un tipus de lletra diferent en el teu text, utilitza la propietat {{cssxref("font-family")}}; això et permet especificar un tipus de lletra (o una llista de tipus de lletra) perquè el navegador l'apliqui als elements seleccionats. El navegador només aplica un tipus de lletra si està disponible en la màquina amb què s’accedeix al lloc web. Si no, només usarà un {{anch("Default fonts", "tipus de lletra predeterminat")}} del navegador. Un exemple senzill és el següent:</p> + +<pre class="brush: css notranslate">p { + font-family: arial; +}</pre> + +<p>Això fa que tots els paràgrafs d'una pàgina adoptin el tipus de lletra Arial, que es troba en qualsevol ordinador.</p> + +<h4 id="Tipus_de_lletra_segurs_per_a_la_xarxa_web">Tipus de lletra segurs per a la xarxa web</h4> + +<p>Parlant de la disponibilitat dels tipus de lletra, només una certa quantitat de tipus de lletra es troben generalment disponibles en tots els sistemes i, per tant, es poden utilitzar sense gaires preocupacions. Són els anomenats <strong>tipus de lletra segurs per a la xarxa web</strong>.</p> + +<p><span id="result_box" lang="ca">La majoria de les vegades, com a desenvolupadors web, volem tenir un control més específic sobre els tipus de lletra que s’utilitzen per a mostrar el contingut del text. El problema és trobar una manera de saber quin tipus de lletra està disponible en l'ordinador que es fa servir per a accedir a les nostres pàgines web. No hi ha manera de saber-ho en tots els casos, però se sap que els tipus de lletra segurs per a la web estan disponibles en gairebé totes les instàncies dels sistemes operatius més utilitzats (Windows, Mac, les distribucions més habituals de Linux, Android i iOS).</span></p> + +<p>La llista de tipus de lletra segurs per a la xarxa web reals canvia a mesura que evolucionen els sistemes operatius, però és convenient considerar els tipus de lletra segurs per a la xarxa web següents, almenys ara com ara (molts d'ells s’han popularitzades gràcies a la iniciativa de Microsoft <em><a href="https://ca.wikipedia.org/wiki/Core_fonts_for_the_Web">Tipus de lletra principals per a la xarxa web</a></em>, de finals dels anys 1990 i principis dels anys 2000):</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Nom</th> + <th scope="col" style="white-space: nowrap;"><span class="short_text" id="result_box" lang="ca"><span>Tipus de lletra genèric</span></span></th> + <th scope="col">Observacions</th> + </tr> + </thead> + <tbody> + <tr> + <td>Arial</td> + <td>sans-serif</td> + <td>Sovint es considera una bona pràctica afegir també el tipus de lletra <em>Helvetica</em> com una alternativa preferent a <em>Arial</em>; encara que són gairebé idèntiques, es considera que <em>Helvetica</em> té una forma més agradable, tot i que <em>Arial</em> està més disponible.</td> + </tr> + <tr> + <td>Courier New</td> + <td>monospace</td> + <td>Hi ha sistemes operatius que tenen una versió alternativa (possiblement més antiga) del tipus de lletra <em>Courier New</em> anomenada <em>Courier</em>. Es considera una bona pràctica utilitzar-les totes dues, amb <em>Courier New</em> com l’opció preferent.</td> + </tr> + <tr> + <td style="white-space: nowrap;">Georgia</td> + <td>serif</td> + <td></td> + </tr> + <tr> + <td style="white-space: nowrap;">Times New Roman</td> + <td>serif</td> + <td>Hi ha sistemes operatius que tenen una versió alternativa (possiblement més antiga) del tipus de lletra <em>Times New Roman</em> anomenada <em>Times</em>. Es considera una bona pràctica utilitzar-les totes dues, amb <em>Times New Roman</em> com l’opció preferent.</td> + </tr> + <tr> + <td>Trebuchet MS</td> + <td>sans-serif</td> + <td>Has de tenir cura amb l'ús d'aquest tipus de lletra perquè no està àmpliament disponible en sistemes operatius mòbils.</td> + </tr> + <tr> + <td>Verdana</td> + <td>sans-serif</td> + <td></td> + </tr> + </tbody> +</table> + +<div class="note"> +<p><strong>Nota</strong>: Entre els diversos recursos, el lloc web <a href="http://www.cssfontstack.com/">cssfontstack.com</a> manté una llista de tipus de lletra segurs per a la web disponibles en sistemes operatius Windows i macOS, que poden ajudar-te a prendre la decisió sobre el que consideris segur per al teu ús.</p> +</div> + +<div class="note"> +<p><strong>Nota</strong>: Hi ha una manera de descarregar un tipus de lletra personalitzat juntament amb una pàgina web, que et permet personalitzar l'ús del tipus de lletra de la manera que vulguis: <strong>web fonts</strong>. Això és una mica més complex, i ho exposarem en un <a href="/ca/docs/Learn/CSS/Estilitzar_text/Fonts_Web">article separat</a> més endavant en el mòdul.</p> +</div> + +<h4 id="Tipus_de_lletra_predeterminats">Tipus de lletra predeterminats</h4> + +<p>CSS defineix cinc noms genèrics per als tipus de lletra: <code>serif</code>, <code>sans-serif</code>, <code>monospace</code>, <code>cursive</code> i <code>fantasy</code>. Són noms molt genèrics i l’aspecte exacte del tipus de lletra usat quan s'utilitzen aquests noms genèrics correspon a cada navegador i pot variar per a cada sistema operatiu amb què s'executa. Representa un pitjor escenari, en què el navegador tracta de fer el possible per a oferir almenys un tipus de lletra que es consideri adequat. <code>serif</code>, <code>sans-serif</code> i <code>monospace</code> són bastant previsibles i han de proporcionar alguna cosa raonable. D'altra banda, <code>cursive</code> i <code>fantasy</code> són menys previsibles i et recomanem utilitzar-les amb molta cura i provar-les cada vegada.</p> + +<p>Els cinc noms es defineixen de la manera següent:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Nom</th> + <th scope="col">Definició</th> + <th scope="col">Exemple</th> + </tr> + </thead> + <tbody> + <tr> + <td><code>serif</code></td> + <td>Tipus de lletra que tenen serifes (les floritures i altres petits detalls que es veuen en els extrems dels traços en algunes tipografies).</td> + <td><span style="font-family: serif;">My big red elephant</span></td> + </tr> + <tr> + <td><code>sans-serif</code></td> + <td>Tipus de lletra que no tenen serifes.</td> + <td><span style="font-family: sans-serif;">My big red elephant</span></td> + </tr> + <tr> + <td><code>monospace</code></td> + <td>Tipus de lletra en què cada caràcter ocupa la mateixa amplada, normalment s’utilitza en les llistes d’instruccions que constitueixen el codi informàtic.</td> + <td><span style="font-family: monospace;">My big red elephant</span></td> + </tr> + <tr> + <td><code>cursive</code></td> + <td>Tipus de lletra que tenen com a objectiu emular l'escriptura manuscrita, amb moviments fluids i connectats.</td> + <td><span style="font-family: cursive;">My big red elephant</span></td> + </tr> + <tr> + <td><code>fantasy</code></td> + <td>Tipus de lletra amb intencions decoratives.</td> + <td><span style="font-family: fantasy;">My big red elephant</span></td> + </tr> + </tbody> +</table> + +<h4 id="Llistes_de_tipus_de_lletra">Llistes de tipus de lletra</h4> + +<p>Com que no pots garantir la disponibilitat dels tipus de lletra que vols utilitzar en les teves pàgines web (fins i tot un tipus de lletra segur per a la xarxa web <em>podria</em> fallar per alguna raó), pots proporcionar una <strong>llista de tipus de lletra</strong> perquè el navegador tingui diversos tipus de lletra per poder triar. Això només implica introduir un atribut <code>font-family</code> amb un valor que consti de diversos noms de tipus de lletra separats per comes, per exemple:</p> + +<pre class="brush: css notranslate">p { + font-family: "Trebuchet MS", Verdana, sans-serif; +}</pre> + +<p>En aquest cas, el navegador comença pel principi de la llista i mira si el primer tipus de lletra està disponible en la màquina. Si és així, s'aplica aquesta font als elements seleccionats. En cas contrari, es passa al tipus de lletra següent, i així successivament.</p> + +<p>És recomanable proporcionar al final de la llista un nom de tipus de lletra genèric que sigui adequat perquè el navegador pugui almenys proporcionar alguna cosa adequada aproximada si cap dels tipus de lletra de la llista estan disponibles. Per il·lustrar aquest punt, els navegadors presenten els paràgrafs en un tipus de lletra serifa predeterminada, que normalment és Times New Roman, si no hi ha cap altra opció disponible; però això no és bo quan s’espera un tipus de lletra sans-serif!</p> + +<div class="note"> +<p><strong>Nota</strong>: Els noms dels tipus de lletra que tenen més d'una paraula, com <code>Trebuchet MS</code> s’han d’escriure entre cometes.</p> +</div> + +<h4 id="Un_exemple_de_font-family"><span id="result_box" lang="ca">Un exemple de <code>font-family</code></span></h4> + +<p><span id="result_box" lang="ca">Afegim les línies següents al nostre exemple anterior per a donar als paràgrafs un tipus de lletra sans-serif</span>:</p> + +<pre class="brush: css notranslate">p { + color: red; + font-family: Helvetica, Arial, sans-serif; +}</pre> + +<p><span id="result_box" lang="ca">Això ens dona el resultat següent</span>:</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Tommy the cat</h1> + +<p>I remember as if it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p></pre> +</div> + +<p>{{ EmbedLiveSample('Un_exemple_de_font-family', '100%', 220) }}</p> + +<h3 id="La_mida_de_la_lletra"><span id="result_box" lang="ca">La mida de la lletra</span></h3> + +<p>En l'article de <a href="/ca/docs/Learn/CSS/Building_blocks/Valors_i_unitats_CSS">valors i unitats en CSS</a> del mòdul anterior, hem revisat les <a href="/ca/docs/Learn/CSS/Building_blocks/Valors_i_unitats_CSS">unitats de longitud i mida</a>. La mida de la lletra (que s’estableix amb la propietat {{cssxref("font-size")}} pot prendre valors que es mesuren en la majoria d'aquestes unitats (i d’altres, com ara <a href="/ca/docs/Learn/CSS/Building_blocks/Valors_i_unitats_CSS#Percentatges">percentatges</a>), però les unitats més comunes que faràs servir per a la mida del text són:</p> + +<ul> + <li><code>px</code> (píxels): L’alçada expressada en nombre de píxels que vols que tingui el text. Aquesta és una unitat absoluta; dona sempre el mateix valor final calculat per al tipus de lletra de la pàgina en qualsevol situació.</li> + <li><code>em</code>: 1 <code>em</code> és igual a la mida de la lletra que s’ha establert per al tipus de lletra de l'element pare de l'element al qual apliquem estil (més concretament, l'amplada d'una lletra M majúscula continguda dins de l'element pare). Això pot arribar a ser complicat de calcular si hi ha molts elements imbricats amb mides de tipus de lletra establertes diferents, però és factible, com veuràs a continuació. Així, doncs, per què t’ha de preocupar? Resulta força natural una vegada que t’hi acostumes i pots fer servir unitats <code>em</code> per a dimensionar-ho tot, no només text. Pots tenir un lloc web complet definit amb mides en unitats <code>em</code>, i així se simplifica molt el manteniment.</li> + <li><code>rem</code>: Aquestes unitats funcionen igual que les unitats <code>em</code>, excepte que 1 <code>rem</code> és igual a la mida de lletra del tipus de lletra que s’ha establert per a l'element arrel del document (és a dir, {{htmlelement("html")}}), no l'element pare. Això facilita força els càlculs per a esbrinar la mida de la lletra, però malauradament les unitats <code>rem</code> no són compatibles amb Internet Explorer 8 o anteriors. Si necessites compatibilitat amb navegadors antics per al teu projecte, pots utilitzar unitats <code>em</code> o <code>px</code>, o bé utilitzar un {{glossary("polyfill")}} com <a href="https://github.com/chuckcarpenter/REM-unit-polyfill">REM-unit-polyfill</a>.</li> +</ul> + +<p>L’atribut <code>font-size</code> d'un element s'hereta de l'element pare d'aquest element. Tot comença amb l'element arrel del document, {{htmlelement("html")}}, en què l’atribut <code>font-size</code> està establert en 16 px de manera estàndard en els navegadors. Qualsevol paràgraf (o un altre element que no tingui una mida diferent establerta pel navegador) de l'interior de l'element arrel tindrà una mida final de 16 px. Altres elements poden tenir mides predeterminades diferents, per exemple, un element {{htmlelement("h1")}} té una mida de 2 <code>em</code> establerta per defecte, de manera que tindrà una mida final de 32 píxels.</p> + +<p>Les coses es tornen més difícils quan es comença a alterar la mida del tipus de lletra dels elements imbricats. Per exemple, si en la teva pàgina hi ha un element {{htmlelement("article")}} i hi estableixes la mida del tipus de lletra en 1,5 <code>em</code> (que donaria una mida final de 24 px), i llavors vols que els paràgrafs de dins de l'element <code><article></code> tinguin una mida de lletra computada de 20 px, quin valor <code>em</code> hem d’utilitzar?</p> + +<pre class="brush: html notranslate"><!-- document base font-size is 16px --> +<article> <!-- If my font-size is 1.5em --> + <p>My paragraph</p> <!-- How do I compute to 20px font-size? --> +</article></pre> + +<p>Hauràs d'establir el valor <code>em</code> en 20/24 o 0,83333333 <code>em</code>. Els càlculs poden complicar-se, de manera que cal tenir cura a l’hora de com aplicar estils. El millor és utilitzar unitats <code>rem</code> on puguis per mantenir les coses senzilles i evitar establir la mida de la lletra dels elements del contenidor quan sigui possible.</p> + +<h4 id="Un_exemple_senzill_de_dimensionament">Un exemple senzill de dimensionament</h4> + +<p>Quan dimensiones el teu text, normalment és una bona idea establir l’atribut base <code>font-size</code> del document en 10 px, de manera que resulta molt més senzill de fer els càlculs, perquè llavors els valors <code>(r)em</code> són la mida de la lletra en píxels dividida per 10, no per 16. A continuació, pots dimensionar fàcilment els diferents tipus de text del document si ho vols. És una bona idea fer una llista de tot el conjunt de regles <code>font-size</code> en una zona determinada del teu full d'estil, i així són fàcils de trobar.</p> + +<p>El nostre nou resultat és així:</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Tommy the cat</h1> + +<p>I remember as if it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p> +</pre> +</div> + +<pre class="brush: css notranslate">html { + font-size: 10px; +} + +h1 { + font-size: 2.6rem; +} + +p { + font-size: 1.4rem; + color: red; + font-family: Helvetica, Arial, sans-serif; +}</pre> + +<p>{{ EmbedLiveSample('Un_exemple_senzill_de_dimensionament', '100%', 220) }}</p> + +<h3 id="Estils_i_gruixos_de_lletra_transformacions_i_decoracions_del_text"><span id="result_box" lang="ca">Estils i gruixos de lletra, transformacions i decoracions del text</span></h3> + +<p>CSS proporciona quatre propietats comunes per a alterar el gruix visual / l’èmfasi del text:</p> + +<ul> + <li>{{cssxref("font-style")}}: s'utilitza per a activar i desactivar el text en cursiva. Els valors possibles són els següents (rarament es farà servir això, tret que vulgueu desactivar algun estil de cursiva per alguna raó): + <ul> + <li><code>normal</code>: Estableix per al text el tipus de lletra normal (activa les cursives).</li> + <li><code>italic</code>: Estableix per al text l’ús de la <em>versió cursiva del tipus de lletra</em>, si està disponible; si no està disponible, simula la cursiva amb <code>oblique</code>.</li> + <li><code>oblique</code>: Estableix per al text l’ús d’una versió simulada d'un tipus de lletra en cursiva, creada <em>inclinant la versió normal</em>.</li> + </ul> + </li> + <li>{{cssxref("font-weight")}}: estableix el "pes" del text. Això té molts valors disponibles en cas que hi hagi moltes variants de fonts disponibles (com ara -<em>light</em>, -<em>normal</em>, -<em>bold</em>, -<em>extrabold</em>, -<em>black</em>, etc.), però en una situació realista poques vegades n’usaràs cap, excepte per a <code>normal</code> i <code>bold</code>: + <ul> + <li><code>normal</code>, <code>bold</code>: Gruix dels tipus de lletra normal i negreta</li> + <li><code>lighter</code>, <code>bolder</code>: Estableix la intensitat de negreta en un element un nivell més lleu o més intens que la intensitat de negreta de l'element pare.</li> + <li><code>100</code>–<code>900</code>: Valors numèrics d'intensitat de negreta que proporcionen un control de gra més fi que les paraules clau anteriors, si cal.</li> + </ul> + </li> + <li>{{cssxref("text-transform")}}: Et permet configurar el tipus de transformació que admet el tipus de lletra. Els valors inclouen: + <ul> + <li><code>none</code>: Evita qualsevol transformació.</li> + <li><code>uppercase</code>: Transforma TOT EL TEXT A MAJÚSCULES.</li> + <li><code>lowercase</code>: Transforma tot el text a minúscules.</li> + <li><code>capitalize</code>: Transforma totes les paraules perquè tinguin La Primera Lletra en Majúscula.</li> + <li><code>full-width</code>: Transforma tots els glifs de manera que s'escriuen dins d'un quadrat d'amplada fixa, similar a un tipus de lletra monoespaiada, i permet l'alineació de, per ex., caràcters llatins juntament amb glifs de llengua asiàtica (com el xinès, el japonès, el coreà).</li> + </ul> + </li> + <li>{{cssxref("text-decoration")}}: Activa/desactiva les decoracions de text en els tipus de lletra (s'utilitza principalment per a desfer el subratllat predeterminat dels enllaços en aplicar-los estil). Els valors disponibles són: + <ul> + <li><code>none</code>: Anul·la qualsevol decoració de text ja present.</li> + <li><code>underline</code>: <u>Subratlla el text</u>.</li> + <li><code>overline</code>: <span style="text-decoration: overline;">Posa una línia sobre el text</span>.</li> + <li><code>line-through</code>: Posa una <s style="text-decoration: line-through;">ratlla sobre el text</s>.</li> + </ul> + </li> +</ul> + +<p>Cal tenir en compte que {{cssxref("text-decoration")}} pot acceptar diversos valors alhora, si vols afegir diverses decoracions alhora; per exemple, <span style="text-decoration: underline overline;"><code>text-decoration: underline overline</code></span>. Tingues en compte que {{cssxref("text-decoration")}} és una propietat abreujada per a {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}} i {{cssxref("text-decoration-color")}}. Pots utilitzar les combinacions d'aquests valors de propietat per a crear efectes interessants, per exemple, <span style="text-decoration: line-through red wavy;"><code>text-decoration: line-through red wavy</code></span></p> + +<p>Observem com afegir un parell d'aquestes propietats al nostre exemple:</p> + +<p>El resultat és aquest:</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Tommy the cat</h1> + +<p>I remember as if it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p> +</pre> +</div> + +<pre class="brush: css notranslate">html { + font-size: 10px; +} + +h1 { + font-size: 2.6rem; + text-transform: capitalize; +} + +h1 + p { + font-weight: bold; +} + +p { + font-size: 1.4rem; + color: red; + font-family: Helvetica, Arial, sans-serif; +}</pre> + +<p>{{ EmbedLiveSample('Estils_i_gruixos_de_lletra_transformacions_i_decoracions_del_text', '100%', 220) }}</p> + +<h3 id="Ombres_en_el_text">Ombres en el text</h3> + +<p>Pots aplicar ombres al text amb la propietat {{cssxref("text-shadow")}}. Això involucra fins a quatre valors, com es mostra en l'exemple següent:</p> + +<pre class="brush: css notranslate">text-shadow: 4px 4px 5px red;</pre> + +<p>Les quatre propietats són:</p> + +<ol> + <li>El desplaçament horitzontal de la silueta del text original: pot prendre la majoria de les <a href="/ca/docs/Learn/CSS/Building_blocks/Valors_i_unitats_CSS">unitats de longitud i grandària</a> disponibles en CSS, però el més convenient és usar <code>px</code>. Aquest valor s'ha d'incloure.</li> + <li>El desplaçament vertical de la silueta del text original: es comporta bàsicament igual que el desplaçament horitzontal, excepte que mou l'ombra amunt i avall, no a dreta i esquerra. Aquest valor s'ha d'incloure.</li> + <li>El radi d'esborronat: un valor més alt significa que l'ombra es dispersa més àmpliament. Si aquest valor no s'inclou, el valor predeterminat és 0, que significa que no s’esborrona. Pot prendre la majoria de les <a href="/ca/docs/Learn/CSS/Building_blocks/Valors_i_unitats_CSS">unitats de longitud i grandària</a> disponibles en CSS.</li> + <li>El color base de l'ombra: pot prendre qualsevol <a href="/ca/docs/Learn/CSS/Building_blocks/Valors_i_unitats_CSS">unitat de color CSS</a>. Si no s'inclou, el valor predeterminat és <code>black</code>.</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: Els valors de desplaçament positius mouen l'ombra cap a la dreta i cap avall, però també pots utilitzar valors de desplaçament negatius per a moure l'ombra cap a l'esquerra i cap amunt, com per exemple <code>-1px -1px</code>.</p> +</div> + +<h4 id="Ombres_múltiples">Ombres múltiples</h4> + +<p>Pots aplicar diverses ombres a un mateix text si inclous més d’un valor d'ombra separats per comes, per exemple:</p> + +<pre class="brush: css notranslate"><code class="language-css"><span class="property token">text-shadow</span><span class="punctuation token">:</span> -<span class="number token">1</span>px -<span class="number token">1</span>px <span class="number token">1</span>px <span class="hexcode token">#aaa</span>, + <span class="number token">0</span>px <span class="number token">4</span>px <span class="number token">1</span>px <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0.5</span><span class="punctuation token">)</span>, + <span class="number token">4</span>px <span class="number token">4</span>px <span class="number token">5</span>px <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0.7</span><span class="punctuation token">)</span>, + <span class="number token">0</span>px <span class="number token">0</span>px <span class="number token">7</span>px <span class="function token">rgba</span><span class="punctuation token">(</span><span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0</span>,<span class="number token">0.4</span><span class="punctuation token">)</span><span class="punctuation token">;</span></code></pre> + +<p>Si apliquem això a l'element {{htmlelement("h1")}} del nostre exemple de Tommy the cat, obtenim això:</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Tommy the cat</h1> + +<p>I remember as if it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p> +</pre> + +<pre class="brush: css notranslate">html { + font-size: 10px; +} + +h1 { + font-size: 26px; + text-transform: capitalize; + text-shadow: -1px -1px 1px #aaa, + 0px 2px 1px rgba(0,0,0,0.5), + 2px 2px 2px rgba(0,0,0,0.7), + 0px 0px 3px rgba(0,0,0,0.4); +} + +h1 + p { + font-weight: bold; +} + +p { + font-size: 14px; + color: red; + font-family: Helvetica, Arial, sans-serif; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Ombres_múltiples', '100%', 220) }}</p> + +<div class="note"> +<p><strong>Nota</strong>: Pots veure més exemples interessants d'ús de <code>text-shadow</code> en l'article de Sitepoint <a href="http://www.sitepoint.com/moonlighting-css-text-shadow/">Moonlighting with CSS text-shadow</a>.</p> +</div> + +<h2 id="Disseny_de_pàgina_del_text">Disseny de pàgina del text</h2> + +<p>Ara que ja coneixem les propietats bàsiques dels tipus de lletra, passem a veure les propietats del text que podem utilitzar que afecten el disseny de pàgina.</p> + +<h3 id="Alineació_del_text">Alineació del text</h3> + +<p>La propietat {{cssxref("text-align")}} s'utilitza per a controlar com s'alinea el text dins de la caixa que conté els continguts. Els valors disponibles són els següents i funcionen gairebé de la mateixa manera que ho fa una aplicació de processador de text normal:</p> + +<ul> + <li><code>left</code>: Justifica el text a l'esquerra.</li> + <li><code>right</code>: Justifica el text a la dreta.</li> + <li><code>center</code>: Centra el text.</li> + <li><code>justify</code>: Varia els espais entre les paraules perquè totes les línies de text ocupin la mateixa amplada. Cal utilitzar-lo amb cura; pot presentar un aspecte terrible, sobretot quan s'aplica a un paràgraf amb paraules molt llargues. Si fas servir aquesta propietat, has de pensar d’utilitzar-hi també conjuntament alguna altra cosa, com ara {{cssxref("hyphens")}}, per partir les paraules més llargues al final de línia.</li> +</ul> + +<p>Si s'aplica <code>text-align: center;</code> a l’{{htmlelement("h1")}} en el nostre exemple, obtenim això:</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Tommy the cat</h1> + +<p>I remember as if it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p> +</pre> + +<pre class="brush: css notranslate">html { + font-size: 10px; +} + +h1 { + font-size: 2.6rem; + text-transform: capitalize; + text-shadow: -1px -1px 1px #aaa, + 0px 2px 1px rgba(0,0,0,0.5), + 2px 2px 2px rgba(0,0,0,0.7), + 0px 0px 3px rgba(0,0,0,0.4); + text-align: center; +} + +h1 + p { + font-weight: bold; +} + +p { + font-size: 1.4rem; + color: red; + font-family: Helvetica, Arial, sans-serif; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Alineació_del_text', '100%', 220) }}</p> + +<h3 id="Interlineat">Interlineat</h3> + +<p>La propietat {{cssxref("line-height")}} estableix l'alçada que hi ha entre les línies de text. Pot prendre la majoria de les <a href="/ca/docs/Learn/CSS/Building_blocks/Valors_i_unitats_CSS">unitats de longitud i grandària</a>, però també un valor sense unitat, que actua com un multiplicador, i generalment es considera l’opció més bona; es multiplica el valor de {{cssxref("font-size")}} i s’obté <code>line-height</code>. El text del <code>body</code> en general es veu més bé i és més fàcil de llegir si les línies estan prou separades. L'alçada de la línia recomanada és d'aproximadament 1,5-2 (doble espai). Per tant, si vols establir les línies de text a 1,6 vegades l'alçada del tipus de lletra, utilitzaries això:</p> + +<pre class="brush: css notranslate">line-height: 1.6;</pre> + +<p>Si apliques això als elements {{htmlelement("p")}} del nostre exemple, obtindràs aquest resultat:</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Tommy the cat</h1> + +<p>I remember as if it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p> +</pre> + +<pre class="brush: css notranslate">html { + font-size: 10px; +} + +h1 { + font-size: 2.6rem; + text-transform: capitalize; + text-shadow: -1px -1px 1px #aaa, + 0px 2px 1px rgba(0,0,0,0.5), + 2px 2px 2px rgba(0,0,0,0.7), + 0px 0px 3px rgba(0,0,0,0.4); + text-align: center; +} + +h1 + p { + font-weight: bold; +} + +p { + font-size: 1.4rem; + color: red; + font-family: Helvetica, Arial, sans-serif; + line-height: 1.5; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Interlineat', '100%', 250) }}</p> + +<h3 id="Espaiat_entre_lletres_i_entre_paraules">Espaiat entre lletres i entre paraules</h3> + +<p>Les propietats {{cssxref("spacing-letter")}} i {{cssxref("word-spacing")}} permeten establir l'espaiat entre lletres i l'espaiat entre paraules en el text. No ho faràs amb gaire freqüència, però potser ho trobes útil per a obtenir un cert tipus de presentació o per millorar la llegibilitat d'un tipus de lletra especialment densa. Pot prendre la majoria de les <a href="/ca/docs/Learn/CSS/Building_blocks/Valors_i_unitats_CSS">unitats de longitud i grandària</a>.</p> + +<p>Així, per exemple, podríem aplicar una mica d’espai entre lletres i espai entre paraules a la primera línia de cada element {{htmlelement("p")}} del nostre exemple:</p> + +<pre class="brush: css notranslate">p::first-line { + letter-spacing: 4px; + word-spacing: 4px; +}</pre> + +<p>Afegim-ne una mica al nostre exemple, així:</p> + +<div class="hidden"> +<pre class="brush: html notranslate"><h1>Tommy the cat</h1> + +<p>I remember as if it were a meal ago...</p> + +<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter + may have nestled its way into his mighty throat. Many a fat alley rat +had met its demise while staring point blank down the cavernous barrel of + this awesome prowling machine. Truly a wonder of nature this urban +predator — Tommy the cat had many a story to tell. But it was a rare +occasion such as this that he did.</p> +</pre> + +<pre class="brush: css notranslate">html { + font-size: 10px; +} + +h1 { + font-size: 2.6rem; + text-transform: capitalize; + text-shadow: -1px -1px 1px #aaa, + 0px 2px 1px rgba(0,0,0,0.5), + 2px 2px 2px rgba(0,0,0,0.7), + 0px 0px 3px rgba(0,0,0,0.4); + text-align: center; +} + +h1 + p { + font-weight: bold; +} + +p::first-line { + letter-spacing: 2px; + word-spacing: 4px; +} + +p { + font-size: 1.4rem; + color: red; + font-family: Helvetica, Arial, sans-serif; + line-height: 1.5; +}</pre> +</div> + +<p>{{ EmbedLiveSample('Espaiat_entre_lletres_i_entre_paraules', '100%', 250) }}</p> + +<h3 id="Altres_propietats_que_convé_conèixer"><span id="result_box" lang="ca"><span title="Other properties worth looking at">Altres propietats que convé conèixer</span></span></h3> + +<p>Les propietats anteriors et donen una idea de com començar a aplicar estil al text d’una pàgina web, però hi ha moltes altres propietats que es poden utilitzar. Aquí només hem volgut exposar les més importants. Un cop t’hagis acostumat a fer-les servir, també hauries d'explorar les següents:</p> + +<p>Estils per als tipus de lletra:</p> + +<ul> + <li>{{cssxref("font-variant")}}: Alterna entre la versaleta i la lletra normal</li> + <li>{{cssxref("font-kerning")}}: Activa i desactiva les opcions de kerning del tipus de lletra.</li> + <li>{{cssxref("font-feature-settings")}}: Activa i desactiva diverses característiques dels tipus de lletra <a href="https://en.wikipedia.org/wiki/OpenType">OpenType</a>.</li> + <li>{{cssxref("font-variant-alternates")}}: Controla l'ús de caràcters alternatius per a un tipus de lletra determinat.</li> + <li>{{cssxref("font-variant-caps")}}: Controla l'ús de caràcters alternatius en majúscules.</li> + <li>{{cssxref("font-variant-east-asian")}}: Controla l'ús de caràcters alternatius per a textos en caràcters de llengües de l'Àsia oriental, com ara el japonès i el xinès.</li> + <li>{{cssxref("font-variant-ligatures")}}: Controla les lligadures i les formes contextuals que s'utilitzen en text.</li> + <li>{{cssxref("font-variant-numeric")}}: Controla l'ús de glifs alternatius per a números, fraccions i marcadors ordinaris.</li> + <li>{{cssxref("font-variant-position")}}: Controla l'ús de caràcters alternatius de mides més petites posicionades com superíndex o subíndex.</li> + <li>{{cssxref("font-size-adjust")}}: Ajusta la mida visual del tipus de lletra independentment de la mida real de la lletra.</li> + <li>{{cssxref("font-stretch")}}: Alterna entre versions espaiades alternatives possibles d'un tipus de lletra donat.</li> + <li>{{cssxref("text-underline-position")}}: Especifica la posició dels subratllats amb el valor <code>underline</code> de la propietat <code>text-decoration-line</code>.</li> + <li>{{cssxref("text-rendering")}}: Intenta aconseguir una optimització de la presentació del text.</li> +</ul> + +<p>Aplicació d’estil al text per al disseny de pàgina</p> + +<ul> + <li>{{cssxref("text-indent")}}: Especifica quant d’espai horitzontal s'hauria de deixar abans del començament de la primera línia del contingut del text.</li> + <li>{{cssxref("text-overflow")}}: Defineix com s’indica als usuaris el contingut desbordat que no es mostra.</li> + <li>{{cssxref("white-space")}}: Defineix com es tracten els espais en blanc i els salts de línia associats dins de l'element.</li> + <li>{{cssxref("word-break")}}: Especifica si vols partició de paraules entre línies.</li> + <li>{{cssxref("direction")}}: Defineix la direcció del text (això depèn de l’idioma i, en general, és millor deixar que HTML s’encarregui d’aquesta part, perquè va associada al contingut del text).</li> + <li>{{cssxref("hyphens")}}: Activa i desactiva la partició de paraules per als idiomes admesos.</li> + <li>{{cssxref("line-break")}}: Relaxa o força la partició de línies per a les llengües asiàtiques.</li> + <li>{{cssxref("text-align-last")}}: Defineix com s'alinea l'última línia d'un bloc o una línia, just abans d'un salt de línia forçat.</li> + <li>{{cssxref("text-orientation")}}: Defineix l'orientació del text en una línia.</li> + <li>{{cssxref("word-wrap")}}: Especifica si el navegador pot partir o no paraules entre línies per a evitar desbordaments.</li> + <li>{{cssxref("writing-mode")}}: Estableix si les línies de text estan en horitzontal o vertical, i en quina direcció flueixen les línies posteriors.</li> +</ul> + +<h2 id="Propietat_abreujada_per_al_tipus_de_lletra">Propietat abreujada per al tipus de lletra</h2> + +<p>També es poden establir moltes propietats de tipus de lletra amb la propietat abreujada {{cssxref("font")}}. S’escriuen en l’ordre següent: {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}} i {{cssxref("font-family")}}.</p> + +<p>Entre totes aquestes propietats, només es requereixen <code>font-size</code> i <code>font-family</code> quan s'utilitza la propietat abreujada <code>font</code>.</p> + +<p>S'ha d'incloure una barra diagonal entre les propietats {{cssxref("font-size")}} i {{cssxref("line-height")}}.</p> + +<p>Un exemple complet tindria un aspecte com aquest:</p> + +<pre class="brush: css notranslate">font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;</pre> + +<h2 id="Aprenentatge_actiu_Jugar_amb_els_estils_de_text"><span id="result_box" lang="ca">Aprenentatge actiu: Jugar amb els estils de text</span></h2> + +<p>En aquesta sessió d'aprenentatge actiu, no et proposem de fer cap exercici específic: et proposem que juguis amb algunes propietats del tipus de lletra i el text aplicades al disseny de pàgina i observis què ets capaç de crear. Pots fer-ho usant els fitxers HTML/CSS fora de línia, o pots introduir el teu codi en l'exemple editat en viu a continuació.</p> + +<p>Si t’equivoques, sempre pots tornar a l’inici amb el botó <em>Reinicia</em>.</p> + +<div class="hidden"> +<h6 id="Codi_executable">Codi executable</h6> + +<pre class="brush: html notranslate"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> + <h2>HTML Input</h2> + <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"> + <p>Some sample text for your delight</p></textarea> + + <h2>CSS Input</h2> + <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">p { + + }</textarea> + + <h2>Output</h2> + <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div> + <div class="controls"> + <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"> + </div> +</div> +</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 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(); +}); + +htmlInput.addEventListener("input", drawOutput); +cssInput.addEventListener("input", drawOutput); +window.addEventListener("load", drawOutput); +</pre> +</div> + +<p>{{ EmbedLiveSample('Codi_executable', 700, 800) }}</p> + +<h2 id="Resum"><span id="result_box" lang="ca">Resum</span></h2> + +<p>Esperem que hagis gaudit jugant amb el text d’aquest article! L’article següent t’explicarà tot el que has de saber sobre l’aplicació d'estil a llistes HTML.</p> + +<p>{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}</p> diff --git a/files/ca/learn/css/styling_text/index.html b/files/ca/learn/css/styling_text/index.html new file mode 100644 index 0000000000..39ad209939 --- /dev/null +++ b/files/ca/learn/css/styling_text/index.html @@ -0,0 +1,56 @@ +--- +title: Estilitzar text +slug: Learn/CSS/Styling_text +tags: + - Beginner + - CSS + - CodingScripting + - Fonts + - Landing + - Links + - Module + - Text + - font + - letter + - line + - lists + - shadow + - web fonts +translation_of: Learn/CSS/Styling_text +original_slug: Learn/CSS/Estilitzar_text +--- +<div>{{LearnSidebar}}</div> + +<p class="summary">Amb els aspectes bàsics del llenguatge CSS coberts, el següent tema CSS, per a què us concentreu, és l'estil del text - una de les coses més habituals que fareu amb CSS. Aquí observem els fonaments d'estil de text, incloent la configuració de fonts, negreta, cursiva, espaiat entre línies i lletres, ombres i altres funcions de text. Completem el mòdul examinant l'aplicació de fonts personalitzades a la vostra pàgina i llistes d'estil i enllaços.</p> + +<h2 id="Requisits_previs">Requisits previs</h2> + +<p>Abans de començar aquest mòdul, ja hauríeu de tenir una familiaritat bàsica amb l'HTML, tal com s'ha explicat en el mòdul <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introducció a HTML</a> i estar còmodes amb els fonaments CSS, tal com s'ha explicat en <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">Introducció a CSS</a>.</p> + +<div class="note"> +<p><strong>Nota</strong>: Si esteu treballant en un ordinador/tauleta/altre dispositiu on no té la capacitat de crear els vostres propis fitxers, podeu provar (la majoria) els exemples de codi en un programa de codificació en línia com <a href="http://jsbin.com/">JSBin</a> o <a href="https://thimble.mozilla.org/">Thimble</a>.</p> +</div> + +<h2 id="Guies"><span id="result_box" lang="ca"><span>Guies</span></span></h2> + +<p>Aquest mòdul conté els següents articles, que us ensenyaran tot l'essencial de l'estil del contingut de text HTML.</p> + +<dl> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Text fonamental i estil de font</a></dt> + <dd>En aquest article, es detallen tots els conceptes bàsics d'estil de text/font, incloent la configuració del pes de la font, família i estil, abreviatura de font, alineació del text i altres efectes, i espaiat entre línies i lletres.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_lists">Estilitzar llistes</a></dt> + <dd>Les llistes es comporten com qualsevol altre text en la seva major part, però hi ha algunes propietats CSS específiques de les llistes que necessiteu saber i algunes de les millors pràctiques a tenir en compte. Aquest article ho explica tot.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Styling_links">Estilitzar enllaços</a></dt> + <dd>En dissenyar enllaços, és important entendre com fer ús de pseudo-classes per crear estils de vincles de manera efectiva i com dissenyar vincles per utilitzar-los en característiques d'interfície variades comunes, com a menús de navegació i pestanyes. Veurem tots aquests temes en aquest article.</dd> + <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Web_fonts">Fonts Web</a></dt> + <dd>Aquí explorarem detalladament els tipus de fonts web, que us permeten descarregar fonts personalitzades juntament amb la vostra pàgina web, per permetre un estil de text més variat i personalitzat.</dd> +</dl> + +<h2 id="Avaluacions">Avaluacions</h2> + +<p>Les següents avaluacions posaran a prova la vostra comprensió de les tècniques d'estil de text cobertes en les guies anteriors.</p> + +<dl> + <dt><a href="/en-US/Learn/CSS/Styling_text/Typesetting_a_homepage">Composició d'una pàgina web d'una escola comunitaria</a></dt> + <dd>En aquesta avaluació, provarem la vostra comprensió sobre l'estil de text, que us permetrà personalitzar el text de la pàgina d'inici d'una escola comunitària.</dd> +</dl> diff --git a/files/ca/learn/css/styling_text/styling_links/index.html b/files/ca/learn/css/styling_text/styling_links/index.html new file mode 100644 index 0000000000..9ab78597b2 --- /dev/null +++ b/files/ca/learn/css/styling_text/styling_links/index.html @@ -0,0 +1,425 @@ +--- +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"><p><a href="https://mozilla.org">A link to the Mozilla homepage</a></p> +</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"><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></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"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> + <h2>HTML Input</h2> + <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><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></textarea> + + <h2>CSS Input</h2> + <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">a { + +} + +a:link { + +} + +a:visited { + +} + +a:focus { + +} + +a:hover { + +} + +a:active { + +}</textarea> + + <h2>Output</h2> + <div class="output" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></div> + <div class="controls"> + <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"> + <input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;"> + </div> +</div> +</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"><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></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"><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></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><ul></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><a></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> diff --git a/files/ca/learn/css/styling_text/styling_lists/index.html b/files/ca/learn/css/styling_text/styling_lists/index.html new file mode 100644 index 0000000000..8ea4d15476 --- /dev/null +++ b/files/ca/learn/css/styling_text/styling_lists/index.html @@ -0,0 +1,383 @@ +--- +title: Estils de llistes +slug: Learn/CSS/Styling_text/Styling_lists +tags: + - Article + - Beginner + - CSS + - Guide + - Styling + - Text + - bullets + - lists +translation_of: Learn/CSS/Styling_text/Styling_lists +original_slug: Learn/CSS/Estilitzar_text/Llistes_estil +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</div> + +<p class="summary">Les <a href="/en-US/Learn/HTML/Introduction_to_HTML/HTML_text_fundamentals#Lists">llistes</a> <span id="result_box" lang="ca">es comporten com qualsevol altre text en la seva major part, però hi ha algunes propietats CSS específiques de les llistes que has de conèixer i algunes bones pràctiques que has de tenir en compte. Aquest article ho explica tot.</span></p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Requisits previs:</th> + <td>Coneixements bàsics d'informàtica, els fonaments d'HTML (estudi <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a HTML</a> ), fonaments CSS (estudi <a href="/ca/docs/Learn/CSS/First_steps">Introducció a CSS</a>), <a href="/ca/docs/Learn/CSS/Estilitzar_text/Text_fonamental">fonaments d’aplicació d’estil i tipus de lletra a textos amb CSS</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td><span id="result_box" lang="ca">Familiaritzar-se amb les bones pràctiques i propietats relacionades amb l’aplicació d'estil a les llistes</span> .</td> + </tr> + </tbody> +</table> + +<h2 id="Un_exemple_senzill_de_llista">Un exemple senzill de llista</h2> + +<p>Per començar, observa un exemple senzill de llista. Al llarg d'aquest article, veurem llistes no ordenades, ordenades i de descripció: totes tenen característiques d'estil similars, i algunes que són particulars per al tipus de llista concret. Tens l'exemple sense estil <a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/unstyled-list.html">disponible a GitHub</a> (consulta també el <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/unstyled-list.html">codi d’origen</a>).</p> + +<p>El codi HTML del nostre exemple de llista té aquest aspecte:</p> + +<pre class="brush: html notranslate"><h2>Shopping (unordered) list</h2> + +<p>Paragraph for reference, paragraph for reference, paragraph for reference, +paragraph for reference, paragraph for reference, paragraph for reference.</p> + +<ul> + <li>Humous</li> + <li>Pitta</li> + <li>Green salad</li> + <li>Halloumi</li> +</ul> + +<h2>Recipe (ordered) list</h2> + +<p>Paragraph for reference, paragraph for reference, paragraph for reference, +paragraph for reference, paragraph for reference, paragraph for reference.</p> + +<ol> + <li>Toast pitta, leave to cool, then slice down the edge.</li> + <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li> + <li>Wash and chop the salad.</li> + <li>Fill pitta with salad, humous, and fried halloumi.</li> +</ol> + +<h2>Ingredient description list</h2> + +<p>Paragraph for reference, paragraph for reference, paragraph for reference, +paragraph for reference, paragraph for reference, paragraph for reference.</p> + +<dl> + <dt>Humous</dt> + <dd>A thick dip/sauce generally made from chick peas blended with tahini, lemon juice, salt, garlic, and other ingredients.</dd> + <dt>Pitta</dt> + <dd>A soft, slightly leavened flatbread.</dd> + <dt>Halloumi</dt> + <dd>A semi-hard, unripened, brined cheese with a higher-than-usual melting point, usually made from goat/sheep milk.</dd> + <dt>Green salad</dt> + <dd>That green healthy stuff that many of us just use to garnish kebabs.</dd> +</dl></pre> + +<p>Si ara vas a l'exemple en directe i investigues els elements de la llista amb les <a href="/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">eines de desenvolupador del navegador</a>, t’adonaràs que hi ha un parell d'estils per defecte:</p> + +<ul> + <li>Els elements {{htmlelement("ul")}} i {{htmlelement("ol")}} tenen un {{cssxref("margin")}} superior i inferior de <code>16px</code> (<code>1em</code>) i un {{cssxref("padding-left")}} de <code>40px</code> (<code>2.5em</code>).</li> + <li>Els elements de llista (elements {{htmlelement("li")}}) no tenen valors predeterminats establerts per a l’espaiat.</li> + <li>L'element {{htmlelement("dl")}} té un {{cssxref("margin")}} superior i inferior de <code>16px</code> (<code>1em</code>), però no hi ha cap farciment (<em>padding</em>) establert.</li> + <li>Els elements {{htmlelement("dd")}} tenen un {{cssxref("margin-left")}} de <code>40px</code> (<code>2.5em</code>).</li> + <li>Els elements {{htmlelement("p")}} que hem inclòs com a referència tenen un {{cssxref("margin")}} de <code>16px</code> (<code>1em</code>), el mateix que els diferents tipus de llista.</li> +</ul> + +<h2 id="Tractament_dels_espais_en_llistes">Tractament dels espais en llistes</h2> + +<p>Quan fas llistes d'estil, has d'ajustar-ne els estils perquè mantinguin el mateix espai vertical que els elements que l'envolten (com ara paràgrafs i imatges, que de vegades s’anomena <em>ritme vertical</em>), i el mateix espaiat horitzontal que la resta (observa l'<a href="http://mdn.github.io/learning-area/css/styling-text/styling-lists/">exemple d'estil acabat</a> a GitHub, i també el <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/styling-lists/index.html">codi d’origen</a> que hi trobaràs).</p> + +<p>El CSS que s’utilitza per a aplicar l'estil al text i l'espaiat és el següent:</p> + +<pre class="brush: css notranslate">/* General styles */ + +html { + font-family: Helvetica, Arial, sans-serif; + font-size: 10px; +} + +h2 { + font-size: 2rem; +} + +ul,ol,dl,p { + font-size: 1.5rem; +} + +li, p { + line-height: 1.5; +} + +/* Description list styles */ + + +dd, dt { + line-height: 1.5; +} + +dt { + font-weight: bold; +} + +dd { + margin-bottom: 1.5rem; +}</pre> + +<ul> + <li>La primera regla estableix un tipus de lletra per a tot el lloc web i una mida de lletra de referència de 10 px, que hereta tota la pàgina web.</li> + <li>Les regles 2 i 3 estableixen mides de lletra relatives per als títols d’encapçalament, els diferents tipus de llista (els fills dels elements de la llista els hereten) i els paràgrafs. Això significa que cada paràgraf i cada llista tindrà la mateixa mida de lletra i el mateix espaiat superior i inferior, que ajuden a mantenir un ritme vertical constant.</li> + <li>La regla 4 estableix la mateixa {{cssxref("line-height")}} en els paràgrafs i els elements de llista, de manera que els paràgrafs i cada element de llista tindran el mateix espaiat entre línies. Això també ajuda a mantenir el ritme vertical consistent.</li> + <li>Les regles 5-7 es refereixen a la llista de descripció: establim la mateixa <code>line-height</code> per als termes i les descripcions de terme de la llista de descripció que els que hem establert per als paràgrafs i els elements de llista, i un {{cssxref("margin-bottom")}} de <code>1.5rem</code>, el mateix que hi ha per als paràgrafs (<code>p</code>) i els elements de la llista (<code>li</code>). Una vegada més, la coherència és bona. També establim els termes de descripció en negreta, de manera que destaquin més visualment.</li> +</ul> + +<h2 id="Estils_específics_de_llista"><span id="result_box" lang="ca">Estils específics de llista</span></h2> + +<p>Hem examinat l'espaiat general de les llistes, ara explorarem algunes propietats específiques de la llista. Per començar, hi ha tres propietats que has de conèixer, que es poden establir en els elements {{htmlelement("ul")}} o {{htmlelement("ol")}}:</p> + +<ul> + <li>{{cssxref("list-style-type")}}: Estableix el tipus de vinyeta que s'utilitza per a la llista, per exemple vinyetes quadrades o circulars per a una llista no ordenada, números, lletres o números romans per a una llista ordenada.</li> + <li>{{cssxref("list-style-position")}}: Estableix si les vinyetes apareixen dins dels elements de la llista, o a fora, abans de l'inici de cada element.</li> + <li>{{cssxref("list-style-image")}}: Permet utilitzar una imatge personalitzada per a la vinyeta, en comptes d'un quadrat o cercle.</li> +</ul> + +<h3 id="Estils_de_vinyeta">Estils de vinyeta</h3> + +<p>Com s'ha comentat, la propietat {{cssxref("list-style-type")}} permet establir quin tipus de vinyeta s'usa per als punts de vinyeta. En el nostre exemple, hem establert que la llista ordenada utilitzi números romans en majúscules, amb:</p> + +<pre class="brush: css notranslate">ol { + list-style-type: upper-roman; +}</pre> + +<p>Això ens dona l’aspecte següent:</p> + +<p><img alt="Una llista ordenada amb vinyetes que apareixex fora del text de l'element de llista." src="https://mdn.mozillademos.org/files/12962/outer-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 119px; margin: 0px auto; width: 376px;"></p> + +<p>Podeu trobar moltes més opcions consultant la pàgina de referència {{cssxref("list-style-type")}}.</p> + +<h3 id="Posició_de_la_vinyeta">Posició de la vinyeta</h3> + +<p>La propietat {{cssxref("list-style-position")}} estableix si les vinyetes apareixen dins dels elements de llista, o a fora, abans de l'inici de cada element. El valor predeterminat és <code>outside</code> (fora), que fa que les vinyetes se situïn fora dels elements de llista, tal com hem vist.</p> + +<p>Si estableixes el valor <code>inside</code> (dins), les vinyetes se situen dins de les línies:</p> + +<pre class="brush: css notranslate">ol { + list-style-type: upper-roman; + list-style-position: inside; +}</pre> + +<p><img alt="Una llista ordenada amb vinyetes que apareixex dins del text de l'element de llista." src="https://mdn.mozillademos.org/files/12958/inner-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 123px; margin: 0px auto; width: 370px;"></p> + +<h3 id="Ús_duna_imatge_de_vinyeta_personalitzada">Ús d'una imatge de vinyeta personalitzada</h3> + +<p>La propietat {{cssxref("list-style-image")}} et permet fer servir una imatge personalitzada per a la vinyeta. La sintaxi és bastant senzilla:</p> + +<pre class="brush: css notranslate">ul { + list-style-image: url(star.svg); +}</pre> + +<p>Tanmateix, aquesta propietat és una mica limitada en termes de control de la posició, la mida, etc., de les vinyetes. És millor utilitzar la família de propietats {{cssxref("background")}}, que aprendràs amb més detall en el mòdul de <a href="/ca/docs/Learn/CSS/Building_blocks">Aplicar estil a les caixes</a>. De moment, aquí en tens un tast!</p> + +<p>En el nostre exemple acabat, hem aplicat estil a la llista no ordenada d’aquesta manera (a sobre del que ja has vist abans):</p> + +<pre class="brush: css notranslate">ul { + padding-left: 2rem; +} + +ul li { + padding-left: 2rem; + list-style-type: none; + background-image: url(star.svg); + background-position: 0 0; + background-size: 1.6rem 1.6rem; + background-repeat: no-repeat; +}</pre> + +<p>Aquí hem fet el següent:</p> + +<ul> + <li>Hem reduït el valor per defecte del {{cssxref("padding-left")}} de {{htmlelement("ul")}} de <code>40px</code> a <code>20px</code>, i establim la mateixa quantitat per als elements de llista. D’aquesta manera, en general, els elements de llista encara estan alineats amb els elements de llista ordenada i les descripcions de llista de descripció, però els elements de llista tenen un farciment per a poder-hi encabir imatges de fons. Si no ho féssim així, les imatges de fons es superposarien amb el text de l'element de la llista, i es veuria desordenat.</li> + <li>Hem establert el {{cssxref("list-style-type")}} a <code>none</code>, de manera que no aparegui cap vinyeta per defecte. En lloc d’això, utilitzarem les propietats {{cssxref("background")}} per tractar les vinyetes.</li> + <li>Hem inserit una vinyeta en cada element de llista no ordenada. Les propietats rellevants són les següents: + <ul> + <li>{{cssxref("background-image")}}: Especifica la ruta del fitxer d'imatge que vols utilitzar com a vinyeta.</li> + <li>{{cssxref("background-position")}}: Defineix en quin lloc del fons de l'element seleccionat apareix la imatge; en aquest cas, <code>0 0</code>, que significa que la vinyeta apareix a la part superior esquerra de cada element de llista.</li> + <li>{{cssxref("background-size")}}: Estableix la mida de la imatge de fons. Idealment voldríem que les vinyetes tinguessin la mateixa mida que els elements de llista (o lleugerament més petits o més grans). Fem servir una mida de <code>1.6rem</code> (16px), que s'adiu molt bé amb el farciment de <code>20px</code> que hem establert per e encabir-hi la vinyeta; 16 px, més 4 px d'espai entre la vinyeta i el text de l'element de llista funciona bé.</li> + <li>{{cssxref("background-repeat")}}: Per defecte, les imatges de fons es repeteixen fins que omplen l'espai del fons disponible. Només volem que es faci una còpia de la imatge inserida en cada cas, de manera que el fixem en un valor de no-repetició (<code>no-repeat</code>).</li> + </ul> + </li> +</ul> + +<p><span class="short_text" id="result_box" lang="ca">Això ens dona el resultat següent:</span></p> + +<p><img alt="Una llista no ordenada amb vinyetes en forma de petites estrelles." src="https://mdn.mozillademos.org/files/12956/image-bullets.png" style="border-style: solid; border-width: 1px; display: block; height: 106px; margin: 0px auto; width: 124px;"></p> + +<h3 id="La_propietat_abreujada_list-style">La propietat abreujada list-style</h3> + +<p>Les tres propietats anteriors esmentades es poden configurar amb una única propietat abreujada, {{cssxref("list-style")}}. Per exemple, el CSS següent:</p> + +<pre class="brush: css notranslate">ul { + list-style-type: square; + list-style-image: url(example.png); + list-style-position: inside; +}</pre> + +<p>Podria reemplaçar-se per això:</p> + +<pre class="notranslate">ul { + list-style: square url(example.png) inside; +}</pre> + +<p>Els valors es poden incloure en qualsevol ordre, i pots utilitzar-ne un, dos o els tres (els valors predeterminats que s’utilitzen per a les propietats que no s'inclouen són <code>disc</code>, <code>none</code> i <code>outside</code>). Si s'especifica un tipus i una imatge, el tipus s'utilitza com a alternativa si la imatge no es carrega per alguna raó.</p> + +<h2 id="El_control_de_la_numeració_de_les_llistes">El control de la numeració de les llistes</h2> + +<p>De vegades pot ser que vulguis numerar de manera diferent una llista ordenada, per exemple, que comenci a partir d'un número diferent de 1, o bé que compti enrere, o que compti en passos de més d'1. L'HTML i el CSS disposen d’algunes eines que et poden ajudar amb això.</p> + +<h3 id="start">start</h3> + +<p>L'atribut {{htmlattrxref("start", "ol")}} permet iniciar el recompte de la llista a partir d'un número diferent de 1. L’exemple següent:</p> + +<pre class="brush: html notranslate"><ol start="4"> + <li>Toast pitta, leave to cool, then slice down the edge.</li> + <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li> + <li>Wash and chop the salad.</li> + <li>Fill pitta with salad, humous, and fried halloumi.</li> +</ol></pre> + +<p>Dona aquesta sortida:</p> + +<p>{{ EmbedLiveSample('start', '100%', 150) }}</p> + +<h3 id="reversed">reversed</h3> + +<p>L'atribut {{htmlattrxref("reversed","ol")}} inicia la llista comptant cap enrere en comptes de cap endavant. L'exemple següent</p> + +<pre class="brush: html notranslate"><ol start="4" reversed> + <li>Toast pitta, leave to cool, then slice down the edge.</li> + <li>Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li> + <li>Wash and chop the salad.</li> + <li>Fill pitta with salad, humous, and fried halloumi.</li> +</ol></pre> + +<p>Dona aquesta sortida:</p> + +<p>{{ EmbedLiveSample('reversed', '100%', 150) }}</p> + +<h3 id="value">value</h3> + +<p>L'atribut {{htmlattrxref("value", "ol")}} permet establir valors numèrics específics per a cada element de llista. L’exemple següent:</p> + +<pre class="brush: html notranslate"><ol> + <li value="2">Toast pitta, leave to cool, then slice down the edge.</li> + <li value="4">Fry the halloumi in a shallow, non-stick pan, until browned on both sides.</li> + <li value="6">Wash and chop the salad.</li> + <li value="8">Fill pitta with salad, humous, and fried halloumi.</li> +</ol></pre> + +<p>Dona aquesta sortida:</p> + +<p>{{ EmbedLiveSample('value', '100%', 150) }}</p> + +<div class="note"> +<p><strong>Nota</strong>: Fins i tot si fas servir un valor de {{cssxref("list-style-type")}} no numèric, cal que utilitzis els valors numèrics equivalents per a l'atribut <code>value</code>.</p> +</div> + +<h2 id="Aprenentatge_actiu_Aplicar_estil_a_una_llista_imbricada">Aprenentatge actiu: Aplicar estil a una llista imbricada</h2> + +<p>En aquesta sessió d'aprenentatge actiu, volem que prenguis allò que has après i dissenyis una llista imbricada. T’hem proporcionat un codi HTML, i volem que:</p> + +<ol> + <li>Apliquis vinyetes quadrades als elements de llista no ordenada.</li> + <li>Apliquis als elements de llista no ordenada i els elements de llista ordenada una alçada de línia d'1,5 respecte de la mida de la lletra.</li> + <li>Apliquis als elements de llista ordenada valors de lletra minúscula.</li> + <li>No dubtis de jugar amb l'exemple de llistes tant com vulguis, experimenta amb els tipus de vinyeta, l’espaiat o qualsevol altra cosa que hi trobis.</li> +</ol> + +<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 veure’n una resposta possible.</p> + +<div class="hidden"> +<h6 id="Playable_code">Playable code</h6> + +<pre class="brush: html notranslate"><div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> + <h2>HTML Input</h2> + <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"><ul> + <li>First, light the candle.</li> + <li>Next, open the box.</li> + <li>Finally, place the three magic items in the box, in this exact order, to complete the spell: + <ol> + <li>The book of spells</li> + <li>The shiny rod</li> + <li>The goblin statue</li> + </ol> + </li> +</ul></textarea> + + <h2>CSS Input</h2> + <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"></textarea> + + <h2>Output</h2> + <div class="output" style="width: 90%;height: 12em;padding: 10px;border: 1px solid #0095dd;overflow: auto;"></div> + <div class="controls"> + <input id="reset" type="button" value="Reset" style="margin: 10px 10px 0 0;"> + <input id="solution" type="button" value="Show solution" style="margin: 10px 0 0 10px;"> + </div> +</div> +</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 = 'ul {\n list-style-type: square;\n}\n\nul li {\n line-height: 1.5;\n}\n\nol li {\n list-style-type: lower-alpha\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="Vegeu_també"><span id="result_box" lang="ca">Vegeu també</span></h2> + +<p>Els comptadors CSS proporcionen eines avançades per a personalitzar el recompte i l'estil de les llistes, però són bastant complexos. Et recomanem que hi facis un cop d'ull si vols ampliar la informació. Vegeu:</p> + +<ul> + <li>{{cssxref("@counter-style")}}</li> + <li>{{cssxref("counter-increment")}}</li> + <li>{{cssxref("counter-reset")}}</li> +</ul> + +<h2 id="Resum">Resum</h2> + +<p>Resulta relativament fàcil de dominar l'aplicació d’estil a les llistes una vegada que en coneixes els principis bàsics associats i les propietats específiques. En l’article següent continuarem amb les tècniques d'estil.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Fundamentals", "Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text")}}</p> diff --git a/files/ca/learn/css/styling_text/typesetting_a_homepage/index.html b/files/ca/learn/css/styling_text/typesetting_a_homepage/index.html new file mode 100644 index 0000000000..48c4955f34 --- /dev/null +++ b/files/ca/learn/css/styling_text/typesetting_a_homepage/index.html @@ -0,0 +1,113 @@ +--- +title: Composició d'una pàgina d'inici de l'escola comunitaria +slug: Learn/CSS/Styling_text/Typesetting_a_homepage +tags: + - Assessment + - Beginner + - CSS + - CodingScripting + - Link + - Styling text + - font + - list + - web font +translation_of: Learn/CSS/Styling_text/Typesetting_a_homepage +original_slug: Learn/CSS/Estilitzar_text/Composició_pàgina_inici +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</div> + +<p class="summary">En aquesta avaluació, comprovarem la comprensió de totes les tècniques d'estil de text que hem cobert al llarg d'aquest mòdul, que us permetrà personalitzar el text de la pàgina d'inici d'una escola comunitària. Podríeu tindra una mica de diversió durant el camí.</p> + +<table class="learn-box standard-table"> + <tbody> + <tr> + <th scope="row">Requisits previs:</th> + <td><span id="result_box" lang="ca"><span>Abans d'intentar aquesta avaluació, hauríeu d'haver treballat tots els articles d'aquest mòdul.</span></span></td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Provar la comprensió de les tècniques d'estil de text CSS.</td> + </tr> + </tbody> +</table> + +<h2 id="Punt_de_partida"><span id="result_box" lang="ca"><span>Punt de partida</span></span></h2> + +<p>Per començar aquesta avaluació, heu de:</p> + +<ul> + <li>Aneu i agafeu els fitxers <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/index.html">HTML</a> i <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/style.css">CSS</a> per a l'exercici i la <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/external-link-52.png">icona de l'enllaç extern proporcionada</a>.</li> + <li>Feu una còpia d'ells a l'ordinador local.</li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: Com a alternativa, podeu utilitzar un lloc com <a class="external external-icon" href="http://jsbin.com/">JSBin</a> o <a class="external external-icon" href="https://thimble.mozilla.org/">Thimble</a> per fer la vostra avaluació. Podeu enganxar el codi HTML i omplir el CSS en un d'aquests editors en línia i utilitzar <a href="http://mdn.github.io/learning-area/css/styling-text/typesetting-a-homepage-start/external-link-52.png">aquest URL</a> per indicar la imatge de fons. Si l'editor en línia que esteu utilitzant no té cap panell CSS separat, no dubteu a posar-lo en un element <code><style></code> a la capçalera del document.</p> +</div> + +<h2 id="Resum_del_projecte"><span id="result_box" lang="ca"><span>Resum del projecte</span></span></h2> + +<p>Us hem proporcionat un codi HTML sense format per a la pàgina d'inici d'una universitat comunitària imaginària, a més d'alguns estils CSS de la pàgina en un disseny de dues columnes, proporcionant un estil rudimentari. Heu d'escriure els vostres afegits CSS a sota del comentari a la part inferior del fitxer CSS, per assegurar-vos que sigui fàcil marcar les parts que heu realitzat. No us preocupeu si alguns dels selectors són repetitius; en aquest cas us deixarem.</p> + +<p>Fonts:</p> + +<ul> + <li>Primer de tot, descarregueu un parell de fonts gratuïtes. Com que es tracta d'una escola, les fonts s'haurien d'escollir per donar a la pàgina un sensació bastant seriosa, formal i de confiança - una font serif per el lloc a tot el cos del text general, juntament amb una sans-serif o una serif recta per als encapçalaments, podria ser agradable.</li> + <li>Utilitzeu un servei adequat per generar un codi font <code>@face-face</code> blindat per a aquestes dues fonts.</li> + <li>Apliqueu la font del cos a la pàgina sencera i la font d'encapçalament a les capçaleres</li> +</ul> + +<p><span id="result_box" lang="ca"><span>Estil de text general</span></span> :</p> + +<ul> + <li>Doneu a la pàgina un <code>font-size</code> de <code>10px</code> a tot el lloc.</li> + <li>Doneu els encapçalaments i altres tipus d'elements les mides de font apropiades definides amb una unitat relativa adequada.</li> + <li>Doneu al text del cos una alçada de línia (<code>line-height</code>) adequada.</li> + <li>Centreu el encapçalament de nivell superior a la pàgina.</li> + <li>Doneu als encapçalaments una mica d'espaiat a les lletres (<code>letter-spacing</code>) perquè no estiguin massa atapeïdes, i deixeu que les lletres respiren una mica.</li> + <li>Doneu al text del cos una mica d'espaiat entre lletres (<code>letter-spacing</code>) i espaiat entre paraules (<code>word-spacing</code>) , segons correspong</li> + <li>Doneu el primer paràgraf després de cada encapçalament en la <code><section></code> una mica de sagnat al text (<code>text-indentation</code>), diguem 20px.</li> +</ul> + +<p>Enllaços:</p> + +<ul> + <li>Doneu als estats de l'enllaç, visitad, enfocament i desplaçamen per damunt alguns colors que van amb el color de les barres horitzontals en la part superior i inferior de la pàgina.</li> + <li>Feu que els enllaços estiguin subratllats de manera predeterminada, però quan es passa el cursor per damunt o els enfoca, el subratllat desapareix.</li> + <li>Elimineu el contorn d'enfocament predeterminat de TOTS els enllaços de la pàgina.</li> + <li>Proporcioneu a l'estat actiu un estil notablement diferent, per la qual cosa es destaca molt bé, però cal que encaixi amb el disseny general de la pàgina.</li> + <li>Feu que els enllaços externs tinguin la icona de l'enllaç extern inserida al seu costat.</li> +</ul> + +<p>Llistes:</p> + +<ul> + <li>Assegureu-vos que l'espaiat de les vostres llistes i elements de llista funcionan bé amb l'estil de la pàgina general. Cada element de la llista hauria de tenir la mateixa alçada de línia (<code>line-height</code>) que una línia de paràgraf, i cada llista hauria de tenir el mateix espai en la part superior i inferior que hi ha entre els paràgrafs.</li> + <li>Doneu als elements de la llista una bonica vinyeta, apropiada per al disseny de la pàgina. Depenent de si trieu una imatge de vinyeta personalitzada o una altra cosa.</li> +</ul> + +<p><span id="result_box" lang="ca"><span>Menú de navegació</span></span></p> + +<ul> + <li>El estil del menú de navegació que tingui un aspecte adequat per a l'aparença de la pàgina.</li> +</ul> + +<h2 id="Consells_i_suggeriments">Consells i suggeriments</h2> + +<ul> + <li>No cal que editeu l'HTML de cap manera per a aquest exercici.</li> + <li>No necessàriament heu de fer que el menú de navegació es vegi com botons, però ha de ser una mica més alt per tal que no sembli una tonteria al costat de la pàgina; Recordeu, també, que heu de fer d'aquest un menú vertical de navegació.</li> +</ul> + +<h2 id="Exemple">Exemple</h2> + +<p>La següent captura de pantalla mostra un exemple del que podria semblar el disseny final:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12994/example2.png" style="display: block; height: 1106px; margin: 0px auto; width: 1533px;"></p> + +<h2 id="Avaluació">Avaluació</h2> + +<p>Si seguiu aquesta avaluació com a part d'un curs organitzat, hauríeu de poder lliurar el vostre treball al vostre professor/mentor per qualificar-ho. Si esteu en auto-aprenentatge, podreu obtenir la guia de qualificacions amb força facilitat preguntant sobre el tema <a href="https://discourse.mozilla-community.org/t/learning-web-development-marking-guides-and-questions/16294">en el fil de conversa en l'àrea d'aprenentatge</a>, o en el canal IRC <a href="irc://irc.mozilla.org/mdn">#mdn</a> en <a href="https://wiki.mozilla.org/IRC">Mozilla IRC</a>. Intenteu primer l'exercici - no es guanya res fent trampes!</p> + +<p>{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}}</p> diff --git a/files/ca/learn/css/styling_text/web_fonts/index.html b/files/ca/learn/css/styling_text/web_fonts/index.html new file mode 100644 index 0000000000..beba582471 --- /dev/null +++ b/files/ca/learn/css/styling_text/web_fonts/index.html @@ -0,0 +1,194 @@ +--- +title: Fonts Web +slug: Learn/CSS/Styling_text/Web_fonts +tags: + - '@font-face' + - Article + - Beginner + - CSS + - Fonts + - Guide + - Learn + - font-family + - web fonts +translation_of: Learn/CSS/Styling_text/Web_fonts +original_slug: Learn/CSS/Estilitzar_text/Fonts_Web +--- +<div>{{LearnSidebar}}</div> + +<div>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}</div> + +<p class="summary">En el primer article del mòdul hem explorat les característiques bàsiques de CSS que hi ha disponibles per a aplicar estil a la lletra i el text. En aquest article anem més lluny i explorem els tipus de lletra per a web amb detall, que permeten descarregar tipus de lletra personalitzats junt amb la teva pàgina web i et proporciona més varietat i personalització en l’aplicació d’estil als textos.</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 a tipus de lletra i textos</a>.</td> + </tr> + <tr> + <th scope="row">Objectiu:</th> + <td>Aprendre com aplicar tipus de lletra per a web a una pàgina web utilitzant un servei de tercers o escrivint el teu codi propi.</td> + </tr> + </tbody> +</table> + +<h2 id="Recapitulació_sobre_famílies_de_tipus_de_lletra">Recapitulació sobre famílies de tipus de lletra</h2> + +<p>Com hem vist en l’article <a href="/ca/docs/Learn/CSS/Estilitzar_text/Text_fonamental">Fonaments d’aplicació d’estil a la lletra i els textos</a>, pots controlar les fonts que fas servir per al teu HTML amb la propietat {{cssxref("font-family")}}. Aquesta propietat pren un o més noms de famílies de tipus de lletra i el navegador recorre la llista fins que troba un tipus de lletra que estigui disponible en el sistema en què s'executa:</p> + +<pre class="brush: css notranslate">p { + font-family: Helvetica, "Trebuchet MS", Verdana, sans-serif; +}</pre> + +<p>Aquest sistema funciona bé, però tradicionalment les opcions de tipus de lletra per al desenvolupament web han estat limitades. Només hi ha un grapat de tipus de lletra per a les que pots garantir la disponibilitat en tots els sistemes habituals, els anomenats <a href="/ca/docs/Learn/CSS/Estilitzar_text/Text_fonamental#Fam%C3%ADlies_de_tipus_de_lletra">tipus de lletra segurs per al web (<em>web-safe fonts</em>)</a>. Pots especificar la llista dels tipus de lletra preferents, seguits dels tipus de lletra alternatius segurs per al web, seguits dels tipus de lletra del sistema per defecte, però això afegeix una sobrecàrrega en termes de proves per a assegurar-te que els teus dissenys de pàgina presenten un aspecte correcte amb cada tipus de lletra, etc.</p> + +<h2 id="Tipografies_web"><span id="result_box" lang="ca">Tipografies web</span></h2> + +<p>Però hi ha una alternativa, que funciona molt bé, ja des de la versió 6 d'IE. Les tipografies web són una característica CSS que et permet especificar els fitxers de tipus de lletra que vols que es descarreguin juntament amb el teu lloc web quan s’hi accedeix, i això fa que qualsevol navegador que admet tipografies web pot disposar exactament dels tipus de lletra que especifiques. Increïble! La sintaxi necessària presenta aquest aspecte:</p> + +<p>En primer lloc, hi ha un bloc de codi {{cssxref("@font-face")}} al començament del CSS, que especifica els fitxers de tipus de lletra que vols que es descarreguin:</p> + +<pre class="brush: css notranslate">@font-face { + font-family: "myFont"; + src: url("myFont.ttf"); +}</pre> + +<p>A continuació pots aplicar el nom de la família del tipus de lletra personalitzada que has especificat en @font-face a qualsevol cosa que vulguis, de la manera habitual:</p> + +<pre class="brush: css notranslate">html { + font-family: "Bitstream Vera Serif Bold", serif; +}</pre> + +<p>La sintaxi es comença a complicar una mica. A continuació hi entrem amb detall.</p> + +<p>Hi ha dues coses importants que cal tenir en compte sobre els tipus de lletra segurs per al web:</p> + +<ol> + <li>Els navegadors admeten diversos formats de tipus de lletra, de manera que necessites diversos formats de tipus de lletra per a atènyer una compatibilitat de navegador decent. Per exemple, la majoria dels navegadors més moderns admeten WOFF / WOFF2 (Web Open Font Format, versions 1 i 2), el format més eficient per a tot, però les versions anteriors d'IE només admeten tipus de lletra EOT (Embedded Open Type), i és possible que hagis d'incloure una versió de tipus de lletra SVG per tenir compatibilitat amb versions anteriors dels navegadors iPhone i Android. A continuació et mostrarem com generar el codi necessari.</li> + <li>Normalment els tipus de lletra no són d’ús lliure. Cal pagar per a fer-los servir o assumir unes condicions de llicència, com ara acreditar el creador del tipus de lletra en el codi (o en el teu lloc web). No hauries de robar els tipus de lletra ni utilitzar-los sense donar-ne el crèdit adequat.</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: Els tipus de lletra web com a tecnologia són compatibles amb Internet Explorer des de la versió 4!</p> +</div> + +<h2 id="Aprenentatge_actiu_Un_exemple_de_tipografia_web">Aprenentatge actiu: Un exemple de tipografia web</h2> + +<p>Tenint en compte això, construïm un exemple bàsic de tipografia web des de zero. És difícil mostrar-ho a partir d’un exemple en viu, de manera que, en lloc d'això, seguirem els passos detallats en les seccions següents, per a tenir una idea del procés.</p> + +<p>Has d'utilitzar els fitxers <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.html">web-font-start.html</a> i <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.css">web-font-start.css</a> com a punt de partida per a afegir el codi (consulta també el codi de l’<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-start.html">exemple en viu</a>). Fes també una còpia d'aquests fitxers en un directori nou al teu ordinador. En el fitxer <code>web-font-start.css</code> hi ha una mica de CSS per tractar el disseny bàsic i la tipografia de l'exemple.</p> + +<h3 id="Buscar_tipus_de_lletra">Buscar tipus de lletra</h3> + +<p>Per a aquest exemple, utilitzarem dos tipografies web, un per als títols d’encapçalament i un per al text del cos (<code>body</code>). Per començar, hem de trobar els fitxers que contenen els tipus de lletra. Els tipus de lletra es creen en estudis de disseny i s'emmagatzemen en diferents formats de fitxer. En general, hi ha tres tipus de llocs web en què pots obtenir tipus de lletra:</p> + +<ul> + <li>Distribuïdors de tipus de lletra gratuït: són llocs web que posen a disposició per a descarregar tipus de lletra gratuïtament (encara que hi pot haver certes condicions de llicència, com ara acreditar el creador del tipus de lletra). Alguns exemples són: <a href="https://www.fontsquirrel.com/">Font Squirrel</a>, <a href="http://www.dafont.com/">dafont</a> i <a href="https://everythingfonts.com/">Everything Fonts</a>.</li> + <li>Distribuïdors de tipus de lletra de pagament: llocs web que posen a disposició tipus de lletra per una quantitat de diners, com <a href="http://www.fonts.com/">fonts.com</a> o <a href="http://www.myfonts.com/">myfonts.com</a>. També pots comprar tipus de lletra directament a creadors de tipus de lletres, per exemple <a href="https://www.linotype.com/">Linotype</a>, <a href="http://www.monotype.com">Monotype</a> o <a href="http://www.exljbris.com/">Exljbris</a>.</li> + <li>Serveis de tipus de lletra en línia: llocs web que emmagatzemen i serveixen tipus de lletra, i que simplifiquen el procés sencer. Consulta’n els detalls en la secció {{anch("Usar un servei de tipografies en línia")}}.</li> +</ul> + +<p>Busquem ara alguns tipus de lletra! Ves a <a href="https://www.fontsquirrel.com/">Font Squirrel</a> i tria dos tipus de lletra, un que et resulti interessant i agradable per als títols (ppotser una bona tipografia tipus "Display" o "Slab Serif"), i un altre una mica menys cridaner i que resulti més llegible, per als paràgrafs. Quan hagis trobat cada tipus, prem el botó de descàrrega i desa el fitxer en el mateix directori que hi ha els fitxers HTML i CSS que has desat abans. No importa si són en format TTF (True Type Fonts) o OTF (Open Type Fonts).</p> + +<p>En cada cas, descomprimeix el paquet amb els tipus de lletra (les tipografies web s’acostumen a distribuir en fitxers ZIP que contenen els fitxers dels tipus de lletra i la informació de la llicència). Pots trobar diversos fitxers de tipus de lletra en el paquet —alguns tipus de lletra es distribueixen com una família, amb diverses variants disponibles, per exemple, fina, seminegreta, negreta, cursiva, cursiva fina, etc. Per a aquest exemple, només cal que et preocupis d'un únic fitxer de tipus de lletra per cada elecció.</p> + +<div class="note"> +<p><strong>Nota</strong>: en la columna de la dreta de la secció «Busca tipus de lletra», pots fer clic en les diverses etiquetes, i classificacions per filtrar les opcions que es mostren.</p> +</div> + +<h3 id="Generació_del_codi_necessari">Generació del codi necessari</h3> + +<p>Ara cal generar el codi necessari (i els formats de tipus de lletra). Per cada tipografia, segueix aquests passos:</p> + +<ol> + <li>Assegura’t que compleixes tots els requisits de llicència si vols fer servir això en un projecte comercial o en el web.</li> + <li>Ves al <a href="https://www.fontsquirrel.com/tools/webfont-generator">Webfont Generator</a> de Font Squirrel.</li> + <li>Carrega els dos fitxers de tipus de lletra amb el botó <em>Upload Fonts</em>.</li> + <li>Marca la casella de verificació amb el text «Sí, els tipus de lletra que carrego són legalment aptes per a la inclusió en el web».</li> + <li>Fes clic a <em>Download your kit</em>.</li> +</ol> + +<p>Un cop el generador ha acabat de processar, has d'obtenir un fitxer ZIP, descarregar-lo i desar-lo al mateix directori que els teus HTML i CSS.</p> + +<h3 id="Implementar_el_codi_a_la_teva_demo">Implementar el codi a la teva demo</h3> + +<p>En aquest punt, has de descomprimir el paquet de fitxers de tipus de lletra segurs per al web que acabes de generar. Dins del directori descomprimit, hi haurà tres elements útils:</p> + +<ul> + <li>Diverses versions de cada tipus de lletra: <code>.eot</code>, <code>.svg</code>, <code>.ttf</code>, <code>.woff</code>, <code>.woff2</code>. Com ja s’ha dit, calen diversos tipus de fitxers de tipus de lletra per a tenir compatibilitat amb els navegadors; aquesta és la manera que té Font Squirrel d’assegurar-se que tens tot el que necessites.</li> + <li>Un fitxer HTML de demostració per a cada font; carrega’l en el teu navegador i observa com es veu el tipus de lletra en diferents contextos d'ús.</li> + <li>Un fitxer <code>stylesheet.css</code> que conté el codi @font-face generat que necessites.</li> +</ul> + +<p>Per a implementar aquests tipus de lletra en el teu exemple de demostració, segueix aquests passos:</p> + +<ol> + <li>Canvia el nom del directori descomprimit per un nom que sigui senzill i fàcil de recordar, com ara <code>fonts</code>.</li> + <li>Obre el fitxer <code>stylesheet.css</code> i copia-hi els blocs <code>@font-face</code> que conté en el teu fitxer <code>web-font-start.css</code>; has de posar-los a dalt de tot, abans de qualsevol bloc de CSS, perquè els tipus de lletra s’han d’importar abans de poder-los utilitzar en el teu lloc web.</li> + <li>Cadascuna de les funcions <code>url()</code> apunta a un fitxer de tipus de lletra que volem importar al nostre CSS; afegeix <code>fonts/</code> al començament de cada ruta (o adapta-ho si cal) per a assegurar-te que les rutes d'accés als fitxers són correctes.</li> + <li>Ara pots utilitzar aquests tipus de lletra en les llistes d’arxius de tipus de lletra, igual que qualsevol tipus de lletra segur per al web o tipus de lletra predeterminat del sistema. Per exemple: + <pre class="brush: css notranslate">font-family: 'zantrokeregular', serif;</pre> + </li> +</ol> + +<p>Has d'acabar amb una pàgina de demostració amb alguns tipus de lletra agradables implementats. Atès que els diferents tipus de lletra es creen amb mides diferents, és possible que hagis d'ajustar la mida, l'espaiat, etc., per a ordenar-ne l'aspecte.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12984/web-font-example.png" style="border-style: solid; border-width: 1px; display: block; margin: 0px auto;"></p> + +<div class="note"> +<p><strong>Nota</strong>: Si tens problemes perquè funcioni, no dubtis de comparar la teva versió amb els nostres fitxers acabats; consulta <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.html">web-font-finished.html</a> i <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-finished.css">web-font-finished.css</a> (<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-finished.html">executa l'exemple acabat en directe</a>).</p> +</div> + +<h2 id="Usar_un_servei_de_tipografies_en_línia">Usar un servei de tipografies en línia</h2> + +<p>Els serveis de tipus de lletra en línia normalment emmagatzemen i serveixen tipus de lletra per tu, de manera que no t’has de preocupar d’escriure el codi <code>@font-face</code>, i generalment només cal que insereixis una o dues línies de codi al teu lloc web perquè tot funcioni. Alguns exemples són: <a href="https://typekit.com/">Typekit</a> i <a href="http://www.typography.com/cloud/welcome/">Cloud.typography</a>. La majoria d'aquests serveis estan basats en subscripcions, amb la notable excepció de <a href="https://www.google.com/fonts">Google Fonts</a>, un útil servei gratuït, especialment per a fer proves ràpides i demostracions d'escriptura.</p> + +<p>La majoria d'aquests serveis són fàcils d'utilitzar, de manera que no hi entrarem amb molt de detall. Vegem ràpidament les fonts de Google, perquè puguis fer-te’n la idea. De nou, fes còpies de <code>web-font-start.html</code> i <code>web-font-start.css</code> com a punt de partida.</p> + +<ol> + <li>Ves a <a href="https://www.google.com/fonts">Google Fonts</a>.</li> + <li>Utilitza els filtres de la banda esquerra per visualitzar els tipus de lletra que vols triar i escull un parell de tipus de lletra.</li> + <li>Per a seleccionar un tipus de lletra, prem el botó <em>Add to Collection</em> que hi ha al costat.</li> + <li>Quan hagis escollit els tipus de lletra, prem el botó <em>Use</em> que hi ha a la part inferior de la pàgina.</li> + <li>A la pantalla resultant, primer has de copiar la línia de codi que es mostra a la secció 3 i enganxar-la al final de tot del teu fitxer HTML. Posa-la per sobre de l'element {{htmlelement("link")}} perquè el tipus de lletra s'importi abans que el teu CSS l’hagi d’utilitzar.</li> + <li>A continuació, has de copiar les declaracions que hi ha en la secció 4 al teu CSS, segons correspongui, per a aplicar els tipus de lletra personalitzats al teu codi HTML.</li> +</ol> + +<div class="note"> +<p><strong>Nota</strong>: Pots trobar una versió completa a <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.html">google-font.html</a> i <a href="https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/google-font.css">google-font.css</a>, si et cal contrastar el teu treball amb el nostre (<a href="http://mdn.github.io/learning-area/css/styling-text/web-fonts/google-font.html">consulta-ho en directe</a>).</p> +</div> + +<h2 id="font-face_amb_més_detall">@font-face amb més detall</h2> + +<p>Explorem la sintaxi <code>@font-face</code> que genera Font Squirrel. Aquest és l’aspecte que presenta un dels blocs:</p> + +<pre class="brush: css notranslate">@font-face { + font-family: 'ciclefina'; + src: url('fonts/cicle_fina-webfont.eot'); + src: url('fonts/cicle_fina-webfont.eot?#iefix') format('embedded-opentype'), + url('fonts/cicle_fina-webfont.woff2') format('woff2'), + url('fonts/cicle_fina-webfont.woff') format('woff'), + url('fonts/cicle_fina-webfont.ttf') format('truetype'), + url('fonts/cicle_fina-webfont.svg#ciclefina') format('svg'); + font-weight: normal; + font-style: normal; +}</pre> + +<p>Això s'anomena «sintaxi a prova de bales @font-face» des d'una publicació de Paul Irish dels inicis, quan <code>@font-face</code> va començar a ser popular (<a href="http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/">Bulletproof @font-face Syntax</a>). Passem a veure què fa:</p> + +<ul> + <li><code>font-family</code>: Aquesta línia especifica el nom amb què et faràs referència al fitxer de tipus de lletra que empraràs. Pots posar-hi qualsevol cosa que t’agradi, sempre que l'utilitzis de manera coherent en tot el teu codi CSS.</li> + <li><code>src</code>: Aquestes línies especifiquen les rutes d'accés als fitxers de tipus de lletra que cal que importis al teu CSS (la part d'URL) i el format de cada fitxer de tipus de lletra (la part <code>format</code>). L'última part en cada cas és opcional, però és útil declarar-la perquè permet als navegadors trobar més ràpidament el tipus de lletra que poden utilitzar. Es poden incloure diverses declaracions, separades per comes; el navegador buscarà entre elles i usarà la primera que trobi que entén; per tant, és millor posar abans formats nous i millors, com WOFF2, i formats més antics i no tan bons, com TTF, després. L'única excepció d’això són les fonts EOT, que es col·loquen en primer lloc per corregir un parell d'errors en les versions anteriors d'IE, que intentarà utilitzar la primera que trobi, fins i tot si no pot utilitzar el tipus de lletra.</li> + <li>{{cssxref("font-weight")}}/{{cssxref("font-style")}}: Aquestes línies especifiquen el gruix del tipus de lletra i si és cursiva o no. Si importes diversos gruixos del mateix tipus de lletra, en pots especificar gruix/estil i, a continuació, utilitzar valors diferents de {{cssxref("font-weight")}}/{{cssxref("font-style")}} per a triar entre ells, en lloc d'haver de cridar tots els membres diferents de la família de tipus de lletra pels diferents noms. <a href="http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/">@font-face tip: define font-weight and font-style to keep your CSS simple</a>, de Roger Johansson, mostra amb més detall què cal fer.</li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: També pots especificar cada valor {{cssxref("font-variant")}} i {{cssxref("font-stretch")}} per als teus tipus de lletra segurs per al web. En els navegadors més nous també pots especificar un valor {{cssxref("unicode-range")}}, que és una gamma de caràcters específica que vols utilitzar a banda del tipus de lletra segur per al web; en els navegadors compatibles amb aquesta propietat, només es descarregaran els caràcters especificats, per a estalviar descàrregues innecessàries. <a href="https://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/">Creating Custom Font Stacks with Unicode-Range</a>, de Drew McLellan, t’ofereix unes idees útils sobre com fer-ne ús.</p> +</div> + +<h2 id="Resum">Resum</h2> + +<p>Ara que has treballat els nostres articles sobre els fonaments d’aplicació d'estil al text, és hora de posar a prova el que has après amb la nostra avaluació per al mòdul, Composició tipogràfica d’una pàgina d’inici per a un lloc web d’una escola de la comunitat.</p> + +<p>{{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}</p> |