Etiqueta span para fragmentos de texto en HTML
Ya sabes que para hacer
un fragmento de texto, por ejemplo, en negrita
- debes usar la etiqueta b. Sin embargo,
¿qué hacer si quiero colorear un fragmento
de texto en rojo? Para ese caso
no existe una etiqueta similar a b.
Pero existe una etiqueta especial span
- por sí sola no hace absolutamente nada,
pero se le pueden aplicar estilos CSS que
nos permitirán agregar el efecto deseado a un fragmento
de texto.
Veamos un ejemplo. Supongamos que tenemos algún texto:
<p>
This is a paragraph with text.
</p>
Supongamos que queremos poner la palabra "texto" en rojo.
Para ello, envolveremos este fragmento de texto en la etiqueta
span y le daremos a esta etiqueta
alguna clase:
<p>
This is a paragraph with <span class="red">text</span>.
</p>
Y ahora coloreemos el elemento con esta clase en rojo:
.red {
color: red;
}
Dado el siguiente código:
<p>
Lorem ipsum <span class="xxx">dolor sit</span> amet.
</p>
<p>
<span class="xxx">Lorem ipsum</span> dolor sit amet.
</p>
Haga que los elementos con la clase xxx tengan un tamaño
de 30px.