Contadores de CSS
Exemplo 01: Usando a propriedade CSS Counter para numerar automaticamente os títulos em um arquivo HTML
Neste exemplo, discutimos a propriedade Counter, que atribui automaticamente um número a qualquer elemento da linguagem de marcação de hipertexto. Estaremos numerando nossos títulos neste exemplo usando diferentes funções da propriedade Counter:
Começaremos com o cabeçalho do arquivo, onde atribuiremos propriedades de estilo ao corpo e tag H2 do arquivo. Para a etiqueta corporal, usaremos a função de redefinição do contador. Para a etiqueta H2, usaremos a propriedade de incremento do contador e a propriedade de conteúdo, que atribuirá os números contra-gerados à tag H2 no corpo.
Depois disso, abriremos a etiqueta corporal na qual forneceremos um título à página usando a tag H1. Em seguida, adicionaremos várias tags H2 com as propriedades de estilo definidas na tag de estilo. Temos uma lista dos nomes de pessoas e os IDs de seus funcionários, que precisam ser incrustados automaticamente quando um novo nome é adicionado à lista. Adicionamos um pretexto usando a propriedade de conteúdo, i.e., “ID do funcionário:” e depois use o contador para aumentar o valor. Em seguida, fecharemos todas as tags restantes para encerrar o arquivo e abrirá em nosso navegador para ver as propriedades de estilo.
No trecho anterior, podemos ver o ID do funcionário, que foi o conteúdo que definimos. Os valores são incrementos automáticos através do balcão, eu.e., 1, 2, 3, 4, etc.
Exemplo 02: Usando a propriedade CSS Counter para criar vários títulos e subtítulos com números hierárquicos
Neste exemplo, numeraremos nossos títulos e subtítulos utilizando várias funcionalidades da propriedade do contador. Neste exemplo, examinaremos a propriedade do contador, que atribui um número a qualquer elemento na linguagem de marcação de hipertexto.
Neste script, implementaremos o conceito de contador aninhado. Primeiro, definiremos o balcão na classe de estilo do corpo, denominado “Seção.”Aqui, definimos dois nomes de balcão, seção e subseção, respectivamente. Como temos uma lista de títulos e subtítulos, redefinimos os dois contadores para os elementos específicos. Agora, estenderemos a aula de estilo H1 e H2 com o estado anterior. Nesta parte da classe, definiremos o ajuste do conteúdo para o cabeçalho e subposição usando o incremento e as propriedades do conteúdo do contador e do conteúdo. Em seguida, adicionaremos o cabeçalho e a subposição usando as tags H1 e H2, respectivamente. Estaremos criando duas seções com títulos e subtítulos separados. Em seguida, fecharemos as tags e encerraremos o arquivo para salvá -lo no “.formato html ”para que possamos abri -lo em nosso navegador.
Na saída anterior, podemos ver que as duas seções têm numeração diferente, conforme definido na classe de estilo do arquivo. O número do título aumenta, bem como o número dos subtítulos, que é redefinido para um quando eles são chamados para outra seção.
Exemplo 03: Criando uma lista ordenada por número usando a propriedade CSS Counter em um arquivo HTML
Neste exemplo, criaremos uma lista ordenada que será numerada usando a propriedade Contador e suas funções relacionadas, dividindo a lista em seções diferentes com números predefinidos de acordo com a mudança de seção.
Neste script, estaremos adicionando as aulas de estilo inicialmente à medida que estamos optando pelo método CSS de etiqueta de estilo. A tag de estilo terá primeiro a tag "OL" para fornecer propriedades de estilo. Nesta classe, começaremos com a função de redefinição do contador, que será definida para a função da seção. Em seguida, adicionaremos a propriedade Tipo de estilo de lista, que pode ser usada para adicionar qualquer estilo predefinido ou a visualização padrão da lista. Somente adicionaremos propriedades de estilo ao estado "Antes" desta tag. Nesta seção, adicionaremos a propriedade contra o incremento, que será definida para a função da seção, e definirá a propriedade de conteúdo com a função do contador, tendo o conteúdo adicionado como o parâmetro dos sufocados. Esta parte da tag de estilo atribuirá o conjunto correto de números com vários subtítulos e sub-sub-sub-sub-sub-sub-sub-sub-sub-sub-sub-sub-sub-sub-subanetas. Em seguida, criaremos uma lista ordenada com cinco seções diferentes usando as tags OL e Li.
Como podemos ver no trecho anterior, os títulos, subtítulos e sub-sub-subsídios são perfeitamente organizados com um conjunto distinto de números referentes à sua respectiva seção e são distintos de outras seções simultaneamente.
Exemplo 04: Criando um Lista de páginas dinâmicas usando a propriedade CSS Counter em um arquivo HTML
Criaremos uma lista de páginas dinâmicas usando a propriedade CSS Counter neste exemplo. Atribuiremos os números da lista de páginas, adaptados à alteração do fluxo na Traversal da página em nossa página da web. A abordagem de tag de estilo para CSS será utilizada neste exemplo:
O script anterior é um exemplo de uma lista com paginação dinâmica através de contadores. Na etiqueta UL da aula de estilo, reiniciaremos o balcão para o contador de paginatos. Em seguida, criaremos uma aula de estilo coletivamente para as tags UL e LI, onde daremos propriedades de design adicionando preenchimento, cor e margem, dando -lhe uma borda sólida, ponteiro do cursor e a propriedade flutuante. Depois disso, passaremos para o próximo e anterior estado das tags UL e LI na mesma classe, onde adicionaremos a propriedade contra o incremento, que será definido para o contador paginato. Também definiremos a propriedade de conteúdo com a função de contador paginate, tendo o conteúdo a ser adicionado como parâmetro. Depois disso, criaremos uma lista no corpo do arquivo usando as tags LI e UL. A primeira tag li terá a classe anterior como o guia de propriedades de estilo, enquanto a última tag Li terá a aula a seguir como o guia de propriedades de estilo, e o restante estará vazio.
Podemos ver que a lista é criada em uma série ordenada de números com um estado incremental, juntamente com os botões próximos e anteriores e os estilos, conforme definido na tag de estilo.
Conclusão
Neste artigo, discutimos as várias funções da propriedade CSS Counter na linguagem de marcação de hipertexto. A propriedade do contador CSS é usada para atribuir números a qualquer elemento dinamicamente. Com a ajuda de suas funções relacionadas, podemos girar em torno das mudanças de rotulagem no título de acordo com a seção. O incremento do contador e a redefinição do contador são as funções mais comuns ao atribuir números a um elemento. Implementamos a propriedade CSS Counter e suas funções relacionadas em diferentes cenários no ambiente do bloco de notas ++.