CSS | Paginación

Posted on by Rudeus Greyrat

La paginación es el proceso de dividir el documento en páginas y proporcionarles números.
Tipos de paginación: Hay muchos tipos de paginación en CSS. Algunos de ellos se dan a continuación:

  1. Paginación simple
  2. Paginación activa y desplazable
  3. Botones activos y flotantes redondeados
  4. Efecto de transición flotante
  5. Paginación bordeada
  6. Paginación de borde redondeado
  7. Paginación centrada
  8. Espacio entre paginación
  9. Tamaño de paginación

Paginación simple: Esta es la forma básica de paginación.
Sintaxis:

.pagination {
    display:type
}
.pagination body {
    color:colorname
    decoration:type
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
    display: inline-block;
}
  
.pagination a {
    font-weight:bold;
    font-size:20px;
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
}
.GFG {
    font-size:42px;
    font-weight:bold;
    color:#009900;
    margin-left:100px;
    margin-bottom:60px;
}
.peg {
    font-size:24px;
    font-weight:bold;
    margin-left:140px;
}
</style>
</head>
<body>
  
<div class = "GFG">GeeksforGeeks</div>
<div class = "peg">Simple Pagination</div>
<div class="pagination">
  <a href="#">«</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
  <a href="#">6</a>
  <a href="#">7</a>
  <a href="#">8</a>
  <a href="#">9</a>
  <a href="#">10</a>
  <a href="#">»</a>
</div>
  
</body>
</html>

Producción:
simple pagination

Paginación activa y desplazable: en esta paginación, al usar la clase activa, se resaltará la página actual. Pasar el mouse cambiará el color del enlace de la página cuando el mouse se mueva sobre ellos.
Sintaxis:

.pagination body.active {
    display:type
    background-color:colorname
}
.pagination body:hover:not(.active) {
    background-color:colorname
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
    display: inline-block;
}
  
.pagination a {
    font-weight:bold;
    font-size:20px;
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
}
.pagination a.active {
        background-color:#009900;
}
.pagination a:hover:not(.active) {
    background-color: #d4d5d2;
}
.GFG {
    font-size:42px;
    font-weight:bold;
    color:#009900;
    margin-left:100px;
    margin-bottom:60px;
}
.peg {
    font-size:24px;
    font-weight:bold;
    margin-left:90px;
    margin-bottom:20px;
}
</style>
</head>
<body>
  
<div class = "GFG">GeeksforGeeks</div>
<div class = "peg">Active and Hoverable Pagination</div>
<div class="pagination">
  <a href="#">«</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a class = "active" href="#">5</a>
  <a href="#">6</a>
  <a href="#">7</a>
  <a href="#">8</a>
  <a href="#">9</a>
  <a href="#">10</a>
  <a href="#">»</a>
</div>
  
</body>
</html>

Producción:
active pagination

Botones redondeados activos y que se pueden desplazar: para los botones redondeados activos y que se pueden desplazar simplemente agregue la propiedad border-radius.
Sintaxis:

.pagination body.active {
    display:type
    background-color:colorname
    border-radius:size
}
.pagination body:hover:not(.active) {
    background-color:colorname
    border-radius:size
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
    display: inline-block;
}
  
.pagination a {
    font-weight:bold;
    font-size:20px;
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
}
.pagination a.active {
    border-radius:5px;    
    background-color:#009900;
}
.pagination a:hover:not(.active) {
    background-color: #d4d5d2;
    border-radius:5px;
}
.GFG {
    font-size:42px;
    font-weight:bold;
    color:#009900;
    margin-left:100px;
    margin-bottom:60px;
}
.peg {
    font-size:24px;
    font-weight:bold;
    margin-left:40px;
    margin-bottom:20px;
}
</style>
</head>
<body>
  
<div class = "GFG">GeeksforGeeks</div>
<div class = "peg">Rounded Active and Hoverable Pagination</div>
<div class="pagination">
  <a href="#">«</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a class = "active" href="#">5</a>
  <a href="#">6</a>
  <a href="#">7</a>
  <a href="#">8</a>
  <a href="#">9</a>
  <a href="#">10</a>
  <a href="#">»</a>
</div>
  
</body>
</html>

Producción:
rounded and active pagination

Efecto de transición que se puede desplazar: la propiedad de transición se agrega para crear un efecto de transición al pasar el mouse.
Sintaxis:

.pagination body:hover {
    transition:type
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
    display: inline-block;
}
  
.pagination a {
    font-weight:bold;
    font-size:20px;
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
}
.pagination a.active {
    background-color:#009900;
}
.pagination a:hover:not(.active) {
    background-color: #d4d5d2;
}
.GFG {
    font-size:42px;
    font-weight:bold;
    color:#009900;
    margin-left:100px;
    margin-bottom:60px;
}
.peg {
    font-size:24px;
    font-weight:bold;
    margin-left:40px;
    margin-bottom:20px;
}
</style>
</head>
<body>
  
<div class = "GFG">GeeksforGeeks</div>
<div class = "peg">Hoverable Transition Effect Pagination</div>
<div class="pagination">
  <a href="#">«</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a class = "active" href="#">5</a>
  <a href="#">6</a>
  <a href="#">7</a>
  <a href="#">8</a>
  <a href="#">9</a>
  <a href="#">10</a>
  <a href="#">»</a>
</div>
  
</body>
</html>

Producción:
hover transition effect

Paginación bordeada: en este tipo de paginación se agrega un borde a la paginación. Use la propiedad de borde para agregar bordes a la paginación.
Sintaxis:

.pagination body {
    border:type
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
    display: inline-block;
}
.pagination a {
    font-weight:bold;
    font-size:20px;
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    border:1px solid black;
}
.pagination a.active {
    background-color:#009900;
}
.pagination a:hover:not(.active) {
    background-color: #d4d5d2;
}
.GFG {
    font-size:42px;
    font-weight:bold;
    color:#009900;
    margin-left:100px;
    margin-bottom:60px;
}
.peg {
    font-size:24px;
    font-weight:bold;
    margin-left:140px;
    margin-bottom:20px;
}
</style>
</head>
<body>
  
<div class = "GFG">GeeksforGeeks</div>
<div class = "peg">Bordered Pagination</div>
<div class="pagination">
  <a href="#">«</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a class = "active" href="#">5</a>
  <a href="#">6</a>
  <a href="#">7</a>
  <a href="#">8</a>
  <a href="#">9</a>
  <a href="#">10</a>
  <a href="#">»</a>
</div>
  
</body>
</html>

Producción:
bordered pagination

Paginación de borde redondeado: el borde se puede redondear usando la propiedad border-radius.
Sintaxis:

.pagination body {
    border:type
    border-radius:size
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
    display: inline-block;
}
.pagination a {
    font-weight:bold;
    font-size:20px;
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    border-radius:5px;
    border:1px solid black;
}
.pagination a.active {
    background-color:#009900;
}
.pagination a:hover:not(.active) {
    background-color: #d4d5d2;
}
.GFG {
    font-size:42px;
    font-weight:bold;
    color:#009900;
    margin-left:100px;
    margin-bottom:60px;
}
.peg {
    font-size:24px;
    font-weight:bold;
    margin-left:110px;
    margin-bottom:20px;
}
</style>
</head>
<body>
  
<div class = "GFG">GeeksforGeeks</div>
<div class = "peg">Rounded Border Pagination</div>
<div class="pagination">
  <a href="#">«</a>
  <a href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a class = "active" href="#">5</a>
  <a href="#">6</a>
  <a href="#">7</a>
  <a href="#">8</a>
  <a href="#">9</a>
  <a href="#">10</a>
  <a href="#">»</a>
</div>
  
</body>
</html>

Producción:
rounded border pagination

Paginación centrada: la paginación se puede centrar utilizando la propiedad de alineación de texto.
Sintaxis:

.center {
    text-align:center
}
.pagination body {
    color:colorname
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
    display: inline-block;
}
.center {
    text-align:center;
}
.pagination a {
    font-weight:bold;
    font-size:20px;
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    border:1px solid black;
}
.pagination a.active {
    background-color:#009900;
}
.pagination a:hover:not(.active) {
    background-color: #d4d5d2;
}
.GFG {
    font-size:42px;
    font-weight:bold;
    color:#009900;
    text-align:center;
    margin-bottom:60px;
}
.peg {
    font-size:24px;
    font-weight:bold;
    margin-bottom:20px;
    text-align:center;
}
</style>
</head>
<body>
  
<div class = "GFG">GeeksforGeeks</div>
<div class = "peg">Centered Pagination</div>
<div class = "center">
  <div class="pagination">
    <a href="#">«</a>
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a class = "active" href="#">5</a>
    <a href="#">6</a>
    <a href="#">7</a>
    <a href="#">8</a>
    <a href="#">9</a>
    <a href="#">10</a>
    <a href="#">»</a>
  </div>
</div>
  
</body>
</html>

Producción:
centered pagination

Espacio entre paginación: los enlaces de página se pueden espaciar si no desea agruparlos. Utilice la propiedad de margen para proporcionar espacio entre los enlaces.

Sintaxis:

.pagination body {
    color:colorname
    margin:type
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
    display: inline-block;
}
.center {
    text-align:center;
}
.pagination a {
    font-weight:bold;
    font-size:20px;
    color: black;
    float: left;
    margin:0px 5px;
    padding: 8px 16px;
    text-decoration: none;
    border:1px solid black;
}
.pagination a.active {
    background-color:#009900;
}
.pagination a:hover:not(.active) {
    background-color: #d4d5d2;
}
.GFG {
    font-size:42px;
    font-weight:bold;
    color:#009900;
    text-align:center;
    margin-bottom:60px;
}
.peg {
    font-size:24px;
    font-weight:bold;
    margin-bottom:20px;
    text-align:center;
}
</style>
</head>
<body>
  
<div class = "GFG">GeeksforGeeks</div>
<div class = "peg">Space Between Pagination</div>
<div class = "center">
  <div class="pagination">
    <a href="#">«</a>
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a class = "active" href="#">5</a>
    <a href="#">6</a>
    <a href="#">7</a>
    <a href="#">8</a>
    <a href="#">9</a>
    <a href="#">10</a>
    <a href="#">»</a>
  </div>
</div>
  
</body>
</html>

Producción:
space between pagination

Tamaño de paginación: el tamaño de la paginación se puede cambiar usando la propiedad de tamaño de fuente.

Sintaxis:

.pagination body {
    color:colorname
    font-size:size
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
.pagination {
    display: inline-block;
}
.center {
    text-align:center;
}
.pagination a {
    font-weight:bold;
    font-size:25px;
    color: black;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    border:1px solid black;
}
.pagination a.active {
    background-color:#009900;
}
.pagination a:hover:not(.active) {
    background-color: #d4d5d2;
}
.GFG {
    font-size:42px;
    font-weight:bold;
    color:#009900;
    text-align:center;
    margin-bottom:60px;
}
.peg {
    font-size:24px;
    font-weight:bold;
    margin-bottom:20px;
    text-align:center;
}
</style>
</head>
<body>
  
<div class = "GFG">GeeksforGeeks</div>
<div class = "peg">Pagination Size</div>
<div class = "center">
  <div class="pagination">
    <a href="#">«</a>
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a class = "active" href="#">5</a>
    <a href="#">6</a>
    <a href="#">7</a>
    <a href="#">8</a>
    <a href="#">9</a>
    <a href="#">10</a>
    <a href="#">»</a>
  </div>
</div>
  
</body>
</html>

Producción:
pagination size

Publicación traducida automáticamente

Artículo escrito por SrishtiGoel y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *