Estilo para listas en CSS

Ahora nos toca aprender a colocar estilos a las listas con CSS, en especial nos enfocaremos en el estilo de la viñeta o marcador de los elementos de la lista. En Listas de HTML ya habíamos aplicado de forma básica los estilos para listas, pues ahora adentrémonos en la forma de trabajar pero con CSS. Esta lección es muy hermosa ¡Ya verás!

Dando estilo a las listas

Como ya venimos aprendiendo, CSS trabaja con propiedades y valores y para nosotros es momento de conocer los que corresponden para maquetar listas de HTML.

Recordemos que en HTML existen dos tipos de listas: Las listas sin ordenar y las listas ordenadas, si te has olvidado, entonces ve a revisar.

La propiedad list-style-type

La propiedad list-style-type nos permite establecer el tipo de estilo que queremos para los marcadores de la lista, existen varios valores que puede tomar y los conoceremos a continuación.

Valores para la propiedad list-style-type.

• disc.- indica un marcador en forma de disco.
• circle.- marcador con forma de círculo.
• square.- tipo de estilo cuadrado.
• decimal.- Este valor enumera la lista empezando por 1.
• decimal-leading-zero.- Empieza la numeración con un 01.
• lower-roman.- lista con números romanos en minúscula (i, ii, iii, iv, v, etc.).
• upper-roman.- números romanos en mayúscula (I, II, III, IV…).
• lower-greek.- letras griegas en minúscula alfa/α, beta/β, gamma/γ, …
• lower-latin.- indica letras ASCII en minúscula (a, b, c, … z).
• upper-latin.- letras ASCII en mayúscula (A, B, C, … Z).
• armenian.- aplica numeración armenia tradicional (ayb/ayp, ben/pen, gim/keem, …).
• georgian.- numeración georgiana tradicional (an, ban, gan, …, he, tan, in, in-an, …).
• none.- no aplica ningún estilo.

Aquellos estilos que de alguna manera ordenan a los elementos de lista son empleados para listas ordenadas, ejemplos de estos son: decimal, lower, upper, etc. y aquellos estilos que simplemente son para poner estilo sin necesidad de ordenar son para listas sin ordenar, ejemplos de ellos son: disc, circle, square.

Ejemplo de estilos para lista con CSS

Para listas sin ordenar:

<ul class="circulo">

<li>Gato </li>
<li>Ratón </li>
<li>Conejo </li>

</ul>

<ul class="cuadrado">

<li>Pepel </li>
<li>Roca </li>
<li>Tijera </li>

</ul>

ul.circulo {list-style-type: circle;}

ul.cuadrado {list-style-type: square;}

Resultado:

Para listas ordenadas:

<ol class="latin">

<li>Observe </li>
<li>Analice</li>
<li>Resuelva</li>

</ol>

<ol class="roman">

<li>Desayuno </li>
<li>Almuerzo </li>
<li>Cena</li>

</ol>

ol.latin {list-style-type: lower-latin;}

ol.roman {list-style-type: upper-roman;}

Resultado:

Propiedad list-style-image

La propiedad list-style-image de CSS nos permite establecer una imagen como viñeta para los elementos de una lista.

Ejemplo de list-style-image

<ul class="conimagen">

<li>HTML </li>
<li>CSS</li>
<li>Javascript</li>

</ul>

ul.conimagen {list-style-image:url("sonrisa.jpg");

list-style-position:inside;}

Resultado:

La propiedad list-style-position

La propiedad list-style-position nos permite establecer la posición de la caja de viñetas y puede tomar los valores:

• inside.- indica que la lista está adentro del flujo de contenido.
• outside: este es el valor por defecto e indica que la lista está fuera del flujo de contenido.

Ejemplo de list-style-position

<p>Párrafo con flujo normal</p>
<ul class="dentro">
  <li>Negro</li>
  <li>Azul</li>
  <li>Verde</li>
</ul>
<p>Párrafo con flujo normal</p>
<ul class="fuera">
  <li>Negro</li>
  <li>Azul</li>
  <li>Verde</li>
</ul>

ul.dentro {list-style-position:inside;}

ul.fuera {list-style-position:outside;}

Resultado:

Como podemos apreciar, existe una ligera diferencia entre las listas del ejemplo, el primero se encuentra ligeramente hacia la derecha.

La propiedad list-style

La propiedad list-style nos permite establecer con una sola propiedad los valores para el tipo, posición e imagen de lista, de tal manera que no sea necesario escribir las tres propiedades por separado.

List-style se puede emplear para determinar cualquiera de las propiedades compatibles, si no se coloca un valor correspondiente a una de las propiedades, entonces se tomará el valor por defecto.

List-style ejemplo CSS

<p> Propiedades CSS separados </p>
<ul class="separado">
  <li>Lápiz</li>
  <li>Plumón</li>
  <li>Goma</li>
  <li>Cartulina</li>
</ul>
<hr>
<p> Propiedades CSS juntas </p>
<ul class="junto">
  <li>Lápiz</li>
  <li>Plumón</li>
  <li>Goma</li>
  <li>Cartulina</li>
</ul>

ul.separado {
list-style-type: none;
list-style-position: inside;
list-style-image:url("corazon.png");}

ul.junto {
list-style: none inside url("corazon.png");}

Resultado:

Podemos notar que se obtiene el mismo resultado, tanto con propiedades independientes y como la propiedad list-style.

[popup_anything id=»4273″]