Listas, Generador de estilos (Cuadro de diálogo)

Artículo
10/07/2008

Actualización: noviembre 2007

La página Listas del cuadro de diálogo Generador de estilos permite definir atributos de estilo CSS (hoja de estilos en cascada) que dan formato a las listas creadas mediante las etiquetas <OL> y <UL>. Puede aplicar directamente estos atributos a elementos HTML o agregarlos a reglas de estilo CSS.

Para aplicar los atributos de lista directamente a los elementos HTML de la página

Abra el documento HTML en la vista Diseño del diseñador HTML y seleccione los elementos a los que desee aplicar formato.
Haga clic en Estilo en el menú Formato para abrir el cuadro de diálogo Generador de estilos.
Haga clic en Listas en el panel izquierdo del cuadro de diálogo Generador de estilos.

En el panel derecho, aparecerá el cuadro de diálogo Listas, Generador de estilos.

Al aplicar formato a elementos seleccionados en la vistaDiseño, los atributos de estilo CSS se insertan en línea en el código de marcado HTML de la página. Cambie a la vista HTML para revisar los nuevos atributos de estilo insertados.

Para agregar atributos de lista a una regla de estilo CSS definida en una hoja de estilos externa

Abra una hoja de estilos externa existente y sitúe el punto de inserción entre las llaves ({ }) situadas detrás del selector correspondiente al estilo deseado.
Haga clic en Generar estilo en el menú Estilos para abrir el cuadro de diálogo Generador de estilos.
Haga clic en Listas en el panel izquierdo del cuadro de diálogo Generador de estilos.

En el panel derecho, aparecerá el cuadro de diálogo Listas, Generador de estilos.

Nota:
El menú Estilos aparecerá cuando abra una hoja de estilos CSS externa para editarla. La opción Generar estilo del menú Estilos estará disponible cuando coloque el punto de inserción entre las llaves situadas detrás del selector de una regla de estilo.

Se puede aplicar una clase de estilo CSS definida en una hoja de estilos externa a un elemento del elemento <BODY> de una página Web mediante la asignación del selector de estilo CSS como propiedad CLASS del elemento.

Las opciones disponibles en la página Listas del cuadro de diálogo Generador de estilos son:

Tareas

Elementos de interfaz de usuario

Listas

Permite establecer los atributos para el tipo de lista, con o sin viñetas. Los atributos se aplican generalmente a los estilos que afectan a las etiquetas <LI></LI> o <OL></OL> . Puede seleccionar <Sin establecer> (ninguna opción elegida), Con viñetas o Sin viñetas. Por ejemplo, si selecciona Sin viñetas, se agregará la siguiente línea de código:

LIST-STYLE-TYPE:none

Viñetas

Los atributos que figuran en la siguiente tabla dan formato a las viñetas. Las Viñetas pueden ser números, letras, numerales romanos, imágenes estándar de viñeta (Círculo, Disco, Cuadrado) o imágenes personalizadas de viñeta.

Nota:
Los distintos estilos de viñetas estarán disponibles cuando se seleccione Con viñetas como tipo de lista.

Estilo
Permite establecer los atributos que controlan el estilo de la viñeta. Hay ocho estilos disponibles. Puede seleccionar <Sin establecer> (ninguna opción elegida), Círculo, Disco, Cuadrado, (1 2 3 4…), (i ii iii iv…), (I II III IV…), (a b c d...) o (A B C D…). Por ejemplo, si selecciona Con viñetas como tipo de lista y Cuadrado como estilo, se insertará el siguiente código de marcado CSS:

LIST-STYLE-TYPE:square
Posición
Permite establecer los atributos que controlan la posición de la viñeta con respecto al texto. Se incluyen dos formatos diferentes para la posición del texto. Puede seleccionar <Sin establecer> (ninguna opción elegida), Exterior (el texto tiene sangría) o Interior(el texto no tiene sangría). Por ejemplo, si selecciona Cuadrado como estilo, Con viñetas como tipo de lista y Exterior (el texto tiene sangría) como posición, se insertará el siguiente código de marcado CSS:

LIST-STYLE-TYPE:square; list-style-position:outside
Viñeta personalizada
Permite establecer como estilo de viñeta una imagen, en lugar de los ocho estilos disponibles. Si selecciona Viñeta personalizada, estarán disponibles las opciones Imagen y Ninguna.
Imagen
Permite establecer una imagen como estilo de viñeta. Escriba una ruta de acceso y un nombre de imagen en el campo o elija el botón de puntos suspensivos (...) para abrir el cuadro de diálogo Seleccionar imagen de viñeta y, a continuación, vaya a la ubicación de la imagen. Por ejemplo, si selecciona Con viñetas como tipo de lista, Exterior (el texto tiene sangría) como posición y Viñeta personalizada como estilo de viñeta, y después escribe viñeta.jpg en el campo Imagen, se inserta el siguiente código de marcado CSS:

LIST-STYLE-POSITION:outside

LIST-STYLE-IMAGE:url (bullet.jpg)
Ninguna
Establece el valor de imagen para el estilo de viñeta en None. Por ejemplo, si selecciona Con viñetas como tipo de lista, Exterior (el texto tiene sangría) como posición y Viñeta personalizada como estilo de viñeta, y después escribe viñeta.jpg en el campo Imagen, se inserta el siguiente código de marcado CSS:

LIST-STYLE-POSITION:outside; LIST-STYLE-IMAGE:url (bullet.jpg)

Si después vuelve al cuadro de diálogo Generador de estilos y selecciona Ninguna como opción de Viñeta personalizada, se insertará el siguiente código de marcado CSS:

LIST-STYLE-POSITION:outside; LIST-STYLE-IMAGE:none