CSS
Básico
CSS HomeCSS Introducción
CSS Sintaxis
CSS Su uso
CSS Fondo
CSS Texto
CSS Fuente
CSS Bordes
CSS Contorno
CSS Margen
CSS Padding
CSS Lista
CSS Tablas
Avanzado
CSS DimensionesCSS Efectos Visuales
CSS Ubicación
CSS Contenido/Numerac.
CSS Pseudo Class
CSS Pseudo Element
CSS Tipos de Medios
Ejemplos y Examen
CSS EjemplosCSS Examen
Guías de referencia
CSS Guía de ReferenciaCSS Colores
CSS Código de Colores
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 permiten establecer el estilo de las mismas, la imagen, número o letra de los diferentes Items y la posición de la misma.
Listas ordenadas
<html>
<head>
<style type="text/css">
ol{list-style-type:upper-roman}
</style>
</head>
<body>
<p>Lista ordenada con números romanos</p>
<ol>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ol>
</body>
</html>
Lista ordenada con números romanos
- HTML
- CSS
- JavaScript
Listas desordenadas
<html>
<head>
<style type="text/css">
ul{list-style-type:square}
</style>
</head>
<body>
<p>Lista señalada con cuadrados</p>
<ul>
<li>ASP</li>
<li>PHP</li>
<li>ADO</li>
</ul>
</body>
</html>
Lista señalada con cuadrados
- ASP
- PHP
- ADO
Uso de una imagen
También podemos incluir un pequeño símbolo de nuestra creación en lugar de los símbolos estándard del lenguaje.
<html>
<head>
<style type="text/css">
ul{list-style-image: url('punto.gif')}
</style>
</head>
<body>
<p>Lista señalada con un gráfico</p>
<ul>
<li>XML</li>
<li>VBScript</li>
<li>AJAX</li>
</ul>
</body>
</html>
Lista señalada con un gráfico
- XML
- VBScript
- 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 | Imagen de la lista | |||
| list-style-type | Estilo aplicable a los marcadores visuales de las listas. | disc | Disco |  |
| circle | Círculo | |
||
| square | Cuadrado | |
||
| decimal | Nro.decimal | |
||
| decimal-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 funciona en 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 funciona en IE 5, 6 y 7 |
|
||
| georgian | Letra gregoriana No funciona en IE 5, 6 y 7 |
|
||
| lower-alpha | Letra alfabeto en minúscula | |
||
| upper-alpha | Letra alfabeto en mayúscula | |
||
| none | Nada | |
||
| list-style-image | Imagen aplicable a los elementos de las listas. | URL | URL | |
| none | Nada | |
||
| list-style-position | Posición dentro de la lista de los elementos marcadores de las listas. | inside | Dentro | |
| outside | Fuera | |
¿No encuentras lo que buscas?
<<< Relleno - Padding en CSS Tablas - Table en CSS >>>
Los mejores 10 hostings
Buscando cual es el mejor hosting que existe en el mercado, me he topado con una gran cantidad de sitios que presentan un ranking de los 10 mejores hosting del mundo. Como cada uno tiene en su lista, diferentes empresas de alojamiento web, en un orden de ranking muy distinto, he decidido investigar cual era la mejor. continúe leyendo...
Virtualnauta provee del material para uso exclusivo de aprendizaje.
No garantizamos que el contenido sea correcto.
El riezgo por el uso del mismo queda bajo la entera responsabilidad del usuario.
Mientras use este sitio, usted acuerda haber leido y aceptado nuestros términos de uso y privacidad.
Copyright 2007 - 2011 by Martín Solomiak. Todos los derechos reservados.
Mapa del sitio
