Académique Documents
Professionnel Documents
Culture Documents
Universidad de Pamplona
Multimedia y Laboratorio
Introduccin a CSS3 y HTML 5
ltima actualizacin es del 19 de julio de 2007). Al mismo tiempo, la siguiente
recomendacin de CSS, conocida como "CSS nivel 3", contina en desarrollo desde 1998 y
hasta el momento slo se han publicado borradores.
La adopcin de CSS por parte de los navegadores ha requerido un largo periodo de tiempo.
El mismo ao que se public CSS 1, Microsoft lanzaba su navegador Internet Explorer 3.0,
que dispona de un soporte bastante reducido de CSS. El primer navegador con soporte
completo de CSS 1 fue la versin para Mac de Internet Explorer 5, que se public en el ao
2000. Por el momento, ningn navegador tiene soporte completo de CSS 2.1.
1.2. SOPORTE DE CSS EN LOS NAVEGADORES
El trabajo del diseador web siempre est limitado por las posibilidades de los navegadores
que utilizan los usuarios para acceder a sus pginas. Por este motivo es imprescindible
conocer el soporte de CSS en cada uno de los navegadores ms utilizados del mercado.
Internamente los navegadores estn divididos en varios componentes. La parte del
navegador que se encarga de interpretar el cdigo HTML y CSS para mostrar las pginas se
denomina motor. Desde el punto de vista del diseador CSS, la versin de un motor es
mucho ms importante que la versin del propio navegador.
La siguiente tabla muestra el soporte de CSS 1, CSS 2.1 y CSS 3 de los cinco navegadores
ms utilizados por los usuarios:
Navegador Motor
CSS 1
CSS 2.1
CSS 3
Trident
Completo desde la
versin 6.0
Completo desde la
Firefox
Gecko
Completo
Casi completo
Safari
WebKit Completo
Casi completo
Opera
Presto
Casi completo
Internet
Explorer
Completo
versin 8.0
Prcticamente nulo
Universidad de Pamplona
Multimedia y Laboratorio
Google
Chrome
WebKit Completo
Casi completo
Los navegadores Safari y Opera son los ms avanzados en el soporte de CSS, ya que
incluyen muchos elementos de la futura versin CSS 3 y un soporte casi perfecto de la
actual version 2.1. El navegador Firefox no tiene un soporte tan avanzado de CSS 3 pero las
ltimas versiones estn alcanzando rpidamente a Safari y Opera.
Por su parte, el navegador Internet Explorer slo puede considerarse adecuado desde el
punto de vista de CSS a partir de su versin 7. Internet Explorer 6, utilizado todava por un
nmero significativo de usuarios, sufre carencias muy importantes y contiene
decenas de errores en su soporte de CSS. Internet Explorer 8 incluye el soporte
completo de todas las propiedades y caractersticas de CSS 2.1.
La tabla anterior ha sido elaborada a partir de la informacin que se puede encontrar en la
pgina
Comparison
of
layout
engines
(http://en.wikipedia.org/wiki/
Comparison_of_layout_engines_(Cascading_Style_Sheets)) de la Wikipedia, donde se
muestra una comparacin exhaustiva sobre el soporte de todas las caractersticas de CSS
por parte de cada navegador.
1.3. ESPECIFICACIN OFICIAL
La especificacin o norma oficial que se utiliza actualmente para disear pginas web con
CSS es la versin CSS 2.1, actualizada por ltima vez el 19 de julio de 2007 y que se puede
consultar libremente en http://www.w3.org/TR/CSS21/
Desde hace varios aos, el organismo W3C trabaja en la elaboracin de la prxima versin
de CSS, conocida como CSS 3. Esta nueva versin incluye miles de cambios importantes en
todos los niveles y es mucho ms avanzada y compleja que CSS 2.
No obstante, pasarn muchos aos hasta que se publique la versin definitiva completa de
CSS 3 y hasta que los principales navegadores del mercado incluyan la mayor parte del
nuevo estndar.
El sitio web del organismo W3C dispone de una seccin en la que se detalla el trabajo
que el W3C est desarrollando actualmente en relacin a CSS (http://www.w3.org/
Style/CSS/current-work) y tambin dispone de un blog en el que se publican todas las
novedades relacionadas con CSS (http://www.w3.org/blog/CSS) .
1.4. FUNCIONAMIENTO BSICO DE CSS
Antes de la adopcin de CSS, los diseadores de pginas web deban definir el aspecto de
cada elemento dentro de las etiquetas HTML de la pgina. El siguiente ejemplo muestra una
pgina HTML con estilos definidos sin utilizar CSS:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
Universidad de Pamplona
Multimedia y Laboratorio
El ejemplo anterior utiliza la etiqueta <font> con sus atributos color, face y size para definir
el color, la tipografa y el tamao del texto de cada elemento del documento.
El principal problema de esta forma de definir el aspecto de los elementos se puede ver
claramente con el siguiente ejemplo: si la pgina tuviera 50 elementos diferentes, habra
que insertar 50 etiquetas <font>. Si el sitio web entero se compone de 10.000 pginas
diferentes, habra que definir 500.000 etiquetas <font>. Como cada etiqueta <font>
tiene 3 atributos, habra que definir 1.5 millones de atributos.
Por otra parte, el diseo de los sitios web est en constante evolucin y es habitual
modificar cada cierto tiempo los colores principales de las pginas o la tipografa utilizada
para el texto. Si se emplea la etiqueta <font>, habra que modificar el valor de
1.5 millones de atributos para modificar el diseo general del sitio web.
La solucin que propone CSS es mucho mejor, como se puede ver en el siguiente
ejemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de estilos con CSS</title>
<style type="text/css">
h1 { color: red; font-family: Arial;
font-size: large; }
p { color: gray; font-family: Verdana; font-size: medium; }
</style>
</head>
<body>
<h1>Titular de la pgina</h1>
<p>Un prrafo de texto no muy largo.</p>
</body>
</html>
Universidad de Pamplona
Multimedia y Laboratorio
Utilizando CSS, en esa zona reservada se indica que todas las etiquetas <h1> de la pgina se
deben ver de color rojo, con un tipo de letra Arial y con un tamao de letra grande.
Adems, las etiquetas <p> de la pgina se deben ver de color gris, con un tipo de letra
Verdana y con un tamao de letra medio.
Definiendo los estilos de esta forma, no importa el nmero de elementos <p> que existan en
la pgina, ya que todos tendrn el mismo aspecto establecido mediante CSS. Como se ver
a continuacin, esta forma de trabajar con CSS no es ideal, ya que si el sitio web
dispone de 10.000 pginas, habra que definir 10.000 veces el mismo estilo CSS.
1.5. CMO INCLUIR CSS EN UN DOCUMENTO XHTML
Una de las principales caractersticas de CSS es su flexibilidad y las diferentes opciones que
ofrece para realizar una misma tarea. De hecho, existen tres opciones para incluir CSS en
un documento HTML.
1.5.1. INCLUIR CSS EN EL MISMO DOCUMENTO HTML
Los estilos se definen en una zona especfica del propio documento HTML. Se emplea la
etiqueta <style> de HTML y solamente se pueden incluir en la cabecera del documento (slo
dentro de la seccin <head>).
Ejemplo:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de estilos CSS en el propio documento</title>
<style type="text/css">
p { color: black; font-family: Verdana; }
</style>
</head>
<body>
<p>Un prrafo de texto.</p>
</body>
</html>
Este mtodo se emplea cuando se define un nmero pequeo de estilos o cuando se quieren
incluir estilos especficos en una determinada pgina HTML que completen los estilos que se
incluyen por defecto en todas las pginas del sitio web.
El principal inconveniente es que si se quiere hacer una modificacin en los estilos
definidos, es necesario modificar todas las pginas que incluyen el estilo que se va a
modificar.
1.5.2. DEFINIR CSS EN UN ARCHIVO EXTERNO
En este caso, todos los estilos CSS se incluyen en un archivo de tipo CSS que las pginas
HTML enlazan mediante la etiqueta <link>. Un archivo de tipo CSS no es ms que un
archivo simple de texto cuya extensin es .css Se pueden crear todos los archivos CSS que
sean necesarios y cada pgina HTML puede enlazar tantos archivos CSS como necesite.
Universidad de Pamplona
Multimedia y Laboratorio
Introduccin a CSS3 y HTML 5
Si se quieren incluir los estilos del ejemplo anterior en un archivo CSS externo, se deben
seguir los siguientes pasos:
1) Se crea un archivo de texto y se le aade solamente el siguiente contenido:
p { color: black; font-family: Verdana; }
2) Se guarda el archivo de texto con el nombre estilos.css Se debe poner especial
atencin a que el archivo tenga extensin .cssy no .txt
3) En la pgina HTML se enlaza el archivo CSS externo mediante la etiqueta <link>:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de estilos CSS en un archivo externo</title>
<link rel="stylesheet" type="text/css" href="/css/estilos.css" media="screen" />
</head>
<body>
<p>Un prrafo de texto.</p>
</body>
</html>
Cuando el navegador carga la pgina HTML anterior, antes de mostrar sus contenidos
tambin descarga los archivos CSS externos enlazados mediante la etiqueta <link> y
aplica los estilos a los contenidos de la pgina.
Normalmente, la etiqueta <link> incluye cuatro atributos cuando se enlaza un archivo
CSS:
rel: indica el tipo de relacin que tiene el recurso enlazado (en este caso, el
archivo CSS) y la pgina HTML. Para los archivos CSS, siempre se utiliza el valor
stylesheet
type: indica el tipo de recurso enlazado. Sus valores estn estandarizados y para los
archivos CSS su valor siempre es text/css
href: 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.
media: indica el medio en el que se van a aplicar los estilos del archivo CSS. Ms
adelante se explican en detalle los medios CSS y su funcionamiento.
Universidad de Pamplona
Multimedia y Laboratorio
De todas las formas de incluir CSS en las pginas HTML, esta es la ms utilizada con mucha
diferencia. La principal ventaja es que se puede incluir un mismo archivo CSS en multitud
de pginas HTML, por lo que se garantiza la aplicacin homognea de los mismos estilos a
todas las pginas que forman un sitio web.
Con este mtodo, el mantenimiento del sitio web se simplifica al mximo, ya que un solo
cambio en un solo archivo CSS permite variar de forma instantnea los estilos de todas las
pginas HTML que enlazan ese archivo.
Aunque generalmente se emplea la etiqueta <link> para enlazar los archivos CSS
externos, tambin se puede utilizar la etiqueta <style>. La forma alternativa de incluir un
archivo CSS externo se muestra a continuacin:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de estilos CSS en un archivo externo</title>
<style type="text/css" media="screen">
@import '/css/estilos.css';
</style>
</head>
<body>
<p>Un prrafo de texto.</p>
</body>
</html>
En este caso, para incluir en la pgina HTML los estilos definidos en archivos CSS externos
se utiliza una regla especial de tipo @import. Las reglas de tipo @import siempre
preceden a cualquier otra regla CSS (con la nica excepcin de la regla
@charset).
La URL del archivo CSS externo se indica mediante una cadena de texto encerrada con
comillas simples o dobles o mediante la palabra reservada url(). De esta forma, las
siguientes reglas @importson equivalentes:
@import '/css/estilos.css';
@import "/css/estilos.css";
@import url('/css/estilos.css');
@import url("/css/estilos.css");
Universidad de Pamplona
Multimedia y Laboratorio
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de estilos CSS en el propio documento</title>
</head>
<body>
<p style="color: black; font-family: Verdana;">Un prrafo de texto.</p>
</body>
</html>
Esta forma de incluir CSS directamente en los elementos HTML solamente se utiliza en determinadas
situaciones en las que se debe incluir un estilo muy especfico para un solo elemento concreto.
1.6. GLOSARIO BSICO
CSS define una serie de trminos que permiten describir cada una de las partes que componen los
estilos CSS. El siguiente esquema muestra las partes que forman un estilo CSS muy bsico:
Universidad de Pamplona
Multimedia y Laboratorio
Universidad de Pamplona
Multimedia y Laboratorio
Define un rea de contenido nica dentro del sitio. En un blog, sera la zona donde estn
todos los posts. En un video de youtube, habra un section para el video, uno para los datos
del video, otro para la zona de comentarios.
<article>
Define zonas nicas de contenido independiente. En el home de un blog, cada post sera
un article. En un post del blog, el post y cada uno de sus comentarios sera un <article>.
<aside>
Cualquier contenido que no est relacionado con el objetivo primario de la pgina va en un
aside. En un blog, obviamente el aside es la barra lateral de informacin. En el home de
un peridico, puede ser el rea de indicadores econmicos.
<footer>
Este es obvio. Es el pie de pgina y todo lo que lo compone.
Atencin <div> no est muerto:
Estas nuevas etiquetas no significan que ya no se use <div>. Div siempre debe usarse
cuando se necesita una caja con objetivos de diseo grfico o
cualquier cosa que no tenga significado semntico. Slo usa las etiquetas semnticas de
HTML5 donde sean necesarias.
Ejemplo de blog hecho con HTML5
<header>
<hgroup>
<h1>El blog de mlw.io</h1>
<h2>Este es el blog de Mejorando la web</h2>
</hgroup>
</header>
<nav>
Aqu va la botonera de navegacin
</nav>
<section>
<article>Aqu va un post, con su titulo en h2</article>
<article>Aqu va un post, con su titulo en h2</article>
<article>Aqu va un post, con su titulo en h2</article>
</section>
<aside>
Barra lateral con cosas que nadie lee, como cuentas de twitter, facebook, posts viejos, etc.
</aside>
<footer>
Pie de pagina, amenazas de copyright, etc.
</footer>
Universidad de Pamplona
Multimedia y Laboratorio
Introduccin a CSS3 y HTML 5
Las etiquetas semnticas, a pesar de ser claves para posicionamiento en buscadores y
buen desarro- llo web, no son la razn por la que todo el mundo habla de HTML5. Video,
audio y animacin vectorial estn en la lista de prioridades y en la boca de todas las
personas que evangelizan su uso. Especfica- mente, las nuevas etiquetas son:
<video>
Inserta video sin necesidad de plugins. Es muy fcil usarla, pero cada navegador soporta
codecs dife- rentes de video, lo que hace necesario recodificar un video en mltiples
codecs. En un futuro captulo hablamos un poco del drama que este tag est generando.
<audio>
Lo mismo que video, pero sin video. Puede usar mltiples formatos, en especial mp3,
pero tambin depende del navegador.
<input *>
Input ya exista como la etiqueta para insertar cajas de texto y botones. Ahora es ms
poderosa, con la capacidad de insertar cajas tipo email que se autovalidan, calendarios
tipo date, sliders, nmeros, entre otras.
<canvas>
Un rea de dibujo vectorial y de bitmaps con Javascript. Es un API de dibujo entero para
Javascript.
<svg>
Una etiqueta, igual que <img>, para insertar dibujos y animaciones vectoriales al estilo
de Flash. Todo basado en el estndar abierto SVG (Scalable Vector Graphics), derivado de
XML.
Universidad de Pamplona