Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de CSS

CSS: lenguaje de estilo para las páginas web.


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net




Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 48

Visitas el mes pasado: 52

logo
WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de CSS
Desarrollo Web, por Miguel Angel Álvarez
Cómo crear tu Web: curso de estilos CSS
ComoCrearTuWeb, Por Georgens
Libros Web: introducción a CSS
Libros web, por Javier Eguíluz Pérez
Curso de css: Programación Web
www.programacionweb.net
WebEstilo: manual de css
www.webestilo.com
W3 schools; CSS Tutorial
www.w3schools.com

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




4. Listas (IV)

4.2 Estilo en listas.

css

Las listas, definidas en el código HTML por las etiquetas <ol> <ul> , tienen en el código CSS unas propiedades especiales para poder variar el estilo de sus elementos. son las propiedades list-style


Propiedad list-style-type

La propiedad list-style-type controla el tipo de viñeta, y su definición es la siguiente:


list-style-type Tipo de viñeta
Valores disc | circle | square | decimal | decimal-leading-zero | lower-roman | upper-roman | lower-greek | lower-latin | upper-latin | armenian | georgian | lower-alpha | upper-alpha | none | inherit
Descripción Permite establecer el tipo de viñeta mostrada para una lista
Valor inicial disc
se aplica a Elementos de una lista

La propiedad puede aplicarse tanto a listas no ordenadas como ordenadas, con lo cual una lista no ordenada (etiqueta <ul>) puede convertirse en ordenada y viceversa. Según el tipo de viñeta que apliquemos a la lista, ésta se convertirá en ordenada o no ordenada.

El valor none elimina la viñeta o el número de la lista. Suele usarse para hacer menús de enlaces (listas en las que no queremos que se vea la viñeta). Los demás valores se dividen en tres tipos: gráficos, numéricos y alfanuméricos.

Si quieres ver cómo quedan cada uno de estos valores en la página, pulsa en el enlace siguiente donde en la página de ejemplo se muestran los diferentes valores de la propiedad list-style-type:

Página de ejemplo



Propiedad list-style-position

La propiedad list-style-position controla la posición de las viñetas. Lo que controla es el sangrado del texto respecto de la viñeta, es decir, si la viñeta debe quedar en la misma vertical que la segunda línea del elemento, o debe quedar más a la izquierda. Su definición es la siguiente:


list-style-position Posición de viñeta
Valores inside | outside | inherit
Descripción Permite establecer la posición de viñeta en los elementos de una lista
Valor inicial outside
se aplica a Elementos de una lista

La diferencia entre los valores outside y inside consiste en el sangrado de las restantes líneas de la viñeta. En outside todas las lineas quedan en la misma posición que la primera, mientras que en inside la segunda y restantes líneas están desplazadas más hacia la izquierda para empezar debajo de la viñeta. Esto lo podemos ver en la siguiente página de ejemplo:

Página de ejemplo



Propiedad list-style-image

La propiedad list-style-image permite personalizar la viñeta mostrando una pequeña imagen en el lugar de la viñeta automática. Su definición es la siguiente:


list-style-image Imagen de viñeta
Valores <url> | none | inherit
Descripción Permite reemplazar las viñetas automáticas por una imagen personalizada
Valor inicial none
se aplica a Elementos de una lista

El valor none es el valor por defecto y no muestra ninguna imagen.

El valor <url> indica que la imagen que queremos mostrar la indicamos mediante la ruta o url de la misma. Debemos tener la imagen guardada en la carpeta de nuestra web, y después, indicar la ruta hacia la misma. La forma de mostrar la ruta es la misma que la usada para los enlaces, pero aquí en lugar de un archivo de página Web, apuntaremos hacia un archivo de imagen. la forma en que debe quedar la propiedad es la siguiente:

ul {list-style-image = url(ruta_de_la_imagen); }

Lo más normal es guardar las imágenes en la misma carpeta en que está la página que la requiere, o crear una subcarpeta en la misma carpeta de la página, por ejemplo, la carpeta objetos. En este último caso el código anterior podría quedar así:

ul {list-style-image = url(objetos/viñeta.gif); }

Observa que en el nombre de la ruta debemos escribir también la extensión del archivo.

En la siguiente página de ejemplo se muestra la utilización de imágenes como viñetas mediante la propiedad list-style-image:

Página de ejemplo



Propiedad list-style - tipo "shorthand"

Todas o algunas de las propiedades anteriores pueden aplicarse a un mismo elemento mediante la propiedad de tipo shorthand list-style. La definición de la propiedad list-style es la siguiente:

list-style Estilo de una lista
Valores ( <list-style-type> || <list-style-position> || <list-style-image> ) | inherit
Descripción Permite establecer de forma simultánea todas las opciones de una lista
Valor inicial -
se aplica a Elementos de una lista

Podemos indicar todos o algunos de los valores de las propiedades anteriores. El orden en que se indican los valores es indiferente.

Las propiedades vistas en esta página no son aplicables a las listas de definición, En éstas aplicaremos simplemente las mismas propiedades que podemos aplicar a cualquier texto.




Si estamos siguiendo sólo el curso de CSS continuaremos en el siguiente tema, donde veremos el estilo para imágenes

Imágenes en CSS


Si seguimos el curso de HTML y CSS al mismo tiempo segiremos en el manual de HTML con el tema de las imágenes:

Imágenes en HTML



manual de CSS

Anterior siguiente ... Siguiente siguiente


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com