BAQUIA

CSS, Hojas de Estilo en Cascada

Las siglas CCS son la abreviatura de Cascading Style Sheets, término generalmente conocido en castellano como Hojas de Estilo, o bien Hojas de Estilo en Cascada.

Se trata de un método para especificar la apariencia y configuración de un sitio web. El programador establece en la Hoja de Estilo unas reglas (tipo de letra, tamaño, color, alineación del texto, márgenes, separación, color de los hipervínculos leídos y no leídos, etc.) que se aplicarán automáticamente a las distintas partes del contenido (menús, encabezados, textos, etc.) al renovar éste, sin necesidad de especificar dichas reglas en el código HTML cada vez que se introduce contenido nuevo.

La expresión Cascading (en Cascada) se refiere al establecimiento de una sucesión de dependencias a la hora de aplicar reglas de estilo en caso de que varias de estas reglas confluyan en el mismo elemento de la página. Las reglas aparecen en orden anidado, de manera que cada regla hereda las propiedades de la anterior, por ejemplo:

P {color: white ! important} /* increased weight */
P {color: black} /* normal weight */

Configuración básica

A la hora de utilizar CSS, existen dos alternativas principales:

  • Es posible crear una Hoja de Estilo con indicaciones específicas para cada página; por ejemplo:
  • O bien crear una única Hoja de Estilo, consistente en un archivo de texto ejecutable, a la que todas las páginas estén enlazadas. El navegador descarga una sola vez el archivo con la extensión “.css” y ejecuta sus indicaciones al navegar por todo el site, por ejemplo:

    Donde,

    • LINK: indica al navegador que existe un enlace en esa página.
    • rel= “stylesheet”, indica al navegador que el objeto enlazado está relacionado con la Hoja de Estilo de la página.
    • href=”__”, señala donde se encuentra la Hoja de Estilo.
    • type=”text/css”, indica al navegador que el documento al que está accediendo actuará como CSS.

Sólo con introducir el comando anterior dentro del código fuente, el website completo se configurará según las indicaciones especificadas en la Hoja de Estilo. En ésta, se introducen os denominados comandos inline, que precisan la configuración de cada uno de los elementos de la página. Por ejemplo, para configurar el texto y la apariencia de los hipervínculos:

    BODY {FONT-SIZE: 11px; FONT-FAMILY: Verdana}
    A:link {COLOR: #21218c; TEXT-DECORATION: none}
    A:visited {COLOR: #21218c; TEXT-DECORATION: none}

  • Hoja de Estilo Alternativa: se utiliza por ejemplo cuando se presenta la versión para imprimir una página: aunque el contenido es el mismo, cambian muchos elementos de la presentación, especificados en la Hoja de Estilo Alternativo.
  • Hojas de Estilo Importadas: en la Hoja de Estilo principal se insertan dichas Hojas con especificaciones dirigidas únicamente a determinadas partes o documentos, de manera que se utilizan en combinación con la Hoja principal, pero aplicándose sólo a dichas partes del contenido. Es necesario utilizar este sistema cuando el website incluye secciones diferentes, que demandan diferentes presentaciones.

Ventajas de usar CCS

La principal ventaja de utilizar las CSS es la de “limpiar” o “aligerar” el código HTML con que se suelen programar la mayoría de las páginas web. Al incluir en ellas las especificaciones de los distintos elementos que configuran la página, se “libera espacio” en el código HTML para el resto de contenido, lo que facilita insertar más contenido dinámico.

  • Con el uso de la CSS se evita emplear una gran cantidad de código HTML para definir el estilo y la configuración de cada página, evitando insertar tablas con menús que se repiten en cada página. Además, al depurar el código HTML (uno de los factores que influyen en la velocidad de descarga de las páginas), se logra el efecto de mayor velocidad de descarga en las mismas. Puede aligerarse el peso de cada página hasta en un 50%, resultando un menor peso del site en conjunto.
  • También las CSS introducen mayor agilidad en la producción, ya que permiten dividir la creación de contenido (incluida en el HTML) y su presentación (incluida en la hoja de estilo). De este modo, en sitios dinámicos donde el contenido es actualizado periódicamente, sólo es necesario modificar la parte de HTML que configura dicho contenido, pero no el conjunto de instrucciones que configuran la apariencia del site, ya definidas en la Hoja de Estilo.
  • Igualmente, si se desea modificar todo el aspecto del sitio web, únicamente hay que modificar el archivo CSS. Con el uso de CSS se gana además en coherencia en la presentación del aspecto general, evitando errores de presentación.

Compartir en :


Noticias relacionadas

Recomendamos




Comentarios