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
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
|
---
title: Contingut
slug: Learn/CSS/Howto/Generated_content
tags:
- Basic
- Beginner
- CSS
- CSS Background
- 'CSS:Getting_Started'
- Graphics
- Guide
- NeedsLiveSample
- NeedsUpdate
- Web
translation_of: Learn/CSS/Howto/Generated_content
---
<p>{{ CSSTutorialTOC() }}</p>
<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Color", "Color") }}Aquesta és la 9th 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> descriu algunes formes en què es pot utilitzar CSS per afegir contingut quan es visualitza un document. Modifiqueu la fulla d'estil per afegir el contingut del text i una imatge.</p>
<h2 class="clearLeft" id="Informació_Contingut"><span class="short_text" id="result_box" lang="ca"><span>Informació</span><span>:</span> <span>Contingut</span></span></h2>
<p>Un dels avantatges importants de CSS és que ajuda a separar l'estil d'un document, del seu contingut. No obstant això, hi ha situacions en què té sentit especificar certs continguts com a part de la fulla d'estil, no com a part del document.</p>
<p>El contingut especificat en una fulla d'estil pot constar de text o imatges. S'especifica el contingut de la fulla d'estils quan el contingut està estretament lligat a l'estructura del document.</p>
<div class="tuto_details">
<div class="tuto_type">Més detalls</div>
<p>Especificar el contingut d'una fulla d'estil pot causar complicacions. Per exemple, es poden tenir diferents versions d'idioma del document que comparteix una fulla d'estil. Si una part de la fulla d'estil ha de ser traduït, vol dir que heu de posar parts de la fulla d'estil en arxius separats i encarregar-se de fer els vincles amb la versió d'idioma adequat a cada document.</p>
<p>Aquestes complicacions no sorgeixen si el contingut que especifiqueu consisteix en símbols o imatges que s'apliquen en tots els idiomes i cultures.</p>
<p>El contingut especificat en una fulla d'estil no es converteixi en part del DOM.</p>
</div>
<h3 id="Text_content" name="Text_content"><span id="result_box" lang="ca"><span>Contingut de</span> <span>text</span></span></h3>
<p>CSS pot inserir el contingut de text abans o després d'un element. Per especificar això, fer una regla i afegir {{ cssxref("::before") }} o {{ cssxref("::after") }} al selector. En la declaració, especificar la propietat {{ cssxref("content") }} amb el contingut de text com el seu valor.</p>
<div class="tuto_example">
<div class="tuto_type">Exemple</div>
<h4 id="HTML">HTML</h4>
<pre class="brush: html">A text where I need to <span class="ref">something</span>
</pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css">.ref::before {
font-weight: bold;
color: navy;
content: "Reference: ";
}</pre>
<h4 id="Sortida">Sortida</h4>
<p>{{ EmbedLiveSample('Text_content', 600, 30) }}</p>
</div>
<div class="tuto_details">
<div class="tuto_type">Més detalls</div>
<p>El joc de caràcters d'una fulla d'estil és UTF-8 per defecte, però es pot especificar a l'enllaç, en la pròpia fulla d'estil o d'altres maneres. Per a més detalls, veure <a href="http://www.w3.org/TR/CSS21/syndata.html#q23">4.4 representació de fulles d'estil CSS</a> en l'especificació CSS.</p>
<p>Els caràcters individuals també poden ser especificats per un mecanisme d'escapament que utilitza la barra invertida com a caràcter d'escapament. Per exemple, \ 265B és el símbol d'escacs per a una reina negre ♛. Per a més detalls, vegeu <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q24">Referència a caràcters que no estan representats en una codificació de caràcters</a> i també <a class="external" href="http://www.w3.org/TR/CSS21/syndata.html#q6">Caràcters i suposats</a> en l'especificació CSS.</p>
</div>
<h3 id="Contingut_d'image">Contingut d'image</h3>
<p>Per afegir una imatge abans o després d'un element, especifiqueu l'adreça URL d'un fitxer d'imatge en el valor de la propietat {{ cssxref("content") }}.</p>
<div class="tuto_example">
<div class="tuto_type">Exemple</div>
<p>Aquesta regla afegeix un espai i una icona després de cada vincle que té la classe <code>glossari</code>:</p>
<pre class="brush:css">a.glossary:after {content: " " url("../images/glossary-icon.gif");}
</pre>
</div>
<p>Per afegir una imatge com a fons d'un element, introduïu l'adreça URL d'un fitxer d'imatge en el valor de la propietat {{ cssxref("background") }}. Aquesta és una propietat abreujada que especifica el color de fons, la imatge, com la imatge es repeteix i alguns altres detalls.</p>
<div class="tuto_example">
<div class="tuto_type">Exemple</div>
<p>Aquesta norma estableix el fons d'un element específic, utilitzant una URL per especificar un fitxer d'imatge.</p>
<p>El selector especifica el <code>id</code> de l'element. El valor <code>no-repeat</code> fa que la imatge aparegui una sola vegada:</p>
<pre class="brush:css">#sidebar-box {background: url("../images/sidebar-ground.png") no-repeat;}
</pre>
</div>
<div class="tuto_details">
<div class="tuto_type">Més detalls</div>
<p>Per obtenir informació sobre les propietats individuals que afecten els fons, i sobre altres opcions quan s'especifican imatges de fons, veure la pàgina de referència {{ cssxref("background") }}.</p>
</div>
<h2 id="Acció_Afegir_una_imatge_de_fons">Acció: Afegir una imatge de fons</h2>
<p>Aquesta imatge és un quadrat blanc amb una línia blava a la part inferior:</p>
<table style="border: 2px solid #cccccc;">
<tbody>
<tr>
<td><img alt="Image:Blue-rule.png" class="internal" src="https://mdn.mozillademos.org/files/160/Blue-rule.png"></td>
</tr>
</tbody>
</table>
<ol>
<li>Descarregueu l'arxiu d'imatge en el mateix directori que el fitxer CSS. (Per exemple, feu-hi clic per obtenir un menú de context, a continuació, selecciona Desar imatge com i especifiqueu el directori que utilitzeu per aquest tutorial.)</li>
<li>Editeu l'arxiu CSS i afegiu aquesta regla al cos, establint una imatge de fons per tota la pàgina.
<pre class="brush:css">background: url("Blue-rule.png");
</pre>
<p>El valor de <code>repeat</code> és el valor per defecte, de manera que no necessita ser especificat. La imatge es repeteix horitzontal i verticalment, donant una aparença com de paper pautat:</p>
<div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;">
<p style="margin: 0px;"><img alt="Image:Blue-rule-ground.png" class="internal" src="https://mdn.mozillademos.org/files/161/Blue-rule-ground.png"></p>
<div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;">
<div style="font-style: italic; width: 24em;">
<p><strong style="background-color: #ddddff; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddddff; color: green; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddddff; color: green; font: 200% serif;">S</strong>heets</p>
</div>
<div style="font-style: normal; padding-top: 2px; height: 8em;">
<p><strong style="background-color: #ddddff; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddddff; color: red; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddddff; color: red; font: 200% serif;">S</strong>heets</p>
</div>
</div>
</div>
</li>
</ol>
<div class="tuto_example">
<div class="tuto_type">Repte</div>
<p>Descarregueu aquesta imatge:</p>
<table style="border: 2px solid #cccccc;">
<tbody>
<tr>
<td><img alt="Image:Yellow-pin.png" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"></td>
</tr>
</tbody>
</table>
<p>Afegiu una regla a la fulla d'estils perquè mostri la imatge al començament de cada línia:</p>
<div style="position: relative; width: 24em; height: 11em; border: 2px outset #36b; overflow: hidden;">
<p style="margin: 0px;"><img alt="Image:Blue-rule-ground.png" class="internal" src="https://mdn.mozillademos.org/files/161/Blue-rule-ground.png"></p>
<div style="position: absolute; top: 0px; left: 0px; border: none; margin: 0px; padding: .5em 0px 0px 1em; font: 16px 'Comic Sams MS', cursive; color: blue; background-color: transparent;">
<div style="font-style: italic; width: 24em; padding-top: 8px;"><img alt="image:Yellow-pin.png" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"> <strong style="background-color: #ddddff; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddddff; color: green; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddddff; color: green; font: 200% serif;">S</strong>heets</div>
<div style="font-style: normal; padding-top: 12px; height: 8em;"><img alt="image:Yellow-pin.png" class="internal" src="https://mdn.mozillademos.org/files/924/Yellow-pin.png"> <strong style="background-color: #ddddff; color: red; font: 200% serif;">C</strong>ascading <strong style="background-color: #ddddff; color: red; font: 200% serif;">S</strong>tyle <strong style="background-color: #ddddff; color: red; font: 200% serif;">S</strong>heets</div>
</div>
</div>
<div class="tuto_details" id="tutochallenge">
<div class="tuto_type">Possible solution</div>
<p>Add this rule to your stylesheet:</p>
<pre class="brush: css">p:before{
content: url("yellow-pin.png");
}
</pre>
<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/Lists", "Llistes") }}Una forma comuna d'afegir contingut a les fulles d'estil és marcar elements en les llistes. La següent secció descriu com especificar l'estil d'elements de llista.</p>
|
