Autor Tema: Ejercicio resuelto HTML y CSS definir class y estilos color font-size CU01013D (Leído 3538 veces)

mariobeitia · « **en:** 11 de Agosto 2015, 18:56 »

Citar

Analiza el código HTML del ejercicio (http://aprenderaprogramar.com/index.php?option=com_content&view=article&id=716:concepto-de-herencia-en-hojas-de-estilo-css-ique-es-forzar-herencia-con-inherit-ejemplos-cu01013d&catid=75:tutorial-basico-programador-web-css-desde-cero&Itemid=203).

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 130% respecto de lo normal para los elementos h1 que se encuentren dentro de un elemento cuyo valor class sea <<principal>>.

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

d) Usando CSS establece como color de fondo el amarillo (yellow) para los elementos span que se encuentren dentro de elementos h3 que se encuentren dentro de elementos cuyo atributo class sea <<secundario>>.

e) Establece como tipo de fuente para todo el documento HTML el tipo Arial.

Me pegué terrible mareada, je, pero creo que es así como debería escribirse.

Agradezco lo miren (para descargar pulsar en el link de los archivos estando logeados).

Saludos

Alex Rodríguez · « **Respuesta #1 en:** 11 de Agosto 2015, 23:23 »

Hola Mario, el ejercicio no pedía establecer el atributo de clase "secundario" para elementos internos a los div. Por tanto esto no es correcto:

<div class="secundario">
<h3>Lanzamos el producto <span>X-FASHION</span></h3>

Lo que sería correcto es:

<div class="secundario">
<h3>Lanzamos el producto <span>X-FASHION</span></h3>

El código HTML quedaría así:

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" type="text/css" href="estilo_ej4.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>

Y el código CSS quedaría así:

Código: [Seleccionar]

/* Comentario en CSS estilos aprenderaprogramar.com*/
body{font-family: Arial;}
.principal h1{color:red; font-size:130%;}
.secundario h3{ color:green;font-size:110%;}
.secundario h3 span {background-color:yellow;}

Saludos

mariobeitia · « **Respuesta #2 en:** 12 de Agosto 2015, 00:05 »

Clarooooo!!!!
Es cierto, no encontraba la manera de hacerlo funcionar, ahora entiendo porque tuve que agregar lo otro.
Muchas, muchas, gracias!!!

Saludos

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

Noticias: