Introducción. Qué es CSS? Historia de las CSS

Transcripción

1 Introducción En esta sección intentaremos iniciarnos en el uso de las Hojas de Estilo en Cascada o CSS, que se utilizan para dar estilo a documentos HTML y XML, separando el contenido de la presentación. Es un mecanismo simple que describe cómo se va a mostrar un documento en la pantalla, o cómo se va a imprimir, o incluso cómo va a ser pronunciada la información presente en ese documento a través de un dispositivo de lectura. Esta forma de descripción de estilos ofrece a los desarrolladores el control total sobre estilo y formato de sus documentos. Qué es CSS? CSS es la abreviatura empleada para referirse a Cascade Style Sheets (Hojas de Estilo en Cascada) y es la tecnología empleada para solventar los conflictos que genera el excesivo uso de tablas y trucos en HTML, y de esta manera separar la presentación del contenido. Con el uso de las CSS, se le indica al documento el estilo de cada elemento en la página a través del uso de un archivo externo y no directamente en el código HTML, de esta manera, cada cambio que se realice no tendría que hacerse a cada página sino que afectaría a todos los elementos vinculados con esa hoja de estilo, lo cual es muy útil para sitios que contengan muchas páginas. Historia de las CSS Las hojas de estilo hicieron su aparición alrededor del año 1970, poco después de la creación del lenguaje de etiquetas SGML, donde ya se observó la necesidad de un estándar que permitiera aplicar diferentes estilos de forma rápida y eficaz sobre distintos documentos

2 electrónicos. Con la expansión de internet, y el crecimiento del lenguaje HTML, surgieron varios tipos de navegadores y con ellos, la dificultad de visualizar un sitio web con la misma apariencia en todos ellos. El organismo 3wC (World Wide Web Consorcium), organismo encargado de crear los estándares relacionados con la web, propuso la creación de un lenguaje de hojas de estilos específico para HTML y, de las 9 propuestas que fueron presentadas, se eligieron dos: la CHSS (Cascading HTML Style Sheets) y la SSP (Stream-based Style Sheet Proposal). Los dos responsables de cada propuesta, se unieron para definir uno común escogiendo lo mejor de cada uno, y así fue como, entre 1994 y 1995 nació lo que hoy conocemos como CSS. En 1995, el W3C decidió apostar por el desarrollo y estandarización de CSS y lo añadió a su grupo de trabajo de HTML. A finales de 1996, el W3C publicó la primera recomendación oficial, conocida como CSS nivel 1. En mayo de 1998 se publica la segunda recomendación oficial, la conocida como CSS nivel 2. La versión de CSS que utilizan todos los navegadores de hoy en día es CSS 2.1, una revisión de CSS 2 que aún se está elaborando (la última actualización es del 23 de abril de 2009). Al mismo tiempo, la siguiente recomendación de CSS, conocida como "CSS nivel 3", continúa en desarrollo desde 1998 y hasta el momento sólo se han publicado borradores. El primer navegador con soporte completo de CSS 1 fue la versión para Mac de Internet Explorer 5, que se publicó en el año Por el momento, ningún navegador tiene soporte completo de CSS 2.1.De hecho, uno de los navegadores más utilizados, Internet Explorer 6, tiene un soporte limitado de CSS 2 y decenas de errores conocidos en la parte de CSS 2 que implementa, lo que dificulta la creación de páginas con un aspecto homogéneo entre diferentes navegadores. Está parcialmente corregido en Internet Explorer 8, aunque necesita de etiquetas meta para soportarlo en versiones anteriores. Los navegadores con mejor soporte de CSS 2 (incluso con soporte de algunas características de CSS 3) son: Firefox, Opera y Safari. Desde la publicación de la versión CSS 2, se han añadido pequeñas correcciones de errores y algunas variaciones en el estándar, hasta llegar a la actual versión CSS 2.1. Ventajas de las CSS Separar nuestro código HTML del diseño (CSS) nos va a permitir tener un código más limpio y claro y a la postre reutilizable. Una de las ventajas, de cara a los diseñadores, es que nos permiten modificar el aspecto del diseño de un sitio web modificando únicamente la hoja de estilo aportando un importante ahorro de tiempo y esfuerzo. Sin las hojas de estilo deberíamos realizarlo página a página. De cara a los usuarios mostraremos una mayor homogeneidad en la Web, sin esfuerzo considerable añadido. Teniendo en cuenta los diferentes soportes de comunicación existentes, los CSS nos permiten definir estilos para la visualización en una PDA ó en un PC. Así como crear hojas especiales para impresión (sin banners ni imágenes de publicidad) ó para sintetizadores de voz. Para los buscadores el contenido importante es el primero aparece, a través de CSS, podemos lograr que los elementos aparezcan en el orden que deseemos (contenido principal, menú izquierdo, menú principal, cabecera), permitiéndonos mejorar el posicionamiento en internet. El uso del estándar CSS de la W3C evitará visualizaciones erróneas de nuestra web en los diferentes navegadores.

3 Anatomía de los estilos CSS funciona a base de reglas, es decir, declaraciones sobre el estilo de uno o más elementos. Las hojas de estilo están compuestas por una o más de esas reglas aplicadas a un documento HTML o XML. La regla tiene dos partes: un selector y la declaración. A su vez la declaración está compuesta por una propiedad y el valor que se le asigne. Selectores: Indican sobre que elementos queremos trabajar. Atributos: Identifican a que estilo nos referimos. Valores: Indican como queremos que sea ese atributo. H1 { align: left; } Selector { propiedad: valor; } La primera parte, fuera de los corchetes es el Selector, y es el que indica a qué elemento HTML afectará (en el ejemplo a las cabeceras de nivel 1). Lo que hay dentro de los corchetes es la Declaración, que a su vez está formada por una Propiedad (en este caso align) a la que se le asigna un Valor (en este caso left). La sintaxis de CSS es muy simple, consiste en poner el nombre del atributo, seguido por dos puntos y el valor que se le asigna. Además, si queremos escribir varios estilos los separaremos por punto y coma y/o opcionalmente un salto de línea: Color: #000000; Background: #FFFFFF; Siempre que lo hagamos desde una página externa, deberemos indicar a qué elemento de la página aplicamos ese estilo. Esto lo haremos con los Selectores. Escribiremos el selector seguido de los atributos del objeto entre corchetes: Input { Color: #000000; Background: #FFFFFF; }

4 Selectores Una de las cosas más importante respecto a los estilos CSS, es que cualquier elemento HTML es un posible selector CSS. Un selector es el elemento que está conectado a un estilo particular: p { font-size: 3em; } En este ejemplo, el selector es p. De este modo todo lo que en el documento HTML se encuentre entre la etiqueta <p></p>, tendrá esta característica (en el ejemplo relacionada con el tamaño del texto). Selectores de clase Si queremos alcanzar mayor control sobre nuestros estilos podemos utilizar los selectores de clase, que permiten aplicar un estilo a una etiqueta html específica. Mediante un selector de clase, podemos dar estilo simultáneamente a varios elementos HTML. Puede ser usado más de una vez para controlar la apariencia de algunos elementos. <p class="distinto">párrafo en rojo</p> Siendo definido en la propia hoja de estilo de esta manera:.distinto { color: red; } En el ejemplo, todos los parrafos existentes en nuestra página que sean de clase distinto, y sólo estos párrafos, apareceran de color rojo. La principal característica de este selector es que en una misma página, varios elementos diferentes pueden utilizar el mismo valor en el atributo class, pudiendo reutilizar los mismos estilos para varios elementos diferentes. <p class="distinto">párrafo en rojo</p> <p>párrafo normal <a href="#" class="distinto">enlace en rojo</a></p> En el ejemplo, tanto el párrafo como el enlace con clase distinto apareceran en color rojo. Podemos restringir el alcance del selector de clase combinándolo con el selector de tipo en la hoja de estilos. Regla Interpretación.distinto { Cualquier elemento de la página cuyo atributo class sea igual a distinto color: red; } p.distinto { Aquellos elementos de tipo <p> que dispongan de un atributo class con valor distinto color: red; } p.distinto Todos los elementos con atributo class="distinto" que estén dentro de cualquier elemento de { tipo<p> color: red; } p,.distinto Todos los elementos de tipo <p> i todos los elementos de la página cuyo

5 { atributo class sea igual adistinto color: red; } Selectores ID (identificadores) Otra característica muy importante de CSS es la herencia, donde determinadas etiquetas se ven supeditadas a lo que tenga definida una etiqueta de nivel superior. Entran en juego los selectores ID que a modo de ejemplo aplican formato a una etiqueta específica dentro de otra etiqueta. Hemos dicho que la anterior definición p { font-size: 3em; } daría formato a todos los párrafos existentes en nuestra página, pero si queremos dar un formato determinado a uno de los párrafos sin variar todos los demás, usamos un selector ID aplicado al párrafo específico. Sería así: <p id="cambio">este cambiará de tamaño</p> Siendo definido en la propia hoja de estilo de esta manera: #cambio { font-size: 1.5em; } Todos los párrafos tendrán la herencia de p { font-size: 3em; }, pero este nuevo selector ID, es más específico y sólo se aplicará al párrafo con id="cambio". De esta manera hemos definido una regla general para los párrafos, pero la podremos alterar siempre que queramos de manera específica sin tener que redefinirlo todo. La principal diferencia entre este tipo de selector y el selector de clase tiene que ver con HTML y no con CSS. En una misma página, el valor del atributo id debe ser único, de forma que dos elementos diferentes no pueden tener el mismo valor de id. Sin embargo, como ya hemos dicho, el atributo class no es obligatorio que sea único, de forma que muchos elementos HTML diferentes pueden compartir el mismo valor para su atributo class. De esta forma, la recomendación general es la de utilizar el selector de ID cuando se quiere aplicar un estilo a un solo elemento específico de la página y utilizar el selector de clase cuando se quiere aplicar un estilo a varios elementos diferentes de la página HTML. Al igual que los selectores de clase, en este caso también se puede restringir el alcance del selector mediante la combinación con otros selectores. La sintaxis de los selectores de ID es muy parecida a la de los selectores de clase, salvo que se utiliza el símbolo de la almohadilla (#) en vez del punto (.) como prefijo del nombre de la regla CSS. Selector Contextual o Descendiente Un selector contextual selecciona y aplica las propiedades CSS a los elementos que estan contenidos dentro de otros elementos HTML. Por ejemplo, modificaremos la apariencia de todos los elementos <em> que estén dentro de los elementos<p>. <p><em>texto 1</em></p> <div><em> texto 2</em></div> Siendo definido en la propia hoja de estilo de esta manera:

6 p em { color: olive; } Con esta regla CSS conseguiremos que el texto 1 cambie de color ya que está dentro de la etiqueta <em>, que esta contenida en <p>. Pero el texto 2 no se cambiará porque aunque hay un selector <em>, éste no se encuentra dentro de <p>. Los selectores contextuales pueden ser muy específicos, por ejemplo si tenemos un código de este tipo: <div> <ul> <li> texto A </li> <li><a href="#">texto B</a></li> <li> texto C </li> </ul> </div> Siendo definido en la propia hoja de estilo de esta manera: div ul li a { color: yelow; } Con esta regla seleccionaremos todos los elementos <a> que estén dentro de <li>, y que estén también dentro de <ul> y que a la vez estén incluidos dentro de <div>. Selector Universal Este tipo de selector, selecciona todos los elementos sin excepción. Para aplicarlo escribiríamos al inicio de la hoja de estilo el símbolo *, y luego las propiedades que queramos para todo el documento HTML. Por ejemplo: * { margin:0; padding:0; } Con esta regla eliminamos los márgenes y rellenos de los elementos HTML que por defecto presentan los navegadores. Hojas de estilo externas o incrustadas Existen tres formas distintas de aplicar estilo a una página web: reglas de estilo en línea, hojas de estilo incrustadas y hojas de estilo externas. Las reglas en línea se aplican a un solo elemento en un documento HTML, las hojas incrustadas se aplican a todo un documento y las hojas externas pueden aplicarse a varios documentos. Se pueden usar los tres tipos en un solo documento y cada uno de ellos tiene preferencia sobre los siguientes. Reglas de estilo en línea Las reglas de estilo integradas o en línea son la forma más elemental de usar CSS. Se trata simplemente de asignar una regla a una etiqueta HTML por medio del atributo style. Por ejemplo: <p style="color:00ff00; font-family:verdana;">párrafo de texto</p>

7 Este párrafo y sólo éste, sin afectar a todos los demás, aparecerá en color rojo y con fuente Verdana. Es una forma muy simple y poco eficiente de usar CSS, porque deberíamos repetir la regla cada vez que queramos el texto en rojo y Verdana. Las reglas de estilo integradas únicamente se recomiendan para aplicar un estilo muy específico a un elemento en concreto. Hojas de estilo incrustadas Las hojas de estilo incrustadas se definen en la cabecera <head> del documento mediante la etiqueta<style>, y se aplican a todo el documento. Por ejemplo: <head> <meta http-equiv= Content-Type content= text/html; charset=utf-8 /> <title>hoja de estilo incrustada (CSS)</title> <style type="text/css"> p {color:00ff00; font-family:verdana;} </style> </head> Ahora, todos los párrafos de texto del documento apareceran de color rojo y Verdana, salvo si se entra en contradicción con una regla de estilo en línea que prevalece sobre la hoja de estilo incrustada. El atributotype de la etiqueta <style> indica al explorador que el lenguaje usado en las hojas de estilo es CSS. Las hojas de estilo incrustadas se usan cuando el número de estilos en un documento es muy pequeño o para completar los estilos que se aplican por defecto en todo el sitio web mediante hojas de estilo externas. Hojas de estilo externas Las hojas de estilo externas son documentos de texto, con la extensión.css, que almacenan todas las reglas de estilo y que pueden ser llamados por tantos documentos HTML como se quiera mediante la etiqueta<link> de la cabecera <head>. El procedimiento es: Se crea un archivo de texto con las reglas de estilo: p {color:00ff00; font-family:verdana;} Se guarda el archivo como estilos.css (atención con la extensión!) Se llama la hoja de estilos desde el documento HTML mediante la etiqueta <link>: <head> <meta http-equiv= Content-Type content= text/html; charset=utf-8 /> <title>hoja de estilo externa (CSS)</title> <link href="estilos.css" rel="stylesheet" type="text/css" media="screen" />

8 </head> La etiqueta <link> puede incluir cuatro atributos para enlazar con un archivo CSS: Atributos etiqueta <link> Descripción href rel type Indica la URL del archivo CSS que contiene los estilos. La URL indicada puede ser relativa o absoluta y puede apuntar a un recurso interno o externo al sitio web. Indica el tipo de relación que existe entre el recurso enlazado (en este caso, el archivo CSS ) y la página HTML. Para los archivos CSS, siempre se utiliza el valor stylesheet. Indica el tipo de recurso enlazado. Sus valores están estandarizados y para los archivos CSS su valor siempre estext/css. media Indica el medio en el que se van a aplicar los estilos del archivo CSS. Al leer el valor del atributo media, el explorador web puede descargar selectivamente archivos de hojas de estilo aplicables únicamente a los medios utilizados por el explorador. Por ejemplo, el explorador web puede impedir la descarga de la siguiente hoja de estilo que se aplicará a tv (es decir, televisión) al mostrar documentos HTML en la pantalla de un equipo estándar: <link href="webtv.css" rel="stylesheet" type="text/css" media="tv" > Los tipos de medio de hojas de estilo en cascada de nivel 2 (CSS 2) son: Descriptor de tipo de medios Aplicar reglas de hojas de estilo a... all aural braille embossed handheld print projection screen tty tv Todos los dispositivos Sintetizadores de voz Dispositivos táctiles y de braille Impresoras de páginas de braille Dispositivos de mano (como PDA) Medios de páginas (como una página impresa) o páginas que se muestran en pantalla (como una "presentacion preliminar"). Proyectores y dispositivos de impresión en diapositivas y transparencias Pantallas en color de ordenadores Dispositvos con cuadrículas de caracteres de punto fijo, como teletipos Dispositivos del estilo de la televisión (baja resolución, color, desplazamiento limitado, dispone de sonido). Las hojas de estilo externas son las más utilizadas porque permiten dotar de un aspecto

9 uniforme a todo un sitio web. Basta con enlazar cada página del sitio a la hoja de estilos. De esta forma, el mantenimiento se simplifica al máximo porque sólo con modificar el archivo CSS se puede cambiar todo el diseño del sitio, garantizando la aplicación homogénea de estilos en todas las páginas. Aunque generalmente se usa la etiqueta <link> para enlazar los archivos CSS externos, también puede hacerse mediante la etiqueta <style>, con una regla especial de <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>hoja de estilo externa (CSS)</title> <style 'estilos.css'; </style> </head> La URL del archivo CSS externo se indica mediante una cadena de texto entre comillas (simples o dobles) o mediante la palabra reservada url(). Así, son equivalentes las siguientes reglas url("estilos.css"); Enlaces Manual de referencia de las hojas de estilo en cascada (CSS1): Manual de CSS, con ejemplos:

10 Página práctica sobre hojas de estilo CSS: Práctico y completo tutorial sobre hojas de estilo en cascada (CSS): Guía de Referencia W3C: Wikipedia: Curso XML sobre Hojas de Estilo: Tutorial de iniciación a CSS: Tutorial de CSS: Curso de CSS con ejemplos: