CSS - Listas
Las listas son muy útiles para transmitir un conjunto de puntos numerados o con viñetas. Este capítulo le enseña cómo controlar el tipo de lista, la posición, el estilo, etc., usando CSS.
Tenemos las siguientes cinco propiedades CSS, que se pueden usar para controlar listas:
los list-style-type le permite controlar la forma o apariencia del marcador.
los list-style-position especifica si un punto largo que se ajusta a una segunda línea debe alinearse con la primera línea o comenzar por debajo del inicio del marcador.
los list-style-image especifica una imagen para el marcador en lugar de una viñeta o un número.
los list-style sirve como abreviatura de las propiedades anteriores.
los marker-offset especifica la distancia entre un marcador y el texto de la lista.
Ahora, veremos cómo usar estas propiedades con ejemplos.
La propiedad de tipo de estilo de lista
La propiedad list-style-type le permite controlar la forma o el estilo del punto de viñeta (también conocido como marcador) en el caso de listas desordenadas y el estilo de numeración de caracteres en listas ordenadas.
Estos son los valores que se pueden usar para una lista desordenada:
| No Señor. | Valor y descripción |
|---|---|
| 1 | none N / A |
| 2 | disc (default) Un círculo relleno |
| 3 | circle Un circulo vacio |
| 4 | square Un cuadrado relleno |
Estos son los valores, que se pueden usar para una lista ordenada:
| Valor | Descripción | Ejemplo |
|---|---|---|
| decimal | Número | 1,2,3,4,5 |
| cero inicial decimal | 0 antes del número | 01, 02, 03, 04, 05 |
| alfa inferior | Caracteres alfanuméricos en minúscula | a B C D e |
| alfa superior | Caracteres alfanuméricos en mayúscula | A B C D E |
| romano inferior | Números romanos en minúscula | yo, ii, iii, iv, v |
| romano superior | Números romanos en mayúsculas | I, II, III, IV, V |
| griego inferior | El marcador es griego inferior | alfa, beta, gamma |
| latín inferior | El marcador es latín inferior | a B C D e |
| latín alto | El marcador es latino superior | A B C D E |
| hebreo | El marcador es la numeración hebrea tradicional | |
| armenio | El marcador es la numeración armenia tradicional | |
| georgiano | El marcador es la numeración tradicional georgiana. | |
| cjk-ideográfico | El marcador son números ideográficos simples | |
| hiragana | El marcador es hiragana | a, yo, u, e, o, ka, ki |
| katakana | El marcador es katakana | A, I, U, E, O, KA, KI |
| hiragana-iroha | El marcador es hiragana-iroha | yo, ro, ja, ni, ho, él, a |
| katakana-iroha | El marcador es katakana-iroha | YO, RO, HA, NI, HO, HE, TO |
Aquí hay un ejemplo:
<html>
<head>
</head>
<body>
<ul style = "list-style-type:circle;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ul style = "list-style-type:square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style-type:decimal;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style = "list-style-type:lower-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style = "list-style-type:lower-roman;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>Producirá el siguiente resultado:
La propiedad list-style-position
La propiedad list-style-position indica si el marcador debe aparecer dentro o fuera del cuadro que contiene las viñetas. Puede tener uno de los dos valores:
| No Señor. | Valor y descripción |
|---|---|
| 1 | none N / A |
| 2 | inside Si el texto pasa a una segunda línea, el texto se ajustará debajo del marcador. También aparecerá con sangría donde el texto habría comenzado si la lista tuviera un valor de outside. |
| 3 | outside Si el texto pasa a una segunda línea, el texto se alineará con el inicio de la primera línea (a la derecha de la viñeta). |
Aquí hay un ejemplo:
<html>
<head>
</head>
<body>
<ul style = "list-style-type:circle; list-stlye-position:outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ul style = "list-style-type:square;list-style-position:inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style-type:decimal;list-stlye-position:outside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
<ol style = "list-style-type:lower-alpha;list-style-position:inside;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>Producirá el siguiente resultado:
La propiedad list-style-image
La imagen de estilo de lista le permite especificar una imagen para que pueda usar su propio estilo de viñeta. La sintaxis es similar a la propiedad background-image con las letras url comenzando con el valor de la propiedad seguido de la URL entre paréntesis. Si no encuentra la imagen dada, se utilizan viñetas predeterminadas.
Aquí hay un ejemplo:
<html>
<head>
</head>
<body>
<ul>
<li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol>
<li style = "list-style-image: url(/images/bullet.gif);">Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>Producirá el siguiente resultado:
La propiedad de estilo de lista
El estilo de lista le permite especificar todas las propiedades de la lista en una sola expresión. Estas propiedades pueden aparecer en cualquier orden.
Aquí hay un ejemplo:
<html>
<head>
</head>
<body>
<ul style = "list-style: inside square;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style: outside upper-alpha;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>Producirá el siguiente resultado:
La propiedad de desplazamiento del marcador
La propiedad de desplazamiento del marcador le permite especificar la distancia entre el marcador y el texto relacionado con ese marcador. Su valor debe ser una longitud como se muestra en el siguiente ejemplo:
Desafortunadamente, esta propiedad no es compatible con IE 6 o Netscape 7.
Aquí hay un ejemplo:
<html>
<head>
</head>
<body>
<ul style = "list-style: inside square; marker-offset:2em;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ul>
<ol style = "list-style: outside upper-alpha; marker-offset:2cm;">
<li>Maths</li>
<li>Social Science</li>
<li>Physics</li>
</ol>
</body>
</html>Producirá el siguiente resultado: