02 Dic 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>
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?
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>
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?
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!
Entradas relacionadas:
Ejercicio css dónde se plantea dividr una página en columnas utilizando 2 metodologías distintas. Las 2 importantes. Incluye solución.
Las dimensiones reales de una caja, por defecto, no son las que indica el width. Veamos como se calculan y en que nos puede ayudar aprenderlo.
¿Hay alguna forma amable de leer páginas web dónde todo el contenido se haya compactado? Te presento algunas de mis herramientas favoritas.
Maquetar con display:table; tiene ventajas frente a las tablas html. A modo de ejercicio se propone una tabla de servicios. Incluye solución.
Ejercicio css dónde se calcula el width real de dos cajas con y sin box-sizing y el espacio real ocupado. Incluye solución.
Dado un mismo código html como crearíamos columnas en un documento web utilizando floats versus haciéndolo con inline-block;
No Comments