Bordes punteados con CSS

Podemos dar distintos efectos  a los elementos estructurados, como las tablas, podemos recurrir a  las clases, que forma parte de las hojas de estilo (CSS).

Esta regla de estilo CSS estará integrada dentro del documento HTML, usaremos nuestra plantilla predefinida.

Al final de la etiqueta </head> insertamos el siguiente código:

Esta clase tiene definidos una serie de atributos de estilos. Desde el primero hasta el último son: tipo de borde, ancho del borde, color del borde, color de fondo, tipo de letra y tamaño de la fuente. El atributo que nos interesa a nosotros es el primero, en el que se indica que se desea un tipo de borde punteado.

Para utilizar el estilo que hemos realizado tenemos que asignarlo a un elemento de HTML la clase generada antes. Para ello utilizamos el atributo class de HTML. Tal como se ha definido la clase se puede utilizar en cualquier elemento de la página web, como una tabla o una celda.

Este nuevo código lo insertaremos entre las etiquetas <body> y </body>:

El listado completo debería quedar así:

Vemos el resultado desde nuestro navegador favorito.

  • Intenta que la regla de estilo CSS se lea desde un archivo externo (una pista observa el listado y verás que aún está el nombre para el archivo externo; solo debes crearlo).