Enlaces de páginas con estilo CSS

Anteriormente hablamos de cómo paginar los resultados de una consulta MySQL con PHP. Cada página es un enlace que nos lleva a determinado contenido, y como es parte importante del diseño de nuestra página hay que darle la importancia debida dándole un buen acabado visualmente.

Estos código muestras como hacer esto:

En la parte de estilos de la página web añadimos esto (también podemos separar los estilos en un documento .css si lo deseamos):

<STYLE TYPE="text/css">
<!--

html, body {
background-color: white; 

color: #2B3956;
font-family: Verdana, Arial, Sans-Serif;
font-size: 11px;
text-align: left;
}
/* Pagination DIV */
#pg
{
width: 700px;
background-color: #FFFFFF;

text-align: center;
font-size: 10px;

margin-bottom: 5px;

padding: 10px;
}

/* Pagination Link */

#pg a {
font-size: 10px;
text-decoration: none;
color: #000000;
border: 1px solid #dddddd;
padding: 3px;
-moz-border-radius: 3px;
}

#pg a:hover {
font-size: 10px;
text-decoration: none;
color: #000000;
border: 1px solid #A7A7A7;
background-color: white;
padding: 3px;
-moz-border-radius: 3px;
}

/* Pagination Current Page */

#pg a.current {
font-size: 10px;
text-decoration: none;
color: #000000;
border: 1px solid #336699;
background-color: #F5F7FA;
padding: 3px;
-moz-border-radius: 3px;
}

/* Pagination Disabled Page */

#pg span.disabled {
font-size: 10px;
text-decoration: none;
color: #C6C7C7;
border: 1px solid #C6C7C7;
background-color: white;
padding: 3px;
-moz-border-radius: 3px; // Rounds the corners; Works for Mozilla only
}
-->
</STYLE>

Dentro del body escribirmos lo siguiente, que es en sí la estructura de la paginación:

<div id="pg">
<span class='disabled'>&laquo; Previous</span>&nbsp;&nbsp;<a class="current" href='pagination.php?number=1'>1</a>
&nbsp;&nbsp;<a href='pagination.php?number=2'>2</a>

&nbsp;&nbsp;<a href='pagination.php?number=3'>3</a>
&nbsp;&nbsp;<a href='pagination.php?number=4'>4</a>
&nbsp;&nbsp;<a href='pagination.php?number=5'>5</a>

&nbsp;&nbsp;<a href='pagination.php?number=6'>6</a>
&nbsp;&nbsp;<a href='pagination.php?number=7'>7</a>
&nbsp;&nbsp;<a href='pagination.php?number=8'>8</a>

&nbsp;&nbsp;<a href='pagination.php?number=9'>9</a>
&nbsp;&nbsp;<a href='pagination.php?number=10'>10</a>
&nbsp;&nbsp;<a href='pagination.php?number=2'>Next &raquo;</a>

</div>

En resultado será el que se muestra en la imágen superior (iniciando este artículo).

En BitRepository podemos encontrar otro estilo más que podemos aplicar a nuestros enlaces de páginas.