Como agregar numeracion automatica a los encabezados html con css?

  • 2 Respuestas
  • 1765 Vistas
*

octavio Mexico

  • **
  • 94
  • +4/-0
    • Ver Perfil
Como puedo agregar numeracion automatica a encabezados h1 h2 h3 h4 o h5 con css?

de antemano gracias



*

Jonathan

  • *****
  • 127
  • +156/-0
  • Don't work hard, work intelligent
    • Ver Perfil
    • Ingeniero en Sistemas Computacionales
Re:Como agregar numeracion automatica a los encabezados html con css?
« Respuesta #1 en: Octubre 20, 2015, 06:09:31 pm »
Hola amigo,

es muy facil, solo tienes que crear una variable que almacene la numeracion y que sirva de contador para cada encabezado.. te dejo un ejemplo

el html..

Código: [Seleccionar]
<div id="bloque">
  <h1>Titulo Principal</h1>
  <h2>Subtitulo</h2>
  <h2>Subtitulo</h2>
  <h1>Titulo Principal 2</h1>
  <h2>Subtitulo</h2>
  <h1>Titulo Principal 3</h1>
</div>

y el css, la magia ocurre aqui..

Código: [Seleccionar]
#bloque {
  counter-reset: contador;
}

h1:before {
  content: counter(contador)") ";
  counter-increment: contador;
}

h1 {
  counter-reset: subcontador;
}

h2:before {
  content: counter(contador)"." counter(subcontador)") ";
  counter-increment: subcontador;
}
body{
  font-family: courier new;
}

Saludos y buena programacion!

*

octavio Mexico

  • **
  • 94
  • +4/-0
    • Ver Perfil
Re:Como agregar numeracion automatica a los encabezados html con css?
« Respuesta #2 en: Octubre 20, 2015, 06:10:14 pm »
eres un crack amigo, gracias