18. Texto en CSS

CSS tiene multitud de propiedades para formatear texto.

Color del texto

La propiedad color es usada para dar color al texto. El color puede ser especificado de las siguientes maneras:

  • Un nombre de color, como “red”
  • Un valor HEX, como “#ff0000”
  • Un valor RGB, como rgb(255,0,0)

Color de texto y color de fondo del texto

En este ejemplo, definimos tanto la propiedad de color de fondo como la propiedad de color del texto.

Ejm

body {
  background-color: lightgrey;
  color: blue;
}

h1 {
  background-color: black;
  color: white;
}

div {
  background-color: blue;
  color: white;
}

Nota: El alto contraste es muy importante para las personas con problemas de visión. Por lo tanto, asegúrate siempre de que el contraste entre el color del texto y el color de fondo (o la imagen de fondo) sea bueno.

Alineamiento del texto

En este capítulo aprenderemos mas acerca de las siguientes propiedades:

  • text-align
  • text-align-last
  • direction
  • unicode-bidi
  • vertical-align

text-align

La propiedad text-align se utiliza para establecer la alineación horizontal de un texto. Un texto puede estar alineado a la izquierda o a la derecha, centrado o justificado. El siguiente ejemplo muestra texto alineado al centro y alineado a la izquierda y a la derecha (la alineación a la izquierda es la predeterminada si la dirección del texto es de izquierda a derecha, y la alineación a la derecha es la predeterminada si la dirección del texto es de derecha a izquierda).

Ejm

h1 {
  text-align: center;
}

h2 {
  text-align: left;
}

h3 {
  text-align: right;
}

Cuando la propiedad text-align se establece en justify, cada línea se estira para que cada línea tenga el mismo ancho, y los márgenes izquierdo y derecho son rectos (como en revistas y periódicos).

Ejm

div {
  text-align: justify;
}

text-align-last

La propiedad text-align-last especifica cómo alinear la última línea de un texto.

Ejm

p.a {
  text-align-last: right;
}

p.b {
  text-align-last: center;
}

p.c {
  text-align-last: justify;
}

Dirección del texto

Las propiedades direction y unicode-bidi se pueden usar para cambiar la dirección del texto de un elemento.

Ejm

{
  direction: rtl;
  unicode-bidi: bidi-override;
}

Alineamiento vertical

La propiedad vertical-align establece la alineación vertical de un elemento.

Ejm

img.a {
  vertical-align: baseline;
}

img.b {
  vertical-align: text-top;
}

img.c {
  vertical-align: text-bottom;
}

img.d {
  vertical-align: sub;
}

img.e {
  vertical-align: super;
}
Scroll al inicio