- Sobre las hojas de estilo
Las hojas de estilo (CSS), técnicamente, es un archivo que concreta el estilo del sitio web (tipografía y colores es lo que son básicamente). Al concretar todo el estilo en un único archivo de actualizaciones y optimizaciones en el aspecto del sitio web se facilitan y apresuran.El archivo se pone en el servidor y se adjunta la llamada <link rel=»stylesheet» href=»MiHojaDeEstilo.css»>en todas las páginas web en la parte del <head> (encabezado)
Normas básicas:
- Es mejor colocar los tamaños de las fuentes en unos cuantos por ciento (%) que en absolutos.
- Es recomendable vincular la hoja de estilo ya que de esa forma el usuario solo se la bajara una vez.
- No eliminen el subrayado de los enlaces solo ya que pueden hacerlo.
- Que vuestro «estilo» sea por una mejor navegación del sitio y no una saturación.
Seguidamente se va a mencionar una hoja de estilo que se utilizará de ejemplo en este blog. Se va a mencionar esta hoja de estilo ya que es fácil y muestra más o menos todos los elementos característicos.
body { font-family: Arial, Helvetica, sans-serif; font-size: 100%; background-color: #FFFFFF;}
td { font-family: Arial, Helvetica, sans-serif; font-size: 100%;}
Con esas dos primeras líneas se concreta la fuente a manejar en toda la web. Todo el texto que este en la página seguirá con el estilo definido en el «body» y todo el texto adentro de esas tablas ira concretado dentro del «td».
a:hover { color: RED; background-color: #FFFFCC;}
a:link { color: BLUE;}
a:visited { color: purple;}
En esas 3 líneas se crean el estilo de los enlaces. El «a:hover» es el estilo de los enlaces cuando se sitúan por arriba de esos. Esa opción solo trabaja en Explorer, pero es muy atrayente el agregarla. El «a:link» es el estilo de los links cuando aún no han sido frecuentados y «a:visited» es el estilo los de links cuando han sido visitados. Diversos de esos manejan la opción de «text-decoration: none» que es para eliminarle el subrayado a los enlaces. No para nada recomendable.
.head { font-family: Arial, Helvetica, sans-serif; font-size: 160%;}
.head2 { font-family: Arial, Helvetica, sans-serif; font-size: 120%;}
En esas dos últimas líneas se ha elaborado estilos especiales para la cabecera del artículo y las cabeceras en los párrafos. Para incluir ese estilo, se puede colocar:
<font class=»head2″>
Como pueden apreciar, el tamaño está designado en % con lo que el usuario es libre de incrementar el tamaño de las fuentes en su navegador, pero el documento guardara las mismas simetrías.