- 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.
