Foros aprenderaprogramar.com
Aprender a programar => Aprender a programar desde cero => Mensaje iniciado por: ivanegranda en 17 de Agosto 2017, 02:00
-
Hola, buenos días, aquí mi resolución del ejercicio numero CU01012D del tema "Selector de clases CSS: class. Aplicar estilos CSS en distintos lugares de una web"
Planteamiento: 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).
Resolución:
HTML <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css.css">
<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">
</head>
<body>
<div class="principal">
<h1>Novedades</h1><p>Aquí presentamos las novedades del sitio.</p>
</div>
<div class="secundaria">
<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="secundaria">
<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
.principal{
color:red;
font-size: 150%;
}
.secundaria{
color:green;
font-size: 110%;
}
.secundaria p{
color:yellow;
}
Cualquier corrección o aclaración sera bien recibida, saludos.
-
Buenas, primero que nada debes poner nombres apropiados a tu publicación.
En cuanto el ejercicio esta bien resuelto.
Un saludo. ;D ;D