Lo básico de css ¿qúe es?

**Admin** Mar Dic 28, 2010 1:23 pm

Las CSS (hojas de estilo en cascada) suponen un gran avance en la autoría de sitios Web. Mejoran las posibilidades de diseño y presentación de documentos en la red, facilitando además su mantenimiento, ya se trate de un unico archivo HTML, o de grandes sitios, con multitud de páginas.

La filosofía de las CSS responde a la idea de separar al máximo forma y fondo. Las páginas, idealmente, tendrán únicamente etiquetas html con información acerca de la estructura y contenido del documento (párrafos, cabeceras, listas etc) sin ninguna información sobre la apariencia del documento. Esta apariencia, la forma en que ese documento debe ser visualizado, se dicta por una serie de reglas, que se definen separadamente (en una sección separada de la página o incluso en un archivo separado), de forma que podemos cambiar la forma en que el documento es visualizado sin tocar ni una sola línea de contenido ni cambiar las etiquetas html, simplemente introduciendo unos pocos cambios en la definición de estilo.

Un solo archivo de estilo puede controlar la presentación de un número ilimitado de páginas, facilitando mantener un aspecto homogéneo en todas ellas, ampliando las posibilidades de edición que ofrece HTML (sangrados, márgenes, tabuladores, fuentes), y en general, posibilitando mayor control al autor sobre la apariencia y el posicionamiento de cada elemento de la página. Como beneficio adicional, un correcto uso de las CSS hará que una misma página tenga menor tamaño, reduciendo tiempos de descarga.

Las reglas de estilo se escriben y leen en un lenguaje inteligible, similar al lenguaje cotidiano (naturalmente, en inglés), utilizando términos habituales en el área de diseño gráfico, lo que permite un rápido aprendizaje.

Las hojas de estilo en cascada (CSS1) responden a un standard definido por la organización W3C [traducción], y este standard, al menos en su nivel 1, "se supone" ha de funcionar correctamente con las versiones mas recientes de los navegadores gráficos mas populares, por lo que hace tiempo que ha dejado de tener carácter experimental.

Primeros Conceptos
Una 'hoja de estilo' es una plantilla, o guia, o conjunto de instrucciones, que dicta al navegador como debe mostrar el contenido de una o varias páginas Web. Cualquier cambio en la plantilla de estilo se refleja en un cambio inmediato en la apariencia de las páginas relacionadas, sin necesidad de modificar fisicamente estas.

El creador de la página define estilos (tamaño de letra, color, tipo de fuente, margenes etc) que se visualizarán con preferencia a los definidos por defecto en el propio navegador. Si despues desea cambiar la apariencia (nuevos margenes etc) bastará que cambie la definicion de estilo. El documento en si no se modifica.

En el origen de la www, la principal preocupación fue asegurar la portabilidad y legibilidad de los documentos entre distintas plataformas. El standard HTML, al menos en sus comienzos, no mostraba especial preocupación por el diseño; por la apariencia. En la edición HTML estaban ausentes diversos recursos, habituales en cualquier editor de textos: encabezamientos, márgenes, tabulaciones, tamaño de la fuente, textos sobre fondos específicos, escritura en columnas etc. Para lograr estos efectos, debían utilizarse sistemas alternativos, normalmente acudiendo a la creación de tablas, blockquotes, texto preformateado, inserción de gráficos transparentes, etc.

Formulada la primera recomendación CSS1 en Diciembre de 1996, las hojas de estilo traen a la edición Web una relativa libertad de diseño, ampliando el control sobre la apariencia y posicionamiento de todos los elementos de la página, efectos tipográficos, fuentes, colores, backgrounds, compatibilidad entre navegadores y sistemas operativos, y páginas con código mas reducido, de mas rápida descarga. Mas aún, los valores asignables mediante CSS son manipulables mediante scripts (Javascript, JScript, VBScript) lo que condujo al nacimiento del HTML dinámico, DHTML.

Navegadores que admiten CSS1
CSS 1 alcanzó el status de recomendación en el año 1996. Las reglas CSS1 tienen un soporte adecuado en prácticamente todos los navegadores modernos: cualquier ordenador basado en Gecko (Mozilla, Firefox), Opera, Internet Explorer, por citar los mas conocidos.

Las reglas CSS 2 alcanzaron el status de recomendación en el año 1998. Como conjunto, no son reconocidas por ningún navegador, aunque los de última generación, como Mozilla a partir de su versión 1.0, Firefox, Opera 7 o internet Explorer 6 si soportan algunas de sus reglas.

CSS2 ha tenido una recepción por parte de los desarrolladores de navegadores mucho menos entusiasta que CSS1, lo que justifica su escasa implantación. Posiblemente para incentivar su adopción, en el año 2003 se lanzó una revisión simplificada: CSS2 revisión 1.

Por lo que a compatibilidad se refiere, Internet Explorer reconoce reglas CSS1 desde la versión 3.0 Beta 2 y posteriores. El navegador Netscape Communicator admite CSS1 desde la versión 4.0 Beta 2 y posteriores. Sin embargo, debe tenerse en cuenta que ninguna de estas versiones reconocía plenamente todas las características de las CSS1 incluidas en el standard W3, ni la visualización que ofrecen de las características admitidas es totalmente idéntica. Cada uno, por su parte, añade sus propias 'extensiones' al standard.

Ha sido un largo camino desde 1996, y hoy en dia las ultimas versiones, tanto de iexplorer como de netscape/mozilla y opera, cubren prácticamente la totalidad de la especificación css1.

Las diferencias que aun existen en el rendimiento de las CSS1 en los distintos navegadores no deben desanimar al autor a incluir estilos en sus páginas, ya que las ventajas exceden indudablemente a los inconvenientes. El rendimiento que ofrecen I.E. y Navigator, ampliamente difundidos en sus ultimas versiones, puede considerarse suficientemente homogéneo (al menos tan homogeneo como cuando visualizan html puro), y los resultados de la aplicación de estilos son relativamente precedibles por el autor, que podrá trabajar perfectamente con ellos con la precaución de probar y visualizar su trabajo en las diversas versiones de ambos navegadores.

Aquellos navegadores que no admiten CSS visualizarán las páginas usando sus propias opciones por defecto, ignorando las reglas de estilo como si no existieran. Para evitar que estos navegadores en versiones antiguas, o con la opción CSS desactivada, visualicen como texto las reglas de estilo definidas 'dentro' de la propia página, conviene encerrar las líneas CSS dentro de comentarios HTML, del mismo modo que ocurre, por ejemplo, con el Javascript.

¿por que el nombre de Hojas de Estilo en Cascada ?
La organización W3C, al emplear la expresión de 'hojas de estilo en cascada', alude a la posibilidad de utilizar 'en hojas separadas' (archivos separados de la pagina) varios estilos que controlen su apariencia. Los estilos se definen mediante reglas (rules) que el ordenador del usuario ejecuta. Como veremos, los estilos se pueden asignar para una misma página desde distintos orígenes simultaneamente, por lo que estas reglas pueden -y de hecho se busca de intento- entrar en conflicto. El standard CSS1 establece los criterios ('orden en cascada') que deciden que estilo se aplica preferentemente, con lo cual es sencillo especificar estilos generales para el conjunto de páginas y subestilos de aplicación a elementos o secciones determinadas.

Un mismo elemento, como el encabezamiento H1 de la página puede estar definido en un estilo externo para aparecer como texto azul; en la propia página, definirlo como texto rojo. Y el lector puede querer verlo en verde. El programa de navegación tiene que optar por uno u otro estilo. La especificación W3 marca las pautas de preferencia que debe respetar un navegador compatible.