Contadores de CSS
Ejemplo 01: Uso de la propiedad del contador CSS para numerar automáticamente los encabezados en un archivo HTML
En este ejemplo, discutimos la propiedad de contador, que asigna automáticamente un número a cualquier elemento del lenguaje de marcado de hipertexto. Estaremos numerando nuestros encabezados en este ejemplo utilizando diferentes funciones de la propiedad contador:
Comenzaremos con el encabezado del archivo, donde asignaremos propiedades de estilo al cuerpo y la etiqueta H2 del archivo. Para la etiqueta del cuerpo, utilizaremos la función de reinicio del contador. Para la etiqueta H2, usaremos la propiedad de incremento de contador y la propiedad de contenido, que asignará los números de contrapenancia a la etiqueta H2 en el cuerpo.
Después de esto, abriremos la etiqueta del cuerpo en la que proporcionaremos un título a la página utilizando la etiqueta H1. Luego agregaremos múltiples etiquetas H2 con las propiedades de estilo definidas en la etiqueta de estilo. Tenemos una lista de nombres de personas y las identificaciones de sus empleados, que deben aumentar automáticamente cuando se agrega un nuevo nombre a la lista. Hemos agregado un pretexto usando la propiedad de contenido, yo.mi., "ID de empleado:" y luego use el contador para incrementar el valor. A continuación, cerraremos todas las etiquetas restantes para finalizar el archivo y lo abriremos en nuestro navegador para ver las propiedades de estilo.
En el fragmento anterior, podemos ver la identificación del empleado, que era el contenido que definimos. Los valores son auto-incrementos a través del mostrador, yo.mi., 1, 2, 3, 4, etc.
Ejemplo 02: Uso de la propiedad del contador CSS para crear múltiples encabezados y subtítulos con números jerárquicos
En este ejemplo, numeraremos nuestros encabezados y subtítulos utilizando diversas funcionalidades de la propiedad contraria. En este ejemplo, veremos la propiedad contador, que asigna un número a cualquier elemento en el lenguaje de marcado de hipertexto.
En este script, implementaremos el concepto del mostrador anidado. Primero, definiremos el mostrador en la clase de estilo del cuerpo, llamada “Sección."Aquí, definimos dos contraportados, sección y subsección, respectivamente. Como tenemos una lista de encabezados y subtítulos, restablecemos ambos contadores para los elementos específicos. Ahora, extenderemos la clase de estilo H1 y H2 con el Estado anterior. En esta parte de la clase, definiremos el ajuste de contenido para el encabezado y el subtítulo mediante el uso de las propiedades del contenido y el contenido. Luego, agregaremos el encabezado y el subtítulo usando las etiquetas H1 y H2, respectivamente. Estaremos creando dos secciones con encabezados y subtítulos separados. Luego, cerraremos las etiquetas y finalizaremos el archivo para guardarlo en el ".formato HTML "para que podamos abrirlo en nuestro navegador.
En la salida anterior, podemos ver que las dos secciones tienen una numeración diferente como se define en la clase de estilo del archivo. El número de encabezado aumenta, así como el número de subtítulos, que se restablece a uno cuando se llaman a otra sección.
Ejemplo 03: Creación de una lista de números ordenado utilizando la propiedad del contador CSS en un archivo HTML
En este ejemplo, crearemos una lista ordenada que estará numerada utilizando la propiedad del contador y sus funciones relacionadas, dividiendo la lista en diferentes secciones con números predefinidos según el cambio de sección.
En este script, agregaremos las clases de estilo inicialmente mientras optamos por el método de etiqueta de estilo CSS. La etiqueta de estilo primero tendrá la etiqueta "OL" para proporcionar propiedades de estilo. En esta clase, comenzaremos con la función de reinicio de contador, que se establecerá en la función de sección. Luego agregaremos la propiedad de tipo de estilo de lista, que se puede usar para agregar cualquier estilo predefinido o la vista predeterminada de la lista. Solo agregaremos propiedades de estilo al estado "antes" de esta etiqueta. En esta sección, agregaremos la propiedad de contra-incremento, que se establecerá en la función de sección y definirá la propiedad de contenido con la función de contador con el contenido agregado como el parámetro de los suheadings. Esta parte de la etiqueta de estilo asignará el conjunto correcto de números con varios subtítulos y subconocres. Luego crearemos una lista ordenada con cinco secciones diferentes usando las etiquetas OL y Li.
Como podemos ver en el fragmento anterior, los encabezados, los subtítulos y los subconsultos están perfectamente organizados con un conjunto distinto de números relacionados con su sección respectiva y son distintas de otras secciones simultáneamente.
Ejemplo 04: Creación de un Lista de páginas dinámicas utilizando la propiedad del contador CSS en un archivo HTML
Crearemos una lista de páginas dinámicas utilizando la propiedad del contador CSS en este ejemplo. Asignaremos los números de la lista de páginas, adaptados al cambio de flujo en la página transversal en nuestra página web. El enfoque de etiqueta de estilo para CSS se utilizará en este ejemplo:
El script anterior es un ejemplo de una lista con paginación dinámica a través de contadores. En la etiqueta UL de la clase de estilo, restableceremos el mostrador para el mostrador de paginado. Luego, crearemos una clase de estilo colectivamente para las etiquetas UL y Li donde le daremos propiedades de diseño agregando relleno, color y margen, dándole un borde sólido, un puntero del cursor y la propiedad flotante. Después de esto, pasaremos al siguiente y anterior estado de las etiquetas UL y Li en la misma clase, donde agregaremos la propiedad de contrato de contrato, que se establecerá en el mostrador de paginado. También definiremos la propiedad de contenido con la función de contador de paginado que tiene el contenido que se agregará como parámetro. Después de esto, crearemos una lista en el cuerpo del archivo usando las etiquetas Li y UL. La primera etiqueta LI tendrá la clase anterior como la Guía de propiedades de estilo, mientras que la última etiqueta LI tendrá la siguiente clase como la guía de propiedades de estilo, y el resto estará vacío.
Podemos ver que la lista se crea en una serie de números ordenados con un estado incremental junto con los botones siguientes y anteriores y los estilos como se define en la etiqueta de estilo.
Conclusión
En este artículo, discutimos las diversas funciones de la propiedad del contador CSS en el lenguaje de marcado de hipertexto. La propiedad del contador CSS se usa para asignar números a cualquier elemento dinámicamente. Con la ayuda de sus funciones relacionadas, podemos girar alrededor de los cambios de etiquetado en el encabezado de acuerdo con la sección. El incremento de contador y el reinicio del contador son las funciones más comunes al asignar números a un elemento. Implementamos la propiedad del contador CSS y sus funciones relacionadas en diferentes escenarios en el entorno de bloc de notas ++.