Numeración correcta en numerosas listas HTML con CSS. Número correcto en numerosas listas HTML con CSS Cómo hacer una lista numerada en CSS

Muy a menudo para usar la numeración: al crear varias listas, listas, diseño de la tabla de contenido o contenido, etc.

En CSS, los contadores se utilizan para automatizar el proceso de numeración.

Para empezar, damos un ejemplo simple. Luego, más completo, cree una lista invertida con una numeración automatizada de sus artículos y subembols.

Contador de identificación

Primero necesitas identificar el contador.

Uso de la propiedad de reinicio contra reinicio, el contador se le asigna un nombre y un valor inicial. El nombre puede ser cualquiera, pero no puede comenzar con los números.

Fragmento de código:

Esta entrada sugiere que para la etiqueta. Se instala un medidor con el número de nombre y el valor inicial de 3.

De forma predeterminada, el valor inicial del contador es 0.

El incremento del mostrador

Para ello, sirve la propiedad de contraporte. También se usa para especificar los incrementos del medidor, el número al que aumentará el valor del medidor.

Fragmento de código:

cuerpo (contrapunto: número 3;)
Cuerpo P (contrarrestar: número 3 ; }

Este fragmento de código dice que los párrafos ( etiqueta

) En el cuerpo del documento será numerado por el contador numérico con incremental igual a 3.

El primer párrafo será en el número 6, ya que el valor inicial del contador 3 y su incremento es 3.

De forma predeterminada, el valor de los incrementos del contador es 1.

Ahora todo parámetros necesarios El medidor se establece: Nombre, valor inicial, incremento y elemento que se numerarán. Más....

Mostrador de visualización

Ahora es necesario mostrar el valor del contador y establecer las reglas para su ubicación. Esto se hace utilizando el contenido y el pseudo sin plato antes y después.

Propiedad de contenido inserta contenido a ( antes.) o después ( después ) El artículo especificado.

Fragmento de código:

cuerpo (contrapunto: número 3;)
Cuerpo P: Después (contra-incremento: número 3 ; Contenido: Contador "Igual" (número) "." ;)

Entonces, al fragmento de código anterior, agregamos la propiedad de contenido, que muestra la palabra "igual", luego el valor del número del número y el punto "". . Todo esto se inserta en la página después de los contenidos del párrafo ( etiqueta

) ¿Cuál es el pseudo-elemento después?

Finalmente...

A continuación se describe el ejemplo descrito.

Fragmento de código:

2 multiplica por 3

3 multiplica por 3

4 multiplica por 3

5 Multiplicar por 3

Resultado:

Listas anidadas con numeración automática

Consideremos un ejemplo de aplicar contadores para automatizar las listas invertidas por los procesos de numeración.

Debe haberlo conocido desde ambos HTML y cuando aprenda las listas en CSS, que los elementos de la lista están numerados automáticamente. Pero esta numeración es la más sencilla.

¿Qué pasa con la numeración automática de los subpárrafos del Formulario 1.1, 1.2, 2.1, 2.2, etc.?

Esta tarea se resuelve utilizando contadores que le permiten automatizar el proceso de numeración de listas nominales.

Fragmento de código:

1. Lista de primera lista


1. Primer párrafo del 1er punto.


2. Segundo párrafo del 1er punto.


2. La segunda lista de la lista.


1. Primer subpárrafo 2do punto


2. Segundo párrafo del 2do punto.


3. Lista de la tercera lista


1. Primer subpárrafo 3


2. Segundo subpárrafo 3er


3. Tercer párrafo tercero.








Resultado:

¡Así es cómo hay una automatización de las listas invertidas por el proceso de numeración!

Admite dos tipos de listas: numeradas y no numeradas. Los primeros se utilizan para enumerar ordenadamente elementos, el segundo, para crear una lista de elementos equivalentes. Todavía hay listas de definiciones que se utilizan para crear bloques de definición: descripción, pero, en mi experiencia, se usan extremadamente raramente. Sobre cómo trabajar con estas listas video para novatos Donde se muestra en detalle cómo trabajar con estas listas.

Habiendo trabajado con listas HTML no premedas estándar, cada una tarde o posterior choca con el problema de su imperfección. El hecho es que al sujetar una lista, la numeración de la lista adjunta de nuevo y nuevamente comienza con una unidad. Y a nivel de anidación de tres y en la longitud de la lista, más de diez comienzan a problemas con la percepción de qué elemento anidado, a la que pertenece el elemento principal.

Considere esta tarea en ejemplo simple. En el código a continuación, los elementos consisten en lo que me gustaría ver:

1. 1.
2. 2.
   1. 2.1.
   2. 2.2.
   1. 2.2.1.
   1. 2.2.1.1.
   2. 2.2.1.2.
   2. 2.2.2.
   3. 2.3.
   4. 2.4.
3. 3.
4. 4.
   1. 4.1.
   2. 4.2.
   1. 4.2.1.
   1. 4.2.1.1.
   2. 4.2.1.2.
   2. 4.2.2.
   3. 4.3.
   4. 4.4.

Sin embargo, al retirar dicho código HTML a la pantalla, obtenemos la salida estándar de la lista numerada HTML, en la que comienzan todas las listas adjuntas con 1.

En la figura anterior, lo que se presenta al comienzo de los elementos de la lista (no texto en negrita) es la numeración automática de la lista

Html. ¿Verdadero inconveniente?

Para que la numeración sea correcta, intuitivamente comprensible, es necesario que cada unión de la lista comience con una figura que denota su nivel de anidamiento. Y se puede hacer simplemente usando CSS:

Ol (estilo de lista: ninguno; reajuste contra reinicio: li;) LI: Antes (contra-incremento: Li; contenido: Contadores (Li ".") ".")

Aplicando este código CSS a las etiquetas.

y
1. La lista numerada obtendrá lo que necesita: Numerna adecuadamente Numerosa lista HTML:

   

   La formación de la numeración correcta en la lista numerada HTML usando CSS

   Considere con más detalle las propiedades de la lista numerada HTML, que se puede modificar con utilizando CSS..

   • estilo de lista: Ninguno;
     • cancele todos los estilos de la lista para los elementos OL (si fueron asignados anteriormente) utilizando la propiedad de estilo de lista
   • contrapunto: li;
     • asigne el ID de LI en el que se almacenará el miembro del elemento OL utilizando la propiedad de reinicio.
   • contra-incremento: li;
     • denote el identificador LI como un contador que contará la cantidad de visualización de los elementos OL en la página y se mostrará utilizando la propiedad Contenido y Pseudoement: antes de Li
   • contenido: Contadores (Li ".") ".";
     • establezca la secuencia de salida del medidor LI para todos los elementos de la lista Numerada OL.

   Por lo tanto, al cambiar las cuatro propiedades de CSS de dos elementos OL y LI de una lista numerada, puede obtener una lista HTML bellamente numerada, que es fácilmente percibida y más familiarizada para nosotros, ya que claramente envía la anidación de elementos y perteneciente a la Elementos padre de la lista.

   Código HTML y CSS de la lista numerada con la numeración correcta

   Para determinar fácilmente y aplicar la información descrita anteriormente, cito un código HTML y CSS de funcionamiento de una lista numerada con la numeración correcta de los elementos anidados:

   1. 1.
   2. 2.
      1. 2.1.
      2. 2.2.
      1. 2.2.1.
      1. 2.2.1.1.
      2. 2.2.1.2.
      2. 2.2.2.
      3. 2.3.
      4. 2.4.
   3. 3.
   4. 4.
      1. 4.1.
      2. 4.2.
      1. 4.2.1.
      1. 4.2.1.1.
      2. 4.2.1.2.
      2. 4.2.2.
      3. 4.3.
      4. 4.4.

   ¡Gracias por la atención! \u003d D.

   PD Sobre cómo crear la numeración correcta en las listas de etiquetas y etiqueta mixtas de HTML con CSS, puede leer en → este artículo . Se da una solución universal para crear propiedades CSS para diferentes tipos Listas html.

   Para las listas, la creación de la cual se describe aquí los medios HTML, se proporcionan las siguientes reglas CSS.

   tipo de estilo de lista

   Especifica el marcador o la numeración de listas en lugar del atributo de tipo en el código HTML. Los valores de propiedad para listas de etiquetas pueden ser:

   • dISCO. - Círculo, instalado de forma predeterminada.
   • circulo. - Circulo.
   • cuadrado. - Cuadrado.

   Para las listas numeradas, la propiedad suele ser asignada valores:

   • decimal - Números árabes, se establece el valor predeterminado.
   • romano - Pequeños números romanos.
   • alto-romano. - Números de capital romanos.
   • inferior-alfa. - Cadena de letras latinas.
   • alfa superior. - Capital latinas letras.

   También para cualquier tipo de lista, la propiedad de tipo de lista de lista, puede especificar el valor de la Ninguna, que eliminará de manera segura el marcador.

   Otros valores están disponibles para listas numeradas, por ejemplo, cjk-ideográfico Especifica la numeración ideográfica. Armenio. - Armenia tradicional, y decimal-Liderar-cero Establecerá la numeración de números romanos, pero con cero al principio: 01, 02, 03 ... 09, sin embargo, en la práctica, estos y los valores como ellos son extremadamente utilizados.

   El siguiente ejemplo muestra tres listas: numeradas con la numeración tradicional armenia, marcada con un círculo y elementos numerados en los que están numerados ideográficamente.

   1. Primer punto
   2. Segundo punto
   3. Tercer punto
   • Primer punto
   • Segundo punto
   • Tercer punto
   1. Primer punto
   2. Segundo punto
   3. Tercer punto
   
   
   

   Resultado.

   El color de los marcadores coincide con el color del texto en la lista especificada por la propiedad. color.

   imagen de estilo de lista

   Le permite instalar su propia imagen como marcador. Por ejemplo, si el archivo contiene la página contiene el archivo marcador.png.Lo que desea usar, el código de diseño será el siguiente:

   Ul (List-Style-Image: URL ("marcer.png");)

   posición de lista de lista

   Especifica la posición del marcador: se transfiere el elemento en el extranjero de la lista ( lista de la posición de estilo: afuera), o el texto se fortalece ( lista de la posición de estilo: dentro).

   El siguiente ejemplo muestra la diferencia entre estos valores. En el primer caso, el marcador dentro de la lista, en el segundo caso, se hace más allá de sus límites.

   • Solo miras lo que el interior difiere del exterior.
   • En el caso del interior, el marcador encaja en la lista, sin ir más allá de sus límites y no interfire la capa. El texto lo fortalece, el marcador es como el interior.
   • El valor del exterior hace un marcador fuera de la lista.
   
   
   

   Como resultado, se crea una página:

   

   estilo de lista.

   Le permite reducir el código escribiendo las tres propiedades enumeradas con una línea. Las reglas se registran a través del espacio:

   Ul (estilo de lista: cuadrado dentro;)

   Considere un ejemplo de una página con tres listas. El primer número está numerado en formato 01, 02, el segundo está marcado con un patrón personalizado (el archivo marcer.png en la carpeta con la página), el marcador de la tercera lista está deshabilitado.

   El código HTML se muestra a continuación.

   1. Primer punto
   2. Segundo punto
   3. Tercer punto
   • Primer punto
   • Segundo punto
   • Tercer punto
   1. Primer punto
   2. Segundo punto
   3. Tercer punto
   
   
   

   El navegador mostrará la página siguiente.

   ¡Buenos días!

   En este artículo, aprenderá sobre todas las características de las listas, entenderá cómo hacer una lista numerada, las etiquetas maestras que ayudarán a hacer una lista marcada simple más interesante y notable con los marcadores arbitrarios. Después de pasar la lección, tendrá una comprensión de dónde se aplican las listas y en qué circunstancias se pueden usar.

   Este artículo es el tercero en este pequeño curso en lo básico de HTML. Antes de leer esta lección, recomiendo pasar los dos anteriores:

   Solo comenzó el artículo, y ya puede notar el uso de una lista marcada estándar. En mi sitio se ve bastante simple: a la izquierda hay un pequeño sangrado con la línea y un marcador cuadrado. Además, en el artículo, consideraremos en detalle qué marcadores son, cómo hacer números, así como cómo hacer su propio marcador.

   En cada parte del artículo, la creación de ciertas listas se acompañará de explicaciones detalladas sobre la inserción de una lista.

   1. Listas marcadas en HTML

   Este tipo de listas se utiliza para enumerar el conjunto de elementos similares al conjunto. Puede ser una lista de referencias asociadas con un tema, explicación detallada Para partes individuales del texto. Pero veamos cómo se ven las listas de reproducción en el código:

   Pero se ve en el navegador:

   Higo. 1.1. Vista estándar de una lista HTML no medida marcada en el navegador

   1.1 Marcadores estándar para una lista marcada

   En la imagen de arriba (Figura 1.1). Puede notar los círculos al principio de cada elemento del menú. Este es un marcador. De forma predeterminada, está en el navegador en forma de un círculo pintado. Hay varios tipos de marcadores en HTML: un círculo, un círculo vacío y un cuadrado. No requieren CSS, ya sea conectando imágenes de terceros:

   1.2 Lista de marcador en forma de un círculo vacío

   Valores de atributo que usted sabe, y ahora veamos cómo hacer una lista HTML marcada en el código. De la tabla anterior, elegimos el segundo valor "círculo" para el atributo de tipo y lo configuramos en nuestra lista marcada:

   <html\u003e <cabeza\u003e <título\u003eUn ejemplo de una lista marcada con un marcador en forma de un círculo vacío</ Titulo\u003e </ Cabeza\u003e <cuerpo\u003e <p\u003eEstrellas:</ P\u003e <tipo UL \u003d "Círculo"\u003e <li\u003eSirio</ Li\u003e <li\u003eArctur.</ Li\u003e <li\u003ePólux</ Li\u003e <li\u003eBetelgeuse</ Li\u003e <li\u003eEl sol</ Li\u003e </ ul\u003e. </ Cuerpo\u003e </ Html\u003e

   Mire inmediatamente cómo se verá este código en el navegador:

   Higo. 1.2. Vista del marcador para la lista en forma de círculo en el navegador

   1.3 marcador de lista en forma de cuadrado

   Veamos también el último ejemplo con un marcador cuadrado para la lista HTML:

   Preste atención al marcador, se convirtió en cuadrado:

   Higo. 1.3. Vista del marcador para la lista en forma de cuadrado en el navegador.

   Nota IMPORTANTE: Ahora, de esta manera ya no se usa para crear estilos con listas marcadas. Hay una clara división de CSS (lo que se lee CSS) y HTML. HTML - para marcar, y CSS - para crear una apariencia atractiva.

   El código que contiene este atributo al especificar el tipo de documento actual como HTML5 (""), Daré un error al validación. Si no escuchó lo que es la validación, entonces estás aquí.

   El error será el siguiente:

   Higo. 1.4. Error en el validador cuando se usa el atributo "TIPO" de la lista

   Con listas marcadas descubiertas. Ahora pasamos a numerados, y luego consideramos las listas subradas y varios ejemplos listos para los más utilizados en los sitios reales.

   2. Listas numeradas en HTML

   En contraste con el tipo anterior de listas, hay una característica importante en las listas numeradas: automáticamente colocan la numeración. Esto es útil cuando necesitas numerar una lista grande. Manual Tomará mucho tiempo, mientras aún podrá perderse. La lista numerada se establece usando la etiqueta. Cómo se ve en la práctica:

   Un ejemplo de una lista numerada:

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

   <html\u003e <cabeza\u003e <título\u003eUn ejemplo de una lista numerada estándar</ Titulo\u003e </ Cabeza\u003e <cuerpo\u003e <p\u003eDe uno a cinco:</ P\u003e <oL\u003e <li\u003ePrimero</ Li\u003e <li\u003eSegundo</ Li\u003e <li\u003eEl tercero</ Li\u003e <li\u003eCuatro</ Li\u003e <li\u003eQuinto</ Li\u003e </ ol\u003e </ Cuerpo\u003e </ Html\u003e

   Esto parece una lista numerada con configuraciones estándar En el navegador:

   Higo. 2.1. Lista numerada en el navegador con ajustes estándar

   Al igual que su predecesor (lista marcada), tiene sus propios estilos para producir números. La numeración normal no es la única forma de marcadores en una lista numerada en HTML.

   2.1 Marcadores estándar para la lista numerada

   Aquí tenemos una opción de no tres tipos de marcadores, sino de cinco:

   Marcador de nombre	El valor del atributo "tipo"	Lista de ejemplo
   Marcadores en forma de números árabes.	1	Bádminton Béisbol
   Marcadores en forma de letras latinas minúsculas.	uNA.	Jomolungma Chechrie. Kanchenjanga
   Marcadores en forma de capital de letras latinas.	UNA.	Cumbre plomada. Tantrum Alley. Insano.
   Marcadores en forma de números romanos en la minúscula.	i.	Mar filipino mar Arabe mar de Coral
   Marcadores en forma de números romanos en la mayúscula.	I.	rojo Verde Azul

   2.2 Numeración propia en la lista HTML

   Además de la salida habitual de una lista numerada, también podemos comenzar su numeración desde cualquier dígito. Para hacer esto, debe establecer un atributo de "inicio" adicional. Tales trabajos de numeración en todo tipo de marcadores en listas numeradas. Cómo se ve en la práctica:

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

   <html\u003e <cabeza\u003e <título\u003eNumeración arbitraria para una lista numerada</ Titulo\u003e </ Cabeza\u003e <cuerpo\u003e <p\u003eComenzamos a numerar desde doce:</ P\u003e <oL TYPE \u003d "A" START \u003d "12"\u003e <li\u003eDoce</ Li\u003e <li\u003eTrece</ Li\u003e <li\u003eCatorce</ Li\u003e <li\u003eQuince</ Li\u003e <li\u003eDieciséis</ Li\u003e </ ol\u003e </ Cuerpo\u003e </ Html\u003e

   Así es como se mostrará en el sitio real:

   Higo. 2.2. Numeración de un número arbitrario en una lista numerada

   En la imagen de arriba, contamos con una lista a partir de doce, mientras que había marcadores en forma de letras latinas minúsculas. Ahora, creo que se quedó claro cómo usar estos atributos en sus proyectos.

   Bueno, ahora vamos a las listas HTML anidadas.

   3. Cómo hacer una lista de varios niveles (incrustados) en HTML

   Las listas multinivel se utilizan en el sitio en la construcción del menú. Este menú a menudo se ve a menudo, ya sea hacia abajo (CO LECON) o cayendo hacia la izquierda o hacia la derecha. Dichos menús le permiten almacenar otros elementos del menú en un formulario compacto.

   En el ejemplo de los modelos de automóviles, construiremos una lista de varios niveles en HTML:

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

   <html\u003e <cabeza\u003e <título\u003eLista de etiquetas anidadas HTML</ Titulo\u003e </ Cabeza\u003e <cuerpo\u003e <ul\u003e <li\u003eCitroen<ul\u003e <li\u003eBERLINGO.</ Li\u003e <li\u003eC1.</ Li\u003e <li\u003eC2.</ Li\u003e <li\u003eC3 Picasso.</ Li\u003e <li\u003eC4 Grand Picasso.</ Li\u003e </ ul\u003e. </ Li\u003e <li\u003eKia</ Li\u003e <li\u003eTOYOTA.</ Li\u003e <li\u003eAudi.</ Li\u003e <li\u003eLexus.</ Li\u003e </ ul\u003e. </ Cuerpo\u003e </ Html\u003e

   Tenga en cuenta cómo se ve la lista de varios niveles en el navegador:

   Higo. 3.1. Un ejemplo de una lista de varios niveles en HTML

   Hicimos una lista de varios niveles utilizando una etiqueta

   ). La lista de varios niveles con los modelos Citroen apareció con otros marcadores. La lista principal con marcadores pintados, y la lista al segundo nivel, con círculos vacíos. Pero, como recuerde, utilizando el atributo "tipo", podemos anular los marcadores (mejor conjunto).

   Pero podemos combinar listas de varios niveles con numerado y etiquetado de la siguiente manera:

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

   <html\u003e <cabeza\u003e <título\u003eListas numeradas, etiquetadas y multi-niveles en HTML</ Titulo\u003e </ Cabeza\u003e <cuerpo\u003e <ul\u003e <li\u003ePrimer grupo de tulipanes<oL\u003e <li\u003ePrimer grado<ul\u003e <li\u003eTulipanes tempranos simples</ Li\u003e </ ul\u003e. </ Li\u003e <li\u003eSegunda clase<ul\u003e <li\u003eTulipanes de Terry</ Li\u003e </ ul\u003e. </ Li\u003e </ ol\u003e </ Li\u003e </ ul\u003e. </ Cuerpo\u003e </ Html\u003e

   En el ejemplo anterior tenemos doble anidamiento (nivel 2). Primero, se invierte la lista de dos clases de tulipanes, está numerada. Luego, se invierte una lista marcada en cada uno de los elementos de la lista numerada.

   Miramos su vista en el navegador:

   Higo. 3.2. Un ejemplo de una lista numerada de varios niveles en una lista marcada en el navegador

   4. Materiales útiles en listas HTML

   Aquí está la información para la cual es necesaria la comprensión de las propiedades CSS. Para hacer esto, recomiendo explorar las siguientes lecciones :. Todos los ejemplos serán inmediatamente con código fuente Y dividido en pestañas HTML (estructura), CSS (estilos) y resultado.

   4.1 Cómo hacer una lista de HTML en una cadena

   Haga que la lista HTML en la cadena sea necesaria al crear un menú horizontal. Hazlo muy simple:

   4.2 Cómo hacer una lista de HTML sin icono

   Para esto corresponde a la propiedad de tipo estilo lista en CSS (más):

   4.3 Cómo hacer una lista en HTML en el centro

   Elemento de lista es elemento de bloquePor lo tanto, en el centro debe estar alineado con sangrías externas. Pero hay uno momento importante - Debemos especificar explícitamente el ancho para que la alineación funcione:

   4.4 Cómo hacer una lista en HTML con imágenes

   Sólo una sola propiedad de imagen de estilo de lista de CSS. Dentro de la URL indican la dirección al icono. Solo quiero notar que la imagen es mejor recoger poco inmediatamente, porque la altura de la línea de lista depende de ella:

   4.5 marcado html enumere su marcador

   En este caso, es necesario conectar los iconos de fuente por adelantado (por ejemplo, fontawesome). Luego, puede hacer cualquier icono en lugar de un marcador estándar:

   4.6 Cómo hacer una lista en HTML en varias columnas

   Para hacer una lista de varias columnas que usaremos. propiedad de CSS Cuenta de columna (propiedad se admite solo en los siguientes navegadores: es decir, 10+, Chrome 1.0+, Opera 11.1+, Safari 3.0+, Firefox 1.5+). También debe configurar la altura para que la lista vea la partición en varias columnas:

   5. Lista HTML combinada

   Para hacer una lista combinada en HTML mejor Fuentes de iconos de uso total. Por ejemplo, Fraaticon o Fontawesome.

   Esta información ya está avanzada, por lo que será necesario para un inicio.

   6. Practica trabajo con listas.

   En el video a continuación, puede ver todo el trabajo con listas HTML en la práctica:

   Para asegurar la información recibida, recomiendo todas las acciones para hacer manualmente. Pruebe diferentes marcadores para listas, cree listas numeradas y después de pasar a listas de varios niveles (adjuntas) y experimentar con ellos.

   En esto, con las listas terminan y vaya a la siguiente lección en las imágenes.

   Si necesita más que solo lo básico de los edificios del sitio, y usted quiere dominar la profesión. Desarrollador de front-end, preste atención al curso de la Netología de la Escuela en línea, "" "y la escuela de habilidades en línea y el curso".

   El curso dura mucho tiempo, pero el conocimiento recibirá estructurado, con el que puede obtener un trabajo de inmediato si está interesado en esta dirección.