Unidad 4. Listas (III)



4.3. Atributos de las listas

Podemos variar el comportamiento de una lista ordenada con los atributos start, reverse, type y value.

start, indica el número de comienzo de la numeración. Es decir, el primer elemento de la lista tomará ese valor y los siguientes elementos tomarán valores consecutivos.

Por ejemplo:

<ol start="10"> <li>Abrir</li> <li>Editar</li> <li>Guardar</li> <li>Cerrar</li> </ol>

Produce este resultado:

  1. Abrir
  2. Editar
  3. Guardar
  4. Cerrar

reversed, hace que el orden sea descendente, es decir de mayor a menor.

Por ejemplo:

<ol reversed> <li>Abrir</li> <li>Editar</li> <li>Guardar</li> <li>Cerrar</li> </ol>

Produce este resultado:

  1. Abrir
  2. Editar
  3. Guardar
  4. Cerrar

type, define el tipo de estilo de la lista. Puede tomar los valores: 1 (números), a (letras minúsculas) A (letras mayúsculas), i (números romanos en minúsculas), I (números romanos en minúsculas)

Por ejemplo:

<ol type="i"> <li>Abrir</li> <li>Editar</li> <li>Guardar</li> <li>Cerrar</li> </ol>

Produce este resultado:

  1. Abrir
  2. Editar
  3. Guardar
  4. Cerrar

En lugar de utilizar este atributo type, se recomienda usar las hojas de estilo con la propiedad list-style-type como hemos visto en esta misma unidad.

value, define un valor concreto del tipo de estilo de la lista, los siguientes elementos se numerarán de forma consecutiva, a menos que se indique otro atributo value. De esta forma podemos establecer numeración por tramos, o en la forma que deseemos.

Por ejemplo:

<ol> <li value="100">Abrir</li> <li>Editar</li> <li value="200">Guardar</li> <li >Cerrar</li> </ol>

Produce este resultado:

  1. Abrir
  2. Editar
  3. Guardar
  4. Cerrar

Otro ejemplo dando valores de cien en cien:

<ol> <li value="100">Abrir</li> <li value="200">Editar</li> <li value="300">Guardar</li> <li value="400">Cerrar</li> </ol>

Produce este resultado:

  1. Abrir
  2. Editar
  3. Guardar
  4. Cerrar

Enero-2019 (V 2.2)
Pág. 4.3
Atrás Inicio Adelante






Página inicial  Cursos Informática Gratuitos

Síguenos en:   Facebook       Sobre aulaClic            Política de Cookies


© aulaClic. Todos los derechos reservados. Prohibida la reproducción por cualquier medio.