viernes, 8 de mayo de 2015

Css: Modificando los párrafos

Con CSS podemos modificar varios atributos de los párrafos, como el espacio entre caractéres o las tabulaciones.

El siguiente es el texto que usaré de prueba, sin ningún atributo aplicado:

Aunque el uso habitual de un texto como éste es describir las características de la obra, por una vez nos tomaremos la libertad de hacer una excepción a la norma establecida. No sólo porque el libro que tienes en tus manos es muy difícil de definir, sino porque estamos convencidos de que explicar su contenido estropearía la experiencia de la lectura.


Espaciado

  • line-height: establece la distancia entre líneas de texto. Para el valor por defecto, usar line-height: normal
<div style="line-height: 10px;">texto</div>
Aunque el uso habitual de un texto como éste es describir las características de la obra, por una vez nos tomaremos la libertad de hacer una excepción a la norma establecida. No sólo porque el libro que tienes en tus manos es muy difícil de definir, sino porque estamos convencidos de que explicar su contenido estropearía la experiencia de la lectura.

<div style="line-height: 1.9;">texto</div>
Aunque el uso habitual de un texto como éste es describir las características de la obra, por una vez nos tomaremos la libertad de hacer una excepción a la norma establecida. No sólo porque el libro que tienes en tus manos es muy difícil de definir, sino porque estamos convencidos de que explicar su contenido estropearía la experiencia de la lectura.


  • letter-spacing: establece la distancia entre los caracteres de un texto.
<div style="letter-spacing: -1px;">texto</div>
Aunque el uso habitual de un texto como éste es describir las características de la obra, por una vez nos tomaremos la libertad de hacer una excepción a la norma establecida. No sólo porque el libro que tienes en tus manos es muy difícil de definir, sino porque estamos convencidos de que explicar su contenido estropearía la experiencia de la lectura.

<div style="letter-spacing: 4px;">texto</div>
Aunque el uso habitual de un texto como éste es describir las características de la obra, por una vez nos tomaremos la libertad de hacer una excepción a la norma establecida. No sólo porque el libro que tienes en tus manos es muy difícil de definir, sino porque estamos convencidos de que explicar su contenido estropearía la experiencia de la lectura.


  • word-spacing: establece el espacio entre palabras.
<div style="word-spacing: 1em;">texto</div>
Aunque el uso habitual de un texto como éste es describir las características de la obra, por una vez nos tomaremos la libertad de hacer una excepción a la norma establecida. No sólo porque el libro que tienes en tus manos es muy difícil de definir, sino porque estamos convencidos de que explicar su contenido estropearía la experiencia de la lectura.


Mayúsculas y Minúsculas

  • text-transform: cambiar las letras entre mayúsculas y minúsculas. Los valores permitidos son:
    • none: no hay modificación
    • capitalize: coloca la primera letra de cada palabra en mayúscula
    • uppercase: coloca todas las letras en mayúsculas
    • lowercase: coloca todas las letras en minúsculas

<div style="text-transform: none;">texto</div>
Lejos y entre los árboles de la intrincada selva, ¿no ves algo que brilla y llora? Es una estrella.

<div style="text-transform: capitalize;">texto</div>
Lejos y entre los árboles de la intrincada selva, ¿no ves algo que brilla y llora? Es una estrella.

<div style="text-transform: uppercase;">texto</div>
Lejos y entre los árboles de la intrincada selva, ¿no ves algo que brilla y llora? Es una estrella.

<div style="text-transform: lowercase;">texto</div>
Lejos y entre los árboles de la intrincada selva, ¿no ves algo que brilla y llora? Es una estrella.

Sangría

  • text-indent: establece sangría de la primera línea de cada párrafo.
<div style="text-indent: 30px;">texto</div>
Los suspiros son aire y van al aire. Las lágrimas son agua y van al mar. Dime, mujer, cuando el amor se olvida, ¿sabes tú adónde va?