De la siguiente manera me han quedado los 2 códigos del ejercicio CUO1020D del curso CSS desde cero.
Código HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="keywords" content="programar,aprender">
<meta name="description" content="Portal web aprenderaprogramar.com">
<link rel="stylesheet" type="text/css" href="estilos23.css">
<title>Ejemplo colores</title>
</head>
<body>
<div id="page">
<div>
</div>
<div id="wrapper">
<div id="menu">
</div>
<div id="body">
<span id="a"><<</>RGB 178,34,34 con transparencia 0.1>></span><br/>
<span id="b"><<</>RGB 178,34,34 con transparencia 0.2>></span><br/>
<span id="c"><<</>RGB 178,34,34 con transparencia 0.3>></span><br/>
<span id="d"><<</>RGB 178,34,34 con transparencia 0.4>></span><br/>
<span id="e"><<</>RGB 178,34,34 con transparencia 0.5>></span><br/>
<span id="f"><<</>RGB 178,34,34 con transparencia 0.6>></span><br/>
<span id="g"><<</>RGB 178,34,34 con transparencia 0.7>></span><br/>
<span id="h"><<</>RGB 178,34,34 con transparencia 0.8>></span><br/>
<span id="i"><<</>RGB 178,34,34 con transparencia 0.9>></span><br/>
<span id="j"><<</>RGB 178,34,34 con transparencia 1.0>></span><br/>
<span id="k"><<</>RGB 218,165,32 con transparencia 1.0>></span><br/>
<span id="l"><<</>RGB 218,165,32 con transparencia 0.9>></span><br/>
<span id="m"><<</>RGB 218,165,32 con transparencia 0.8>></span><br/>
<span id="n"><<</>RGB 218,165,32 con transparencia 0.7>></span><br/>
<span id="o"><<</>RGB 218,165,32 con transparencia 0.6>></span><br/>
<span id="p"><<</>RGB 218,165,32 con transparencia 0.5>></span><br/>
<span id="q"><<</>RGB 218,165,32 con transparencia 0.4>></span><br/>
<span id="r"><<</>RGB 218,165,32 con transparencia 0.3>></span><br/>
<span id="s"><<</>RGB 218,165,32 con transparencia 0.2>></span><br/>
<span id="t"><<</>RGB 218,165,32 con transparencia 0.1>></span><br/>
</div>
</div>
<div id="footer">
</div>
</div>
</body>
</html>
Código CSS: "estilos23.css"
#a {
background-color: rgba(178,34,34,0.1);
}
#b{
background-color: rgba(178,34,34,0.2);
}
#c{
background-color: rgba(178,34,34,0.3);
}
#d{
background-color: rgba(178,34,34,0.4);
}
#e{
background-color: rgba(178,34,34,0.5);
}
#f{
background-color: rgba(178,34,34,0.6);
}
#g {
background-color: rgba(178,34,34,0.7);
}
#h {
background-color: rgba(178,34,34,0.8);
}
#i {
background-color: rgba(178,34,34,0.9);
}
#j {
background-color: rgba(178,34,34,1.0);
}
#k {
background-color: rgba(218,165,32,1.0);
}
#l {
background-color: rgba(218,165,32,0.9);
}
#m {
background-color: rgba(218,165,32,0.8);
}
#n {
background-color: rgba(218,165,32,0.7);
}
#o {
background-color: rgba(218,165,32,0.6);
}
#p {
background-color: rgba(218,165,32,0.5);
}
#q {
background-color: rgba(218,165,32,0.4);
}
#r {
background-color: rgba(218,165,32,0.3);
}
#s {
background-color: rgba(218,165,32,0.2);
}
#t {
background-color: rgba(218,165,32,0.1);
}
Como pueden observar, me refiero a los elementos mediante los selectores "#" porque no pude conseguir que funcionaran los selecontes: "nth-child(númerodehijo)", no sé porque.