Ejercicio css sobre forzar y romper la propiedad de herencia

Ejercicio css sobre forzar y romper la propiedad de herencia

El concepto de herencia css es muy útil si se sabe como y cuando usarlo.

La herencia es la propiedad por la cuál algunas etiquetas heredan ciertas propiedades cuando están encapsuladas.

Por ejemplo tiene sentido que un span herede el color negro cuando está dentro de un párrafo de color negro .

O también, tiene sentido que un span no herede el borde cuando está dentro de un div que tiene un borde.

Algunas lecturas de interés para resolver correctamente el ejercicio propuesto en esta lectura son:

Pasemos al ejercicio propuesto.

Enunciado A

El siguiente código html tiene como resultado la imagen adjunta:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="author" content="francesc ricart"/>
	<title>Enlaces camuflados</title>
	<style>
		.parrafo-1{color:red;}
		.parrafo-2{color:green;}
		.parrafo-3{color:blue;}
		.parrafo-4{color:orange;}
	</style>
</head>
<body>

	<p class="parrafo-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, necessitatibus.<a href="">enlace del párrafo 1</a></p>

	<p class="parrafo-2">Eius veniam modi id, eaque quas mollitia deserunt optio incidunt.<a href="">enlace del párrafo 2</a></p>
	
	<p class="parrafo-3">Provident distinctio cumque, incidunt beatae voluptas atque, eum. Consequuntur, nihil.<a href="">enlace del párrafo 3</a></p>
	
	<p class="parrafo-4">Deserunt nihil sed earum provident hic incidunt alias mollitia tenetur.<a href="">enlace del párrafo 4</a></p>
	
</body>
</html>
Enunciado ejercicio herencia A
Enunciado ejercicio herencia A

Se desea que los enlaces hereden el color de los párrafos en los que están respectivamente encapsulados con una única instrucción css.

¿Qué escribirías en la hoja de estilos para que se viera la página como en la imagen propuesta?

Resultado esperado utilizando el concepto de herencia para los enlaces
Resultado esperado utilizando el concepto de herencia para los enlaces

Solución del ejercicio A

La siguiente hoja de estilos resuelve el ejercicio:

.parrafo-1{color:red;}
.parrafo-2{color:green;}
.parrafo-3{color:blue;}
.parrafo-4{color:orange;}
a{color:inherit;}

El html no es necesario tocarlo para nada.

Enunciado B

El siguiente código html tiene como resultado la imagen adjunta:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="author" content="francesc ricart"/>
	<title>Párrafos rebeldes</title>
	<style>
		div{color:blue;}
	</style>
</head>
<body>

	<div>
		<p class="parrafo-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, provident.</p>
		<p class="parrafo-2">Ipsa nesciunt numquam alias error quas, recusandae eius natus incidunt.</p>
		<p class="parrafo-3">Odit vero quas ducimus facilis suscipit molestiae, sunt ullam! Iste.</p>
		<p class="parrafo-4">Sint ipsam, minus veritatis pariatur voluptatem perspiciatis provident dignissimos aliquam?</p>
	</div>
	
</body>
</html>
enunciado ejercicio herencia B
enunciado ejercicio herencia B

Se desea que el primer y el tercer párrafos tengan de nuevo el color definido por el navegador web. Es decir, que no hereden.

¿Qué escribirías en la hoja de estilos para que se viera la página como en la imagen propuesta?

resultado esperado para el ejercicio de herencia B
resultado esperado para el ejercicio de herencia B

Solución del ejercicio B

Será necesario añadir una misma clase para los párrafos primero y tercero.

El código final queda de la siguiente forma:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="author" content="francesc ricart"/>
	<title>Párrafos rebeldes</title>
	<style>
		div{color:blue;}
		.inicializar{color:initial;}
	</style>
</head>
<body>

	<div>
		<p class="parrafo-1 inicializar">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure, provident.</p>
		<p class="parrafo-2">Ipsa nesciunt numquam alias error quas, recusandae eius natus incidunt.</p>
		<p class="parrafo-3 inicializar">Odit vero quas ducimus facilis suscipit molestiae, sunt ullam! Iste.</p>
		<p class="parrafo-4">Sint ipsam, minus veritatis pariatur voluptatem perspiciatis provident dignissimos aliquam?</p>
	</div>
	
</body>
</html>

¡Hola!

Querido lector,

Habrás visto que el enunciado es largo pero que la herencia nos permite ahorrar muchas líneas de código y resolver bastante rápido el ejercicio.

¡Si te ha gustado este contenido te animo a seguirme en mi perfil de empresa de Linkedin!

¿Te ha gustado esta publicación?

¡Valora sobre 5 estrellas esta publicación!

Puntuación media / 5. Votos:

Todavía no hay votos. Sé el primero en valorar la entrada.

Si te ha gustado este contenido...

¡Sígueme en las redes!

Vaya, parece que hay puntos a corregir

¿Me ayudas a mejorar?

Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.