Estilización de Texto, Colores y Fondos

Aprende sobre estilización de texto, colores y fondos con CSS. Descubre cómo aplicar fuentes, peso de texto, alineación, decoraciones, y colores en distintos formatos, incluyendo nombres y valores hexadecimales.
Estilización de Texto
CSS ofrece una variedad de propiedades para estilizar el texto de los elementos HTML. Estas propiedades permiten controlar la apariencia del texto, incluyendo la fuente, el peso, la alineación y las decoraciones.
Propiedades de Texto
CSS ofrece una variedad de propiedades para estilizar texto:
font-family: Define la familia de fuentes.
p {
font-family: Arial, sans-serif;
}
font-weight: Define el grosor del texto.
p {
font-weight: bold;
}
text-align: Define la alineación del texto.
h1 {
text-align: center;
}
text-decoration: Define decoraciones como subrayado, tachado, etc.
a {
text-decoration: none;
}
Colores en CSS
CSS permite definir colores de diversas maneras:
Nombres de Color:
p {
color: blue;
}
Valores Hexadecimales:
Los números hexadecimales son números representados en base 16 , que significa los dígitos 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F en lugar de solamente 0-9.
Un color hexadecimal se especifica con: #RRGGBB
, donde los enteros hexadecimales RR (rojo), GG (verde) y BB (azul) especifican los componentes del color.
Por ejemplo, #ff0000
se muestra en rojo, porque el rojo está configurado en su valor más alto (ff) y los demás están configurados en el valor más bajo (00).
Para mostrar negro, establezca todos los valores en 00: #000000
.
Para mostrar el blanco, establezca todos los valores en ff: #ffffff
.
p {
color: #0000ff;
}
Valores RGB:
En CSS, un color se puede especificar como un valor RGB mediante esta fórmula: rgb (rojo, verde, azul)
.
Cada parámetro (rojo, verde y azul) define la intensidad del color entre 0 y 255.
Por ejemplo, rgb(255, 0, 0) se muestra en rojo, porque el rojo está configurado en su valor más alto (255) y los demás están configurados en 0.
Para mostrar negro, establezca todos los parámetros de color en 0, así: rgb(0, 0, 0).
Para mostrar el blanco, configure todos los parámetros de color en 255: rgb(255, 255, 255).
p {
color: rgb(0, 0, 255);
}
Valores RGBA (con opacidad):
p {
color: rgba(0, 0, 255, 0.5);
}
Fondos en CSS
Las propiedades de fondo permiten personalizar el aspecto de los fondos de los elementos:
background-color: Define el color de fondo.
div {
background-color: #f0f0f0;
}
background-image: Define una imagen de fondo.
div {
background-image: url("imagen.jpg");
}
background-repeat: Define si la imagen de fondo se repite.
div {
background-repeat: no-repeat;
}
background-size: Define el tamaño de la imagen de fondo.
/* Valores de palabras clave */
background-size: cover;
background-size: contain;
/* Sintaxis de un valor */
/* El ancho de la imagen (la altura 'height' se vuelve 'automática') */
background-size: 50%;
background-size: 3.2em;
background-size: 12px;
background-size: auto;
/* Sintaxis de dos valores */
/* primer valor: ancho de la imagen, segundo valor: alto */
background-size: 50% auto;
background-size: 3em 25%;
background-size: auto 6px;
background-size: auto auto;
-
Propiedades básicas: Las propiedades básicas de CSS
-
Modelo de caja: Modelo de Caja: Márgenes, Bordes y Padding
-
Más sobre texto: W3schools - Texto en CSS
💻 Mete mano al código con estos desafíos simples: