CSS Textos

Los textos con CSS

Las propiedades de los textos nos permiten controlar la apariencia de los mismos.
Podemos cambiar el color, alinearlo, decorarlo, controlar los espacios entre palabras y mucho más.

Texto en color

En este ejemplo se define que el elemento "p" sea de color azul y que tenga una separación entre palabras de 10 píxeles.

Código


<p style="color:blue; word-spacing:10px">
Este párrafo es de color azul y tiene
una separación de 10 pixels entre palabra y palabra.
</p>

Resultado

Este párrafo es de color azul y tiene
una separación de 10 pixels entre palabra y palabra.

Sangría

La propiedad "text-indent" nos permite dejar sangría dentro del texto.

Código

<html>
<head>
 <style type="text/css">
  p{text-indent: 1cm}
 </style>
</head>

<body>
 <p>La primer palabra del texto comienza a un centímetro del borde.</p>
</body>
</html>

Resultado

La primer palabra del texto comienza a un centímetro del borde.

Enlace sin subrayar

La propiedad "text-decoration" nos permite, entre otras cosas, eliminar el subrayado en un enlace como podemos observar en este ejemplo.

Código

<html>
<head>
 <style type="text/css">
  a{text-decoration: none}
 </style>
</head>

<body>
 <p>Este <a href="">enlace</a> no está subrayado.</p>
</body>
</html>

Resultado

Este enlace no está subrayado.

Texto centrado

La propiedad "text-align" nos permite ubicar el texto a la derecha, izquierda o en el centro.
En este ejemplo, vamos a utilizar también la propiedad "letter-spacing" que define el espacio que dejará entre letras.

Código

<html>
<head>
 <style type="text/css">
  p{text-align: center; letter-spacing: 4px}
 </style>
</head>

<body>
 <p>Texto centrado<br>
 y con un espaciado de 4px entre letras.</p>
</body>
</html>

Resultado

Texto centrado
y con un espaciado de 4px entre letras.

Propiedades de los textos

Propiedad	Descripción	Valores	Detalles
text-indent	Desplazamiento de la primera línea del texto.	longitud	Longitud
text-indent	Desplazamiento de la primera línea del texto.	%	Porcentaje
text-align	Alineamiento del texto.	left	Izquierda
		right	Derecha
		center	Centro
		justify	Justificar
text-decoration	Efectos de subrayado, tachado, parpadeo.	none	Sin efectos
		underline	Subrayado
		overline	Línea por encima
		line-through	Tachado
		blink	Parpadeo
text-transform	Transformaciones del texto a mayúsculas/minúsculas.	capitalize	Convierte en mayúscula el primer carácter de cada palabra
		uppercase	Convierte en mayúscula todas las letras del elemento
		lowercase	Convierte en minúscula todas las letras del elemento
		none	Neutraliza el valor heredado
text-shadow	Aplica el efecto de sombreado al texto de acuerdo a los valores dados. No funciona en IE 5, 6 y 7 ni en Firefox	color	color
		x length	distancia x
		y length	distancia y
		blur	desenfoque
letter-spacing	Espacio entre caracteres.	normal	Normal
letter-spacing	Espacio entre caracteres.	longitud	Longitud
word-spacing	Espacio entre palabras.	normal	Normal
word-spacing	Espacio entre palabras.	longitud	Longitud
white-space	Comportamiento de los espacios dentro de los elementos.	normal	Normal
		pre	Preformateado
		nowrap	Los cambios de línea solo ocurren con el elemento br
		pre-wrap
		pre-line
color	Color del primer plano.	color	Color
direction	Sentido direccional de la escritura.	ltr	Izquierda a derecha
direction	Sentido direccional de la escritura.	rtl	Derecha a izquierda
unicode-bidi	Sentido direccional de la escritura.	normal	Normal
		embed	Abre un nivel adicional de incrustación con respecto al algoritmo bidireccional
		bidi-override	Si el elemento es a nivel de línea o es un elemento a nivel de bloque, crea una sustitución