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: Jesu en 03 de Septiembre 2017, 22:15

Título: HTML y CSS definir elementos de una web con id por ejemplo div y estilo CU01011D
Publicado por: Jesu en 03 de Septiembre 2017, 22:15
Solución al ejercicio CU01011D del manual de programación web desde cero con CSS:

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" href="Ejercicio11.css">
</head>

<body>
<div id="novedades">
<h1>Novedades</h1>
<p>Aquí presentamos las novedades del sitio.</p>
</div>

<div id="xfashion">
<h3>Lanzamos el producto X-FASHION</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 id="tmotion">
<h3>Mejoramos el producto T-MOTION</h3>
<p>Hemos lanzado una nueva versión del producto T-MOTION</p>
<p><img src="http://i.imgur.com/SpZyc.png" title="Imagen del proudcto tmotion" alt="imagen producto tmotion" /></p>
</div>

</body>
</html>

Estilos Externos

Código: [Seleccionar]
#novedades h1{
    color: red;
    background-color: yellow;
}
#xfashion h3{
    color: green;
}
Título: Re:HTML y CSS definir elementos de una web con id por ejemplo div y estilo CU01011D
Publicado por: Ogramar en 21 de Octubre 2017, 18:17
Buenas, en líneas generales correcto, con estas observaciones.

Tener en cuenta que xfashion no es lo mismo que xFashion, es decir, cambiar una letra de minúscula a mayúscula o al revés podría generarnos errores en nuestros códigos. El ejercicio proponía usar xFashion.

Tener en cuenta que la regla CSS que has aplicado no es exactamente lo que se pedía en el ejercicio en este apartado:

d) Usando CSS establece como color de fondo para el elemento con id <<novedades>> el amarillo (yellow).

Esta regla:
Código: [Seleccionar]
#novedades h1{
    color: red;
    background-color: yellow;
}

Implica que todos los elementos h1 dentro de un elemento cuyo id es novedades, tengan fondo amarillo, pero el ejercicio pedía que el elemento con id novedades tuviera fondo amarillo, que no es lo mismo (dentro de ese elemento podría haber más cosas además de h1). Puede verse planteado así en https://www.aprenderaprogramar.com/foros/index.php?topic=3699.0

Salu2