Autor Tema: Ejercicios resueltos CSS Concepto de herencia hojas de estilo inherit CU01013D  (Leído 468 veces)

DRANXZ88

  • Avanzado
  • ****
  • Mensajes: 356
    • Ver Perfil
Propuesta de solución para el ejercicio CU01013D del curso tutorial de programación CSS desde cero de aprenderaprogramar.

HTML

Código: [Seleccionar]
<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejercicios cu01013D</title>
    <link rel="stylesheet" href="estilos.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>


CSS

Código: [Seleccionar]
body {
  font-family: Arial, Helvetica, sans-serif;
}

.principal h1 {
  color: red;
  font-size: 130px;
}
.secundario h3 {
  color: green;
  font-size: 110px;
}
.secundario h3 span {
  background-color: yellow;
}
« Última modificación: 12 de Marzo 2022, 13:38 por Ogramar »

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2645
    • Ver Perfil
Buenas, para quien revise este ejercicio dejo algunos comentarios:

Apartado a) Correcto

Apartados b) y c) No están bien resueltos porque el enunciado indicaba que los tamaños de fuente debían establecerse en porcentajes y se han establecido en píxeles. Por lo tanto el tamaño de fuente no es el correcto para el ejercicio.

Puede verse una solución correcta para este ejercicio en https://aprenderaprogramar.com/foros/index.php?topic=1478.0

Salu2

Angeliyo

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 10
    • Ver Perfil
Buenos dias.

Una pregunta respecto a este ejercicio: ¿puede haber dos <div class "secundario"?.

Muchas gracias.

Kabuto

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 816
    • Ver Perfil
Sí.
Cuando en CSS creamos una clase(class) es porque sabemos que vamos a tener en el documento HTML varios elementos que van a tener unos atributos comunes.

Por ejemplo, si vamos a tener 5 div con el mismo color de fondo y la misma fuente de texto, entonces no vamos a crear 5 estilos por separado para cada div.
Como sabemos que es un único estilo compartido por todos esos div, entonces crearemos una única clase CSS y se la podremos aplicar a los 5 div.

En realidad se le podría aplicar a cualquier elemento HTML al que queramos dotarle de ese estilo.
Si además de esos 5 dv, tenemos una tabla, unos cuantos encabezados <h1/>, unos párrafos..., a los que queremos que tengan el mismo fondo verde y el mismo tipo de letra, a todos ellos le podemos aplicar esa única clase CSS.
Código: [Seleccionar]
<h1 class="miClase">Encabezado</h1>
<p class="miClase">Párrafo</p>
<div class="miClase">div1</div>
<div class="miClase">div2</div>
<div class="miClase">div3</div>
<div class="miClase">div4</div>
<div class="miClase">div5</div>

Lo que NO se puede repetir son los id
Código: [Seleccionar]
<div id="miDiv">div1</div>
<div id="miDiv">div2</div>
<div id="miDiv">div3</div>
<div id="miDiv">div4</div>
<div id="miDiv">div5</div>
Los identificadores (id) son únicos para cada elemento, si los repetimos, no tendremos el resultado esperado.

Así que en lo que respecta a los estilos CSS, usaremos los id cuando queramos aplicar un estilo que va a ser exclusivo de un único elemento del documento.
Y usaremos class para estilos que van a ser compartidos por varios elementos del documento, incluso aunque se traten de elementos de distinta naturaleza.
NO respondo dudas por mensaje privado
Publicando vuestras dudas en el foro público conseguimos:
- Que más gente aporte respuestas mejores o complementarias.
- Que otras personas puedan aprender de vuestras dudas.

Mejor en PÚBLICO que en privado. Gracias

 

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