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: DRANXZ88 en 03 de Agosto 2021, 21:43
-
Propuesta de solución para el ejercicio CU01013D del curso tutorial de programación CSS desde cero de aprenderaprogramar.
HTML
<!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
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;
}
-
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
-
Buenos dias.
Una pregunta respecto a este ejercicio: ¿puede haber dos <div class "secundario"?.
Muchas gracias.
-
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.
<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
<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.