Autor Tema: Ejercicio resuelto HTML y CSS aplicar class a etiquetas CU01012D color de texto (Leído 6110 veces)

borri_10 · « **en:** 12 de Marzo 2015, 16:21 »

Enunciado:

Citar

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

a) Establece atributos class para cada una de ellas con valores <<principal>> para la primera, y <<secundario>> para la segunda y la tercera.

b) Usando CSS establece como color de texto el rojo (red) y tamaño de fuente el 150% respecto de lo normal para los elementos cuyo valor class sea <<principal>>.

c) Usando CSS establece como color de texto el verde para los elementos y tamaño de fuente el 110% respecto de lo normal para los elementos cuyo valor class sea <<secundario>>.

d) Usando CSS establece como color de fondo para los párrafos dentro de elementos cuyo atributo class sea <<secundario>> el amarillo (yellow).

Respuesta:

Código: [Seleccionar]

<html>
<head>
<meta charset="utf-8">
<title> PORTAL WEB </title>
<link rel="stylesheet" type="text/css" href="SELECTORES CSS CU01012D.css">
</head>
</body>
<p><a href="principal.html" title="Pagina Principal">Ir a pagina principal</a></p>
<div>
<div class="principal">
<h1>Novedades</h1>
<p>Aqui presentamos las novedades del sitio</p>
</div>
</div>
<div class="secundario">
<div>
<h3>Lanzamos el producto</h3>
<p>Este producto permite estirar la piel hasta dejarla como la de un  bebe.</p>
</div>
</div>
<div>
<div class="secundario">
<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:25 »

Creo que te has olvidado de incluir el código CSS...

jimmorrison · « **Respuesta #2 en:** 17 de Abril 2015, 09:59 »

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_class.css"
</head>
<body>

<div class="principal">
<h1>Novedades</h1><p>Aquí presentamos las novedades delsitio.</p>
</div>

<div class="secundario">
<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 class="secundario">
<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

Código: [Seleccionar]

.principal{color: red; font-size: 150%;}
.secundario{color: green; font-size: 110;}
.secundario p{background-color: yellow;}

Alex Rodríguez · « **Respuesta #3 en:** 18 de Abril 2015, 22:27 »

Hola jimmorrison los errores que tienes son:

<meta charset=utf-8"> le faltan las comillas <meta charset="utf-8">

.secundario{color: green; font-size: 110;} te falta el % .secundario{color: green; font-size: 110%;}

Saludos

Alex Rodríguez · « **Respuesta #4 en:** 18 de Abril 2015, 22:31 »

El código sería (dejando el css interno):

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">
<style type="text/css">
.principal{color: red; font-size: 150%;}
.secundario{color: green; font-size: 110%;}
.secundario p{background-color: yellow;}
</style>
</head>
<body>

<div class="principal">
<h1>Novedades</h1><p>Aquí presentamos las novedades delsitio.</p>
</div>

<div class="secundario">
<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 class="secundario">
<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>

jimmorrison · « **Respuesta #5 en:** 18 de Abril 2015, 23:05 »

si gracias por la correccion

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

Noticias:

Autor Tema: Ejercicio resuelto HTML y CSS aplicar class a etiquetas CU01012D color de texto (Leído 6110 veces)

borri_10

Ejercicio resuelto HTML y CSS aplicar class a etiquetas CU01012D color de texto

Alex Rodríguez

Re:Ejercicio CU01012D- Selectores Class

jimmorrison

Re:Ejercicio CU01012D- Selectores Class

Alex Rodríguez

Re:Ejercicio CU01012D- Selectores Class

Alex Rodríguez

Re:Ejercicio resuelto HTML y CSS aplicar class a etiquetas CU01012D

jimmorrison

Re:Ejercicio resuelto HTML y CSS aplicar class a etiquetas CU01012D

Preguntas y respuestas