GERENCIA VIRTUAL

“Capacitación y asesoría a solo un click”

Listas en CSS
Listas no ordenadas: Listas ordenadas:
o Caraotas 1. Caraotas
o Arroz 2. Arroz
o Huevos 3. Huevos

 Caraotas I. Caraotas
 Arroz II. Arroz
 Huevos III. Huevos

En HTML, hay dos tipos principales de listas:

 Listas no ordenadas (<ul>) - los elementos de la lista están marcados con viñetas.
 Listas ordenadas (<ol>) - los elementos de la lista están marcados con números o letras.

Las propiedades de la lista de CSS le permiten:

 Establecer diferentes marcadores de elementos de la lista, para las listas ordenadas.

 Establecer diferentes marcadores de elementos de la lista, para listas desordenadas.
 Configurar una imagen como el marcador de la lista de elementos.
 Añadir colores de fondo para las listas y los elementos de la lista.

Diferentes marcadores de elementos de la lista

La propiedad list-style-type especifica el tipo de marcador para la lista de elementos. El ejemplo
siguiente muestra algunos de los marcadores de la lista de elementos disponibles:

ul.a {
list-style-type: circle;
}
ul.b {
list-style-type: square;
}
ol.c {
list-style-type: upper-roman;
}
ol.d {
list-style-type: lower-alpha;
}

Ver: Código 93.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Una Imagen como marcador de la lista de elementos

La propiedad list-style-image especifica una imagen como el marcador de la lista de elementos:

ul {
list-style-image: url('imagenes/verde.jpg');
}

Ver: Código 94.html

Coloque los marcadores a los elemento de la lista

La propiedad list-style-position especifica la posición de los marcadores list-item (viñetas).
"List-style-position: exterior;" significa que las viñetas estarán fuera del elemento de la lista. El
inicio de cada línea de un elemento de la lista se alinea verticalmente. Esto es por defecto:

 Caraotas, es una leguminosa que es del fruto del género “phaseolus”, siendo la especie
predominante “phaseolus vulgaris”.
 Arroz
 Huevos

"List-style-position: en el interior;" significa que las viñetas estarán en el interior del elemento de
la lista. Ya que es parte del elemento de la lista, que será parte del texto desde el inicio:

 Caraotas, es una leguminosa que es del fruto del género “phaseolus”, siendo la especie
predominante “phaseolus vulgaris”.
 Arroz
 Huevos

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

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

Ver: Código 95.html

 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

Retirar configuración predeterminada

La propiedad list-style-type:none también puede ser utilizada para eliminar los marcadores o
viñetas. Tenga en cuenta que la lista también tiene margen predeterminado y puede tener
relleno. Para eliminar esto, añadir margin:0 y padding:0 a <ul> o <ol>:

ul {
list-style-type: none;
margin: 0;
padding: 0;
}

Ver: Código 96.html

Listas - Abreviando del código

La propiedad list-style es una propiedad abreviada. Se utiliza para configurar todas las propiedades
de la lista en una declaración:

ul {
list-style: square inside url("imagenes/verde.jpg");
}

Ver: Código 97.html

Cuando se utiliza la propiedad abreviada, el orden de los valores de la propiedad són:

 list-style-type (Si no se especifica un estilo de imagen de la lista, el valor de esta propiedad
se mostrará si la imagen por alguna razón no se puede visualizar)
 list-style-position (Especifica si los marcadores de lista de artículos deben aparecer dentro
o fuera del flujo de contenido)
 list-style-image (Especifica una imagen como el marcador de la lista de elementos)
Si uno de los valores de las propiedades anteriormente falta, se inserta el valor predeterminado de
la propiedad que falta, si los hubiere.

Estilos de lista con colores

Podemos también dar estilo a las listas con colores, para que se vean un poco más interesantes.
Cualquier cosa añadida a la etiqueta <ol> o <ul>, afecta a toda la lista, mientras que las
propiedades añadidas a la etiqueta <li> afectarán al elemento de lista individualmente:
 GERENCIA VIRTUAL
“Capacitación y asesoría a solo un click”

ol {
background: #ff9999;
padding: 20px;
}
ul {
background: #3399ff;
padding: 20px;
}
ol li {
background: #ffe5e5;
padding: 5px;
margin-left: 35px;
}
ul li {
background: #cce5ff;
margin: 5px;
}

Ver: Código 98.html