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
|
---
title: Usando CSS para generar contenido
slug: Learn/CSS/Sábercomo/Generated_content
tags:
- CSS
- Fundamentos
- Guía
- Principiante
- Web
- graficos
translation_of: Learn/CSS/Howto/Generated_content
---
<p>{{ CSSTutorialTOC() }}</p>
<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Color", "Color") }}Esta es la 9ª sección del tutorial CSS Getting Started; Describe algunas formas en las que puede utilizar CSS para agregar contenido cuando se muestra un documento. Modifica su hoja de estilo para agregar contenido de texto y una imagen.</p>
<h2 class="clearLeft" id="Informacion_Contenido">Informacion: Contenido</h2>
<p>Una de las ventajas importantes de CSS es que le ayuda a separar el estilo de un documento de su contenido. Sin embargo, hay situaciones en las que tiene sentido especificar cierto contenido como parte de la hoja de estilo, no como parte del documento.</p>
<p>El contenido especificado en una hoja de estilo puede consistir en texto o imágenes. Especifica el contenido de su hoja de estilos cuando el contenido está estrechamente vinculado a la estructura del documento.</p>
<div class="tuto_details">
<div class="tuto_type">
<p>Más detalles</p>
<p>Especificar contenido en una hoja de estilo puede causar complicaciones. Por ejemplo, es posible que tenga versiones de idioma diferentes de su documento que comparten una hoja de estilo. Si parte de la hoja de estilo tiene que ser traducida, significa que debe colocar las partes de la hoja de estilos en archivos separados y organizar para que se vincule con las versiones de idioma adecuado de su documento.</p>
<p>Estas complicaciones no surgen si el contenido especificado incluye símbolos o imágenes que se aplican en todos los idiomas y culturas.</p>
<p>El contenido especificado en una hoja de estilo no se convierte en parte del DOM.</p>
</div>
</div>
<h3 id="Text_content" name="Text_content">Texto contenido</h3>
<p>CSS puede insertar contenido de texto antes o después de un elemento. Para especificar esto, haga una regla y agregue {{cssxref (':: before')}} o {{cssxref (':: after')}} al selector. En la declaración, especifique la propiedad {{cssxref ('content')}} con el contenido de texto como su valor.</p>
<div class="tuto_example">
<div class="tuto_type">Ejemplo</div>
<h4 id="HTML">HTML</h4>
<pre class="brush: html">Un texto donde necesito <span class="ref">alguna cosa</span>
</pre>
<h4 id="CSS">CSS</h4>
<pre class="brush: css">.ref::before {
font-weight: negrita;
color: navy;
content: "Reference: ";
}</pre>
<h4 id="Output">Output</h4>
<p>{{ EmbedLiveSample('Text_content', 600, 30) }}</p>
</div>
<div class="tuto_details">
<div class="tuto_type">Mas detalles</div>
<p>El conjunto de caracteres de una hoja de estilo es UTF-8 de forma predeterminada, pero se puede especificar en el vínculo o en la hoja de estilos o en otras formas. Para obtener más información, consulte 4. 4 Representación de hoja de estilo CSS en la especificación CSS.</p>
<p>Los caracteres individuales también se pueden especificar mediante un mecanismo de escape que utiliza la barra invertida como el carácter de escape. Por ejemplo, \ 265B es el símbolo del ajedrez para una reina negra ♛. Para obtener más información, consulte Referencia a caracteres no representados en una codificación de caracteres y también Caracteres y caso en la Especificación CSS.</p>
</div>
<h3 id="Imagen_contenido">Imagen contenido</h3>
<p>Para agregar una imagen antes o después de un elemento, puede especificar la URL de un archivo de imagen en el valor de la propiedad {{cssxref ('content')}}.</p>
<div class="tuto_example">
<div class="tuto_type">Ejemplo</div>
<p>Esta regla añade un espacio y un icono después de cada enlace que tiene el glosario de clases:</p>
<pre class="brush:css">a.glossary:after {content: " " url("../images/glossary-icon.gif");}
</pre>
</div>
<p>Para agregar una imagen como fondo de un elemento, especifique la URL de un archivo de imagen en el valor de la propiedad {{cssxref ('background')}}. Esta es una propiedad abreviada que especifica el color de fondo, la imagen, cómo se repite la imagen y algunos otros detalles.</p>
<div class="tuto_example">
<div class="tuto_type">Ejemplo</div>
<p>Esta regla establece el fondo de un elemento específico, utilizando una URL para especificar un archivo de imagen.</p>
<p>El selector especifica el id del elemento. El valor no-repeat hace que la imagen aparezca sólo una vez:</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">Mas detalles</div>
<p>Para obtener información sobre las propiedades individuales que afectan a los fondos y sobre otras opciones al especificar imágenes de fondo, consulte {{Cssxref ('fondo')}}, página de referencia.</p>
</div>
<h2 id="Acción_Añadir_una_imagen_de_fondo">Acción: Añadir una imagen de fondo</h2>
<p>Esta imagen es un cuadrado blanco con una línea azul en la parte 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>Descargue el archivo de imagen en el mismo directorio que su archivo CSS. (Por ejemplo, haga clic con el botón derecho del ratón para obtener un menú contextual y, a continuación, seleccione Guardar imagen como y especifique el directorio que está utilizando para este tutorial).</li>
<li>Edit your CSS file and add this rule to the body, setting a background image for the entire page.</li>
<li>
<pre class="brush:css">background: url("Blue-rule.png");
</pre>
<p>La repetición de valor es la predeterminada, por lo que no es necesario especificarla. La imagen se repite horizontal y verticalmente, dando una apariencia como papel de escribir forrado:</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">Reto</div>
<p>Descarga esta imagen:</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>Agrega una nueva regla a tu hoja de estilos, luego, agrega la imagen al inicio de cada linea:</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">Ver la solución a este reto.</a></div>
<h2 id="Qué_sigue">Qué sigue?</h2>
<p>{{ nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Lists", "Lists") }}Una forma común en que las hojas de estilos agregan contenido es marcando los elementos en las listas. La siguiente sección describe cómo <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Lists" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Lists">especificar estilos para una lista de elementos.</a></p>
|
