Os comparto un par de ejercicios que he creado yo mismo desde 0, para practicar los selectores CSS. Los utilizo siempre para practicar los selectores simples y descendientes, despues de ser explicados.
Recordad que para descargarlo, tenéis que pulsar el botón derecho del ratón sobre los enlaces que os dejo abajo y seleccionar la opción de “Guardar enlace como”
Ejercicio selectores 2 CSS y esta es la imagen que se usa en el ejercicio.
Aquí tenéis la solución del ejercicio selectores 1:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ejercicio selectores CSS Raúl Pérez tieneblog</title>
<style type="text/css">
/* Hay poner el selector delante de cada declaración para que afecte a los elementos que indica
el comentario que cada declarción tiene encima*/
/* Todos los elementos de la pagina */
* {
font-family: "Open Sans", Arial, sans-serif;
font-size: 1.2em;
line-height: 1.6;
color: #494949;
}
/* Todos los parrafos de la pagina */
p {
color: #666;
}
/* Todos los elementos h1 de la pagina */
h1 {
font-weight: bold;
font-size: 3em;
}
/* Todos los párrafos de clase "entradilla"*/
p.entradilla {
font-weight: bold;
font-size: 2em;
}
/* Todos los párrafos que estén en div con id "noticia-principal" */
#noticia-principal p {
color: #green;
padding: 1em;
}
/* Todos los span que esten dentro de párrafos*/
p span {
background: yellowgreen;
}
/* Todos los elementos con id "noticia-principal" o con id "noticia-secundaria" */
#noticia-principal, #noticia-secundaria {
background: pink;
border: 1px solid black;
padding: 2em;
border-radius: 10px;
}
/* Todos los enlaces que estén dentro de párrafos con clase "entradilla" */
p.entradilla a {
text-decoration: none;
color: orange;
font-weight: bold;
}
</style>
</head>
<body>
<div id="noticia-principal">
<h1><span>Es simplemente </span>el texto de relleno de las imprentas y archivos de texto.</h1>
<a href="#">Lorem Ipsum</a>
<p class="entradilla"> Ha sido el texto de relleno estándar de las <a href="#">industrias desde el año 1500</a></p>
<p> Ha sido el texto de relleno estándar de las industrias desde el año 1500, cuando un impresor (N. del T. persona que se dedica a la imprenta) desconocido usó una galería de textos y los mezcló de tal manera que logró hacer un libro de textos especimen.</p>
<p>No sólo sobrevivió 500 años, sino que tambien ingresó como texto de relleno en documentos electrónicos, quedando esencialmente igual al original.</p>
</div>
<div id="noticia-secundaria">
<h1><span>El trozo</span> de texto estándar de Lorem Ipsum</h1>
<p class="entradilla">Usado desde el año 1500 es <a href="#">reproducido debajo</a> para aquellos interesados.</p>
<p> Las secciones 1.10.32 y 1.10.33 de "de Finibus Bonorum et Malorum" por Cicero son también reproducidas en su forma original exacta, acompañadas por versiones en Inglés de la traducción realizada en 1914 por H. Rackham.</p>
<p>Usa un diccionario de mas de 200 palabras provenientes del latín, combinadas con estructuras muy útiles de sentencias, para generar texto de que <span>Lorem Ipsum</span>parezca razonable.</p>
</div>
</body>
</html>Aquí tenéis la solución del ejercicio selectores 2:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Ejercicio selectores 2 CSS Raúl Pérez tieneblog</title>
<style type="text/css">
/* Hay poner el selector delante de cada declaración para que afecte a los elementos que indica
el comentario que cada declarción tiene encima*/
/* Todos los elementos de la pagina */
*{
font-family: "Open Sans", Arial, sans-serif;
font-size: 14px;
line-height: 1.6;
color: #494949;
}
/* Todos los parrafos de la pagina */
p {
color: #666;
}
/* Todos los elementos h1 de la pagina */
h1 {
font-weight: bold;
font-size: 22px;
color: #DD1E64;
}
/*todos los elementos con clase producto*/
.producto {
background-color: pink;
}
/*todos los elementos con clase descripcion*/
.descripcion{
font-size: 16px;
text-decoration: underline;
font-weight: bold;
}
/*los elementos <span> de clase especial que esten dentro de un <h1>*/
h1 span.especial{
font-weight: bold;
font-size: 20px;
color: yellowgreen;
background-color: black;
}
/*las imagenes que esten en un elemento con id destacado*/
#destacado img {
width: 100%;
}
/*el elemento con id anuncio*/
#anuncio{
width: 60%;
margin: auto;
background-color: #DD1E64;
}
/*los parrafos que esten dentro de un elemento con id anuncio*/
#anuncio p{
color: white;
}
</style>
</head>
<body>
<div class="producto">
<h1><span class="especial">El trozo</span> de texto estándar de Lorem Ipsum</h1>
<p class="descripcion">Usado desde el año 1500 es <a href="#">reproducido debajo</a> para aquellos interesados.</p>
<p> Las secciones 1.10.32 y 1.10.33 de "de Finibus Bonorum et Malorum" por Cicero son también reproducidas en su forma original exacta, acompañadas por versiones en Inglés de la traducción realizada en 1914 por H. Rackham.</p>
<p>Usa un diccionario de mas de 200 palabras provenientes del latín, combinadas con estructuras muy útiles de sentencias, para generar texto de que <span class="especial">Lorem Ipsum</span>parezca razonable.</p>
</div>
<div id="anuncio">
<p> Las secciones 1.10.32 y 1.10.33 de "de Finibus Bonorum et Malorum" por Cicero son también reproducidas en su forma original exacta, acompañadas por versiones en Inglés de la traducción realizada en 1914 por H. Rackham.</p>
<p> Las secciones 1.10.32 y 1.10.33 de "de Finibus Bonorum et Malorum" por Cicero son también reproducidas en su forma original exacta, acompañadas por versiones en Inglés de la traducción realizada en 1914 por H. Rackham.</p>
</div>
<div class="producto">
<h1><span class="especial">El trozo</span> de texto estándar de Lorem Ipsum</h1>
<p class="descripcion">Usado desde el año 1500 es <a href="#">reproducido debajo</a> para aquellos interesados.</p>
<p> Las secciones 1.10.32 y 1.10.33 de "de Finibus Bonorum et Malorum" por Cicero son también reproducidas en su forma original exacta, acompañadas por versiones en Inglés de la traducción realizada en 1914 por H. Rackham.</p>
<p>Usa un diccionario de mas de 200 palabras provenientes del latín, combinadas con estructuras muy útiles de sentencias, para generar texto de que <span class="especial">Lorem Ipsum</span>parezca razonable.</p>
</div>
<div id="destacado">
<img src="hero-people.jpg" alt="" />
</div>
</body>
</html>