1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
|
---
title: Estils de text
slug: Web/Guide/CSS/Inici_en_CSS/Estils_de_text
tags:
- Beginner
- CSS
- CSS Fonts
- 'CSS:Getting_Started'
- Guide
- NeedsBeginnerUpdate
- NeedsLiveSample
- NeedsUpdate
- Web
translation_of: Learn/CSS/Styling_text/Fundamentals
translation_of_original: Web/Guide/CSS/Getting_started/Text_styles
---
<p>{{ CSSTutorialTOC() }}</p>
<p>{{previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "CSS llegible")}} Aquesta és la 7th secció del tutorial<span class="seoSummary"> <a href="/en-US/docs/Web/Guide/CSS/Getting_Started" title="en-US/docs/Web/Guide/CSS/Getting Started">CSS Getting Started</a>; </span>es donen més exemples d'estils de text. Modifiqueu la fulla d'estil d'exemple per utilitzar diferents fonts.</p>
<h2 class="clearLeft" id="Informació_Estils_de_text"><span class="short_text" id="result_box" lang="ca"><span class="alt-edited">Informació: Estils de text </span></span></h2>
<p>CSS té diverses propietats d'estil de text.</p>
<p>Hi ha una propietat abreujada convenient, {{ cssxref("font") }}, que podeu utilitzar per especificar diversos aspectes alhora, per exemple:</p>
<ul>
<li>Negreta (Bold), Cursiva (Italic) i Majúscula petita (small-caps) (versaleta)</li>
<li>Mida (Size)</li>
<li><span id="result_box" lang="ca"><span>alçada de la</span> <span>línia</span></span> (Line height)</li>
<li><span id="result_box" lang="ca"><span>Tipus de</span> <span>lletra</span></span> (Font typeface)</li>
</ul>
<div class="tuto_example">
<div class="tuto_type">Exemple</div>
<pre class="brush:css">p {
font: italic 75%/125% "Comic Sans MS", cursive;
}
</pre>
<p>Aquesta regla estableix diverses propietats de la font, fent tots els paràgrafs en cursiva.</p>
<p>La mida de la font s'estableix en les tres quartes parts de la mida d'element pare de cada paràgraf, i l'alçada de la línia s'estableix en 125% (una mica més separats del normal).</p>
<p>El tipus de lletra s'estableix en la Comic Sans MS, però si aquest tipus de lletra no està disponible, el navegador farà ús del seu tipus de lletra cursiva per defecte (escrit a mà).</p>
<p>La regla té l'efecte secundari de desactivar negreta i small-caps (establint el seu valor a <code>normal</code>).</p>
</div>
<h3 id="Tipus_de_fonts">Tipus de fonts</h3>
<p>No es pot predir que tipus de lletra tindran els lectors del vostre document . Quan especifiqueu tipus de lletra de font, és una bona idea proporcionar una llista d'alternatives en ordre de preferència.</p>
<p>Acabar la llista amb un dels tipus de lletra per defecte incorporats: <code>serif</code>, <code>sans-serif</code>, <code>cursive</code>, <code>fantasy</code> o <code>monospace</code>.</p>
<p>Si el tipus de lletra no és compatible amb algunes característiques en el document, el navegador pot substituir per un tipus de lletra diferent. Per exemple, el document pot contenir caràcters especials que el tipus de lletra no admet. Si el navegador pot trobar un altre tipus de lletra que té aquests caràcters, llavors farà servir un altre tipus de lletra.</p>
<p>Per especificar un tipus de lletra, utilitzar la propietat {{ cssxref("font-family") }}.</p>
<h3 id="Les_mides_de_la_font">Les mides de la font</h3>
<p>Els usuaris del navegador poden anul·lar les mides de font per defecte o canviar la mida de text mentre llegeixen una pàgina, pel que té sentit el que utilitzeu mides relatives on es pugui.</p>
<p>Podeu utilitzar alguns valors incorporats per mides de font, com <code>small</code>, <code>medium</code> i <code>large</code>. També podeu utilitzar valors relatius a la mida de font de l'element pare com: <code>smaller</code>, <code>larger</code>, <code>150%</code> o <code>1.5em</code>. Un "em" és equivalent a l'amplada de la lletra "m" (per la mida de font de l'element pare); per tant 1.5em és una vegada i mitja la mida de la font de l'element pare.</p>
<p>Si cal, podeu especificar una mida real com: <code>14px</code> (14 píxels) per a un dispositiu de visualització o 14pt (14 punts) per a una impressora. Això no és accessible per als usuaris amb discapacitat visual, ja que no els permet canviar la mida. Una estratègia més accessible és establir un valor incorporat com a mitjà en un element de nivell superior del document i, a continuació establir les mides relatives de tots els seus elements descendents.</p>
<p>Per especificar una mida de font, utilitzar la propietat {{ cssxref("font-size") }}.</p>
<h3 id="Alçada_de_la_línia"><span class="short_text" id="result_box" lang="ca"><span>Alçada de la</span> <span>línia</span></span></h3>
<p><span id="result_box" lang="ca"><span>L'alçada de la</span> <span>línia especifica</span> <span>l'espaiat</span> <span>entre línies.</span> <span>Si</span> <span>el document</span> <span>té els</span> <span>paràgrafs</span> <span>llargs</span> <span>amb</span> <span>moltes</span> <span>línies, una</span> <span>separació</span> <span>més</span> <span>gran del normal</span> <span>fa que</span> <span>sigui</span> <span>més</span> <span>fàcil</span> <span>de llegir,</span> <span>especialment si</span> <span>la mida de la</span> <span>font</span> <span>és petita.</span></span></p>
<p>Per especificar <span class="short_text" id="result_box" lang="ca"><span>l'alçada de la</span> <span>línia</span></span>, utilitzar la propietat {{ cssxref("line-height") }}.</p>
<h3 id="Decoració">Decoració</h3>
<p>A part de la propietat {{ cssxref("text-decoration") }} podeu especificar altres estils, com el <code>subratllat(underline)</code> o <code>ratllat(line-through)</code>. Podeu configurar-ho a <code>none</code> per eliminar explícitament qualsevol decoració.</p>
<h3 id="Altres_propietats">Altres propietats</h3>
<p><span class="short_text" id="result_box" lang="ca"><span>Per especificar</span> <span>cursiva, utilitzar</span></span> <code>{{ cssxref("font-style") }}: italic;</code><br>
<span class="short_text" id="result_box" lang="ca"><span>Per especificar</span> <span>negreta</span></span> , <span class="short_text" id="result_box" lang="ca"><span>utilitzar</span></span> <code>{{ cssxref("font-weight") }}: bold;</code><br>
<span class="short_text" id="result_box" lang="ca"><span>Per especificar</span></span> majúscules petites , utilitzar <code>{{ cssxref("font-variant") }}: small-caps;</code></p>
<p>Per desactivar qualsevol d'ells individualment, especificar el valor <code>normal</code> o <code>inherit</code>.</p>
<div class="tuto_details">
<div class="tuto_type">Mé detalls</div>
<p>Podeu especificar els estils de text d'altres maneres variades.</p>
<p>Per exemple, algunes de les propietats esmentades aquí tenen altres valors que podeu utilitzar.</p>
<p>En una fulla d'estil complexa, eviteu l'ús de la propietat de font abreujada, causa efectes secundaris (reposició d'altres propietats individuals).</p>
<p>Per a més detalls de les propietats que es relacionen amb les fonts, vegeu <a class="external" href="http://www.w3.org/TR/CSS21/fonts.html">Fonts</a> en l'especificació CSS. Per a més detalls de decoració del text, vegeu <a class="external" href="http://www.w3.org/TR/CSS21/text.html">Text</a>.</p>
<p>Si no voleu dependre dels tipus de lletra instal·lats en els sistemes dels usuaris, podeu utilitzar {{ cssxref("@font-face") }} per especificar una font en línia. No obstant això, requereix que els usuaris tinguin un navegador compatible amb aquesta regla.</p>
</div>
<h2 id="Acció_Especificació_de_les_fonts"><span class="short_text" id="result_box" lang="ca"><span>Acció</span><span>:</span> <span>Especificació</span> <span>de les</span> <span>fonts</span></span></h2>
<p>Per a un document senzill, es pot establir la font de l'element {{ HTMLElement("body") }} i la resta del document hereta la configuració.</p>
<ol>
<li>Editeu l'arxiu CSS.</li>
<li>Afegiu la següent regla per canviar el tipus de lletra en tot el document. La part superior de l'arxiu CSS és un lloc lògic per a ell, però té el mateix efecte allà on ho posis:
<pre class="eval">body {
font: 16px "Comic Sans MS", cursive;
}
</pre>
</li>
<li>Afegiu un comentari explicant la regla, i afegiu espai en blanc per a que coincideixi amb el vostre disseny preferit.</li>
<li>Deseu el fitxer i actualitzeu el navegador per veure l'efecte. Si el sistema té Comic Sans MS, o una altra font cursiva que no suporta cursiva, l'explorador tria un tipus de lletra diferent per al text en cursiva en la primera línia::
<table style="border: 2px outset #3366bb; padding: 1em;">
<tbody>
<tr>
<td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
</tr>
<tr>
<td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
</tr>
</tbody>
</table>
</li>
<li>Des de la barra de menú del navegador, seleccioneu <strong>View > Text Size > Increase</strong> (o <strong>View > Zoom > Zoom In</strong>). Tot i que heu especificat 16 píxels en l'estil, un usuari en llegir el document pot canviar la mida.</li>
</ol>
<div class="tuto_example">
<div class="tuto_type">Repte</div>
<p>Sense canviar res més, fer que totes les sis lletres inicials sigui dues vegades la mida de la font serif per defecte en el navegador:</p>
<table>
<tbody>
<tr>
<td style="font: italic 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: green; font: 200% serif;">S</strong>tyle <strong style="color: green; font: 200% serif;">S</strong>heets</td>
</tr>
<tr>
<td style="font: 16px 'Comic Sans MS', cursive; color: blue;"><strong style="color: red; font: 200% serif;">C</strong>ascading <strong style="color: red; font: 200% serif;">S</strong>tyle <strong style="color: red; font: 200% serif;">S</strong>heets</td>
</tr>
</tbody>
</table>
<div class="tuto_details" id="tutochallenge">
<div class="tuto_type">Possible solution</div>
<p>Add the following style declaration to the <code>strong</code> rule:</p>
<pre class="brush: css"> font: 200% serif;
</pre>
If you use separate declarations for <code>font-size</code> and <code>font-family</code>, then the <code>font-style</code> setting on the first paragraph is <em>not</em> overridden.
<p> </p>
<a class="hideAnswer" href="#challenge">Hide solution</a></div>
<a href="#tutochallenge" title="Display a possible solution for the challenge">Veure la solució per el repte.</a></div>
<h2 id="I_ara_què">I ara què?</h2>
<p>{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Color", "Color")}}El document d'exemple utilitza diversos colors amb nom. En la següent secció s'enumeren els noms dels colors estàndard i s'explica com es poden especificar altres.</p>
|
