Autor Tema: Tipos básicos de estilos CSS: por defecto y en línea. Sobreescritura CU01009D  (Leído 2115 veces)

LuisM

  • Intermedio
  • ***
  • APR2.COM
  • Mensajes: 131
    • Ver Perfil
Hola a todos ! paso a dejar el código del ejercicio propuesto CU01009D del tutorial pdf de programación CSS. Desde ya, muchas gracias. Un saludo, Luis

EJERCICIO

A partir del siguiente código:

Citar
<!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">
   </head>
   <body>
      <p><a href="principal.html" title="Página principal">Ir a la pagina principal</a></p>
      <h1>Novedades</h1>
      <p>Aquí presentamos las novedades del sitio.</p>
      <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>
      <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>
   </body>
</html>

Modifica el código HTML anterior para cumplir con estos requisitos mediante la aplicación de estilos en línea:

a) La etiqueta h1 debe mostrar su texto en color rojo.
b) La etiqueta h3 con el texto relativo a X-FASHION debe mostrar su texto en color verde.
c) La etiqueta h3 con el texto relativo a X-MOTION debe mostrar su texto en color azul.
d) Todos los párrafos deben mostrar su texto en color brown (marrón).


Respuesta:

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">
</head>
<body>
<p><a href="principal.html" title="Página principal" style="color:brown" >Ir a la pagina principal</a></p>
<h1 style="color:red">Novedades</h1>
<p style="color:brown">Aquí presentamos las novedades del sitio.</p>
<h3 style="color:green">Lanzamos el producto X-FASHION</h3>
<p style="color:brown">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>
<h3 style="color:blue">Mejoramos el producto T-MOTION</h3>
<p style="color:brown">Hemos lanzado una nueva versión del producto T-MOTION</p>
<p style="color:brown"><img src="http://i.imgur.com/SpZyc.png" title="Imagen del proudcto tmotion" alt="imagen producto tmotion" /></p>
</body>
</html>
« Última modificación: 18 de Febrero 2018, 13:57 por Ogramar »

KOFFERO

  • Principiante
  • **
  • Mensajes: 78
    • Ver Perfil
Hola Luis, tu ejercicio esta bien, pero no te olvides de agregar el punto y la coma cuando terminas de agregar los estilos CSS, <p style="color:brown;">

Saludo
¡Me encanta aprender!

LuisM

  • Intermedio
  • ***
  • APR2.COM
  • Mensajes: 131
    • Ver Perfil
Muchas gracias Jorge !! Son cosas que no debo olvidar porque esos "detalles" me van a ahorrar un futuro "dolor de cabeza" cuando vea que el  navegador no cumpla con lo pretendido.

 

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