Listas con CSS

CSS Listas
Define que aspecto le quieres dar a las listas de tu sitio: numerado, con letras, números romanos, un pequeño gráfico, etc.

Listas con CSS
Las propiedades de las listas nos permitenestablecer el estilo de las mismas, la imagen, número o letra de los diferentes Items y la posición de la misma.


Listas ordenadas
Código




ol{list-style-type:upper-roman}Lista ordenada con números romanos

HTML
CSS
JavaScript



Resultado

Lista ordenada con números romanos
I. HTML
II. CSS
III. JavaScript


Listas desordenadas
Códigoul{list-style-type:square}




Lista señalada con cuadrados

ASP
PHP
ADO



Resultado

Lista señalada con cuadrados
ASP
PHP
ADO


Uso de una imagen
También podemosincluir un pequeño símbolo de nuestra creación en lugar de los símbolos estándard del lenguaje.

Código




ul{list-style-image: url('punto.gif')}




Lista señalada con un gráficoXML
VBScript
AJAX



Resultado

Lista señalada con un gráfico
I. XML
II. VBScript
III. AJAX


Tabla de las propiedades de las listas
Propiedad
Descripción
Valores
Detalles
Ej.list-style
Permite establecer el estilo de la lista, la imagen y/o la posición.
list-style-type
Tipos de listas
 


list-style-position
Posición de la lista
 


list-style-image
Imagende la lista
 
list-style-type
Estilo aplicable a los marcadores visuales de las listas.
disc
Disco



circle
Círculo



square
Cuadrado



decimal
Nro.decimaldecimal-leading-zero
Nro.decimal comenzando de 0
No funciona en IE 5, 6 y 7



lower-roman
Nro.romano minúscula



upper-roman
Nro.romano mayúscula



lower-greek
Letra griega minúscula
No funcionaen IE 5, 6 y 7



lower-latin
Letra latina minúscula
No funciona en IE 5, 6 y 7



upper-latin
Letra latina mayúscula
No funciona en IE 5, 6 y 7



armenian
Letra armenia
No...