Aunque sabemos que son muchos los que hoy utilizan gestores de contenidos para mantener su sitio web, siguen existiendo webmasters que hacen trabajos personalizados. Las páginas de sus sitios tienen un toque personal. Puede ser atractivo para el visitante el ver encuadrado una parte de su contenido. Para ello es necesario crear un recuadro que, en el caso que voy a explicar, utiliza una tabla que se apoya en una clase creada como estilo CSS.
Para ello es necesario, en primer lugar, crear una clase que se guardará, como hemos dicho, como un estilo CSS. Esta clase tendría la estructura siguiente:
.recuadro {
background-color: White;
border: 1px solid #c0c0c0;
padding: 2px 2px 2px 2px;
}
El nombre de la clase es recuadro. En ella están definidos tres parámetros:
- background-color: el color de fondo del recuadro que, en este caso, es blanco.
- border: el borde del recuadro que tiene un grosor de un píxel y un color de código hexadecimal #c0c0c0 (gris claro).
- padding: indica la separación existente entre el borde y el interior, la zona en la que va el contenido. En nuestro caso es de 2 píxeles en los cuatro lados.
Para llamar a esta clase podemos utilizar dos métodos. Introduciendo en la zona <head> … </head> del documento la definición de la forma siguiente:
<style type="text/css">
.recuadro {
background-color: White;
border: 1px solid #c0c0c0;
padding: 2px 2px 2px 2px;
}
</style>
O crear una hoja de estilos, si no la tienes ya creada, e introducir en la misma la definición de la clase recuadro. Si esa hoja se llama estilos.css y se aloja en la carpeta estilos, deberás llamarla en tu documento, también dentro de la zona <head> … </head>, con la instrucción siguiente:
<link rel="stylesheet" type="text/css" href="estilos/estilos.css">
Lo que tienes que hacer ahora es utilizar el estilo en tu página o páginas. Para ello vamos a crear una tabla que sirva para albergar el contenido. Algo como lo siguiente:
<table width="100%"> <tr> <td> Aquí va el contenido </td> </tr> </table>
El valor width, que en este caso es del 100%, puede adaptarse a nuestras necesidades. Podemos utilizar valores relativos (100%, 90%…) o absolutos (750px, 400px…).
Si personalizamos Aquí va el contenido, podríamos obtener algo como lo que se muestra en la imagen del principio del artículo. Adáptalo a tus necesidades. Ten en cuenta que en una misma página podrás crear varios recuadros utilizando una única definición de la clase.
