Autor Tema: CSS añadir elementos dentro de otros elementos anidamiento de regla CU01013D.  (Leído 1899 veces)

joseantonio60

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 6
    • Ver Perfil
Ante todo saludos ya que soy nuevo en el foro.

Mi pregunta es como debo hacer para añadir una nueva regla para que, por ejemplo, los párrafos me salgan en oblicuo.

Intento hacer de la siguiente manera:

Codigo html

Código: [Seleccionar]
<!DOCTYPE html>

<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="estilos4.css">

</head>

<body>

<div class="principal"><h1>Novedades</h1><p>Aquí presentamos las novedades del sitio.</p></div>

<div class="secundario">

<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="secundario">

<h3>Mejoramos el producto <span>T-MOTION</span></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>

</div>

</body>
</html>


Codigo CSS

Código: [Seleccionar]
.principal  h1{
 color:red;
 font-size:150%;
 }
 .secundario h3 {
color:green;
font-size:110%;
 }
  .secundario h3 span {
background-color:red;
font-size:200%;
 }
 .secudario p {
font-style:oblique;
 }

Entiendo que, con el último elemento, estoy diciendo que todos los parrafos que se encuentren en class secundario tendrian que ser del tipo de letra oblicuo, pero algo estoy haciendo mal, ya que, no sale.

En lecciones anteriores explica como darle formato a los parrafos que no se encuentran entre divisores, pero en este caso si lo están.

Gracias de antemano.

« Última modificación: 17 de Junio 2017, 18:39 por Alex Rodríguez »

bermartinv

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 298
    • Ver Perfil
Hola joseantonio60,
está bien resuelto, intenta borrar el código y volverlo a escribir. A veces cuando copias-pegas el editor copia cosas que no queremos y no funciona como queremos. Borré esa característica CSS y la volví a escribir y me funcionó.
Saludos

joseantonio60

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 6
    • Ver Perfil
Gracias por la respuesta. he reescrito el código de nuevo pero sigue sin salir como debiera.

Lo importante es que me dices que esta bien, ya que tenia la impresión de que no me estaba enterado de nada.

Gracias de nuevo

bermartinv

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 298
    • Ver Perfil
Prueba si te funciona este.
Código: [Seleccionar]
<!DOCTYPE html>

<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>
.principal  h1{
 color:red;
 font-size:150%;
 }
 .secundario h3 {
color:green;
font-size:110%;
 }
  .secundario h3 span {
background-color:red;
font-size:200%;
 }
 .secundario p{
font-style:oblique;
 }
 </style>

</head>

<body>

<div class="principal"><h1>Novedades</h1><p>Aquí presentamos las novedades del sitio.</p></div>

<div class="secundario">

<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="secundario">

<h3>Mejoramos el producto <span>T-MOTION</span></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>

</div>

</body>
</html>

Saludos  ;)

joseantonio60

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 6
    • Ver Perfil
Efectivamente, colocando el codigo css directamente en el documento html funciona correctamente.

También he probado con el css externo y ahora tambien aparecen los resultados buscados.
¿Por que  ayer no y hoy sí? Supongo que son misterios de la programación. :o

Gracias  ;)

 

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