CSS son las siglas de Cascading Style Sheets - Hojas de Estilo en Cascada - que es un lenguaje que describe la presentación de los documentos estructurados en hojas de estilo para diferentes métodos de interpretación, es decir, describe como se va a mostrar un documento en pantalla, por impresora, por voz (cuando la información es pronunciada a través de un dispositivo de lectura) o en dispositivos táctiles basados en Braille.
CSS es una especificación desarrollada por el W3C (World Wide Web Consortium) para permitir la separación de los contenidos de los documentos escritos en HTML, XML, XHTML, SVG, o XUL de la presentación del documento con las hojas de estilo, incluyendo elementos tales como los colores, fondos, márgenes, bordes, tipos de letra..., modificando as la apariencia de una página web de una forma más sencilla, permitiendo a los desarrolladores controlar el estilo y formato de sus documentos.
El lenguaje CSS se basa en una serie de reglas que rigen el estilo de los elementos en los documentos estructurados, y que forman la sintaxis de las hojas de estilo. Cada regla consiste en un selector y una declaración, esta última va entre corchetes y consiste en una propiedad o atributo, y un valor separados por dos puntos.
Ejemplo:
h2 {color: green;}
h2 ---> es el selector
{color: green;} ---> es la declaración
color ---> es la propiedad o atributo
green ---> es el valor
Tipos de estilos
La información CSS se puede proporcionar por varias fuentes, ya sea adjunto como un documento por separado o incorporado en el documento HTML, y dentro de estas posibilidades destacan tres formas de dar estilo a un documento web:
- Hoja de Estilo Externa
La Hoja de Estilo Externa se almacena en un archivo diferente al del archivo con el código HTML al cal estar vinculado a través del elemento link, que debe ir situado en la secciónhead. Es la manera de programar ms eficiente, ya que separa completamente las reglas de formato para la página HTML de la estructura básica de la página.
- Hoja de Estilo Interna
La Hoja de Estilo Interna est incorporada a un documento HTML, a través del elementostyle dentro de la sección head, consiguiendo de esta manera separar la información del estilo del código HTML.
- Estilo en Línea
El Estilo en Línea sirve para insertar el lenguaje de estilo directamente dentro de la sección body con el elemento style. Sin embargo, este tipo de estilo no se recomienda pues se debe intentar siempre separar el contenido de la presentación.
Estilo Cascada.
Una característica esencial de las hojas de estilo en cascada (CSS) es la posibilidad de separar los elementos formales de los de contenido. De esta forma, sólo con una pequeña modificación de la hoja de estilo es posible cambiar el aspecto de todas las páginas en las que se aplica esa hoja.
No todas las versiones de los navegadores las soportan. Si consideramos los dos principales Netscape es capaz de utilizarlas desde la versión 4.0 y Explorer desde la 3.0
¿Por qué se llaman hojas de estilo?
Con las hojas de estilo podemos crear clases y pseudoclases. Éstas nos permiten modificar e indicarle al navegador la forma en la que tiene que presentar cualquier elemento HTML.
¿Por qué se llaman "en cascada"?
Cuando creamos un estilo, las especificaciones que se realicen para un determinado elemento serán aplicables a todos aquellos elementos que se encuentren "por debajo" de él atendiendo a un criterio de herencia. Por ejemplo, si especificamos un tipo de letra para el elemento <body> todos aquellos elementos que puedan heredar las características se presentarán con el mismo tipo de fuente. Así, el elemento <p> heredará el tipo de letra salvo que especifiquemos lo contrario.
También debemos de tener en cuenta que se establece un orden de prioridad para la aplicación de las normas en caso de que resulten contradictorias. El orden de preferencia para aplicar una norma es el siguiente:
- Estilo especificado dentro de la etiqueta.
- Estilo especificado en la cabecera del documento.
- Estilo definido en un documento independiente al que se enlaza nuestra página.
Si tenemos en cuenta el orden mencionado, lo más razonable es crear una hoja de estilo en un archivo independiente y vincular las páginas a este archivo. Si queremos realizar alguna modificación en un elemento concreto podríamos recurrir a uno de los dos primeros procedimientos que deberían resultar preferentes por ser más específicos.
Sintaxis
Cómo agregar estilos CSS a una página web.
Podemos usar cuatro métodos diferentes para agregar estilos CSS al código HTML de la página web:
1. Incustrar una hoja de estilo
Las reglas de la hoja de estilo se insertan entre las etiquetas de estilo inicial y final (<style> y </style>) de la sección encabezado de la página web:
<head>
<title>Hoja de estilo incustrada (CSS)</title>
<style type="text/css">
<!--
h1 {color:blue; font size:40px; font-family:verdana;}
p {color:white; background:green; font-family:helvetica; text-indent:2cm;}
-->
</style>
</head>
El atributo type de la etiqueta <style> indica al explorador el tipo de hoja de estilo que debe esperar.
2. Vinculación a una hoja de estilo externa
Para crear un vínculo a una hoja de estilo externa, insertamos una etiqueta <link> como en el ejemplo siguiente:
<head>
<title>Hoja de estilo vinculada</title>
<link href="estilo.css" rel="stylesheet" type="text/css">
</head>
La etiqueta <link> indica al explorador web que use las reglas de formato CSS en el archivo llamado "estilo.css". El atributo type identifica el archivo como un archivo de texto con información CSS, y el atributo href indica al explorador el nombre y, si es necesario, la ruta de acceso del archivo con las definiciones de hojas destilo que el explorador va a abrir.
Bibliografía:
No hay comentarios:
Publicar un comentario