« anterior próximo »
Páginas: [1]

Autor Tema: CSS. Selector de clases: class, aplicar estilos en distintos lugares CU01012D#  (Leído 2243 veces)

KOFFERO

  • Principiante
  • **
  • Mensajes: 78
    • Ver Perfil
CSS. Selector de clases: class, aplicar estilos en distintos lugares CU01012D#
« en: 02 de Octubre 2017, 18:24 »
Selector de clases CSS: class. Aplicar estilos CSS en distintos lugares de una web. Ejemplos. (Ejercicio CU01012D del curso básico de programación CSS)

Enunciado:
Citar
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).

Código HTML:
Código: [Seleccionar]
<!DOCTYPE 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="estilos.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>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>
Código CSS:
Código: [Seleccionar]
/* Color rojo y temaño de letra 150% para todos los elementos*/
.principal{
color: red;
  font-size: 150%;
}
/* Color verde y temaño de letra 110% para todos los elementos*/
.secundario{
color: green;
  font-size: 110%;
}
.secundario p{
background-color: yellow;
}
Un saludo. ;D
« Última modificación: 22 de Noviembre 2017, 20:16 por Alex Rodríguez »
En línea
¡Me encanta aprender!

Alex Rodríguez

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2050
    • Ver Perfil
Re:CSS. Selector de clases: class, aplicar estilos en distintos lugares CU01012D#
« Respuesta #1 en: 22 de Noviembre 2017, 20:16 »
Hola, ejercicio bien resuelto

Saludos
En línea
Páginas: [1]
« anterior próximo »
 

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