Colores RGB
Parte de la sección Styling with CSS del Journey de HTML de Coddy — lección 27 de 76.
En CSS, los colores RGB son una forma de especificar colores utilizando la notación funcional rgb(). RGB significa Red (rojo), Green (verde) y Blue (azul), y cada color está representado por un valor que va de 0 a 255. Al combinar diferentes intensidades de estos tres colores primarios, puedes crear un amplio espectro de colores.
Aquí tienes la sintaxis básica para usar colores RGB en CSS:
selector {
color: rgb(red, green, blue);
background-color: rgb(red, green, blue);
}Por ejemplo:
p {
color: rgb(255, 0, 0); /* Rojo */
background-color: rgb(0, 255, 0); /* Verde */
}
h1 {
color: rgb(0, 0, 255); /* Azul */
}
.highlight {
background-color: rgb(255, 255, 0); /* Amarillo */
}Desafío
FácilSe te proporciona un documento HTML con un encabezado (<h1>), un párrafo (<p>) y una división (<div>). Asigna un color de fondo y un color de texto de tu elección a todos los elementos de la página, utiliza rgb() para hacerlo.
¡No se aceptarán los colores por defecto!
Hoja de referencia
Los colores RGB utilizan la notación funcional rgb() con valores de 0 a 255 para el rojo, el verde y el azul:
selector {
color: rgb(red, green, blue);
background-color: rgb(red, green, blue);
}Ejemplos:
p {
color: rgb(255, 0, 0); /* Rojo */
background-color: rgb(0, 255, 0); /* Verde */
}
h1 {
color: rgb(0, 0, 255); /* Azul */
}
.highlight {
background-color: rgb(255, 255, 0); /* Amarillo */
}Pruébalo tú mismo
<html>
<head>
<title>RGB Colors</title>
<style>
/* Write CSS rules here */
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<div>This is a division.</div>
</body>
</html>Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.
Todas las lecciones de Styling with CSS
4Fundamentos del texto
Color de textoFamilia de fuentesTamaño de fuenteGrosor de fuenteAlineación de textoDecoración de textoDesafío de repaso #1Desafío de repaso #27Modelo de caja - Parte 1
¿Qué es el modelo de caja?PaddingMárgenesBordesAncho y altoDesafío de repaso3Selectores básicos
Introducción a los selectoresSelector de tipoSelector de claseSelector de IDSelectores de grupoSelector universalDesafío de selección9Flex Box
¿Qué es Flex Box?Flex DirectionJustify ContentAlign ItemsEl centrado perfectoDesafío de Flex Box12Fundamentos de Diseño Responsivo
¿Qué es el Diseño Responsivo?Etiqueta Meta ViewportDiseños FluidosUnidades de ViewportFundamentos de Media QueriesImágenes Flexibles