08 CSS - Listas y Menus

CSSCascading Style SheetsHojas de Estilo en Cascada

Bloque VIIIListas y Mens

Tecnologa de la Informacin y la Comunicacin. 1 Bachillerato Colegio Diocesano de vila Asuncin de Nuestra Seora Carlos Terradillos Cisneros

CSS Cascading Style Sheets

Pg 2/7

ListasVietas personalizadas Por defecto, los navegadores muestran los elementos de las listas no ordenadas con una vieta formada por un pequeo crculo de color negro. Los elementos de las listas ordenadas se muestran por defecto con la numeracin decimal utilizada en la mayora de pases. CSS define varias propiedades para controlar el tipo de vieta que muestran las listas, adems de poder controlar la posicin de la propia vieta. La propiedad bsica es la que controla el tipo de vieta que se muestra y que se denomina list-style-type.

El valor none permite mostrar una lista en la que sus elementos no contienen vietas, nmeros o letras. Se trata de un valor muy utilizado, ya que es imprescindible para los mens de navegacin creados con listas. El resto de valores de la propiedad list-style-type se dividen en tres tipos: grficos, numricos y alfabticos. Los valores grficos son disc, circle y square y muestran como vieta un crculo relleno, un crculo vaco y un cuadrado relleno respectivamente. Los valores numricos estn formados por decimal, decimal-leading-zero, lower-roman, upper-roman, armenian y georgian. Los valores alfanumricos se controlan mediante lower-latin, lower-alpha, upper-latin, upper-alpha y lower-greek.

Colocacin de las vietas La propiedad list-style-position permite controlar la colocacin de las vietas. La diferencia entre los valores outside y inside se hace evidente cuando los elementos contienen mucho texto.

Colegio Diocesano de vila Asuncin de Ntra. Seora

Carlos Terradillos Cisneros


Pg 3/7

Personalizar aspecto de las vietas Cuando se requiere personalizar el aspecto de las vietas, se debe emplear la propiedad list-styleimage, que permite mostrar una imagen propia en vez de una vieta automtica. Las imgenes personalizadas se indican mediante la URL de la imagen. Si no se encuentra la imagen o no se puede cargar, se muestra la vieta automtica correspondiente (salvo que explcitamente se haya eliminado mediante la propiedad list-style-type).

Propiedad List-Style CSS define una propiedad de tipo "shorthand" que permite establecer todas las propiedades de una lista de forma directa. La propiedad se denomina list-style. El orden en el que se indican los valores de la propiedad es indiferente.




Pg 4/7

MensLas listas HTML se suelen emplear, adems de para su funcin natural, para la creacin de mens de navegacin verticales y horizontales. Men vertical sencillo El proceso de transformacin de la lista en un men requiere de los siguientes pasos:




Pg 5/7

Men vertical modificado




Pg 6/7

Men horizontal bsico A partir de un men vertical sencillo, es posible crear un men horizontal sencillo aplicando las propiedades CSS conocidas hasta el momento. Las propiedades para establecer el aspecto de los elementos del men se definen en los elementos en lugar de definirlas para los elementos como en el ejemplo anterior. En cualquier caso, es indiferente el elemento en el que se aplican los estilos que definen el aspecto de cada opcin del men.




Pg 7/7

Mens avanzados Modificando los estilos de cada elemento del men y utilizando imgenes de fondo y las pseudo-clases :hover y :active, se pueden crear mens horizontales complejos, incluso con el aspecto de un men de solapas o pestaas.

El cdigo fuente de los mens de la imagen anterior y muchos otros se puede encontrar en http://exploding-boy.com/images/cssmenus/menus.html Adems de los mens horizontales de solapas, existen muchos otros tipos diferentes de mens horizontales (y verticales) que se pueden realizar empleando exclusivamente CSS.

El cdigo CSS de todos los ejemplos de la imagen anterior y muchos otros se pueden encontrar en: http://alvit.de/css-showcase/css-navigation-techniques-showcase.php



Documents

08 CSS - Listas y Menus