Este artículo le dará una idea sobre cómo usar las propiedades de contador de reinicio y contador de incremento en CSS. Podemos usar las propiedades de contador-reinicio y contador-incremento para establecer el conteo de los elementos HTML en la página web.
Necesidad de usar la propiedad de contraincremento :
Esta propiedad se puede utilizar para establecer el valor de incremento/decremento de un contador. Para organizar los datos correctamente, es necesario formatearlos para que una página web sea atractiva. Podemos configurar el conteo de los elementos HTML de varias maneras. La forma más sencilla es que podamos configurar los números manualmente, lo que no será una buena práctica. Podemos usar la lista HTML que puede ser una lista ordenada o una lista desordenada. Sin embargo, existen algunos inconvenientes de usar la lista sobre las propiedades del contador CSS, que se detallan a continuación:
- Podemos usar el contador CSS para establecer conteos en la lista compleja.
- Los usuarios pueden agregar un diseño personalizado a los recuentos, mientras que la lista numerada no permite la personalización.
- Los usuarios pueden establecer el punto de inicio del contador.
- La característica más útil es que podemos establecer el valor incremental usando el contador CSS, mientras que la lista numerada solo aumenta el valor en 1.
Hay varias formas de numerar con contadores CSS .
Sintaxis:
- Inicialice la variable de conteo de tramos.
counter-reset: Span-count;
- Aumente la variable de recuento de intervalos.
counter-increment: Span-count;
- Agregando conteo al contenido.
content: counter(Span-count);
Atributos: Las siguientes propiedades están contenidas en el contador CSS:
- Counter-reset: Para inicializar la variable del contador. El valor predeterminado de la variable contador es 0. Además, podemos establecer su valor manualmente. Es necesario crear la variable de restablecimiento del contador antes de usar el incremento del contador en la página web.
- Counter-increment: Para incrementar la variable del contador. El valor de incremento predeterminado es 1. También podemos configurarlo manualmente.
- Contador (counter_variable): Esta función toma la variable contador como argumento. Agrega el conteo antes o después del elemento HTML.
- Counters(counter_variable): Es lo mismo que la función counter(). Podemos usarlo para implementar los contadores anidados.
- Contenido: para establecer el recuento del contenido del elemento HTML.
Ejemplo: Este es un ejemplo simple que demuestra el uso de contadores CSS.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS counters</title>
<style>
/* Initializing the counter variable */
body {
counter-reset: Span-count;
}
/* Incrementing the value for counter variable */
span {
counter-increment: Span-count;
color: green;
}
/* Adding counter to the content */
span:before {
content: counter(Span-count) ". ";
}
</style>
</head>
<body>
<span>GeeksforGeeks</span> <br>
<span>GFG</span>
</body>
</html>
Producción:
Contador de CSS
Cambiar el valor inicial e incremental del contador CSS: Los valores iniciales e incrementales predeterminados para el contador CSS son 0 y 1 respectivamente. Podemos cambiar el valor inicial predeterminado configurando el valor de la variable de reinicio del contador. No importa qué valor establezcamos para la variable de reinicio del contador, comenzará a contar desde el valor que es la suma del valor inicial y el valor incremental. Por ejemplo, si inicializamos la variable de reinicio del contador con 1 y el incremento del contador a 2, comenzará la numeración desde 3.
Sintaxis:
counter-reset: Span-count -1;
Sintaxis:
Para cambiar el valor incremental del contador CSS, debemos establecer el valor de las propiedades de incremento del contador.
counter-increment: Span-count 2;
Ejemplo: Este código demuestra cómo cambiar el valor predeterminado de la variable de contador-reinicio y contador-incremento.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS counters</title>
<style>
/* Initialize the counter-reset variable with -2*/
body {
counter-reset: Span-count -2;
}
/* Changing incremental value to 2 */
span {
counter-increment: Span-count 2;
color: green;
}
span:before {
content: counter(Span-count) "- ";
}
</style>
</head>
<body>
<span>GeeksforGeeks</span><br>
<span>GFG</span>
</body>
</html>
Producción:
Incrementando el contador en 2 usando CSS Counter
Establecer formato de conteo: otra característica interesante del contador CSS es que proporciona diferentes formatos de conteo. El formato predeterminado para los contadores es el formato decimal. Podemos cambiar el formato predeterminado a latín inferior, griego inferior y romano inferior.
Sintaxis: necesitamos cambiar solo la propiedad de contenido como se muestra a continuación, para cambiar el formato de los recuentos.
content: counter(Span-count, values);
Valores de atributos:
- decimal: Representa los valores numéricos (p. ej., 1,2,3,..)
- lower-latin: Para configurar el alfabeto como un conteo.
- lower-greek: Para configurar los símbolos griegos como un conteo.
- lower-roman: Para establecer números romanos como un conteo.
Ejemplo: Este ejemplo demuestra cómo cambiar el formato de las cuentas del contador CSS.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS counters</title>
<style>
/* Initialize the counter variable */
body {
counter-reset: Span-count;
}
/* Increment the value for counter variable */
span {
counter-increment: Span-count;
color: green;
}
/* Adding counter to the content
changing count format to lower-roman*/
span:before {
content: counter(Span-count, lower-roman) "- ";
}
</style>
</head>
<body>
<span>GeeksforGeeks</span><br>
<span>GFG</span>
</body>
</html>
Producción:
Establecer el formato de contador en un romano inferior
Contadores anidados: el contador dentro de un contador se conoce como contador anidado. Los contadores anidados se utilizan para crear títulos y subtítulos. El uso de contadores anidados de CSS lo hace más fácil en lugar de listas numeradas complejas. Mientras numeramos datos anidados, necesitamos agregar cuentas como 1.1, 1.2, 1.1.2, etc. Podemos lograr lo mismo usando contadores CSS. Aquí conoceremos el uso de la función contadores().
Ejemplo: este ejemplo muestra recuentos anidados mediante el contador CSS. Cuando se inicia un nuevo div, la variable de reinicio del contador se vuelve a crear y se reinicializa con el valor inicial.
HTML
<!DOCTYPE html>
<html>
<head>
<title>CSS counters</title>
<style>
/* Reseting the counter variable inside div */
div {
counter-reset: counter_p;
}
/* Creating the nested list */
p:before {
counter-increment: counter_p;
content: counters(counter_p, ".") ". ";
}
p {
color: green;
}
</style>
</head>
<body>
<div>
<p>HTML List</p>
<div>
<p>Ordered List</p>
<p>Unordered List</p>
</div>
<p>Dictionary</p>
</div>
</body>
</html>
Producción:
Contadores anidados
Publicación traducida automáticamente
Artículo escrito por shubhamvora05 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA