JMiur [E]

Cuando se crean listas HTML, por defecto, estas incluyen un bullet (etiqueta UL) o un número (etiqueta OL) que se muestra a la izquierda del texto de cada item y cuyo estilo es controlado por la propiedad list-style-type cuyos valores básicos son disc y decimal respectivamente. Si no queremos que se vean, usamos el valor none y desaparecen.
<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

<ol>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ol>
  • item 1
  • item 2
  • item 3
  • item 4
  • item 5
  1. item 1
  2. item 2
  3. item 3
  4. item 4
  5. item 5

Una característica de las listas es que ese bullet o número comparten el estilo gráfico del contenido es decir, de la etiqueta LI; si esta tiene una fuente "grande" o cierto color, esas propiedades también se aplican a la "decoración" por lo tanto, de modo normal, no es posible diferenciarlas:

  • item 1
  • item 2
  • item 3
  • item 4
  • item 5
  1. item 1
  2. item 2
  3. item 3
  4. item 4
  5. item 5

En Firefox hay dos pseudo-clases especiales que puede usarse para controlar eso:

::-moz-list-bullet permite establecer el estilo del bullet de las etiquetas LI en una lista desordenada (UL)
::-moz-list-number permite establecer el estilo del número o texto de las etiquetas LI en una lista ordenada (OL)

Por ejemplo:
ul li {color: #FFF; font-size: 16px;}
ul li::-moz-list-bullet{color: Yellow; font-size: 25px; vertical-align: middle;}
ol li {color: #FFF; font-size: 16px;}
ol li::-moz-list-number{font-style: italic; color: Yellow; font-family: Georgia; font-size: 18px;}
  • item 1
  • item 2
  • item 3
  • item 4
  • item 5
  1. item 1
  2. item 2
  3. item 3
  4. item 4
  5. item 5

En cualquier otro navegador, no queda más remedio que agregar una etiqueta extra:
<li><span>item 1</span></li>
Y crear reglas de etilo diferentes:
ul li {color: Yellow; font-size: 25px; line-height: 0.9;}
ul li span {color: #FFF; font-size: 16px;}
ol li {font-style: italic; color: Yellow; font-family: Georgia; font-size: 18px;}
ol li span {color: #FFF; font-size: 16px; font-style: normal; font-family:Trebuchet MS;}
  • item 1
  • item 2
  • item 3
  • item 4
  • item 5
  1. item 1
  2. item 2
  3. item 3
  4. item 4
  5. item 5

1 comentario:

Bonzu Pipinpadaloxicopolis III  

Muy interesante JMiur, aunque su uso parece más decorativo que otra cosa.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR