Autor Tema: Selector de clases CSS: class. Aplicar estilos CSS en distintos lugares CU01012D  (Leído 1782 veces)

LuisM

  • Intermedio
  • ***
  • APR2.COM
  • Mensajes: 131
    • Ver Perfil
Hola a todos !! dejo a continuación el código HTML y CSS del ejercicio propuesto CU01012D del tutorial de programación CSS. Desde ya muchas gracias. Un saludo,

Luis

EJERCICIO

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).


Codigo HTML

Código: [Seleccionar]
<!DOCTYPE html>
<!-- ejercicio CU01012D.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" type="text/CSS" href="estilosCU01012D.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 X-FASHION</h3>
<p class="fondoTexto">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 class="fondoTexto">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>


Código CSS

Código: [Seleccionar]
/* Hoja de estilos: estilosCU01012D.css */
/* correspondiente a ejercicioCU01012D.html */
.principal{
color:red; font-size:150%;
}
.secundario{
color:green; font-size:110%;
}
.fondoTexto {
background:yellow;
}
« Última modificación: 21 de Febrero 2018, 18:23 por Ogramar »

KOFFERO

  • Principiante
  • **
  • Mensajes: 78
    • Ver Perfil
Hola Luis!!!!
El ejercicio cumple con lo que pedia el enunciado.

Un saludo. ;) ;) ;)
¡Me encanta aprender!

 

Sobre la educación, sólo puedo decir que es el tema más importante en el que nosotros, como pueblo, debemos involucrarnos.

Abraham Lincoln (1808-1865) Presidente estadounidense.

aprenderaprogramar.com: Desde 2006 comprometidos con la didáctica y divulgación de la programación

Preguntas y respuestas

¿Cómo establecer o cambiar la imagen asociada (avatar) de usuario?
  1. Inicia sesión con tu nombre de usuario y contraseña.
  2. Pulsa en perfil --> perfil del foro
  3. Elige la imagen personalizada que quieras usar. Puedes escogerla de una galería de imágenes o subirla desde tu ordenador.
  4. En la parte final de la página pulsa el botón "cambiar perfil".