Foros aprenderaprogramar.com

Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: borri_10 en 17 de Marzo 2015, 16:47

Título: Ejercicio CU01013D- Herencia CSS y aplicación de reglas CSS en distintos niveles
Publicado por: borri_10 en 17 de Marzo 2015, 16:47
Código: [Seleccionar]
<html>
<head>
<meta charset="utf-8">
<title> PORTAL WEB </title>
<link rel="stylesheet" type="text/css" href="EJERCICIO CU01013D.CSS">
</head>
</body>
<p><a href="principal.html" title="Pagina Principal">Ir a pagina principal</a></p>
<div class="principal">
<h1>Novedades</h1>
<p>Aqui presentamos las novedades del sitio</p>
</div>
<div class="secundario">
<h3>Lanzamos el producto</h3>
<span class="secundario">Este producto permite estirar la piel hasta dejarla como la de un  bebe.</span>
<span class="secundario"><img src="//i.imgur.com/tq5Bs.png"title="Imagen del producto" alt="imagen producto x-fashion"/></span>
</div>
<div class="secundario">
<h3>Mejoramos el producto T-MOTION</h3>
<span class="secundario">Hemos lanzado una nueva version del procuto T-MOTION</span>
<span class="secundario"><img src="http://i.imgur.com/SpZyc.png" title="Imagen del producto tmotion"alt="imagen producto tmotion"/></span>
</div>
</body>
</html>

Código: [Seleccionar]
body{font-family:Arial;}
.principal,h1{color:red;font-size:130%;}
.secundario h3,.secundario span{color:green;font-size:110%;background-color:yellow;}
Título: Re:Ejercicio CU01013D- Herencia CSS y aplicación de reglas CSS en distintos niveles
Publicado por: Alex Rodríguez en 17 de Marzo 2015, 17:10

Hola viendo los apartados:

Citar
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.

Bien


Citar
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>>.

No está bien. .principal,h1{color:red;font-size:130%;} aplica la regla tanto a elementos de class principal como a elementos h1 allí donde estén.

Para hacer lo que pide este apartado tenemos que escribir:

.principal h1{color:red;font-size:130%;}

Sin la coma. Así lo que indica es que esta regla solo se aplica a elementos h1 dentro de elementos con class principal



Citar
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>>.

Mal

Para aplicar lo que dice el enunciado sería:

.secundario h3 {color:green;font-size:110%;}


Citar
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>>.

Mal

La regla que has escrito .secundario h3,.secundario span{color:green;font-size:110%;background-color:yellow;}
aplica color de fondo amarillo tanto a elementos h3 dentro de elementos con class secundario como a elementos span dentro de elementos con class secundario y eso no es lo que pedía el enunciado.

La respuesta sería: .secundario h3 span{background-color:yellow;}


Citar
e) Establece como tipo de fuente para todo el documento HTML el tipo Arial.

Bien

En resumen nos quedaría esto (si no me he equivocado en nada):

body{font-family:Arial;}
.principal h1{color:red;font-size:130%;}
.secundario h3 {color:green;font-size:110%;}
.secundario h3 span{background-color:yellow;}

Para poder ver los resultados tienes que respetar el código HTML del ejercicio, por ejemplo esto no lo has respetado: <div><h3>Lanzamos el producto <span>X-FASHION</span></h3>

Además el ejercicio no dice que haya que hacer cosas como <span class="secundario"> Lo único que dice es que se establezca class para cada uno de los tres divs, no en los span dentro de los divs.

Saludos