Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: LuisM en 11 de Noviembre 2017, 02:04
-
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
EJERCICIO
Analiza 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; }
-
Hola Luis!!!
Tu código esta bien, pero eso que comentaste, si entiendo que se te hace mas pequeño de lo normal el encabezado, pero te comento que el porcentaje funciona de una manera distinta en los textos y los demas elementos html.
Seguramente te preguntas ¿Por qué cuando ponemos 50% de ancho o tamaño un contenedor se ve bastante grande y en los texto es lo contrario? Como te dije anteriormente funcionan de otra manera en texto.
Un saludo.
-
Hola Jorge !!! Muchas gracias nuevamente por tu atención. :)
Tal cual como vos decís. En el ejercicio cuando puse font-size:130% en h1 se redujo la letra. Volví a leer las especificaciones y lo solicitado era "... y tamaño de fuente el 130% respecto de lo normal para los elementos h1". Entendí que "normal" es el tamaño grande(2em) y tuve que calcular el incremento aparte.
Un saludo,
Luis