Estilo para listas en CSS

Anterior
Avanzar

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.
Te recomendamos leer:  La propiedad Background color e imagen de fondo en CSS

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:

HTML

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

CSS

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

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


Resultado:

Para listas ordenadas:

HTML

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

CSS

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

HTML

<ul class="conimagen">

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

</ul>

CSS

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

HTML

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

CSS

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.

Te recomendamos leer:  Cómo usar CSS en HTML y ejemplos

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

HTML

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

CSS

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.

Lecciones CSS
Anterior
Avanzar
0 0 votar
Calificación
guest
0 Comentarios
Comentarios en línea
Ver todos los comentarios

Aquí tienes el temario completo del curso CSS, para que no te pierdas ninguna lección. :)

Temario CSS

1.- Qué es CSS y Introducción
2.- Cómo usar CSS
3.- Selectores CSS – Reglas y sintaxis
4.- Cascada de estilos y herencia
5.- Estilos CSS para textos
6.- Ancho y alto
7.- Modelo de cajas
8.- Las propiedades: border, padding y margin
9.- La propiedad Background
10.- Estilo para listas
11.- Estilos CSS para tablas
12.- Estilos para enlaces CSS
13.- Personalizando el cursor
14.- Propiedad display y visivility
15.- Posicionamiento en CSS
16.- La propiedad overflow
17.- Propiedad Z-INDEX en CSS
18.- Ejemplos y ejercicios resueltos

 

Aquí tienes el temario completo del curso CSS, para que no te pierdas ninguna lección. :)

Temario CSS

1.- Qué es CSS y Introducción
2.- Cómo usar CSS
3.- Selectores CSS – Reglas y sintaxis
4.- Cascada de estilos y herencia
5.- Estilos CSS para textos
6.- Ancho y alto
7.- Modelo de cajas
8.- Las propiedades: border, padding y margin
9.- La propiedad Background
10.- Estilo para listas
11.- Estilos CSS para tablas
12.- Estilos para enlaces CSS
13.- Personalizando el cursor
14.- Propiedad display y visivility
15.- Posicionamiento en CSS
16.- La propiedad overflow
17.- Propiedad Z-INDEX en CSS
18.- Ejemplos y ejercicios resueltos