¿Cómo definir un número de secciones y subsecciones con sección en CSS?

En este artículo, aprenderemos cómo definir una serie de secciones y subsecciones con la sección en CSS. La etiqueta de sección define la sección de documentos como capítulos, encabezados, pies de página o cualquier otra sección. La etiqueta de sección divide el contenido en secciones y subsecciones.

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. Entonces, para resolver esta tarea, usaremos las propiedades de los contadores CSS que son las siguientes.

counter-reset: Se utiliza para poner a cero un contador.
Sintaxis:
```
counter-reset: myCounter;
```
counter-increment: Básicamente incrementa el valor de un contador.
Sintaxis:
```
counter-increment: myCounter;
```
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.
Sintaxis:
```
content: counter(myCounter);
```

Siguiendo los pasos podemos definir una serie de secciones y subsecciones con la sección en CSS:

Paso 1: Primero, creamos un contador para la página utilizando la propiedad de restablecimiento de contador en el selector de cuerpo y la subsección en el selector h2.
```
body {
  counter-reset: counter1;
}
h2{
  counter-reset: counter2;
}
```
Paso 2: ahora incremente el valor de contador1 para cada sección y el valor de contador2 para cada subsección usando la propiedad de incremento de contador y luego agregue el valor de contador1 antes de h2 y el valor de contador2 antes de h3 usando el contenido y la propiedad contador() .
```
h2:before {
   counter-increment: counter1;
   content: "Section " counter(counter1) ". ";
}
h3:before {
   counter-increment: counter2;
   content: counter(counter1) "." counter(counter2) " ";
}
```

Código HTML: a continuación se muestra la implementación completa del enfoque anterior.

HTML

<!DOCTYPE html>
<html>
<head>
    
    <style>
        div{
            color: green;
            font-size: 50px;
            margin: 50px 50px;
        }
        body {
                counter-reset: counter1;
            }
            h2 {
                counter-reset: counter2;
            }
            h2:before {
                counter-increment: counter1;
                content: "Section " counter(counter1) ". ";
            }
            h3:before {
                counter-increment: counter2;
                content: counter(counter1) "." counter(counter2) " ";
            }
    </style>
</head>
<body>
    <div>GeeksforGeeks</div>
    <h2>CSS</h2>
    <h3>GeeksforGeeks</h3>
    <h3>GeeksforGeeks</h3>
    <h3>GeeksforGeeks</h3>
    <h2>CSS</h2>
    <h3>GeeksforGeeks</h3>
    <h3>GeeksforGeeks</h3>
    <h3>GeeksforGeeks</h3>
    <h2>CSS</h2>
    <h3>GeeksforGeeks</h3>
    <h3>GeeksforGeeks</h3>
    <h3>GeeksforGeeks</h3>
    <h3>GeeksforGeeks</h3>
</body>
</html>

Producción:

Salida de contador

Publicación traducida automáticamente

Artículo escrito por nikhilchhipa9 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

HTML

Deja una respuesta Cancelar la respuesta