Listas CSS. list-style-type, list-style-position (outside, inside), list-style-image. Shorthand list-style. (CU01048D)

Resumen: Entrega nº48 del Tutorial básico del programador web: CSS desde cero.
Codificación aprenderaprogramar.com: CU01048D

 

 

APLICAR ESTILOS A LISTAS

Al trabajar con documentos HTML es habitual el uso de listas para realizar enumeraciones. Las listas se clasifican en dos grandes tipos. Por un lado las listas desordenadas o ul (unordered lists) en los cuales el orden no se considera importante. Por otro lado las listas ordenadas, etiqueta <ol> (ordered lists).

css

 

Una lista desordenada podría ser por ejemplo de “personas asistentes a la conferencia”, donde no hay un primer asistente y un segundo asistente, sino simplemente asistentes. Estas listas es habitual representarlas usando viñetas (elemento gráfico que puede ser un pequeño círculo u otro tipo de elemento como un cuadrado, una estrella, etc.). Ejemplo:

  • Juan
  • Pedro
  • Ismael

 

Una lista ordenada podría ser por ejemplo “Puntuación obtenida por los alumnos en el examen” donde el alumno con mayor puntuación es el elemento 1º de la lista, el siguiente el elemento 2º, y así sucesivamente. Estas listas es habitual representarlas usando números. Ejemplo:

  1. Juan
  2. Pedro
  3. Ismael

 

Los navegadores suelen introducir márgenes o paddings por defecto a las listas. En caso de querer eliminar estos valores de defecto deberemos establecer una regla de este tipo: ul {    margin: 0;    padding: 0;   }

Sin embargo esto puede hacer que los elementos de la lista se peguen demasiado al borde izquierdo del contenedor. Para hacer que se alineen aproximadamente con los párrafos tal y como los muestra el navegador se puede usar una regla del tipo ul li {  margin-left: 1em;  }

 

 

PROPIEDAD LIST-STYLE-TYPE

PROPIEDAD CSS list-style-type
Función de la propiedad Permite establecer el tipo de símbolo a mostrar precediendo a los elementos de una lista.
Valor por defecto disc (muchos navegadores usan disc para listas desordenadas ul y decimal para listas ordenadas ol)
Aplicable a Elementos li de una lista desordenada u ordenada o elementos a los que se haya aplicado la propiedad display: list-item;
Valores posibles para esta propiedad disc (se mostrará un círculo relleno, opción por defecto), circle (se mostrará un círculo no relleno) ó square (mostrará un cuadradito relleno).
none: no se mostrará ningún símbolo
decimal (números empezando en 1), decimal-leading-zero (números de dos dígitos desde 01 hasta 99)
lower-roman (números romanos en minúsculas, i, ii, iii, iv…) ó upper-roman (números romanos en mayúsculas)
lower-alpha (letras minúsculas empezando por la a) ó upper-alpha (letras mayúsculas empezando por la A). Mismo efecto con lower-latin y upper-latin.
Otros valores menos usados: lower-greek (letras griegas), armenian (numeración armenia), georgian (numeración georgiana), etc.
Algunos navegadores incluyen soporte para numeraciones en otros idiomas
inherit (se heredan las características del elemento padre).
Ejemplos aprenderaprogramar.com ul li {list-style-type: square;}
li {list-style-type: upper-latin;}

 

 

El color de la viñeta será el mismo que sea aplicable a la lista.

Muchas veces se crean menús de navegación que se basan en listas. En este caso normalmente se prescinde de las viñetas o numeraciones para lo cual se establece esta propiedad con el valor none.

 

 

PROPIEDAD LIST-STYLE-POSITION

PROPIEDAD CSS list-style-position
Función de la propiedad Permite controlar la posición de las viñetas.
Valor por defecto outside
Aplicable a Elementos li de una lista desordenada u ordenada o elementos a los que se haya aplicado la propiedad display: list-item;
Valores posibles para esta propiedad outside (la viñeta o numeración aparecerá a la izquierda fuera del bloque de texto que queda a la derecha de la viñeta)
inside (la viñeta o numeración aparecerá como si fuera parte del texto al comienzo de la primera línea)
inherit (se heredan las características del elemento padre).
Ejemplos aprenderaprogramar.com .myList li {list-style-position: inside;}
.sandList li {list-style-position: outside;}

 

 

Si hay poco texto puede que no se aprecie la diferencia en esta propiedad. Sólo cuando tenemos varias líneas se puede comprobar el distinto efecto que se genera. Ejemplo:

  • En este ejemplo tenemos la viñeta outside, la viñeta está a la izquierda y el bloque de texto a la derecha. En este ejemplo tenemos la viñeta outside, la viñeta está a la izquierda y el bloque de texto a la derecha.

 

  • En este ejemplo tenemos la viñeta inside, la viñeta está a la izquierda y el bloque de texto se alinea con la viñeta como si ésta fuera texto. En este ejemplo tenemos la viñeta inside, la viñeta está a la izquierda y el bloque de texto se alinea con la viñeta como si ésta fuera texto.

 

 

PROPIEDAD LIST-STYLE-IMAGE

PROPIEDAD CSS list-style-image
Función de la propiedad Permite definir una imagen específica para ser usada en lugar de un símbolo tipo viñeta de entre los predefinidos para listas.
Valor por defecto none
Aplicable a Elementos li de una lista desordenada u ordenada o elementos a los que se haya aplicado la propiedad display: list-item;
Valores posibles para esta propiedad none (no se aplica una imagen a modo de viñeta)
url (rutaDeLaImagenDeseada)
inherit (se heredan las características del elemento padre).
Ejemplos aprenderaprogramar.com .myList li {list-style-image: url(CU01048D_1.png);}
.sandList li { list-style-image: url(CU01048D_1.png);}

 

 

Esta propiedad da poco juego a la hora de crear efectos adicionales, modificar tamaños, posiciones, etc. por lo que muchos programadores y diseñadores prefieren colocar una imagen a modo de viñeta usando una imagen de fondo y anulando la viñeta propiamente dicha en lugar de usando esta propiedad.

 

 

PROPIEDAD SHORTHAND LIST-STYLE

Al igual que con muchas otras propiedades, CSS permite definir una propiedad shorthand o abreviada para aplicar estilos a listas. La sintaxis básica a emplear es de este tipo:

selectorElemento {Valor-list-style-type valor-list-style-position valor-list-style-image }
 
 
 

Las propiedades se pueden indicar en cualquier orden. Ejemplos:

ul li {list-style: square inside; }

ul li {list-style: square outside url(http://i.imgur.com/afC0L.jpg) ; }

¿Para qué definir un tipo de viñeta si definimos una imagen? Al definir una imagen, esta será la que se muestre siempre que sea posible cargarla. Si no es posible cargarla, se mostrará el tipo de viñeta que hayamos especificado (o si no hemos especificado ninguna, la viñeta que aplique el navegador por defecto).

 

 

EJERCICIO

Crea una lista ul con 27 elementos li (puedes partir del menú que tenemos en el código HTML de base que venimos empleando a lo largo del curso si lo deseas). Sobre dicha lista aplica los siguientes estilos a los elementos de la lista: los tres primeros elementos tipo disc y outside sin usar la propiedad shorthand, los tres siguientes tipo circle e inside sin usar la propiedad shorthand, los tres siguientes tipo square e inside, los tres siguientes none, los tres siguientes decimal y outside, los tres siguientes decimal-leading-zero y outside, los tres siguientes lower-roman e inside, los tres siguientes upper-alpha e inside, y los tres últimos con una imagen mediante list-style-image.

 

 

 

 

 

 

Para acceder a la información general sobre este curso y al listado completo de entregas pulsa en este link:  Ver curso completo.

Para  hacer un comentario o consulta utiliza los foros aprenderaprogramar.com, abiertos a cualquier persona independientemente de su nivel de conocimiento.

Donar o colaborar

Este sitio se mantiene abierto gracias al apoyo de muchas personas. Si crees que merece la pena apoyar económicamente este sitio web puedes realizar una donación o colaborar. Contacta con nosotros.

¿Puedo yo aprender?

Seas o no del área informática, si quieres aprender a programar te ofrecemos una solución guiada y personalizada: realizar un curso tutorizado on-line. Con este tipo de curso, podrás aprender a programar de forma ágil y amena.

Acceder a detalles y precios de los cursos tutorizados on-line

Política sobre cookies

Utilizamos cookies propias y de terceros para ofrecerte una mejor experiencia y servicio, de acuerdo a tus hábitos de navegación.

Si continúas navegando, consideramos que aceptas su uso. Puedes obtener más información en nuestra Política de Cookies.

En Facebook!

Ahora puedes seguirnos en Facebook. Noticias, novedades y mucho más ¡Te esperamos!

RANKING APR2+

Ranking de lenguajes y entornos de programación aprenderaprogramar.com
 

JULIO - AGOSTO 2017

1. Java / J2EE
2. Entornos Oracle
3. Entornos SQL Server
4. JavaScript, jQuery
5. .NET, C#
6. HTML, CSS
7. Android, iOS
8. Php, MySql


Acceder a detalles sobre el ranking de programación aprenderaprogramar.com

FOROS APR2+

Pregunta, responde, consulta, lee, intercambia...

Participa!!! Entra en los foros aprenderaprogramar.com.

             Copyright 2006-2017 aprenderaprogramar.com                La web abierta a cualquier persona interesada en la programación