Listas

Capitulo 9 Listas

Por defecto los navegadores muestran loselementos de las listas no ordenadas con unaviñeta formada por un círculo de color negro.Los elementos de las listas ordenadas semuestran por defecto con numeracióndecimal.

CSS define varias propiedades para controlar eltipo de viñeta que muestran las listas. Lapropiedad básica para controlar el tipo deviñeta es list-style-type.

ul{ list-style-type: square;}

ul.ok { list-style-image: url(imagenes/ok.png); }ul.go { list-style-image: url(imagenes/bullet_go.png); }ul.redondo { list-style-image: url(imagenes/bullet_red.png);}

Shorthand para escribir todas las propiedades de forma directaEl orden en el que se indican los valores de la propiedad es indiferente. list-style: inside none; list-style: none inside;Cuando se utiliza una viñeta personalizada, es conveniente indicar laviñeta automática que se mostrará cuando no se pueda cargar la imagen: ul { list-style: url(imagenes/cuadrado_rojo.gif) square; }

Menú Vertical<ul> <li><a href="#" >Elemento 1</a></li> <li><a href="#" >Elemento 2</a></li> <li><a href="#" >Elemento 3</a></li> <li><a href="#" >Elemento 4</a></li> <li><a href="#" >Elemento 5</a></li> <li><a href="#" >Elemento 6</a></li></ul>

1) Definimos un ancho para el menú, quitamos lasviñetas, márgenes y espaciados aplicados por defecto ul.menu { width: 180px; list-style: none; margin: 0; padding: 0; }

2) Añadir un borde al menú de navegación y establecer el color defondo y los bordes de cada elemento del menú:ul.menu { width: 180px; list-style: none; margin: 0; padding: 0; border: 1px solid #7C7C7C; border-bottom: none;}ul.menu li { border-bottom: 1px solid #7C7C7C; border-top: 1px solid #FFF; background: #F4F4F4;}

3) Aplicar estilos a los enlaces: mostrarlos como un elementode bloque para que ocupen todo el espacio de cada <li> delmenú, añadir un espacio de relleno y modificar los colores yla decoración por defecto:ul.menu li a { padding: .2em 0 .2em .5em; display: block; text-decoration: none; color: #333;}

Menú Horizontal

1) Eliminar la anchura y el borde del elemento <ul> y aplicar las propiedades float y clear:ul.menu { list-style: none; width: 100%; clear: both; float: left; margin: 0; padding: 0;}

2) La clave de la transformación reside en modificar la propiedadfloat de los elementos <li> del menú:ul.menu li { float: left;}

3) Modificar el padding y los bordes de los enlaces que forman elmenú:ul.menu li a { text-decoration: none; background: #F4F4F4; border-top: 1px solid #7C7C7C; border-right: 1px solid #7C7C7C; border-bottom: 1px solid #9C9C9C; padding: .3em; display: block; color: #333;}

4) Por último, se añade un borde izquierdo en el elemento <ul>para homogeneizar el aspecto de los elementos del menú:ul.menu { border-left: 1px solid #7C7C7C; clear: both; float: left; width: 100%; list-style: none; margin: 0; padding: 0;}

Modificando los estilos de cada elemento del menú y utilizandoimágenes de fondo y las pseudo-clases :hover y :active, se puedencrear menús horizontales complejos, incluso con el aspecto de unmenú de pestañas

Para hacer uso de menús desplegables podemos añadir elsiguiente código:#menuh ul li ul { display: none; position: absolute;}#menuh ul li:hover ul { display: block; width: 20%;}La pseudoclase :hover se activa al pasar el cursor sobre elelemento indicado.

Listas

by Juan Pe Osuna

Accessibility

Upload Details

Usage Rights

Statistics

Listas Presentation Transcript

Listas

by Juan Pe Osuna

Accessibility

Upload Details

Usage Rights

Statistics

Listas Presentation Transcript

Let LinkedIn power your SlideShare experience

Let LinkedIn power your SlideShare experience

Customize SlideShare content based on your interests

Keep up to date when your LinkedIn contacts post on SlideShare