Colores RGB
Parte de la sección Estilos con CSS del Journey de HTML de Coddy. Lección 27 de 76.
En CSS, los colores RGB son una forma de especificar colores mediante la notación funcional rgb(). RGB significa rojo, verde y azul, y cada color se representa con un valor que va de 0 a 255. Al combinar distintas intensidades de estos tres colores primarios, puedes crear un amplio espectro de colores.
Esta es 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>). Elige un color de fondo y un color de texto para todos los elementos de la página; usa rgb() para hacerlo.
¡No se aceptarán los colores predeterminados!
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 Estilos con CSS
4Fundamentos del texto
Color del textoFamilia tipográficaTamaño de fuentePeso de la fuenteAlineación del textoDecoración del textoDesafío de repaso n.º 1Desafío de repaso n.º 27Modelo de caja, parte 1
¿Qué es el modelo de caja?RellenoMárgenesBordesAncho y altoDesafío de repaso8Modelo de caja, parte 2
Dimensionamiento de cajasRadio del bordeDesbordamientoSombra de cajaDesafí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 un Flex Box?Dirección de FlexJustificar el contenidoAlinear elementosEl centro perfectoDesafío de Flex Box12Fundamentos del diseño responsive
¿Qué es el diseño responsive?Etiqueta meta viewportDiseños fluidosUnidades del viewportFundamentos de las media queriesImágenes flexiblesPractica por tu cuenta: Playground de Web