Los contadores en CSS son básicamente variables que se pueden usar para numerar y los valores de los contadores CSS se pueden incrementar mediante reglas CSS. Por ejemplo, los contadores CSS se pueden usar para incrementar la numeración de los encabezados automáticamente. En HTML, la etiqueta <ol> se usa para dar los números ordenados para enumerar elementos, pero CSS contiene un contador para dar elementos de orden de alguna otra manera.
Propiedades de los contadores CSS: los contadores CSS contienen las siguientes propiedades:
- counter-reset: Se utiliza para poner a cero un contador.
- counter-increment: Básicamente incrementa el valor de un contador.
- contenido: Se utiliza para generar contenido.
- Función counter() o counters(): el valor de un contador se puede mostrar usando la función counter() o counters() en una propiedad de contenido. Estas dos funciones básicamente se utilizan para agregar el valor de un contador al elemento.
Inicialización del contador CSS: para usar la propiedad del contador CSS, primero debe crearse con la propiedad de restablecimiento del contador y el primer paso es restablecer el contador. myCounter se inicializó de forma predeterminada en un valor 0 (cero) con la propiedad de restablecimiento del contador.
Sintaxis:
counter-reset: myCounter;
Incremento y uso del contador de CSS: para incrementar el contador, utilice la propiedad de incremento de contador de CSS.
Sintaxis:
counter-increment: myCounter;
La función counter() o counters() en un contenido se usa para mostrar el contenido en un orden particular.
Sintaxis:
content: counter(myCounter);
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>CSS counter property</title>
<style>
body {
counter-reset: myCounter;
}
h4::before {
counter-increment: myCounter;
content: "Heading " counter(myCounter) ": ";
}
.geeks {
color:#090;
font-size:40px;
font-weight:bold;
text-align:center;
}
.gfg {
text-align:center;
font-size:18px;
}
</style>
</head>
<body>
<div class = "geeks">GeeksforGeeks</div>
<div class = "gfg">CSS counter property</div>
<h3>Example of automatic numbering with CSS counters</h3>
<h4>GeekforGeeks</h4>
<h4>Computer Science portal</h4>
<h4>Geeks</h4>
</body>
</html>
Producción:
Contadores CSS anidados: el contador dentro de un contador se conoce como contador anidado. Los contadores anidados se utilizan para crear títulos y subtítulos. Este ejemplo muestra el uso de contadores CSS con etiquetas anidadas. Se utilizan diferentes contadores para diferentes tipos de etiquetas.
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>Nested css counter</title>
<style>
body {
counter-reset: counter1;
}
h3 {
counter-reset: counter2;
}
h3::before {
counter-increment: counter1;
content: counter(counter1) ". ";
}
h4::before {
margin-left:40px;
counter-increment: counter2;
content: counter(counter1) "." counter(counter2) " ";
}
.geeks {
color:#090;
font-size:40px;
font-weight:bold;
text-align:center;
}
.gfg {
text-align:center;
font-size:18px;
}
</style>
</head>
<body>
<div class = "geeks">GeeksforGeeks</div>
<div class = "gfg">Nested counter property</div>
<h3>CSS counter example</h3>
<h4>GeeksforGeeks</h4>
<h4>GeeksforGeeks</h4>
<h4>GeeksforGeeks</h4>
<h4>GeeksforGeeks</h4>
<h3>CSS counter example</h3>
<h4>GeeksforGeeks</h4>
<h4>GeeksforGeeks</h4>
<h4>GeeksforGeeks</h4>
<h4>GeeksforGeeks</h4>
<h3>CSS counter example</h3>
<h4>GeeksforGeeks</h4>
<h4>GeeksforGeeks</h4>
<h4>GeeksforGeeks</h4>
<h4>GeeksforGeeks</h4>
</body>
</html>
Producción:
Navegadores compatibles:
- Google Chrome 1.0 y superior
- Edge versión 12 y superior
- Firefox versión 1.5 y superior
- Internet Explorer 8.0 y superior
- Ópera 10.0 y superior
- Safari 3.0 y superior
Publicación traducida automáticamente
Artículo escrito por vivekkothari y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA