Autor Tema: Concepto de herencia en hojas de estilo CSS. ¿Qué es? Forzar herencia CU01013D  (Leído 6580 veces)

AnalfabetaDigital

  • Sin experiencia
  • *
  • Mensajes: 20
  • Dando palos de ciego ;)
    • Ver Perfil
Buenas, Estoy haciendo el ejercicio CU01013D del tutorial CSS:

Código: [Seleccionar]
  p.destacado { background-color: orange; font-weight:bold; font-size:100%; }
  div.destacado {background-color: blue; font-weight:bold; font-size:100%; }

en el archivo html, he cambiado el p y el div añadiendoles el atributo destacado,  y en el css he copiado la orden como sale arriba, pero me sale todo en color naranja.

No le encuentro el fallo, os adjunto mis códigos, a ver si alguien me puede echar una mano.

Código: [Seleccionar]
p.destacado{background-color:orange;
font-weight:bold;
font-size:100%;}


div.destacado{background-color:blue;
font-weight:bold;
font-size:100%;}


Y os adjunto también el archivo html:

Código: [Seleccionar]
<div class="destacado">
<div>Menu</div>
<hr/>
<ul>
<li><a href="#" >Inicio</a></li>
<li><a href="libros.html" >Libros de programacion</a></li>
<li><a href="cursos.html" >Cursos de programacion</a></li>
<li><a href="Humor.html" >Humor informatico</a></li>
</ul>
</div>

Código: [Seleccionar]
<div class="destacado">
<h1>Portal web de aprenderaprogramar.com</h1>
<h2>Didactica y divulgacion de la programacion</h2>
</div>

Código: [Seleccionar]
<p class="destacado">Aprender a programar es un objetivo que se plantea mucha gente y que no todos alcanzan.</p>
Código: [Seleccionar]
<p class="destacado">Si quieres contactar con nosotros envianos este formulario relleno:</p
Gracias de antemano. Si hay algún error en el mensaje, os pido disculpas, es mi primera entrada en un foro.

Saludos.  :)
« Última modificación: 14 de Mayo 2016, 21:27 por Ogramar »

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2660
    • Ver Perfil
Buenas ¿dando palos de ciego? :) :)

Consejo 1: leer https://www.aprenderaprogramar.com/foros/index.php?topic=1460.0 sobre todo incluir el código de ejercicio al que te quieras referir, por ejemplo CU01013D

Lee los comentarios en https://www.aprenderaprogramar.com/foros/index.php?topic=1478.0 y dinos si te quedan dudas

Salu2

AnalfabetaDigital

  • Sin experiencia
  • *
  • Mensajes: 20
  • Dando palos de ciego ;)
    • Ver Perfil
Buenas,

Perdonar por el error del título con referencia al ejercicio, en próximos post lo haré mejor. ???

Sobre el ejercicio he leído el post que me has enviado y sigo sin resolverlo.
He cambiado el código html, te envío la parte modificada:

Código: [Seleccionar]
[color=pink]<div class="destacado">[/color]
<h1>Portal web de aprenderaprogramar.com</h1>
<h2>Didactica y divulgacion de la programacion</h2>
</div>
<!--Fin de la cabecera-->

<br/>

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


<!--menu-->
<div>
[color=pink]<div class="destacado"><span>Menu</div>[/color]
<hr/>
<ul>
<li><a href="#" >Inicio</a></li>
<li><a href="libros.html" >Libros de programacion</a></li>
<li><a href="cursos.html" >Cursos de programacion</a></li>
<li><a href="Humor.html" >Humor informatico</a></li>
</ul>
[color=pink]</span>[/color]
</div>
<!--fin menu-->
<!--cuerpo-->
</div>



<!--Texto con imagenes-->
<div>
[color=pink]<p class="destacado">[/color]Aprender a programar es un objetivo que se plantea mucha gente y que no todos alcanzan.</p>

Con este código CSS:

Código: [Seleccionar]
p.destacado{background-color:orange;
font-weight:bold;
font-size:100%;}


div.destacado{background-color:blue;
font-weight:bold;
font-size:100%;}

div.destacado span{background-color:blue;
font-weight:bold;
font-size:100%;}


Ayuda, please, me estoy volviendo loca!!!!! No sé en qué me estoy equivocando.

Gracias y un saludo.

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2660
    • Ver Perfil
Buenas, el código que has enviado no está completo (faltan las etiquetas <html> y otras) y tiene partes no válidas como [ color = pink ]

Revísalo y pégalo completo y sin errores para a su vez poder revisarlo

Salu2
« Última modificación: 17 de Mayo 2016, 13:21 por Ogramar »

AnalfabetaDigital

  • Sin experiencia
  • *
  • Mensajes: 20
  • Dando palos de ciego ;)
    • Ver Perfil
Buenas,

Te envío el código html entero:

Código: [Seleccionar]
<!DOCTYPE html>
<!--codigo base par 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="/home/growstore/Documentos/Cosasdelserver/WP/Curso Css/Ejercicios/Tema 8. Concepto de herencia en hojas de estilo CSS./Ejercicio_1.css">
</head>

<!--Contenido de la pagina web-->
<body>
<!--Cabecera de la pagina web-->
<div class="destacado">
<h1>Portal web de aprenderaprogramar.com</h1>
<h2>Didactica y divulgacion de la programacion</h2>
</div>
<!--Fin de la cabecera-->

<br/>

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


<!--menu-->
<div>
<div class="destacado"><span>Menu</div>
<hr/>
<ul>
<li><a href="#" >Inicio</a></li>
<li><a href="libros.html" >Libros de programacion</a></li>
<li><a href="cursos.html" >Cursos de programacion</a></li>
<li><a href="Humor.html" >Humor informatico</a></li>
</ul>
</span>
</div>
<!--fin menu-->
<!--cuerpo-->
</div>



<!--Texto con imagenes-->
<div>
<p class="destacado">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 imagenes-->
<br/>
<!--Formulario de contacto-->
<form method="get"action="accion.html">
<p class="destacado">Si quieres contactar con nosotros envianos este formulario relleno:</p><br/><br/>
Nombre:<input type="text"name="nombre"/><br/>
Apellidos:<input type="text"name="apellidos"/><br/>
Direccion:<input type="text"name="direccion"/><br/>
Correo electronico:<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-->


</div>
<!--fin cuerpo-->
</div>
<!--fin contenedor para la parte central-->
<br/><br/><br/>
<!--Pie de pagina 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 pagina-->
</body>
<!--Fin del contenido de la pagina web-->

</html>

Gracias por tu paciencia  :)

un saludo.

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2660
    • Ver Perfil
Buenas, pero ¿qué ejercicio estás realizando? El ejercicio de la entrega CU01013D no se corresponde con el código que has pegado.

Confirma el código del ejercicio, ¿es quizás otro ejercicio?

El ejercicio CU01013D indica que se deben seguir ciertos pasos con este código:

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>
<div><h1>Novedades</h1><p>Aquí presentamos las novedades del sitio.</p></div>
<div><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><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>

Pero este código no coincide con el que has puesto

Salu2

AnalfabetaDigital

  • Sin experiencia
  • *
  • Mensajes: 20
  • Dando palos de ciego ;)
    • Ver Perfil
Hola, de nuevo.

El tema que estoy haciendo es el:  (CU01013D), pero el ejercicio no es el que viene al final del tema. Es el que viene en el apartado: DEFINIR CLASES QUE SOLO SEAN APLICABLES A ETIQUETAS ESPECÍFICAS. El tercero, te mando el código que pone en el enunciado:

Código: [Seleccionar]
/* Curso CSS estilos aprenderaprogramar.com*/
  p.destacado { background-color: orange; font-weight:bold; font-size:100%; }
  div.destacado {background-color: blue; font-weight:bold; font-size:100%; }


Perdona, me debo estar explicando mal.
Gracias.

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2660
    • Ver Perfil
Aaah! Claro, tienes que referir exactamente lo que estás haciendo, normalmente cuando hablamos de ejercicios nos referimos al ejercicio (o ejercicios) que vienen al final de cada tema.

He tomado tu código html y tu código css y los he puesto en un solo archivo:

Código: [Seleccionar]
<!DOCTYPE html>
<!--codigo base par 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">

<style type="text/css">
p.destacado{background-color:orange;
font-weight:bold;
font-size:100%;}


div.destacado{background-color:blue;
font-weight:bold;
font-size:100%;}

div.destacado span{background-color:blue;
font-weight:bold;
font-size:100%;}
</style>

</head>

<!--Contenido de la pagina web-->
<body>
<!--Cabecera de la pagina web-->
<div class="destacado">
<h1>Portal web de aprenderaprogramar.com</h1>
<h2>Didactica y divulgacion de la programacion</h2>
</div>
<!--Fin de la cabecera-->

<br/>

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


<!--menu-->
<div>
<div class="destacado"><span>Menu</div>
<hr/>
<ul>
<li><a href="#" >Inicio</a></li>
<li><a href="libros.html" >Libros de programacion</a></li>
<li><a href="cursos.html" >Cursos de programacion</a></li>
<li><a href="Humor.html" >Humor informatico</a></li>
</ul>
</span>
</div>
<!--fin menu-->
<!--cuerpo-->
</div>



<!--Texto con imagenes-->
<div>
<p class="destacado">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 imagenes-->
<br/>
<!--Formulario de contacto-->
<form method="get"action="accion.html">
<p class="destacado">Si quieres contactar con nosotros envianos este formulario relleno:</p><br/><br/>
Nombre:<input type="text"name="nombre"/><br/>
Apellidos:<input type="text"name="apellidos"/><br/>
Direccion:<input type="text"name="direccion"/><br/>
Correo electronico:<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-->


</div>
<!--fin cuerpo-->
</div>
<!--fin contenedor para la parte central-->
<br/><br/><br/>
<!--Pie de pagina 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 pagina-->
</body>
<!--Fin del contenido de la pagina web-->

</html>

Yo lo veo bien: unas cosas se ven con fondo azul y otras con fondo naranja.

¿Puede ser que no estuvieras enlazando el archivo css correcto?

Salu2

AnalfabetaDigital

  • Sin experiencia
  • *
  • Mensajes: 20
  • Dando palos de ciego ;)
    • Ver Perfil
Buenas,

Pues no lo entiendo. He probado a insertar el código CSS dentro del código HTML y se ve correctamente.
He revisado el enlace y, por más vueltas que le doy, es correcto. He probado a instalarme el navegador Chrome, por si las moscas, y tampoco se ve, con el link del CSS.

No entiendo nada. Seguiré con el temario, a ver si me vuelve a pasar. Si encontrase el error, ya te cuento.

Mil gracias por tu ayuda. :-*

Ogramar

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 2660
    • Ver Perfil
Puede que el problema esté en el refresco del navegador. El navegador "cachea" (se guarda) la información para no tener que recargarla. Así, si tú realizas cambios es posible que no los veas si no refrescas el navegador. Para refrescar el navegador tienes que borrar todo el historial - caché - datos, cerrar el  navegador, volver a abrirlo y recargar la página nuevamente. Pulsa CTRL + F5 para mayor seguridad una vez cargada.

Salu2

AnalfabetaDigital

  • Sin experiencia
  • *
  • Mensajes: 20
  • Dando palos de ciego ;)
    • Ver Perfil
La cosa se complica....
He probado en un servidor de pruebas, y allí sí que lee las hojas de estilo CSS. No sé si he tocado algo  por eso, ahora no me reconoce las hojas css en mi ordenador.
El editor de texto que uso es Blue fish, ya que trabajo en ubuntu 14.04 lts.
Esto ha empezado a pasarme desde el jueves, antes sí que lo leía todo correctamente.

Alguien puede decirme qué he podido tocar, o cómo arreglarlo, o alguna solución??

Os lo agradezco mil.  ;D

Un saludo.

AnalfabetaDigital

  • Sin experiencia
  • *
  • Mensajes: 20
  • Dando palos de ciego ;)
    • Ver Perfil
Buenas,

Toqueteando por la barra de herramientas, me he metido en:
Herramientas- Desarrollador web- Editor de estilos y me da el siguiente error sobre el código html anteriormente mencionado:

Me sale un cartelto rojo con un signo de prohibido y me dice que la hoja de estilos no puede ser cargada y luego me sale la ruta de la hoja de Css, pero a partir de un punto salen unos simbolitos.

A ver si a alguien le suena esto.

Gracias


pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Hola.

Por intentar a buscar una solución, podría ser que tu error estuviese en esta línea.

Código: [Seleccionar]
<link rel="stylesheet"type="text/css"href="/home/growstore/Documentos/Cosasdelserver/WP/Curso Css/Ejercicios/Tema 8. Concepto de herencia en hojas de estilo CSS./Ejercicio_1.css">
¿Tienes el archivo HTML en la misma carpeta que el archivo CSS?

Saludos.


AnalfabetaDigital

  • Sin experiencia
  • *
  • Mensajes: 20
  • Dando palos de ciego ;)
    • Ver Perfil
Hola,

Sí, los tengo en la misma carpeta. Ya lo había mirado, el link no es.
Finalmente he decidido insertar el código CSS en el Html, porque así sí que se ve todo bien.

Muchísimas gracias por tu ayuda. ;)

pedro,,

  • Moderador Global
  • Experto
  • *******
  • APR2.COM
  • Mensajes: 1292
    • Ver Perfil
Pero si dejas el link de esta forma:

Código: [Seleccionar]
<link rel="stylesheet" type="text/css" href="Ejercicio_1.css" />
¿tampoco te funciona?

AnalfabetaDigital

  • Sin experiencia
  • *
  • Mensajes: 20
  • Dando palos de ciego ;)
    • Ver Perfil
ERES DE FUCKING MASTER OF THE UNIVERSE!!!!
Así, sí!! Así sí!! Así se ve perfectamente!!!
Muchísimas gracias!!! Me has arreglao la vida!!!

 ;D ;D ;D ;D

 

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