Hola a todos !! paso a dejar la respuesta del ejercicio propuesto CU01013D del curso de programación CSS desde cero. Desde ya muchas gracias por la atención. Un saludo,
Luis
EJERCICIOAnaliza el siguiente código HTML. En él encontrarás tres etiquetas div. Haz lo siguiente:
a) Establece atributos class para cada una de ellas con valores <<principal>> para la primera, y <<secundario>> para la segunda y la tercera.
b) Usando CSS establece como color de texto el rojo (red) y tamaño de fuente el 130% respecto de lo normal para los elementos h1 que se encuentren dentro de un elemento cuyo valor class sea <<principal>>.
c) Usando CSS establece como color de texto el verde y tamaño de fuente el 110% respecto de lo normal para los elementos h3 que se encuentren dentro de un elemento cuyo valor class sea <<secundario>>.
d) Usando CSS establece como color de fondo el amarillo (yellow) para los elementos span que se encuentren dentro de elementos h3 que se encuentren dentro de elementos cuyo atributo class sea <<secundario>>.
e) Establece como tipo de fuente para todo el documento HTML el tipo Arial.
Se presentó un problema cuando intenté modificar el font-size de las etiquetas h1 y h3 ya que el porcentaje se calculaba sobre el tamño normal y no sobre el tamaño de esas etiquetas: h1 tiene 2em y h3 tiene 1.17em. Por lo tanto, 130% de 2em es igual 2.6em y 110% de 1.17em es igual a 1.287em
<!DOCTYPE html>
<html><head><title>Portal web - aprenderaprogramar.com</title>
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros"><meta charset="utf-8">
<link rel="stylesheet" type="text/CSS" href="estilosCU01013D.css">
</head>
<body>
<div class="principal"><h1>Novedades</h1><p>Aquí presentamos las novedades del sitio.</p></div>
<div class="secundaria"><h3>Lanzamos el producto <span>X-FASHION</span></h3>
<p>Este producto permite estirar la piel hasta dejarla como la de un bebé.</p>
<p><img src="http://i.imgur.com/tq5Bs.png" title="Imagen del producto" alt="imagen producto x-fashion" /></p>
</div>
<div class="secundaria"><h3>Mejoramos el producto T-MOTION</h3>
<p>Hemos lanzado una nueva versión del producto <span>T-MOTION</span></p>
<p><img src="http://i.imgur.com/SpZyc.png" title="Imagen del proudcto tmotion" alt="imagen producto tmotion" /></p>
</div>
</body>
</html> y la página de estilo es...
/* Hoja de estilos: estilosCU01013D.css */
/* correspondiente a ejercicioCU01013D.html */
body {font-family: Arial;}
/* h1 = 2em ---> 130% = 2.6em */
.principal h1{color:red; font-size:2.6em;}
/* h3 = 1.17em --> 110% = 1.287em */
.secundaria h3{color:green; font-size:1.287em}
.secundaria h3 span{background-color:yellow; }
Tema: Concepto de herencia en CSS ¿Qué es? Forzar herencia con inherit código CU01013D (Leído 2465 veces)
RSS -
WAP2