Saltar la navegación

3.5.3.- Propiedades de texto.

En el apartado anterior vimos los atributos relacionados con las fuentes y en este vamos a ver los relacionados con el texto en sí y son los siguientes:

Elemento Descripción
text-decoration Establece si el texto está subrayado, sobrerayado o tachado. los valores que puede tomar son: none, underline, overline, line-through o blink
text-align Indica la alineación del texto. Aunque las hojas de estilo permiten el justificado de texto no funciona en todos los sistemas. Los valores que puede tomar son: left, right, center o justify
text-indent Determina la tabulación del texto. Los valores que toma son una longitud, en unidades CSS, o un porcentaje de la establecida.
text-transform Nos permite transformar el texto, haciendo que tenga la primera letra en mayúsculas de todas las palabras, todo en mayúsculas o minúsculas. Los valores que puede tomar son: capitalize, uppercase, lowercase o none
word-spacing Determina el espaciado entre las palabras. Los valores que puede tomar es un tamaño.
letter-spacing Determina el espaciado entre letras. Los valores que puede tomar es un tamaño.
vertical-align Establece la alineación vertical del texto. Sus valores posibles son: baseline, sub, super, top, text-top, middle, bottom, text-bottom o un porcentaje.
line-height Altura de la línea. Puede establecerse mediante un tamaño o un porcentaje

 

Un ejemplo de un documento XHTML en el que se utiliza este método para incluir formatos es:

<!DOCTYPE html>
<html>
    <head>
        <title>Ejemplo de atributos CSS de texto</title>
        <style type="text/css">
            h3 { text-decoration:underline; text-align: center; text-transform: capitalize }
            p { text-indent: 50%;  }
        </style>
    </head>
     <body>
        <h3>Ejemplo del uso de atributos de texto</h3>
        <p>El texto de del encabezado de tercer nivel est&aacute; subrayado, centrado y la primera letra de cada palabra es may&uacute;cula.</p> 
        <p>El p&aacute;rrafo está tabulado</p>
    </body>
</html>

Su aspecto en el navegador es el siguiente:

Ilustración de cómo se visualiza en un navegador web el ejemplo CSS con Propiedades de Texto.
Materiales educativos de la CAM (Uso educativo NC)