Breaking

Post Top Ad

Your Ad Spot

viernes, 4 de octubre de 2019

Cómo usar la propiedad Counter-Reset de CSS

La mayoría de los desarrolladores probablemente piensan en CSS como un medio para dar vida a los diseños, pero CSS3 es capaz de ir más allá de la estética. La propiedad de reinicio de contador de CSS3 se puede usar para asignar números cronológicos a ciertas secciones y subsecciones de su HTML, que luego puede usar para numerar ciertos elementos. Para este ejemplo, usaremos la propiedad para numerar el siguiente código:
1
2
3
4 4
<h1>Section 1</h1>
<h2>Sub-Section of Section 1</h2>
<h2>Sub-Section of Section 1</h2>
<h1>Section 2</h1>
Captura de pantalla 18/07/2016 a las 10.02.06 AM
Para usarlo, lo primero que debe hacer es definir dónde / cuándo se debe restablecer el contador:
1
2
3
body{
counter-reset: section;
}
Esto restablece el contador para comenzar desde cero. Puede agregar cualquier nombre como valor de la propiedad de restablecimiento del contador y funcionará igual, solo asegúrese de aplicar ese nombre a la propiedad de incremento del contador más adelante si intenta usar la propiedad para numerar automáticamente sus elementos HTML.
Para numerar los elementos, necesitamos decirle al CSS que los incremente. Como vamos a numerar elementos h1, nuestro CSS debería verse así:
1
2
3
4 4
h1:before{
counter-increment: section;
content: counter(section)'. ';
}
En el código anterior, básicamente le estamos diciendo al CSS que comience a incrementar el contador de sección para todos los elementos h1. Entonces, el primer elemento h1 se numerará automáticamente 1, el segundo será 2, y así sucesivamente. Para aplicar estos números a sus elementos correspondientes, utilizamos la propiedad de contenido con el valor 'contador (sección)', por lo que el valor siempre debe ser contador + el nombre que asignó a la propiedad de reinicio de contador inicial en su CSS (¡entre paréntesis! )
En el ejemplo con el que estamos trabajando, también decidimos usar subsecciones (los elementos h2), que pueden numerarse de manera similar. Primero, deberá comenzar un nuevo contador para las subsecciones:
1
2
3
h1{
counter-reset: subsection;
}
Para numerarlos, el código es más o menos lo mismo que numerar los elementos h1:
1
2
3
4 4
h2:before{
counter-increment: subsection;
content: counter(section)'.' counter(subsection)'- ';
}
Su producto final debería verse así:
Captura de pantalla 18/07/2016 a las 10.02.18 AM

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas