¿Cómo el estilo de una lista con CSS

Utilizar listas para hacer puntos pasos rápidos y números en orden, o crear un menú para su sitio.

Instrucciones

Cambiar o quitar la lista Marcadores

1 La propiedad CSS list-style-type se utiliza para determinar el tipo de marcador o una lista utiliza para eliminar por completo los marcadores de la lista. Los valores posibles de la lista-style-type incluyen: disco, círculo, cuadrado, decimal superior-alfa, alfa-inferior, superior-romano, de menor romano y ninguno.

2 Si desea que la lista para mostrar el uso de números romanos en mayúsculas, por ejemplo, la regla CSS sería:

{ol
list-style-type: upper-romano;
}

Para otros tipos de marcadores, sólo tiene que cambiar el valor dado a la propiedad para el tipo de marcador que desea.

3 Si quería ningún marcador de lista en absoluto, la regla CSS sería

{ol
list-style-type: none;
}

Para una lista desordenada sería:

ul {
list-style-type: none;
}

4 Para cambiar el marcador de la lista a una imagen, utilice la propiedad list-style-imagen. Por ejemplo, suponga que desea utilizar un pequeño gráfico de una estrella como un marcador de la lista de elementos. He aquí un ejemplo de cómo dar la URL de la gráfica.

ul {
list-style-image: url (star.gif);
}

Visualizar la lista horizontalmente

5 La propiedad CSS que hará una visualización de la lista a través de una página en horizontal es de visualización. El valor de la pantalla que desea utilizar para crear listas horizontales es display: inline.

6

Comience con una lista desordenada ordinaria. Aplicar este ejemplo regla CSS

li {
list-style-type: none;
display: inline;
}

La imagen muestra lo que este CSS hará a una lista con viñetas desordenada ordinaria.

7 La lista debe labrar adicional, tal vez las fronteras y el relleno, pero la base de la técnica se da en el paso 2.

Consulte la siguiente sección para obtener consejos sobre cómo el estilo de la lista si contiene enlaces.

Estilo de una lista de menú

8 En esta sección vamos a ver una barra de menú vertical o barra de navegación. No hay necesidad de que las imágenes de la barra de navegación, solamente CSS.

9 Una lista sin orden se utiliza normalmente como un menú. Cada elemento de la lista contiene un elemento A para crear un enlace. Parte de la CSS se aplica a la lista, parte a los enlaces.

10 Comienza por eliminar los marcadores de lista. Sólo para mantener el ejemplo de llenar una página entera, voy a añadir una anchura, también. Por ejemplo,

ul {
list-style-type: none;
Anchura: 200px;
}

11 No es necesario, pero voy a añadir un borde negro sólido con el ejemplo. Esto hará que la mirada lista encajonado y más como una barra de navegación. Aquí está la CSS.

li {
frontera: 1px solid # 000;
}

12 Esto hace que la mirada lista como una barra de menú, pero la única parte de un usuario puede hacer clic en la palabra es real en el elemento de la lista. Puede hacer que el conjunto de caja se puede hacer clic en el área mediante la adición de una regla CSS para los enlaces.

13


Utilice el li descendiente a. Esto seleccionará los enlaces que forman parte de su lista. Aquí está la CSS:

li a {
bloqueo de pantalla;
}

La pantalla: regla de bloqueo hace que todo el elemento de la lista se comporte como un enlace y todo se vuelve hacer clic. Se puede ver el dedo que señala en la imagen, lo que demuestra que en cualquier lugar dentro de la caja se puede hacer clic para operar el menú.

Consejos y advertencias

• También hay una propiedad CSS list-style-position que puede tener los valores dentro, fuera o heredar. Utilice list-style-condiciones de determinar si la lista muestra ya sea dentro o fuera del marcador de la lista.
• Use márgenes, rellenos y colores de fondo o imágenes para vestir a la lista.
• Puede hacer que el color de fondo (o imagen) de cada elemento de la lista de cambios cuando el usuario se desplaza sobre él con una regla CSS para el selector de li a: hover.