Autor Tema: Subclases css ejercicio CU01013D del curso css desde cero  (Leído 3510 veces)

hs.serna1235

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 4
    • Ver Perfil
Hola en estos momentos me encuentro realizando la sesion 13 del curso de css. Esta clase trata sobre la herencia, en mi caso en tratado de realizar unos cambios en el codigo base para verificar como funcionan la herencia con las pseudoclases pero no he podido. Aca dejo mi codigo:

Código: [Seleccionar]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!-- Código base para el curso CSS -->
<html>

<head>
<title>Portal web - aprenderaprogramar.com</title>
<meta charset="utf-8">
<meta name="description" content="Portal web aprenderaprogramar.com">
<meta name="keywords" content="aprender, programar, cursos, libros">
<link rel="stylesheet" type="text/css" href="estilos.css"></link>
</head>

<!-- Contenido de la página web -->
<body>
<!-- Cabecera de la página web -->
<div>
<h1>Portal web aprenderaprogramar.com</h1>
<h2>Didáctica y divulgación de la programación</h2>
</div>
<!-- Fin de la cabecera de la página web -->

<br />

<!-- Contenedor para la parte central -->
<div>

<!-- menu -->
<div>
<div class="menu">Menu </div>
<hr/>
<ul>
<li><a href="#">Inicio</a></li>
<li> <a href="libros.html">Libros de programación</a> </li>
<li> <a href="cursos.html">Cursos de programación</a> </li>
<li> <a href="humor.html">Humor informático</a> </li>
</ul>
</div>
<p>Hola adios</p>
<!-- fin menu -->
<!-- cuerpo -->
<div>

<!-- Texto con imágenes -->
<div>
<p>Aprender a programar es un objetivo que se plantea mucha gente y que no todos alcanzan.</p>
<p>Hay que tener claro que <a href="https://www.aprenderaprogramar.com">aprender programación</a> no es tarea de un día ni de una semana: aprender programación requiere al menos varios meses y, si hablamos de programación a nivel profesional, varios años. No queremos con esto desanimar a nadie: en un plazo de unos pocos días podemos estar haciendo nuestros primeros programas.</p>
<p>Puedes seguir uno de <a href="https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=57&Itemid=86">nuestros cursos</a> entre los varios disponibles. Cuando haya que utilizar un editor de textos recomendamos el uso de uno potente y sencillo como Notepad++, aunque son válidas otras alternativas como Crimson Editor.</p>
<a href="https://www.aprenderaprogramar.com/index.php?option=com_content&view=article&id=205&catid=57:herramientas-informaticas&Itemid=179">
<img src="http://i.imgur.com/afC0L.jpg" alt="Notepad++" title="Notepad++, un útil editor de texto">
</a>
<img src="http://www.crimsoneditor.com/images/logo.jpg" alt="Crimson" title="Crimson, un editor de texto alternativo">

</div>
<!-- Fin del texto con imágenes -->
<br/>
<!-- Formulario de contacto -->
<form method="get" action="accion.html">
Si quieres contactar con nosotros envíanos este formulario relleno: <br /><br />
Nombre: <input type="text" name="nombre" /><br />
Apellidos: <input type="text" name="apellidos" /><br />
Dirección: <input type="text" name="direccion" /><br />
Correo electrónico: <input type="text" name="correo" /><br />
Mensaje: <textarea name="mensaje" cols=30 rows=2></textarea><br /><br />
<input type="submit" value="Enviar">
<input type="reset" value="Cancelar">
</form>
<!-- Fin del formulario de contacto -->

</div>
<!-- fin cuerpo -->
</div>
<!-- fin contenedor para la parte central -->
<br /> <br /> <br />
<!-- Pie de página o footer -->
<div>
<img src="http://lh5.ggpht.com/_PeVwghrmOec/TMkzEonRrcI/AAAAAAAAAHc/IxL8g0fTYtk/an_oliva_png.png" alt="logo apr" title="Logo aprenderaprogramar.com">
Copyright 2006-2038 aprenderaprogramar.com
</div>
<!-- Fin del pie de página o footer -->
</body>
<!-- Fin del contenido de la página web -->
</html>

Archivo externo css:

Código: [Seleccionar]
/* Curso CSS estilos aprenderaprogramar.com*/
body{font-family:Arial;}
li.menu {color:red;}

Nota: Uso notepad++
Gracias
« Última modificación: 19 de Enero 2015, 22:14 por Alex Rodríguez »

Alex Rodríguez

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2050
    • Ver Perfil
Re:Subclases css ejercicio CU01013D del curso css desde cero
« Respuesta #1 en: 19 de Enero 2015, 22:16 »
Hola, tienes tratar de ir realizando apartado a apartado lo que pide el enunciado del ejercicio. El primer paso es establecer los atributos div para las etiquetas class. Vete realizando lo que pide el enunciado y cuando no sepas avanzar, pega el código que tengas e indica el punto exacto en el que no sabes cómo avanzar para darte una orientación o solución. Saludos.

hs.serna1235

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 4
    • Ver Perfil
Re:Subclases css ejercicio CU01013D del curso css desde cero
« Respuesta #2 en: 22 de Enero 2015, 23:23 »
Hola, en general mi problema con el ejercicio nace cuando quiero generar un subestilo en la clase.El porblema surge cuando utilzo la notacion de p.clase{}.Por el contrario si utilizo la notacion  .clase p{} si puedo realizar los cambios. Gracias, aca dejo el codigo....

Código: [Seleccionar]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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="secundaria"><h3>Lanzamos el producto <span>X-FASHION</span></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="secundaria"><h3>Mejoramos el producto T-MOTION</h3>
<p>Hemos lanzado una nueva versión del producto <span>T-MOTION</span></p>
<p><img src="http://i.imgur.com/SpZyc.png" title="Imagen del proudcto tmotion" alt="imagen producto tmotion" /></p>
</div>
</body>
</html>

Archivo Css
Código: [Seleccionar]
/* Curso CSS estilos aprenderaprogramar.com*/
body{font-family:Arial;}
.principal  {color:red;}
p.principal  {color:blue;}

 

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