Autor Tema: HTML símbolos mayor y menor < y > cómo escribir selector CSS id CU01011D  (Leído 11380 veces)

Lorenzo31

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 381
    • Ver Perfil
Buenas, dejo mi ejercicio, no he logrado asignar a la etiqueta el nombre "<<novedades>>"
sino "novedades" , ni con los caracteres especiales HTML me lo detectaba el navegador luego.

Ahi va el 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">
<link rel="stylesheet" type="text/css" href="estilos111B.css"/>
</head>
<body>
<div id="novedades">
<h1>Novedades</h1>
<p>Aquí presentamos las novedades del sitio.</p>
</div>
<div id="xFashion">
<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>
</div>
<div id="tMotion">
<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>
</div>
</body>
</html>

estilos111B.css
Código: [Seleccionar]
/*Estilos CSS para ejercicio 111B*/

#novedades h1 { color:red; }
#novedades { background-color:yellow; }
#xFashion h3 { color:green; }
#tMotion h3 { color:green; }
« Última modificación: 09 de Febrero 2016, 13:09 por Alex Rodríguez »

javi in the sky

  • Avanzado
  • ****
  • Mensajes: 393
    • Ver Perfil
Re:Selectores CSS. id. CU01011D
« Respuesta #1 en: 06 de Febrero 2016, 20:03 »
Hola Lorenzo31

En todos los ejercicios cuando veas << >> considerálo un delimitador, no como algo que forme parte del contenido.

Establece atributos id para cada una de ellas con valores <<novedades>> para la primera, <<xFashion>> para la segunda y <<tMotion>> para la tercera.

Aquí no tendría sentido un nombre como <<novedades>>, lo único que tiene sentido es que el atributo sea novedades, supongo que lo han incluido entre << >> para delimitar, no para que el nombre a usar lleve los símbolos < y >

Una forma de evitar repeticiones es cambiar

#xFashion h3 { color:green; }
#tMotion h3 { color:green; }

Por

#xFashion h3, #tMotion h3 { color:green; }

Delimitando por comas indicas que el mismo estilo se aplique a todos los elementos enumerados separados por comas

Saludos

Lorenzo31

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 381
    • Ver Perfil
Re:Selectores CSS. id. CU01011D
« Respuesta #2 en: 06 de Febrero 2016, 20:41 »
Sí, entendido Javi, tomo nota de tus comentarios como siempre.

Gracias.

Jorge lopez

  • Sniper
  • Intermedio
  • ***
  • APR2.COM
  • Mensajes: 248
  • @SniperOfElite
    • Ver Perfil
Re:Selectores CSS. id. CU01011D
« Respuesta #3 en: 07 de Febrero 2016, 19:47 »
 Hola Lorenzo31!

Aunque no es el objetivo mostrar <novedades> o <<novedades>> en el navegador, tal y como comenta  javi in the sky aqui te dejo un tip, para cuando realmente lo necesites.

Si en html intentamos algo como: <h1><novedades></h1> pues no obtendríamos el resultado deseado el cual es mostrar un encabezado donde se visualice <novedades> en el navegador.

Para conseguir esto debemos hacer uso de &lt; y &gt; donde &lt; = < y &gt; = >

Prueba esto en tu html:
Código: [Seleccionar]
<h1>&lt;html&gt;</h1>
Código: [Seleccionar]
<h1>&lt;/body&gt;</h1>
Saludos!!
« Última modificación: 07 de Febrero 2016, 19:53 por Jorge lopez »
while(estesVivo)
{
  aprende();
  ayuda();
  enseña();
}
if(mueres){teRecordaran();}

Lorenzo31

  • Avanzado
  • ****
  • APR2.COM
  • Mensajes: 381
    • Ver Perfil
Re:Selectores CSS. id. CU01011D
« Respuesta #4 en: 08 de Febrero 2016, 15:11 »
Ok, thx Jorge, tomo nota.

 

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