Autor Tema: Posible error en CSS dentro del curso HTML en el capitulo (CU00718B)  (Leído 533 veces)

Manu

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 10
    • Ver Perfil
Buenas!

Estoy por el capitulo 18 del curso de HTML y he encontrado algo que no me cuadra en la explicación de las listas no ordenadas. Justo en la parte que explica la sintaxis correcta en CSS vemos esto:

Código: [Seleccionar]
<ul style="list-style-type:disc">

<ul style="list-style-type:circle">

<ul style="list-style-type:square">

La duda que me surge es, no falta el punto y coma después del tipo de cada viñeta?
Es decir ....type: disc;"> ....type: circle;">

A parte de eso, me doy cuenta de que unas veces hay espacio después de los dos puntos y otras no.
...type:(espacio)circle
...type:circle


Son esto dos errores en el manual o me los he inventado yo? jajaja

Lo curioso es que he probado a ponerle el punto y coma a quitárselo, pero el resultado sigue siendo correcto (o al menos el navegador me muestra la lista de forma correcta), incluso he probado a quitar los espacios que comentaba mas arriba y el resultado sigue pareciendo correcto.

No lo entiendo!!

Espero que se comprendan bien las dos dudas (y el resultado probando a hacer lo contrario). Pasan en mas sitios pero ahora no recuerdo otros porque no he ido apuntándolos.

Un saludo!

Kabuto

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 702
    • Ver Perfil
Re: Posible error en CSS dentro del curso HTML en el capitulo (CU00718B)
« Respuesta #1 en: 03 de Abril 2021, 11:36 »
Hola, el punto y coma no es obligatorio cuando aplicamos estilo solo a una propiedad.

Por ejemplo, a este párrafo le ponemos fondo rojo "tomate"

Código: [Seleccionar]
<p style="background-color:tomato">Ejemplo de parrafo.</p>
No necesita el punto y coma.

En cambio, si además queremos poner el color de texto en blanco:
Código: [Seleccionar]
<p style="background-color:tomato color:white">Ejemplo de parrafo.</p>
Esa línea NO va a funcionar, porque estamos alterando dos propiedades sin separarlas con punto y coma, entonces el navegador no sabe donde comienza una indicación y donde termina la otra.

Esa es la función del punto y coma, separar las instrucciones unas de otras:

Código: [Seleccionar]
<p style="background-color:tomato; color:white">Ejemplo de parrafo.</p>

Sobre el espacio en blanco, son irrelevantes, el navegador los ignora. Puedes no ponerlo, poner uno, poner veinte...., no importan.
Va a funcionar igual:
Código: [Seleccionar]
<p style="background-color:                  tomato; color:white">Ejemplo de parrafo.</p>

Lo del espacio en blanco queda a gusto del programador. Poner un espacio en blanco puede ser útil para que sea más legible a simple vista, para que la propiedad que alteramos quede separada del valor que le asignamos.
Habitualmente estaremos usando algún editor de texto que resalte la sintaxis con colores, así que ya resultará legible de por sí.

Pero nunca sabemos si en algún momento vamos a tener que editar un código HTML con un editor más simple, tipo Bloc de Notas.
En ese caso, se agradece un montón si el código HTML utiliza espacios en blanco e indentaciones, que son cosas que al navegador le da igual y las ignora, pero para el ojo humano supone la diferencia entre un elegante texto legible y un horror de instrucciones apelotonadas.
NO respondo dudas por mensaje privado
Publicando vuestras dudas en el foro público conseguimos:
- Que más gente aporte respuestas mejores o complementarias.
- Que otras personas puedan aprender de vuestras dudas.

Mejor en PÚBLICO que en privado. Gracias

Manu

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 10
    • Ver Perfil
Re: Posible error en CSS dentro del curso HTML en el capitulo (CU00718B)
« Respuesta #2 en: 03 de Abril 2021, 11:50 »
Muchísimas gracias, Kabuto! Queda muy claro.

Una pequeña duda sobre lo que comentas:

Por ejemplo, "background-color" es lo que se llamaría propiedad.

Y valor sería, en este caso, el color asignado.

Correcto?

Y, por lo tanto cualquier cosa que tengamos entre las comillas es una propiedad seguida de dos puntos y el valor de la propiedad.

Verdad?

Estas denominaciones se explican en el curso de CSS?

Lo digo porque cuando lees a gente que sabe, como tu, sin duda van a denominar cada cosa por su nombre. Y no es lo mismo decir "eso que aparece entre comillas", que "la propiedad seguida de su valor".

Poco a poco...! jajajaja

Un saludo!

Kabuto

  • Moderador Global
  • Experto
  • *******
  • Mensajes: 702
    • Ver Perfil
Re: Posible error en CSS dentro del curso HTML en el capitulo (CU00718B)
« Respuesta #3 en: 03 de Abril 2021, 23:56 »
Uy, pues no creas que tengo tanta sapiencia en diseño web.
Seguro que cuando completes el curso sabrás más que yo je je..


Pero sí, para aplicar estilos a los elementos HTML invocamos una o varias de sus "propiedades" y le asignamos un nuevo "valor".
En el curso CSS se explica así:

NO respondo dudas por mensaje privado
Publicando vuestras dudas en el foro público conseguimos:
- Que más gente aporte respuestas mejores o complementarias.
- Que otras personas puedan aprender de vuestras dudas.

Mejor en PÚBLICO que en privado. Gracias

Manu

  • Sin experiencia
  • *
  • APR2.COM
  • Mensajes: 10
    • Ver Perfil
Re: Posible error en CSS dentro del curso HTML en el capitulo (CU00718B)
« Respuesta #4 en: 04 de Abril 2021, 11:54 »
Una imagen vale mas que mil palabras.

Todo muy claro.

Me acordare de ti cuando este creando webs en Google... ;D ;D ;D

Muchas gracias!

Un saludo

 

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