Creando una lista combinada en html. Listas anidadas con numeración automática

Las listas numeradas son una colección de elementos con sus números de serie. El tipo y tipo de numeración depende de los parámetros del elemento.

, que se utiliza para crear la lista. Los siguientes valores pueden servir como elementos de numeración:
• Números arábigos (1, 2, 3,...);
• Números arábigos con un cero a la izquierda para los números menores de diez (01, 02, 03, ...,10);
• letras latinas mayúsculas (A, B, C, ...);
• letras latinas minúsculas (a, b, c, ...);
• números romanos en mayúsculas (I, II, III, ...);
• números romanos en minúscula (i, ii, iii, ...);
• numeración armenia;
• Numeración georgiana.

Desde un punto de vista práctico, los principios de mostrar elementos en una lista con viñetas se pueden aplicar de forma similar a una lista numerada. Pero dado que estamos ante una enumeración, hay algunas características que se analizarán más a fondo.

Numeración de listas

Se permite iniciar la lista desde cualquier número; El atributo de inicio del elemento se utiliza para este propósito.

o valor del elemento
1. . El valor es cualquier número entero positivo. No importa qué tipo de numeración se establezca, incluso si se utilizan letras latinas como lista. Si los atributos de inicio y valor se aplican a una lista al mismo tiempo, entonces este último tiene prioridad y la numeración se muestra a partir del número especificado por valor, como se muestra en el Ejemplo 1.

   Ejemplo 1: cambiar la numeración de la lista

   4. Debes cuidar bien tu lugar de trabajo.
   5. Ajuste la iluminación de la habitación de modo que la fuente de luz esté ubicada al costado o detrás del operador.
   10. Para evitar complicaciones médicas, se recomienda elegir una silla con asiento blando.

   El primer elemento de la lista en este ejemplo comenzará con el número romano IV, ya que se especifica el atributo start="4", luego viene el número V, y el último elemento sale desordenado y se le asigna el número X (Figura 1).

   Arroz. 1. Números romanos en la lista.

   Escribir números

   Por defecto, una lista numerada tiene una apariencia determinada: primero hay un número, luego un punto y luego el texto se muestra separado por un espacio. Esta forma de escritura es visual y conveniente, pero algunos desarrolladores prefieren ver una forma diferente de diseñar la numeración de listas. Es decir, que en lugar de un punto haya un corchete de cierre, como se muestra en la Fig. 2 o algo similar.

   

   Arroz. 2. Vista de lista numerada con corchetes

   Los estilos le permiten cambiar el tipo de numeración de la lista utilizando las propiedades de contenido y contraincremento. Primero, el selector ol debe configurarse para restablecer el contador: elemento, esto es necesario para que la numeración en cada nueva lista comience de nuevo. De lo contrario, la numeración continuará y en lugar de 1,2,3 verás 5,6,7. El valor del artículo es un identificador único para el contador; lo elegimos nosotros mismos. A continuación, debe ocultar los marcadores originales mediante la propiedad de estilo list-style-type con el valor none.

   La propiedad de contenido normalmente funciona junto con los pseudoelementos ::after y ::before. Por lo tanto, la construcción li::before dice que se debe agregar algún contenido antes de cada elemento de la lista (ejemplo 2).

   Ejemplo 2. Creando tu propia numeración

   Li::antes ( contenido: contador(elemento) ") "; /* Agrega un paréntesis a los números */ counter-increment: item; /* Establece el nombre del contador */ )

   La propiedad de contenido con el valor contador (elemento) muestra un número; Al agregar un paréntesis, como se muestra en este ejemplo, obtenemos el tipo de numeración requerido. Se necesita un contraincremento para aumentar el número de la lista en uno. Tenga en cuenta que se utiliza el mismo identificador, denominado elemento, en todo momento. El código final se muestra en el Ejemplo 3.

   Ejemplo 3: cambiar la vista de lista

   1. Primero
   2. Segundo
   3. Tercero
   4. Cuatro

   Usando el método anterior, puedes hacer cualquier tipo de lista numerada, por ejemplo, poner un número entre corchetes, en este caso solo cambiará una línea en los estilos.

   Contenido: "[" contador(elemento) "] ";

   Lista con letras rusas

   Hay una lista numerada con letras latinas, pero no hay letras rusas para la lista. Se pueden añadir artificialmente utilizando la técnica anterior. Dado que la numeración se realiza mediante estilos, la lista en sí sigue siendo original, solo se le agrega la clase seleccionada, llamémosla cirílica (ejemplo 4).

   Ejemplo 4: Código para crear una lista

   1. Uno
   2. Dos
   3. Tres

   La adición de letras se realiza utilizando el pseudoelemento ::before y la propiedad de contenido. Como cada línea debe tener su propia letra, usaremos la pseudoclase :nth-child(1), con el número de la letra escrito entre paréntesis. La primera letra, naturalmente, es A, la segunda es B, la tercera es C, etc. Este conjunto completo se agrega al selector li de la siguiente manera (ejemplo 5).

   Ejemplo 5: uso de la pseudoclase:nth-child

   Cirílico li:nth-child(1)::before (contenido: "a)"; ) .cyrilic li:nth-child(2)::before ( contenido: "b)"; ) .cyrilic li:nth-child(3)::before ( contenido: "en)"; )

   En este ejemplo, cada letra va seguida de un paréntesis y todas las letras están en minúsculas. Puedes definir tu propio tipo de numeración de lista, por ejemplo puede contener letras mayúsculas con un punto, con uno o dos corchetes, o solo letras. A diferencia de la numeración estándar, aquí somos libres de hacer lo que queramos. Una lista de diez letras debería ser suficiente para casi todas las situaciones, pero si de repente resulta insuficiente, nada nos impide ampliar nuestra lista para incluir al menos todas las letras del alfabeto ruso.

   Finalmente ajustamos la alineación y posición de las letras, opcionalmente especificamos el tamaño de fuente, el color y otros parámetros (ejemplo 6).

   Ejemplo 6. Lista con letras rusas.

   1. Borsch
   2. chuletas de lucio
   3. kulebyaka
   4. Champiñones en crema agria
   5. Panqueques con caviar
   6. kvas

   Resultado este ejemplo mostrado en la Fig. 3.

   Las listas son parte La vida cotidiana. La lista de tareas pendientes define lo que se hace. Las rutas de navegación ofrecen una lista de direcciones paso a paso. Las recetas requieren una lista de ingredientes y una lista de instrucciones. Las listas se encuentran en casi todas partes, por lo que es fácil ver por qué también son populares en Internet.

   Cuando queremos utilizar una lista en un sitio web, HTML ofrece tres tipos diferentes para elegir: lista con viñetas, numerada y descriptiva. Qué tipo de lista usar, y si se debe usar una lista, depende del contenido y de la opción semánticamente más apropiada para mostrarla.

   Además de tres diferentes tipos listas disponibles en HTML, hay varias formas de diseñar estas listas mediante CSS. Por ejemplo, podemos elegir qué tipo de viñeta especificar para la lista. El marcador puede ser un cuadrado, un círculo, un número, una letra o posiblemente ninguno. Además, podemos decidir cómo se debe mostrar la lista: vertical u horizontalmente. Todas estas opciones juegan un papel importante en el diseño de nuestras páginas web.

   Listas con viñetas

   Una lista con viñetas o desordenada es simplemente una lista de elementos relacionados cuyo orden no importa. La creación de una lista con viñetas en HTML se realiza utilizando un elemento de lista de bloqueo

   . Cada elemento individual de la lista está marcado con un elemento
   • .

     De forma predeterminada, la mayoría de los navegadores agregan margen vertical y relleno izquierdo al elemento.

     , y antes de cada elemento
     • pone un punto monocolor. Este punto se llama marcador de lista y se puede cambiar usando CSS.
       • Naranja
       • Verde
       • Azul

       Mostrar lista con viñetas

       Listas numeradas

       Lista de artículos numerados u ordenados.

       Muy similar a una lista con viñetas, las viñetas individuales se crean de la misma manera. La principal diferencia entre listas es que, para una lista ordenada, el orden en el que se presentan los elementos importa.

       Como el orden es importante, una lista numerada utiliza números en lugar de un punto como viñeta predeterminada.

       1. Camina por la calle Apricot
       2. Gira por Vinogradnaya

       Demostración de lista numerada

       Las listas numeradas también tienen atributos únicos disponibles, incluidos inicio e inversión.

       atributo de inicio

       El atributo de inicio especifica el número en el que debe comenzar la lista numerada. De forma predeterminada, las listas comienzan en 1, pero puede haber situaciones en las que la lista debería comenzar en 30 o algún otro número. Cuando usamos el atributo de inicio en un elemento

       , entonces podemos determinar con precisión a partir de qué número debe comenzar el conteo de la lista numerada.

       El atributo de inicio acepta sólo valores enteros, aunque las listas numeradas pueden utilizar diferentes sistemas de numeración, como números romanos.

       30. Camina por la calle Apricot
       31. Gira por Vinogradnaya
       32. Parada en la calle Shady

       Demostración del atributo de inicio.

       atributo invertido

       El atributo invertido cuando se agrega a un elemento

       permite que la lista se muestre en orden inverso. Una lista de cinco elementos numerados del 1 al 5 se puede invertir y numerar del 5 al 1.

       El atributo invertido es un atributo booleano y como tal no toma ningún valor. Puede ser verdadero o falso. Falso es el valor predeterminado, el valor se vuelve verdadero cuando el atributo invertido aparece en el elemento

       .
       1. Camina por la calle Apricot
       2. Gira por Vinogradnaya
       3. Parada en la calle Shady

       Demostración del atributo invertido.

       atributo de valor

       El atributo de valor se puede aplicar a elementos individuales.

       1. en una lista numerada para cambiar su valor en la lista. El número de cualquier elemento de la lista que aparezca debajo de un elemento de la lista con un atributo de valor se volverá a calcular en consecuencia.

          Como ejemplo, si el segundo elemento de la lista tiene un atributo de valor establecido en 9, el número de ese elemento de la lista se generará como si fuera el noveno. Todos los elementos de la lista subsiguientes se numerarán a partir del 9.

          1. Camina por la calle Apricot
          9. Gira por Vinogradnaya
          10. Parada en la calle Shady

          Demostración de atributos de valor

          Listas de descripción

          Otro tipo de lista que verá en línea (pero no con tanta frecuencia como las listas numeradas o con viñetas) es una lista de descripciones. Estas listas se utilizan para identificar varios términos y sus descripciones, como en un glosario, por ejemplo.

          La creación de una lista de descripción en HTML se realiza utilizando un elemento de bloque.

          . En lugar de utilizar el elemento

          Para marcar elementos de la lista, una lista de descripción requiere dos elementos de bloque:

          por el término y

          para descripción.

          Una lista de descripciones puede contener muchos términos y descripciones, uno tras otro. Además, dicha lista puede contener varios términos por descripción, así como varias descripciones por término. Un solo término puede tener múltiples significados y estar sujeto a múltiples descripciones. Por el contrario, una descripción puede ajustarse a varios términos.

          Al agregar un elemento de lista de descripción

          debe ir al elemento

          . El término y la descripción que le sigue inmediatamente están relacionados entre sí. Por tanto, el orden de estos elementos es importante.

          Por defecto, elemento

          incluye relleno vertical, como elementos

          Y
          . Además, el elemento
          Incluye el margen izquierdo por defecto.
          estudios
          Dedicar tiempo y atención al conocimiento de la materia que se imparte, especialmente a través de los libros.
          proyecto
          Un plano o dibujo presentado que muestra cómo se verá y funcionará un edificio, ropa u otro artículo antes de construirlo o fabricarlo.
          Metas, planes o intenciones existentes antes de que se materialicen o realicen en un objeto tangible.
          negocio
          Trabajo
          Ocupación, profesión u oficio habitual de una persona.
          Descripción Lista Demostración
          Listas anidadas
          La característica que hace que las listas sean muy poderosas es la función de anidamiento. Cada lista se puede anidar dentro de otra lista y se pueden anidar varias veces. Pero la capacidad de anidar listas infinitamente no le da la libertad de hacerlo. Las listas deben reservarse específicamente donde conserven el significado más semántico.
          El truco para anidar listas es saber dónde comienza y termina cada lista y elemento de la lista. Hablando específicamente de listas con viñetas y numeradas, el único elemento que puede aparecer directamente dentro
          Y
          es un elemento
          1. . Repitamos: el único elemento que podemos poner como descendiente directo de los elementos.
             Y
             , es
             1. .

                Sin embargo, dentro del elemento

             2. Se puede agregar un conjunto estándar de elementos, incluido cualquier elemento.
                o
                .

                Para adjuntar una lista: antes de cerrar el elemento de la lista, comience lista nueva. Una vez que la lista anidada esté completa y cerrada, cierre el elemento de la lista adjunta y continúe con la lista original.

                1. Pasear al perro
                2. Doblar la ropa
                3. Ve a la tienda y compra:
                   • Leche
                   • Pan
                   • Queso
                4. Cortar el césped
                5. hacer la cena

                Demostración de listas anidadas

                Dado que las listas anidadas pueden ser un poco confusas y mostrar estilos no deseados si se hacen incorrectamente, echemos un vistazo rápido a ellas. Elementos

                Y
                sólo puede contener elementos
                1. . Elemento
                2. puede contener cualquier elemento regular que desee. Sin embargo, el elemento
                3. debe ser un descendiente directo de cualquiera de los elementos
                   , o
                   .

                   También vale la pena señalar que cuando las listas se anidan dentro de otras listas, sus marcadores cambiarán dependiendo de la profundidad del anidamiento. En el ejemplo anterior, una lista con viñetas anidada dentro de una lista numerada utiliza un círculo en lugar de un punto como marcadores. Este cambio se produce porque la lista con viñetas está anidada un nivel dentro de la lista numerada.

                   Afortunadamente, podemos controlar cómo se ven las viñetas en cualquier nivel, lo cual veremos a continuación.

                   Estilo de elementos de la lista

                   Las listas con viñetas y numeradas utilizan viñetas de elementos de lista de forma predeterminada. En las listas con viñetas, estos tienden a ser puntos de colores sólidos, mientras que en las listas numeradas, tienden a ser números. Mediante el uso estilo css y la posición de estos marcadores se puede ajustar.

                   propiedad de tipo de estilo de lista

                   La propiedad list-style-type se utiliza para establecer el contenido del marcador de elemento de lista. Los valores disponibles van desde cuadrados y decimales hasta numeración armenia y se pueden agregar estilos CSS a los elementos.

                   ,
                   o
                   1. .

                      Cualquier valor para la propiedad de tipo de estilo de lista se puede agregar a una lista numerada o con viñetas. Teniendo esto en cuenta, puede utilizar la numeración en una lista con viñetas y viñetas no numéricas en una lista numerada.

                      • Naranja
                      • Verde
                      • Azul

                      Ul (tipo-estilo-lista: cuadrado;)

                      Demostración de la propiedad tipo lista-estilo

                      valores de tipo de estilo de lista

                      Como se mencionó anteriormente, la propiedad de tipo de estilo de lista contiene varios valores diferentes. La siguiente tabla muestra estos valores y sus contenidos correspondientes.

                      Usar una imagen como marcador de lista

                      Puede llegar un momento en el que los valores predeterminados para la propiedad list-style-type no sean suficientes y queramos definir nuestro propio marcador de lista. La mayoría de las veces, esto se hace colocando una imagen de fondo para cada elemento.

                   2. .

                      El proceso implica eliminar cualquier valor de propiedad de tipo de estilo de lista predeterminado y agregar una imagen de fondo y márgenes al elemento.

                   3. .

                      Más detalles: establecer la propiedad list-style-type en none eliminará los marcadores de lista existentes. La propiedad de fondo establecerá la imagen de fondo junto con su posición y se repetirá si es necesario. Y la propiedad de relleno proporcionará espacio a la izquierda del texto para la imagen de fondo.

                      • Naranja
                      • Verde
                      • Azul

                      Li (fondo: url("arrow.png") 0 50% sin repetición; tipo de estilo de lista: ninguno; relleno-izquierda: 12px;)

                      Mostrar una imagen como marcador

                      propiedad de posición de estilo de lista

                      De forma predeterminada, las viñetas de la lista se colocan a la izquierda del contenido del elemento.

                   4. . Este estilo de posicionamiento se describe como exterior, lo que significa que todo el contenido aparecerá directamente a la derecha, fuera del marcador de lista. Con la propiedad list-style-position podemos cambiar el valor predeterminado de outside a inside o heredar.

                      exterior coloca el marcador de lista a la izquierda del elemento

                   5. y no permita que ningún contenido fluya debajo de este marcador. El valor interno (que rara vez se usa y se puede ver) coloca el marcador de lista en la primera línea del elemento.
                   6. y permite que el contenido se ajuste alrededor del marcador si es necesario.
                      • pastelitos...
                      • Aspersión...

                      Ul (lista-estilo-posición: dentro;)

                      Demostración de propiedad de posición de estilo de lista

                      Estilo de lista de propiedades genérica

                      Las propiedades de lista que analizamos recientemente, tipo-estilo-lista y posición-estilo-lista, se pueden combinar en una propiedad genérica, estilo-lista. En esta propiedad, podemos usar uno o todos los valores de propiedad de la lista al mismo tiempo. El orden de estos valores debe ser: tipo-estilo-lista seguido de posición-estilo-lista.

                      Ul (estilo de lista: círculo dentro;) ol (estilo de lista: bajo romano;)

                      Visualización de lista horizontal

                      A veces queremos mostrar listas horizontalmente en lugar de verticalmente. Quizás queramos dividir la lista en varias columnas para crear una lista de navegación o colocar varios elementos de la lista en una fila. Dependiendo del contenido y deseado apariencia Hay varias formas de mostrar listas como una sola línea, por ejemplo tomando el valor de la propiedad de visualización de los elementos.

                   7. como en línea o bloque en línea o mediante la propiedad flotante.

                      Visualización de lista

                      Mayoría de manera rápida mostrar una lista en una línea - esto es para configurar los elementos

                   8. propiedad de visualización con el valor inline o inline-block . Esto pondrá todos los elementos.
                   9. en una línea con espacio igual entre cada elemento de la lista.

                      Si los espacios entre elementos

                   10. están causando problemas, se pueden eliminar utilizando las mismas técnicas que analizamos en la Lección 5, Posicionamiento del contenido.

                       Con mucha más frecuencia usaremos el valor de bloque en línea en lugar del valor en línea. El valor de bloque en línea facilita agregar relleno vertical y otro espacio a los elementos

                   11. , mientras que el valor en línea no.

                       Cuando el valor de la propiedad de visualización se cambia a inline o inline-block , se elimina el marcador de lista, ya sea un punto, un número u otro.

                       • Naranja
                       • Verde
                       • Azul

                       Li (pantalla: bloque en línea; margen: 0 10px;)

                       Demostración de una lista con bloque en línea

                       Listas con flotador

                       Cambiar la propiedad de visualización a inline o inline-block es rápido, pero elimina los marcadores de la lista. Si son necesarios, agregue un flotador a cada elemento.

                   12. es una mejor opción que cambiar la propiedad de visualización.

                       Instalación para todos los elementos.

                   13. propiedades flotantes como la izquierda alinearán todos los elementos horizontalmente
                   14. directamente uno al lado del otro sin espacios entre ellos. Cuando usamos flotador para
                   15. , el marcador de lista se muestra de forma predeterminada y se ubicará encima del elemento
                   16. al lado de él. Para evitar que el marcador de lista aparezca encima de otros elementos
                   17. , se debe agregar un margen horizontal o relleno.
                       • Naranja
                       • Verde
                       • Azul

                       Li (flotante: izquierda; margen: 0 20px;)

                       Demostración de una lista con flotador.

                       Como ocurre con cualquier elemento flotante, esto interrumpe el flujo de la página. No debemos olvidarnos de borrar el flotador y devolver la página al flujo normal; el método más común es mediante clearfix.

                       Ejemplo de lista de navegación

                       A menudo diseñamos y encontramos menús de navegación que utilizan listas desordenadas. Por lo general, estas listas se distribuyen horizontalmente utilizando uno de los dos métodos mencionados anteriormente. Aquí, por ejemplo, hay un menú de navegación horizontal dispuesto mediante una lista desordenada, en la que los elementos

                   18. se muestran como bloque en línea.

                       Navegación ul ( fuente: negrita 11px "Helvetica Neue", Helvetica, Arial, sans-serif; margen: 0; relleno: 0; transformación de texto: mayúsculas; ) .navigation li ( pantalla: bloque en línea; ) .navigation a ( fondo: #395870; fondo: gradiente lineal (#49708f, #293f50); borde derecho: 1px solid rgba(0, 0, 0, .3); color: #fff; relleno: 12px 20px; decoración de texto: none; ) .navigation a:hover (fondo: #314b60; box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, .3); ) .navigation li:first-child a ( border-radius: 4px 0 0 4px; ) .navigation li:último hijo a ( borde derecho: 0; radio de borde: 0 4px 4px 0; )

                       Demostración de la lista de navegación

                       En la practica

                       Ahora que sabemos cómo crear listas en HTML y CSS, echemos un vistazo a nuestro sitio de Conferencia de estilos y veamos dónde podemos usar listas.

                       Ahora menús de navegación en elementos.

                       Y