Contadores en CSS

contadores CSS : En este tutorial, vamos a aprender acerca de los contadores en CSS (Cascading Style Sheet) con ejemplos.

Contadores CSS

Contadores en CSS se pueden definir como variables mantenidas por CSS y los valores de estas variables puede ser incrementado por las reglas CSS para rastrear el número de veces que se han utilizado.

Ejemplo Contadores en CSS se pueden utilizar para incrementar el número de párrafos automáticamente.

propiedades contador CSS

Las siguientes son las propiedades de venta libre,

  1. counter-reset
  2. contador aún
  3. contenido
  4. contador () / contadores () funciones

Vamos vistazo a cada propiedad más de cerca,

propiedad 1) counter-reset

Esta propiedad se utiliza para crear o reiniciar un contador .

Para utilizar la propiedad CSS contador en primer lugar se debe crear con el propiedad counter-reset y el primer paso es restablecer el contador.

Sintaxis:

Element {
counter-reset: section;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: section;
}
h2::before {
counter-increment: section;
content: "Section " counter(section) ": ";
}
</style>
</head>
<body>
<h1>Counters in CSS</h1>
<h2>counter1</h2>
<h2>counter2</h2>
<h2>counter3</h2>
</body>
</html>

salida

Counters in CSS - 4

En el ejemplo anterior, el número de veces que se utiliza un h2 etiqueta es 3.

2) propiedad counter-increment

Esta propiedad se utiliza para incrementar el valor del contador.

Sintaxis:

Element {
counter-increment: section;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: heading;
}
h2::before {
counter-increment: heading;
content: "Section " counter(heading) ": ";
}
</style>
</head>
<body>
<h1>Counters in CSS</h1>
<h2>counter 1 increment</h2>
<h2>counter 2 increment</h2>
<h2>counter 3 increment</h2>
</body>
</html>

salida

Counters in CSS - 5

En el ejemplo anterior, estamos incrementando el contenido de la partida.

3) contenido propiedad

Esta propiedad se utiliza para insertar el contenido generado.

Sintaxis:

Element{
content:counter(section);
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: heading;
}
h2::before {
counter-increment: heading;
content: "Section " counter(heading) ": ";
}
</style>
</head>
<body>
<h1>Counters in CSS</h1>
<h2>counter 1 increment</h2>
<h2>counter 2 increment</h2>
<h2>counter 3 increment</h2>
</body>
</html>

salida

Counters in CSS - 6

En el ejemplo anterior, la “sección” y “:” son la parte del contenido que se utilizan antes de que el contenido de la etiqueta h2 .

4) counter () / funciones contadores ()

El contador () función o las contadores () función en el contenido se utiliza para mostrar el contenido en un orden particular. Estas dos funciones se utilizan básicamente para añadir el valor de un contador al elemento.

Sintaxis:

Element {
counter(section);
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
body {
counter-reset: heading;
}
h2::before {
counter-increment: heading;
content: "Section " counter(heading) ": ";
}
</style>
</head>
<body>
<h1>Counters in CSS</h1>
<h2>counter 1 increment</h2>
<h2>counter 2 increment</h2>
<h2>counter 3 increment</h2>
</body>
</html>

salida

Counters in CSS - 7

En el ejemplo anterior, el contador () función se utiliza para mostrar el contenido epígrafe .


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *