Tutoriales básicos de CSS

Modelo de caja CSS

CSS3Tutoriales básicos

Manual de referencia de CSS

reglas CSS @

Diseño de página web de CSS (Diseño de página web)palabra CSS-wrap(autonumeración)

Contador de CSS (Contador)

Los contadores de counter de CSS son similares a variables. Estos son mantenidos por CSS y sus valores pueden ser incrementados por reglas de CSS para rastrear su uso. Su principal uso es, se puede calcular el número de veces que se utiliza un elemento de nodo mediante reglas especificadas.

El contador de counter de CSS ayuda a aumentar y mostrar números generados basados en CSS de manera simple.

Propiedades de contador de CSS

A continuación, se lista una serie de propiedades utilizadas junto con los contadores de CSS:

counter-reset:para crear o restablecer el contador.
counter-incrementar:para aumentar el valor del contador.
content:para insertar el contenido generado.
función counter() o counters():para agregar el valor del contador al elemento.

Nota: Antes de usar los contadores de CSS, debes usar counter-reset para crearlo.

Ejemplo en línea de Counter de CSS

Vamos a dar un ejemplo, crear un contador para la página y aumentar el valor del contador para cada siguiente elemento.

Consulte el siguiente ejemplo:

Ejemplo

!DOCTYPE　html　　
<html>　　　　　　
<head>　　
<style>　　
body {　　
　　　　counter-reset:　section;　　
}　　
h2::before {　　
　　　　counter-increment:　section;　　
　　　　content: "Sección " contador(sección) ": ";　　
}　　
</style>　　
</head>　　
<body>　　
<h1>Ejemplo de Contador de Counters de CSS</h1>　　
<h2>Tutorial de Java</h2>　　
<h2>Tutorial de HTML</h2>　　
<h2>Tutorial de CSS</h2>　　
<h2>Tutorial de Oracle</h2>　　
<p><strong>Nota:</strong> IE8　Se necesita declarar !DOCTYPE. en el navegador./p>　　
</body>　　
</html>

prueba‹/›

Nota: En el ejemplo anterior, puedes ver que se ha creado un contador para la página en el selector del cuerpo, que agrega un contador para cada h2El elemento aumenta el valor del contador y agrega "Sección <valor del contador>：" al principio de cada elemento.2elemento.

Contador anidado de CSS

También puedes crear un contador dentro de un contador. Esto se llama anidamiento de contadores. Vamos a demostrar un ejemplo de contador anidado.

Consulte el siguiente ejemplo:

Ejemplo

!DOCTYPE　html　　
<html>　　
<head>　　
<style>　　
body {　　
　　　　counter-reset:　section;　　
}　　
h1　{　　
　　　　counter-reset: subsección;　　
}　　
h1::before {　　
　　　　counter-increment:　section;　　
　　　　content: "Sección " contador(sección) ". ";　　
}　　
h2::before {　　
　　　　counter-incrementar: subsección;　　
　　　　content: "contador(sección)" "." contador(subsección) " ";　　
}　　
</style>　　
</head>　　
<body>　　
<h1>Tutoriales de Java:</h1>　　
<h2>Tutorial de Java Core</h2>　　
<h2>Tutorial de Servlet</h2>　　
<h2>Tutorial de JSP</h2>　　
<h2>Tutorial de Spring</h2>　　
<h2>Tutorial de Hibernate</h2>　　
　　
<h1>Tutoriales de tecnología web:</h1>　　
<h2>Tutorial de HTML</h2>　　
<h2>Tutorial de CSS</h2>　　
<h2>Tutorial de jQuery</h2>　　
<h2>Tutorial de Bootstrap</h2>　　
　　
<h1>Tutoriales de bases de datos:</h1>　　
<h2>Tutorial de SQL</h2>　　
<h2>Tutorial de MySQL</h2>　　
<h2>PL/>Tutorial de SQL</h2>　　
<h2>Tutorial de Oracle</h2>　　
<p><strong>Nota:</strong>　Sólo IE8sólo admite estas propiedades.</p>　　
</body>　　
</html>

prueba‹/›

Nota:En el ejemplo anterior, puede ver que se creó un contador para esta sección y se creó otro contador anidado llamado subsection en esta sección.

Contadores anidados de diferentes niveles

Puede usar contadores anidados para crear listas de contorno. Esto le ayuda a insertar cadenas entre contadores anidados en diferentes niveles.

Consulte el siguiente ejemplo:

Ejemplo

!DOCTYPE　html　　
<html>　　
<head>　　
<style>　　
ol　{　　
　　　　counter-reset:　section;　　
　　　　lista-estilo-type:　none;　　
}　　
　　
li::before　{　　
　　　　counter-increment:　section;　　
　　　　content:　counters(section,".")　"　";　　
}　　
</style>　　
</head>　　
<body>　　
<h2>contadores de diferentes niveles de anidamiento</h2>　　
<ol>　　
　　<li>elemento</li>　　
　　<li>elemento　　
　　　　<ol>　　
　　　　　　<li>elemento</li>　　
　　　　　　<li>elemento</li>　　
　　　　　　<li>elemento　　
　　　　　　　　<ol>　　
　　　　　　　　　　<li>elemento</li>　　
　　　　　　　　　　<li>elemento</li>　　
　　　　　　　　　　<li>elemento</li>　　
　　　　　　　　</ol>　　
　　　　　　</li>　　
　　　　　　<li>elemento</li>　　
　　　　</ol>　　
　　</li>　　
　　<li>elemento</li>　　
　　<li>elemento</li>　　
</ol>　　
<p><strong>Nota:</strong>　Sólo IE8sólo admite estas propiedades.</p>　　
</body>　　
</html>

prueba‹/›

Diseño de página web de CSS (Diseño de página web)palabra CSS-wrap(autonumeración)