Estilos>>Listas
Respecto a las listas son tres las propiedades que podemos modificar: el tipo de marcador utilizado, su posición respecto al texto y la posibilidad de utilizar una imagen como marcador. En el editor de CSS de N|VU podrás acceder a estas propiedades dentro de la pestaña .
Además de ello vamos a considerar una cuestión muy importante para la elaboración de menús: la forma de presentarlas. Baste avanzar que las listas son, por naturaleza, un elemento en bloque, pero podremos modificar esa construcción por defecto para conseguir algunos efectos interesantes.
Propiedad: list-style-type
Valores: Son todos los
establecidos por la especificación
HTML 4.01 tal como se muestra en el ejemplo. A todos ellos
habría que añadirle none
que elimina la marca de la lista, aunque no se ha incluido en el
ejemplo en la zona de listas numeradas porque no parece tener mucho
sentido poner una lista ordenada sin que se vean los indicadores de
orden. Además de
estos hay también
definida una lista de posibilidades en otros idiomas para las listas
ordenadas.
| listas desordenadas | listas ordenadas |
|---|---|
|
|
Propiedad: list-type-position
Valores: Con el valor outside,
que es el que se aplica por defecto,
el indicador de la lista se colocará tal
como
hemos visto en los ejemplos previos fuera del bloque formado por el
texto del
elemento, mientras que con inside se
integrará en el primer renglón del elemento
Ejemplos:
Se ha utilizado también un color de fondo para
mostrar cómo la posición inside
se integra dentro del cuadro formado por el elemento,
mientras que si
el marcador tiene el valor outside queda
fuera del mismo.
Propiedad: list-style-image
Valores: habrá que indicar la situación de la imagen con la sintaxis url(ruta_hacia_la_imagen)
Ejemplos:
<ul>
se ha incluido un estilo
en línea que incluye la ruta hacia esta imagen. (Recuerda
que habría sido preferible ponerlo en una hoja interna o,
mejor aún, externa utilizando un selector de tipo id para
cada lista si tenemos varias y queremos individualizar las
imágenes para cada una de ellas. Como no se ha especificado
ninguna otra propiedad la posición por defecto es outside.
Cualquiera
de las tres propiedades puede aplicarse a un ítem en
particular <li> o a toda la
lista <ul> u
<ol> según
corresponda. La
aplicación como propiedad de la lista, bien sea en una hoja
externa o interna, resulta siempre mucho más
cómoda puesto que garantiza la herencia y nos evita tener
que repetir las propiedades en cada uno de los elementos.
Ya hemos comentado al inicio que las listas son, por naturaleza, un elemento en bloque, ya que generan un salto de línea previo y otro posterior, creando su propia caja.
Sin embargo puede haber muchos momentos en los que no nos interese que la lista aparezca en vertical, sino que preferiríamos que sus ítems aparecieran en horizontal, como en el siguiente ejemplo:
Podríamos haber aplicado
primera regla a la lista completa, y las otras dos a cada item, pero
como también la primera se puede aplicar a cada uno de ellos
lo hemos solucionado creando la siguiente regla y
aplicándole la clase enlinea solo
una vez a la lista <ul>
.enlinea li {list-style-type: none; display:
inline;
margin-right:
3em;}
De esta forma, cada elemento li
"hijo" de la
clase enlinea recogerá las tres
reglas y sólo habremos puesto el selector de la clase en una
etiqueta.
