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
p {
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;
}