Autor Tema: Ejercicio CU01013D- Herencia CSS y aplicación de reglas CSS en distintos niveles  (Leído 2239 veces)

borri_10

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 31
    • Ver Perfil
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;}
« Última modificación: 17 de Marzo 2015, 17:06 por Alex Rodríguez »

Alex Rodríguez

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2050
    • Ver Perfil

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

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".