Este ejercicio que he creado, esta preparado para ver como asignar colores CSS. Para ello pondremos color a texto y fondo a través de las propiedades color: y background-color:
Los valores de los colores en CSS, se pueden especificar de varias formas:
- Color Names
- RGB
- HEX
- HSL
Para recoger colores y obetener lo valores RGB, HEX o HSL de cualquier color, siempre uso el complemento de Firefox y Chromium llamado Colorzilla
En el ejercicio se pide aplicar las 4 formas posibles.
Aquí tenéis el documento HTML, en el que está el enunciado en un comentario. Para descargarlo tenéis que pulsar el botón derecho del ratón sobre el enlace que os dejo abajo y seleccionar la opción de “Guardar enlace como” .
Despues del enlace del ejercicio, está el código de una posible solución.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
/*
1-Poner un color de fondo al body usando los valores (R,G,B)
2-Poner un color de texto a todos los párrafos, especificando el nombre de color
3-Poner un color de texto al párrafo con clase segundo usando un valor hexadecimal
4-Poner un color de texto al parrafo con clase tercero usando lso valores (H,S,L)
5-Poner un color de fondo al enlace con transparencia usando los valores (R,G B,A)
6-Poner un color de fondo al parrafo con clase tercero con transparencia usando los valores (H,S L,A)
*/
body{
background-color:rgb(20, 224, 193);
}
p{
color: blue;
}
p.segundo{
color: #ffbb00;
}
p.tercero{
color:hsl(310, 100%, 50%);
background-color: hsla(60, 100%, 50%,0.5)
}
a{
background-color: rgba(249, 4, 4, 0.2);
}
</style>
</head>
<body>
<p>hola</p>
<p class="segundo">adios</p>
<p class="tercero">saludos</p>
<p>Otro párrafo</p>
<a href="#">prueba enlace</a>
</body>
</html>