Lección 5: Texto
Formatear y añadir estilo al texto es un tema clave para cualquier diseñador web. En esta lección presentaremos las increíbles oportunidades que ofrece CSS a la hora de añadir presentación al texto. Describiremos las siguientes propiedades:
text-indent
text-align
text-decoration
letter-spacing
text-transform
Sangría del texto [text-indent]
La propiedad text-indent permite añadir un toque de elegancia a los párrafos de texto al aplicar sangría a la primera línea de dicho párrafo. En el ejemplo siguiente se ha aplicado una sangía de 30px a todos los párrafos de texto marcados con la etiqueta <p>:
p { text-indent: 30px; }
Ver ejemplo
Alineación del texto [text-align]
La propiedad CSS text-align es el equivalente al atributo align usado en versiones anteriores de HTML. Los valores posibles de esta propiedad son: left (texto alineado a la izquierda), right (texto alineado a la derecha) o center (texto con alineación centrada). Además, el valor justify(alineación justificada) alargará cada línea de forma que los márgenes izquierdo y derecho estén justificados. Esta tipo de presentación la habrás visto, por ejemplo, en periódicos y revistas.
En el ejemplo que sigue, el texto de los encabezados de la tabla, <th>, se ha alineado a la derecha, mientras que los datos de la tabla, <td>, aparecen centrados. Además, los párrafos de texto normales están justificados:
th {
text-align: right;
}
td {
text-align: center;
}
p {
text-align: justify;
}
Ver ejemplo
Decoración del texto [text-decoration]
La propiedad text-decoration permite añadir diferentes "decoraciones" o "efectos" al texto. Por ejemplo, se puede subrayar el texto, tacharlo o ponerle un subrayado superior. En el ejemplo siguiente, el elemento <h1>aparecerá subrayado, el elemento <h2> aparecerá con un subrayado por encima del texto y el elemento <h3> tendrá el texto tachado.
h1 {
text-decoration: underline;
}
h2 {
text-decoration: overline;
}
h3 {
text-decoration: line-through;
}
Ver ejemplo
Espaciado entre caracteres [letter-spacing]
El espaciado entre los caracteres de texto se puede especificar usando la propiedad letter-spacing. El valor de esta propiedad corresponde, sencillamente, al ancho deseado. Por ejemplo, si queremos un espaciado de 3px entre los caracteres de un párrafo de texto <p> y6px entre los caracteres de los encabezados <h1>, usaríamos el siguiente código:
h1 {
letter-spacing: 6px;
}
p {
letter-spacing: 3px;
}
Ver ejemplo
Transformación del texto [text-transform]
La propiedad text-transform controla la escritura en mayúsculas de un texto. Puedes elegir entre los valores capitalize, uppercase olowercase, sin importar cómo aparece el texto original en el código HTML.
Un ejemplo podría ser la palabra "título" que se puede presentar al usuario como "TÍTULO" o "Título". A continuación ofrecemos una explicación de los valores de la propiedadtext-transform mencionados en el párrafo anterior:
capitalize
Pone en mayúscula la primera letra de cada palabra. Por ejemplo, "john doe" aparecerá como "John Doe".
uppercase
Convierte todas las letras a mayúscula. Por ejemplo, "john doe" aparecerá como "JOHN DOE".
lowercase
Convierte todas las letras a minúscula. Por ejemplo, "JOHN DOE" aparecerá como "john doe".
none
No se realiza transformación alguna; el texto se presenta tal como aparece en el cógido HTML.
Como ejemplo, usaremos una lista de nombres. Todos los nombres están marcados con la etiqueta <li> (de "list element", es decir, elemento de lista). Supongamos que queremos que las iniciales de los nombres aparezcan en mayúscula y los títulos con todos los caracteres en mayúscula.
Échale un vistazo al código fuente del ejemplo y verás que el texto aparece realmente en minúscula.
h1 {
text-transform: uppercase;
}
li {
text-transform: capitalize;
}
Ver ejemplo
Resumen
En las tres últimas lecciones has aprendido varias propiedades CSS, pero todavía te queda mucho más que aprender de CSS. En la lección siguiente examinaremos los enlaces.