*

octavio Mexico

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

de antemano gracias
Por favor, apoya esta pregunta en redes sociales


Conecta con tu cuenta para responder


*

Jonathan

  • *****
  • contador 102
  • mas karma +152/-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

  • **
  • contador 92
  • mas karma +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

 

Post relacionados

  Asunto / Iniciado por Respuestas Último mensaje
tema url tema 1 Respuestas
1538 Vistas
Último mensaje Junio 16, 2015, 11:22:43 pm
por Jonathan
tema url tema 1 Respuestas
7514 Vistas
Último mensaje Septiembre 11, 2015, 09:32:57 am
por Jonathan
tema url tema 2 Respuestas
15 Vistas
Último mensaje Abril 20, 2017, 09:30:57 am
por Otilia Cipriano