Teoría
Teoría

La etiqueta básica para texto: span

Al dar formato al texto con CSS, la etiqueta <span> es una de las más usadas. Representa «un simple fragmento de texto». Es decir, por sí sola no tiene un significado especial. Además, esta etiqueta no cambia la manera en que se muestra el texto.

Sin embargo, se le puede dar un significado adicional mediante clases. Por ejemplo:

<span class="error"></span>
<span class="ok"></span>

Después, con CSS, se definen estilos para la clase y así cambia su presentación.

index.html
style.css

HTML

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>La etiqueta básica para texto: span</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Mejora progresiva</h1> <p>No se puede <span class="example">hablar sin más</span> de Progressive Enhancement sin mencionar Graceful Degradation. Entonces, ¿cuál es la diferencia entre estos conceptos? Como ya se comentó en un artículo anterior, Graceful Degradation puede entenderse como tolerancia a fallos.</p> <p>Es un concepto muy amplio, pero en el contexto web puede entenderse como la tolerancia a fallos de las interfaces del lado del cliente, del lado del servidor y de otros elementos similares. En esta lección, Graceful Degradation se entenderá como la tolerancia a fallos de las interfaces web del lado del cliente.</p> </body> </html>

CSS

.important { font-weight: bold; font-style: italic; } .note { font-size: 0.8em; color: #999999; } .error { text-decoration: line-through; color: red; }

ObjetivosRealizado

Usa en el texto etiquetas <span> con las siguientes clases:

important,
note,
error.