Autor Tema: CU01010D curso CSS diferencia entre estilos en línea, interno y externo  (Leído 4213 veces)

borri_10

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 31
    • Ver Perfil
Enunciado:

Citar
EJERCICIO 2
Modifica el código HTML del ejercicio para cumplir con estos requisitos mediante la aplicación de CSS externo definido en un archivo independiente, donde debes incluir al menos un comentario:

a) Todas las etiquetas h1 deben mostrar su texto en color azul.
b) Todas las etiquetas h3 deben mostrar su texto en color orange (naranja).
c) Todos los párrafos deben mostrar su texto en color brown (marrón).


Código HTML

Código: [Seleccionar]
<html>
<head>
<meta charset="utf-8">
<title> EJERCICIO CU01010-1 </title>
<link rel="stylesheet" type="text/css" href="CSS CU01010-1.CSS">
</head>
</body>
<p><a href="principal.html" title="Pagina Principal">Ir a pagina principal</a></p>
<h1>Novedades</h1>
<p>Aqui presentamos las novedades del sitio</p>
<h3>Lanzamos el producto</h3>
<p>Este producto permite estirar la piel hasta dejarla como la de un  bebe.</p>
<p><img src="//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 version del procuto T-MOTION</p>
<p><img src="http://i.imgur.com/SpZyc.png" title="Imagen del producto tmotion"alt="imagen producto tmotion"/></p>
</body>
</html>

Código CSS

Código: [Seleccionar]
/*En proximos ejercicios cambiaré el h1 por h2*/
h1{color:blue;}
h3{color:orange;}
p{color:brown;}

« Última modificación: 18 de Abril 2015, 22:17 por Alex Rodríguez »

Alex Rodríguez

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2050
    • Ver Perfil
Hola en esta entrega del curso había 2 ejercicios (ejercicio 1 y ejercicio 2). Has respondido (todo correcto) el ejercicio 2, te faltaría responder el ejercicio 1.

Saludos

jimmorrison

  • Principiante
  • **
  • APR2.COM
  • Mensajes: 51
  • la programacion es vida
    • Ver Perfil
Enunciado ejercicio 1:

Citar
EJERCICIO 1

Modifica el código HTML del ejercicio para cumplir con estos requisitos mediante la aplicación de estilos internos:

a) Todas las etiquetas h1 deben mostrar su texto en color rojo.
b) Todas las etiquetas h3 deben mostrar su texto en color verde.
c) Todos los párrafos deben mostrar su texto en color brown (marrón).

Respuesta ejercicio 1 con css interno

Código: [Seleccionar]
<!Doctype html>
<html lang="es">
<head>
<title>curso de css</title>
<meta charset=utf">
<meta name="description" content=" aprender a programar css">
<meta name="keywords" contents="aprender css tutorial">
<style>
h1{color: red;}
h3{color: green;}
p{color: brown;}
</style>
</head>
<p><a href="principal.html" title="pagina 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>


Enunciado ejercicio 2:

Citar
EJERCICIO 2

Modifica el código HTML del ejercicio para cumplir con estos requisitos mediante la aplicación de CSS externo definido en un archivo independiente, donde debes incluir al menos un comentario:

a) Todas las etiquetas h1 deben mostrar su texto en color azul.
b) Todas las etiquetas h3 deben mostrar su texto en color orange (naranja).
c) Todos los párrafos deben mostrar su texto en color brown (marrón).


Respuesta ejercicio 2 con css externo

Código: [Seleccionar]
h1{color: blue;}
h3{color: orange;}
p{color: brown;}


html
Código: [Seleccionar]
<!Doctype html>
<html lang="es">
<head>
<title>curso de css</title>
<meta charset=utf">
<meta name="description" content=" aprender a programar css">
<meta name="keywords" contents="aprender css tutorial">
<link rel="stylesheet" href="css/ejercicio_estilos_archivos_externos.css">
</head>
<p><a href="principal.html" title="pagina 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>
« Última modificación: 18 de Abril 2015, 22:20 por Alex Rodríguez »

Alex Rodríguez

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2050
    • Ver Perfil
Hola jimmorrison todo correcto lo único que tienes mal escrito es <meta charset=utf">  tendría que ser <meta charset="utf-8">

Saludos

Tony Alcala

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 2
    • Ver Perfil
Espero sea la forma de formular una pregunta, al aplicar el CSS externo me ha cambiado e logo el que dice imagen producto x-fasion

Alex Rodríguez

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2050
    • Ver Perfil
Hola Tony, pega tu código para poder revisarlo siguiendo estas instrucciones: https://www.aprenderaprogramar.com/foros/index.php?topic=1460.0

Saludos

 

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