Ejercicios de selectores CSS

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 1 CSS

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>

 

Deja una respuesta

Tu dirección de correo electrónico no será publicada.