Autor Tema: Ejercicio resuelto CU01011D curso CSS -Selectores por id diferenciar partes web (Leído 5478 veces)

borri_10 · « **en:** 12 de Marzo 2015, 15:29 »

Enunciado:

Citar

Analiza el siguiente código HTML. En él encontrarás tres etiquetas div. Haz lo siguiente:

a) Establece atributos id para cada una de ellas con valores <<novedades>> para la primera, <<xFashion>> para la segunda y <<tMotion>> para la tercera.

b) Usando CSS establece como color de texto el rojo (red) para los elementos h1 que se encuentren dentro del elemento con id <<novedades>>.

c) Usando CSS establece como color de texto el verde para los elementos h3 que se encuentren dentro de los elementos con id <<xFashion>> y <<tMotion>>.

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

Código del ejercicio...

...

Respuesta a lo que pide el ejercicio:

Código: [Seleccionar]

<html>
<head>
<meta charset="utf-8">
<title> PORTAL WEB </title>
<link rel="stylesheet" type="text/css" href="CSS CU01011.css">
</head>
</body>
<p><a href="principal.html" title="Pagina Principal">Ir a pagina principal</a></p>
<div id="Novedades">
<div>
<h1>Novedades</h1>
<p>Aqui presentamos las novedades del sitio</p>
</div>
</div>
<div id="X-FASHION">
<div>
<h3>Lanzamos el producto</h3>
<p>Este producto permite estirar la piel hasta dejarla como la de un  bebe.</p>
<p><img src="//i.imgur.com/tq5Bs.png" title="Imagen del producto" alt="Imagen producto x-fashion"/></p>
</div>
</div>
<div id="T-MOTION">
<div>
<h3>Mejoramos el producto T-MOTION</h3>
<p>Hemos lanzado una nueva version del procuto T-MOTION</p>
<p><img src="http://i.imgur.com/SpZyc.png" title="Imagen del producto tmotion"alt="imagen producto tmotion"/></p>
</div>
</div>
</body>
</html>

Alex Rodríguez · « **Respuesta #1 en:** 12 de Marzo 2015, 17:24 »

Hola me parece que te has olvidado de incluir el código CSS?

borri_10 · « **Respuesta #2 en:** 16 de Marzo 2015, 15:25 »

¿ Lo incluyo de alguna manera? O con copiarlo y pegarlo debajo vale?.

Saludos,

Alex Rodríguez · « **Respuesta #3 en:** 16 de Marzo 2015, 17:03 »

Hola, simplemente copiarlo y pegarlo. Cuando tengas código en varios archivos simplemente indica qué es cada cosa y pega el código, por ejemplo:

Código HTML:

Código: [Seleccionar]

Aquí iría el código html
Código CSS:

Código: [Seleccionar]

Aquí iría el código CSS
Código JavaScript:

Código: [Seleccionar]

Aquí iría el código JavaScript
Saludos

borri_10 · « **Respuesta #4 en:** 17 de Marzo 2015, 15:20 »

Código: [Seleccionar]

#Novedades {color:red;background-color:yellow;}
#X-FASHION {color:green;}
#T-MOTION {color:green;}

Código: [Seleccionar]

<html>
<head>
<meta charset="utf-8">
<title> PORTAL WEB </title>
<link rel="stylesheet" type="text/css" href="CSS CU01011.css">
</head>
</body>
<p><a href="principal.html" title="Pagina Principal">Ir a pagina principal</a></p>
<div id="Novedades">
<div>
<h1>Novedades</h1>
<p>Aqui presentamos las novedades del sitio</p>
</div>
</div>
<div id="X-FASHION">
<div>
<h3>Lanzamos el producto</h3>
<p>Este producto permite estirar la piel hasta dejarla como la de un  bebe.</p>
<p><img src="//i.imgur.com/tq5Bs.png" title="Imagen del producto" alt="Imagen producto x-fashion"/></p>
</div>
</div>
<div id="T-MOTION">
<div>
<h3>Mejoramos el producto T-MOTION</h3>
<p>Hemos lanzado una nueva version del procuto T-MOTION</p>
<p><img src="http://i.imgur.com/SpZyc.png" title="Imagen del producto tmotion"alt="imagen producto tmotion"/></p>
</div>
</div>
</body>
</html>

Alex Rodríguez · « **Respuesta #5 en:** 17 de Marzo 2015, 16:57 »

Hola, revisando los apartados:

Citar

Analiza el siguiente código HTML. En él encontrarás tres etiquetas div. Haz lo siguiente:

a) Establece atributos id para cada una de ellas con valores <<novedades>> para la primera, <<xFashion>> para la segunda y <<tMotion>> para la tercera.

Bien (recomendable no usar guiones en los nombres)

Citar

b) Usando CSS establece como color de texto el rojo (red) para los elementos h1 que se encuentren dentro del elemento con id <<novedades>>.

Para que la regla sólo aplique a elementos h1 dentro del elemento con id novedades sería así:

#Novedades h1 {color:red;}

Como tú la has puesto #Novedades {color:red;background-color:yellow;} aplicaría a todos los elementos dentro del elemento con id Novedades

Citar

c) Usando CSS establece como color de texto el verde para los elementos h3 que se encuentren dentro de los elementos con id <<xFashion>> y <<tMotion>>.

Bien. Para evitar repetir código mejor así: #X-FASHION, #T-MOTION {color:green;}

Citar

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

Bien. Se dejaría #Novedades {background-color:yellow;}

Saludos

jimmorrison · « **Respuesta #6 en:** 17 de Abril 2015, 08:36 »

html

Código: [Seleccionar]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 

"http://www.w3.org/TR/html4/loose.dtd">
<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="css/ejercicio_selectores.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>

css externo

Código: [Seleccionar]

#novedades h1{
color: red;
}

#xFashion h3, #tMotion h3{
color: green;
}

#novedades{background-color: yellow;}

Alex Rodríguez · « **Respuesta #7 en:** 17 de Abril 2015, 11:04 »

Hola jimmorrison, todo bien, lo unico que te falta es <meta charset=utf-8"> faltan las comillas de apertura

Saludos

Foros aprenderaprogramar.com
Didáctica y divulgación de la programación

Noticias:

Autor Tema: Ejercicio resuelto CU01011D curso CSS -Selectores por id diferenciar partes web (Leído 5478 veces)

borri_10

Ejercicio resuelto CU01011D curso CSS -Selectores por id diferenciar partes web

Alex Rodríguez

Re:Ejercicio CU01011D-Selectores por Id

borri_10

Re:Ejercicio resuelto CU01011D curso CSS -Selectores por id diferenciar partes web

Alex Rodríguez

Re:Ejercicio resuelto CU01011D curso CSS -Selectores por id diferenciar partes web

borri_10

Re:Ejercicio resuelto CU01011D curso CSS -Selectores por id diferenciar partes web

Alex Rodríguez

Re:Ejercicio resuelto CU01011D curso CSS -Selectores por id diferenciar partes web

jimmorrison

Re:Ejercicio resuelto CU01011D curso CSS -Selectores por id diferenciar partes web

Alex Rodríguez

Re:Ejercicio resuelto CU01011D curso CSS -Selectores por id diferenciar partes web

Preguntas y respuestas