{"id":737,"date":"2020-07-03T23:37:14","date_gmt":"2020-07-04T02:37:14","guid":{"rendered":"https:\/\/www.joemaster.com.br\/tutoriais\/?p=737"},"modified":"2022-12-09T08:22:51","modified_gmt":"2022-12-09T11:22:51","slug":"contadores-css","status":"publish","type":"post","link":"https:\/\/www.joemaster.com.br\/tutoriais\/contadores-css\/","title":{"rendered":"Contadores CSS"},"content":{"rendered":"

Os contadores de CSS s\u00e3o “vari\u00e1veis” mantidas pelo CSS cujos valores podem ser incrementados pelas regras CSS (para rastrear quantas vezes eles s\u00e3o usados).\u00a0Os contadores permitem ajustar a apar\u00eancia do conte\u00fado com base em sua coloca\u00e7\u00e3o no documento.<\/p>\n

\"\"<\/p>\n

 <\/p>\n

Numera\u00e7\u00e3o autom\u00e1tica com contadores<\/strong><\/p>\n

Os contadores CSS s\u00e3o como “vari\u00e1veis”. Os valores das vari\u00e1veis \u200b\u200bpodem ser incrementados pelas regras CSS (que controlam quantas vezes s\u00e3o usadas).<\/p>\n

Para trabalhar com contadores CSS, usaremos as seguintes propriedades:<\/p>\n

counter-reset<\/code> – Cria ou redefine um contador
\ncounter-increment<\/code> – Incrementa um valor de contador
\ncontent<\/code> – Insere conte\u00fado gerado
\ncounter()<\/code>or counters()<\/code>function – Adiciona o valor de um contador a um elemento
\nPara usar um contador CSS, ele deve primeiro ser criado com counter-reset.<\/code><\/p>\n

O exemplo a seguir cria um contador para a p\u00e1gina (no seletor de corpo) e depois incrementa o valor do contador para cada elemento <h2><\/code> e adiciona “Se\u00e7\u00e3o < valor do contador >:<\/code>” ao in\u00edcio de cada elemento <h2><\/code>:<\/p>\n

<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nbody {\r\n  counter-reset: section;\r\n}\r\n\r\nh2::before {\r\n  counter-increment: section;\r\n  content: \"Section \" counter(section) \": \";\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<h1>Using CSS Counters:<\/h1>\r\n<h2>HTML Tutorial<\/h2>\r\n<h2>CSS Tutorial<\/h2>\r\n<h2>JavaScript Tutorial<\/h2>\r\n\r\n<p><b>Note:<\/b> IE8 supports these properties only if a !DOCTYPE is specified.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
 <\/p>\n
Contadores de aninhamento<\/strong><\/p>\n
O exemplo a seguir cria um contador para a p\u00e1gina (se\u00e7\u00e3o) e um contador para cada elemento <h1><\/code> (subse\u00e7\u00e3o). O contador de “se\u00e7\u00e3o” ser\u00e1 contado para cada elemento <h1><\/code> com “Se\u00e7\u00e3o < valor do contador de se\u00e7\u00f5es >.” E o contador de “subse\u00e7\u00e3o” ser\u00e1 contado para cada elemento <h2><\/code> com “< valor do contador de se\u00e7\u00e3o >. < valor do contador de subse\u00e7\u00e3o > “:<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nbody {\r\n  counter-reset: section;\r\n}\r\n\r\nh1 {\r\n  counter-reset: subsection;\r\n}\r\n\r\nh1::before {\r\n  counter-increment: section;\r\n  content: \"Section \" counter(section) \". \";\r\n}\r\n\r\nh2::before {\r\n  counter-increment: subsection;\r\n  content: counter(section) \".\" counter(subsection) \" \";\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n\r\n<h1>HTML tutorials:<\/h1>\r\n<h2>HTML Tutorial<\/h2>\r\n<h2>CSS Tutorial<\/h2>\r\n\r\n<h1>Scripting tutorials:<\/h1>\r\n<h2>JavaScript<\/h2>\r\n<h2>VBScript<\/h2>\r\n\r\n<h1>XML tutorials:<\/h1>\r\n<h2>XML<\/h2>\r\n<h2>XSL<\/h2>\r\n\r\n<p><b>Note:<\/b> IE8 supports these properties only if a !DOCTYPE is specified.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
Um contador tamb\u00e9m pode ser \u00fatil para criar listas delineadas porque uma nova inst\u00e2ncia de um contador \u00e9 criada automaticamente em elementos filho.\u00a0Aqui usamos a\u00a0<\/span>counters()<\/code>fun\u00e7\u00e3o para inserir uma sequ\u00eancia entre diferentes n\u00edveis de contadores aninhados:<\/span><\/p>\n
\"\"<\/p>\n
<!DOCTYPE html>\r\n<html>\r\n<head>\r\n<style>\r\nol {\r\n  counter-reset: section;\r\n  list-style-type: none;\r\n}\r\n\r\nli::before {\r\n  counter-increment: section;\r\n  content: counters(section,\".\") \" \";\r\n}\r\n<\/style>\r\n<\/head>\r\n<body>\r\n\r\n<ol>\r\n  <li>item<\/li>\r\n  <li>item   \r\n  <ol>\r\n    <li>item<\/li>\r\n    <li>item<\/li>\r\n    <li>item\r\n    <ol>\r\n      <li>item<\/li>\r\n      <li>item<\/li>\r\n      <li>item<\/li>\r\n    <\/ol>\r\n    <\/li>\r\n    <li>item<\/li>\r\n  <\/ol>\r\n  <\/li>\r\n  <li>item<\/li>\r\n  <li>item<\/li>\r\n<\/ol>\r\n\r\n<ol>\r\n  <li>item<\/li>\r\n  <li>item<\/li>\r\n<\/ol>\r\n\r\n<p><b>Note:<\/b> IE8 supports these properties only if a !DOCTYPE is specified.<\/p>\r\n\r\n<\/body>\r\n<\/html>\r\n<\/pre>\n


<\/center>\n
 <\/p>\n
\n  Ap\u00f3s clicar em Copy ⇗
O código fica pronto para testar ou colar onde quiser no  CTRL+V<\/font>\n