Autor Tema: HTML y CSS en qué orden se aplican los selectores de fuera hacia dentro CU01013D  (Leído 2522 veces)

Lorenzo31

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 381
    • Ver Perfil
Buenas, aquí dejo mi respuesta al ejercicio, aunque no se si estara del todo bien, allá va.

Código: [Seleccionar]
<!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="estilos113DFinal.css"/>
</head>
<body>
<div class="principal"><h1>Novedades</h1><p>Aquí presentamos las novedades del sitio.</p></div>
<div class="secundario"><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="secundario"><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>



estilos113DFinal.css

Código: [Seleccionar]
/* Estilos CSS Ejercicio113DFinal */
body { font-family:Arial; }
.principal h1 { color:red; text-size:130%; }
.secundario h3 { color:green; text-size:110%; }
.secundario h3 span { background-color:yellow; }
« Última modificación: 10 de Febrero 2016, 09:50 por Mario R. Rancel »

Mario R. Rancel

  • Administrador
  • Experto
  • ********
  • APR2.COM
  • Mensajes: 1978
    • Ver Perfil
Re:Concepto de herencia en hojas de estilo CSS. 1013D
« Respuesta #1 en: 10 de Febrero 2016, 09:50 »
Buenos días

Un veterano como tú debería escribir los códigos completos, CU01013D, por aquello de que las consultas a bases de datos encuentren el hilo cuando se busque el código  ::)

Viendo el ejercicio... el apartado a) bien resuelto.

El apartado b) y c) me parece que te has inventado la propiedad text-size ya que debería ser font-size

Apartados d) y e) bien resueltos

Una cosa a recordar es que .secundario h3 span { ... } significa "estilos a aplicar a span dentro de h3 dentro de elementos con class sencundario". Si escribiéramos span h3 .secundario significaría "elementos con class secundario dentro de elementos h3 dentro de elementos span".

Saludos

Lorenzo31

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 381
    • Ver Perfil
Buenas Mario, si, fallo mio no poner todo el código, tomo nota que para las busquedas luego lo agradecemos todos :).

Ostras, text-size pues realmente al visualizarlo juro se veia más grande :) font-size, ahora mismo lo corrijo.

Y el aporte, super interesante.

.secundario h3 span {..} modifica todos los span, dentro de h3 con class = secundario.

span h3 .secundario {..} modificaria todo elemento con class = secundario, siempre que vayan dentro de un h3, que a su vez vaya dentro de un span.

Genial, lo apunto, tiene sentido, así voy asimilando la sintaxis CSS, la verdad que este curso es super extenso y completo, es brutal. Felicitar a César por ello.

estilos113DFinal.css
Código: [Seleccionar]
/* Estilos CSS Ejercicio113DFinal */
body { font-family:Arial; }
.principal h1 { color:red; font-size:130%; }
.secundario h3 { color:green; font-size:110%; }
.secundario h3 span { background-color:yellow; }

 

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