HTMLpointHTMLpoint HTMLpoint.com


Hojas de estilo (Cascading Style Sheets)


Adoptando las hojas de estilo los creadores de páginas html podrán ejercer un control más atento sobre las páginas y eliminar códigos superfluos, haciendo así más ligeras y navegables las páginas y asegurando al mismo tiempo una plena accesibilidad a los minusválidos, incluso a las personas con problemas de vista de las que nos estamos precisamente ocupando. Con las hojas de estilo, además, se consienten tiempos de carga de las páginas más rápidos a todos los usuarios de Internet. 

Es posible predisponer un archivo aparte con extensión .css en el que introducir en formato texto las indicaciones de estilo para aplicar a todas las páginas html contenidas en un sitio web. Tales estilos podrán atañer a todos los elementos que se insertan en las páginas mismas, como, por ejemplo:

  • carácteres y sus formataciones 
    • H1 {font-size: 20pt; font-weight: bold}]
      H2 {font-size: 16pt; font-weight: bold}
  • párrafos
    • P {margin-left: -20px; margin-right: -20px; margin-top: 30px}
además de las indicaciones para el fondo, las listas, las sangrías, etc.

Con un archivo externo como el que acabamos de señalar será suficiente insertar en todas las páginas del sitio

<HEAD>
<LINK REL=STYLESHEET HREF="Url de la hoja de estilo" TYPE="text/css">
</HEAD>

Para insertar las disposiciones de estilo en cada página del sitio, se colocarán las definiciones de estilo (contenidas en corchete) dentro del mando <STYLE> ... < /STYLE>

Ejemplo

<HEAD>
<STYLE TYPE="text/css" >
BODY {font-family: Arial; font-size: 10pt; font-style: normal}
P {margin-left: 40px; margin-right: 40px; margin-top: 20px}
< /STYLE>
< /HEAD>

Un uso correcto de los elementos de estructuración hace que los navegadores puedan garantizar una mejor navegación en el documento. Un ejemplo de uso incorrecto es, por ejemplo, el de servirse del elemento H1 para obtener un texto con carácteres grandes y en negrita, mientras que este elemento debe ser utilizado sólo para identificar una frase de relieve en la estructuración del documento, como el título de un capítulo, distinguiéndolo del de los capítulos secundarios que pueden estar organizados en una estructura jerárquica de hasta 6 niveles (H1-H6).

En la utilización de las hojas de estilo será esencial:

  • nidificar adecuadamente los heading (H1-H6);
  • codificar la estructura y los componentes de una lista con los elementos apropiados. (UL, LI, ecc.);
  • identificar las citas con los elementos Q y BLOCKQUOTE, evitando en cambio el uso de estos últimos para crear efectos de sangría en el texto;
  • utilizarlas para la compaginación y la presentación en cuanto la mayoría de los navegadores estén capacitados para gestionarlos. 
Valerse de las hojas de estilo en la proyectación de las páginas web significa eliminar definitivamente el uso de tablas para compaginar los hipertextos. Hasta hacía un par de años, entre otras cosas, las tablas no eran reconocidas por los screen readers y, salvo raras exepciones, navegar entre tablas multicolumnas o nidificadas representaba un problema irresolucionable para los invidentes. Ahora esperamos que la excepción se convierta en regla y que, aunque con los tiempos técnicos necesarios, el uso de las hojas de estilo se difunda lo más rápido posible en la cultura de los webmasters.

A la espera de que la creciente difusión del uso de las hojas de estilo convierta a éstas en el instrumento privilegiado en la organización de las páginas web, se podrán contener textos e imágenes en una tabla de compaginación a columna única, evitando otras soluciones más complejas que harían las páginas no accesibles.


  Torna a inizio pagina