Introdução à paginação CSS

Paginação é o método pelo qual o documento é separado em páginas e números são fornecidos. A paginação facilita a localização de uma grande quantidade de conteúdo e decompõe várias entradas ou conteúdo da Web em várias páginas, permitindo que você alterne facilmente o conteúdo por meio dele. Os links da Web de paginação basicamente permitem que seu conteúdo seja navegado pelos visitantes. A paginação CSS é um método bastante bom para indexar na página inicial várias páginas de um site. Quando você tem muitas páginas no seu site, precisa adicionar alguma paginação para cada página.

Tipos de paginação em CSS

Abaixo estão os tipos de paginação em CSS:

  • Paginação Simples
  • Paginação ativa e pairável
  • Botões ativos e pairáveis ​​arredondados
  • Paginação limitada
  • Paginação de borda arredondada
  • Paginação centralizada
  • Espaço entre Paginação
  • Tamanho da paginação

1. Paginação Simples

O exemplo abaixo mostra a paginação simples. A classe "paginação" pode ser usada para definir a paginação nas páginas HTML.

Código:



.pagination a (
font-size: 18px;
float: left;
padding: 8px 16px;
text-decoration: none;
)

Simple Pagination
«
1
2
3
4
5
6
7
8
9
10
»



.pagination a (
font-size: 18px;
float: left;
padding: 8px 16px;
text-decoration: none;
)

Simple Pagination
«
1
2
3
4
5
6
7
8
9
10
»



.pagination a (
font-size: 18px;
float: left;
padding: 8px 16px;
text-decoration: none;
)

Simple Pagination
«
1
2
3
4
5
6
7
8
9
10
»

Salve o código acima na página HTML e nomeie-o de acordo com sua escolha. Abra o arquivo em um navegador e ele exibirá a saída como mostrado na imagem abaixo.

Resultado:

2. Paginação ativa e pairável

A página atual será exibida usando a classe ativa. Quando o mouse passa sobre eles, o cursor passa a mudar a cor do link da página.

Código:



.pagination a (
font-size: 18px;
float: left;
padding: 8px 16px;
text-decoration: none;
)
.pagination a.active (
background-color:#d7bb6c;
)
.pagination a:hover:not(.active) (
background-color: #d4d5d2;
)

Active and Hoverable Pagination
«
1
2
3
4
5
6
7
8
9
10
»



.pagination a (
font-size: 18px;
float: left;
padding: 8px 16px;
text-decoration: none;
)
.pagination a.active (
background-color:#d7bb6c;
)
.pagination a:hover:not(.active) (
background-color: #d4d5d2;
)

Active and Hoverable Pagination
«
1
2
3
4
5
6
7
8
9
10
»



.pagination a (
font-size: 18px;
float: left;
padding: 8px 16px;
text-decoration: none;
)
.pagination a.active (
background-color:#d7bb6c;
)
.pagination a:hover:not(.active) (
background-color: #d4d5d2;
)

Active and Hoverable Pagination
«
1
2
3
4
5
6
7
8
9
10
»

Resultado:

3. Botões ativos e pairáveis ​​arredondados

Nesse tipo de paginação, a propriedade raio da borda pode ser usada para botões ativos e pairáveis ​​arredondados.

Código:



Rounded Active and Hoverable Buttons

.pagination a (
font-size: 18px;
float: left;
padding: 8px 16px;
text-decoration: none;
)
.pagination a.active (
background-color:#d7bb6c;
border-radius:6px;
)
.pagination a:hover:not(.active) (
background-color: #d4d5d2;
border-radius:6px;
)

Rounded Active and Hoverable Buttons
«
1
2
3
4
5
6
7
8
9
10
»



Rounded Active and Hoverable Buttons

.pagination a (
font-size: 18px;
float: left;
padding: 8px 16px;
text-decoration: none;
)
.pagination a.active (
background-color:#d7bb6c;
border-radius:6px;
)
.pagination a:hover:not(.active) (
background-color: #d4d5d2;
border-radius:6px;
)

Rounded Active and Hoverable Buttons
«
1
2
3
4
5
6
7
8
9
10
»



Rounded Active and Hoverable Buttons

.pagination a (
font-size: 18px;
float: left;
padding: 8px 16px;
text-decoration: none;
)
.pagination a.active (
background-color:#d7bb6c;
border-radius:6px;
)
.pagination a:hover:not(.active) (
background-color: #d4d5d2;
border-radius:6px;
)

Rounded Active and Hoverable Buttons
«
1
2
3
4
5
6
7
8
9
10
»

Resultado:

4. Paginação limitada

Este tipo pode ser usado quando você deseja adicionar uma borda à paginação.

Código:



Bordered Pagination

.pagination a (
font-size: 18px;
float: left;
padding: 8px 16px;
text-decoration: none;
border:1px solid grey;
)
.pagination a.active (
background-color:#d7bb6c;
)
.pagination a:hover:not(.active) (
background-color: #d4d5d2;
)

Bordered Pagination
«
1
2
3
4
5
6
7
8
9
10
»



Bordered Pagination

.pagination a (
font-size: 18px;
float: left;
padding: 8px 16px;
text-decoration: none;
border:1px solid grey;
)
.pagination a.active (
background-color:#d7bb6c;
)
.pagination a:hover:not(.active) (
background-color: #d4d5d2;
)

Bordered Pagination
«
1
2
3
4
5
6
7
8
9
10
»



Bordered Pagination

.pagination a (
font-size: 18px;
float: left;
padding: 8px 16px;
text-decoration: none;
border:1px solid grey;
)
.pagination a.active (
background-color:#d7bb6c;
)
.pagination a:hover:not(.active) (
background-color: #d4d5d2;
)

Bordered Pagination
«
1
2
3
4
5
6
7
8
9
10
»

Resultado:

5. Paginação de borda arredondada

Esse tipo pode ser usado quando você deseja adicionar uma borda arredondada à paginação usando a propriedade border-radius.

Código:



Rounded Bordered Pagination

.pagination a (
font-size: 18px;
float: left;
padding: 8px 16px;
text-decoration: none;
border-radius:6px;
border:1px solid grey;
)
.pagination a.active (
background-color:#d7bb6c;
)
.pagination a:hover:not(.active) (
background-color: #d4d5d2;
)

Rounded Bordered Pagination
«
1
2
3
4
5
6
7
8
9
10
»



Rounded Bordered Pagination

.pagination a (
font-size: 18px;
float: left;
padding: 8px 16px;
text-decoration: none;
border-radius:6px;
border:1px solid grey;
)
.pagination a.active (
background-color:#d7bb6c;
)
.pagination a:hover:not(.active) (
background-color: #d4d5d2;
)

Rounded Bordered Pagination
«
1
2
3
4
5
6
7
8
9
10
»



Rounded Bordered Pagination

.pagination a (
font-size: 18px;
float: left;
padding: 8px 16px;
text-decoration: none;
border-radius:6px;
border:1px solid grey;
)
.pagination a.active (
background-color:#d7bb6c;
)
.pagination a:hover:not(.active) (
background-color: #d4d5d2;
)

Rounded Bordered Pagination
«
1
2
3
4
5
6
7
8
9
10
»

Resultado:

6. Paginação Centrada

Esse tipo de paginação pode ser exibido centralizado com a ajuda da propriedade alinhar texto.

Código:



Centered Pagination

.center (
text-align:center;
)
.pagination a (
font-size: 18px;
float: left;
padding: 8px 16px;
text-decoration: none;
border:1px solid grey;
)
.pagination a.active (
background-color:#d7bb6c;
)
.pagination a:hover:not(.active) (
background-color: #d4d5d2;
)

Centered Pagination

«
1
2
3
4
5
6
7
8
9
10
»



Centered Pagination

.center (
text-align:center;
)
.pagination a (
font-size: 18px;
float: left;
padding: 8px 16px;
text-decoration: none;
border:1px solid grey;
)
.pagination a.active (
background-color:#d7bb6c;
)
.pagination a:hover:not(.active) (
background-color: #d4d5d2;
)

Centered Pagination

«
1
2
3
4
5
6
7
8
9
10
»



Centered Pagination

.center (
text-align:center;
)
.pagination a (
font-size: 18px;
float: left;
padding: 8px 16px;
text-decoration: none;
border:1px solid grey;
)
.pagination a.active (
background-color:#d7bb6c;
)
.pagination a:hover:not(.active) (
background-color: #d4d5d2;
)

Centered Pagination

«
1
2
3
4
5
6
7
8
9
10
»

Resultado:

7. Espaço entre a paginação

Esse tipo de paginação pode ser usado para dar espaço entre os links da página em vez de agrupá-los. O espaço pode ser fornecido com a ajuda da propriedade margin entre os links.

Código:



Space Between Pagination

.center (
text-align:center;
)
.pagination a (
font-size: 18px;
float: left;
margin:0px 6px;
padding: 8px 16px;
text-decoration: none;
border:1px solid grey;
)
.pagination a.active (
background-color:#d7bb6c;
)
.pagination a:hover:not(.active) (
background-color: #d4d5d2;
)

Space Between Pagination

«
1
2
3
4
5
6
7
8
9
10
»



Space Between Pagination

.center (
text-align:center;
)
.pagination a (
font-size: 18px;
float: left;
margin:0px 6px;
padding: 8px 16px;
text-decoration: none;
border:1px solid grey;
)
.pagination a.active (
background-color:#d7bb6c;
)
.pagination a:hover:not(.active) (
background-color: #d4d5d2;
)

Space Between Pagination

«
1
2
3
4
5
6
7
8
9
10
»



Space Between Pagination

.center (
text-align:center;
)
.pagination a (
font-size: 18px;
float: left;
margin:0px 6px;
padding: 8px 16px;
text-decoration: none;
border:1px solid grey;
)
.pagination a.active (
background-color:#d7bb6c;
)
.pagination a:hover:not(.active) (
background-color: #d4d5d2;
)

Space Between Pagination

«
1
2
3
4
5
6
7
8
9
10
»

Resultado:

8. Tamanho da Paginação

Este tipo de paginação pode ser usado para alterar o tamanho da paginação. Isso pode ser feito usando a propriedade tamanho da fonte.

Código:



Pagination Size

.center (
text-align:center;
)
.pagination a (
font-size: 22px;
float: left;
margin:0px 6px;
padding: 8px 16px;
text-decoration: none;
border:1px solid grey;
)
.pagination a.active (
background-color:#d7bb6c;
)
.pagination a:hover:not(.active) (
background-color: #d4d5d2;
)

Pagination Size

«
1
2
3
4
5
6
7
8
9
10
»



Pagination Size

.center (
text-align:center;
)
.pagination a (
font-size: 22px;
float: left;
margin:0px 6px;
padding: 8px 16px;
text-decoration: none;
border:1px solid grey;
)
.pagination a.active (
background-color:#d7bb6c;
)
.pagination a:hover:not(.active) (
background-color: #d4d5d2;
)

Pagination Size

«
1
2
3
4
5
6
7
8
9
10
»



Pagination Size

.center (
text-align:center;
)
.pagination a (
font-size: 22px;
float: left;
margin:0px 6px;
padding: 8px 16px;
text-decoration: none;
border:1px solid grey;
)
.pagination a.active (
background-color:#d7bb6c;
)
.pagination a:hover:not(.active) (
background-color: #d4d5d2;
)

Pagination Size

«
1
2
3
4
5
6
7
8
9
10
»

Resultado:

Conclusão

Até agora, estudamos o papel da paginação em que a enorme quantidade de conteúdo pode ser dividida em várias páginas HTML e o usuário pode alternar facilmente com as informações com facilidade. Para tornar o conteúdo paganizado, a classe de paginação pode ser usada nos elementos HTML. Portanto, a paginação CSS é muito útil quando uma grande quantidade de conteúdo das páginas HTML pode ser dividida em páginas discretas.

Artigos recomendados

Este é um guia para paginação CSS. Aqui discutimos os diferentes tipos de paginação CSS, como simples, ativo e passível de pairar etc., juntamente com a implementação de código. Você também pode consultar nossos artigos sugeridos para saber mais -

  1. Usos do CSS na tecnologia
  2. Dicas e truques para usar comandos CSS
  3. Introdução às 6 principais vantagens do CSS
  4. Guia das 10 principais perguntas da entrevista CSS

Categoria:

Ferramentas de Desenvolvimento Web