Introduzione alla paginazione CSS

L'impaginazione è il metodo con il quale il documento viene separato in pagine e vengono dati i numeri. L'impaginazione semplifica l'individuazione di un'enorme quantità di contenuti e decompone più voci o contenuti Web in varie pagine, consentendo di passare facilmente tra i contenuti. I collegamenti Web di paginazione consentono sostanzialmente ai tuoi contenuti di essere navigati dai visitatori. L'impaginazione CSS è un metodo abbastanza buono per indicizzare sulla homepage varie pagine di un sito web. Quando hai un sacco di pagine sul tuo sito web, devi aggiungere un po 'di impaginazione per ogni pagina.

Tipi di impaginazione in CSS

Di seguito sono riportati i tipi di impaginazione nei CSS:

  • Impaginazione semplice
  • Impaginazione attiva e passabile
  • Pulsanti attivi e posizionabili arrotondati
  • Impaginazione delimitata
  • Impaginazione del bordo arrotondato
  • Impaginazione centrata
  • Spazio tra l'impaginazione
  • Dimensione impaginazione

1. Impaginazione semplice

L'esempio seguente mostra l'impaginazione semplice. La classe "impaginazione" può essere utilizzata per definire l'impaginazione nelle pagine HTML.

Codice:



.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
»

Salvare il codice sopra nella pagina HTML e denominarlo in base alla propria scelta. Apri il file in un browser e visualizzerà l'output come mostrato nell'immagine seguente.

Produzione:

2. Impaginazione attiva e passabile

La pagina corrente verrà visualizzata usando la classe attiva. Quando il mouse passa sopra di essi, Hover cambia il colore del collegamento alla pagina.

Codice:



.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
»

Produzione:

3. Pulsanti attivi e posizionabili arrotondati

In questo tipo di impaginazione, la proprietà border-radius può essere utilizzata per pulsanti attivi e posizionabili arrotondati.

Codice:



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
»

Produzione:

4. Impaginazione delimitata

Questo tipo può essere utilizzato quando si desidera aggiungere un bordo all'impaginazione.

Codice:



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
»

Produzione:

5. Impaginazione del bordo arrotondato

Questo tipo può essere utilizzato quando si desidera aggiungere un bordo arrotondato all'impaginazione utilizzando la proprietà border-radius.

Codice:



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
»

Produzione:

6. Impaginazione centrata

Questo tipo di impaginazione può essere visualizzato centrato con l'aiuto della proprietà text-align.

Codice:



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
»

Produzione:

7. Spazio tra l'impaginazione

Questo tipo di impaginazione può essere utilizzato per dare spazio tra i collegamenti di pagina anziché raggrupparli. Lo spazio può essere dato con l'aiuto della proprietà margin tra i collegamenti.

Codice:



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
»

Produzione:

8. Dimensione impaginazione

Questo tipo di impaginazione può essere utilizzato per modificare le dimensioni dell'impaginazione. Può essere fatto usando la proprietà font-size.

Codice:



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
»

Produzione:

Conclusione

Finora, abbiamo studiato il ruolo della paginazione in cui l'enorme quantità di contenuto può essere suddivisa in varie pagine HTML e l'utente può facilmente passare facilmente con le informazioni. Per rendere paganizzato il contenuto, è possibile utilizzare la classe di impaginazione all'interno degli elementi HTML. Pertanto, l'impaginazione CSS è molto utile quando una grande quantità di contenuto delle pagine HTML può essere suddivisa in pagine discrete.

Articoli consigliati

Questa è una guida per l'impaginazione CSS. Qui discutiamo i diversi tipi di impaginazione CSS come Simple, Active e Hoverable, ecc. Insieme all'implementazione del codice. Puoi anche consultare i nostri articoli suggeriti per saperne di più -

  1. Usi di CSS in tecnologia
  2. Suggerimenti e trucchi per usare i comandi CSS
  3. Introduzione ai 6 principali vantaggi dei CSS
  4. Guida alle 10 principali domande di intervista CSS

Categoria:

Strumenti di sviluppo Web