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

Autor Tema: CSS ejemplo básico Formas deaplicar estilos interna y externa link rel CU01010D  (Leído 2053 veces)

KOFFERO

  • Principiante
  • **
  • Mensajes: 78
    • Ver Perfil
CSS ejemplo básico Formas deaplicar estilos interna y externa link rel CU01010D
« en: 29 de Septiembre 2017, 20:42 »
Formas de aplicar CSS: interno y externo. link rel y archivos de extensión css. Comentarios CSS (entrega CU01010D del curso básico de programación CSS)

Enunciado:
Citar
EJERCICIO 1

Modifica el código HTML mostrado a continuación 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).

Código ya modificado:
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">
<style type="text/css">
         h1{
    color: red;
}
h3{
    color: green;
}
p{
   color: brown;
}
</style>
</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>
Segundo enunciado:
Citar
EJERCICIO 2

Modifica el código HTML del ejercicio anterior 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]
<!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>
<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>
Código CSS:
Código: [Seleccionar]
/* Color rojo para los h1*/
h1{
color: blue;
}
/* Color verde para los h3*/
h3{
color: orange;
}
/* Color marron para los párrafos*/
p{
color: brown;
}
Un saludo. ;D
« Última modificación: 22 de Noviembre 2017, 20:11 por Alex Rodríguez »
En línea
¡Me encanta aprender!

Alex Rodríguez

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2050
    • Ver Perfil
Re:CSS ejemplo básico Formas deaplicar estilos interna y externa link rel CU01010D
« Respuesta #1 en: 22 de Noviembre 2017, 20:11 »
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".