Multimedia - Guía CSS y HTML 5

Multimedia y Laboratorio
Introduccin a CSS3 y HTML 5
TEORIA CSS Y HTML 5

1. QU ES CSS?
CSS es un lenguaje de hojas de estilos creado para controlar el aspecto o presentacin de los
documentos electrnicos definidos con HTML y XHTML. CSS es la mejor forma de separar
los contenidos y su presentacin y es imprescindible para crear pginas web complejas.
Separar la definicin de los contenidos y la definicin de su aspecto presenta numerosas
ventajas, ya que obliga a crear documentos HTML/XHTML bien definidos y con significado
completo (tambin llamados "documentos semnticos"). Adems, mejora la accesibilidad
del documento, reduce la complejidad de su mantenimiento y permite visualizar el mismo
documento en infinidad de dispositivos diferentes.
Al crear una pgina web, se utiliza en primer lugar el lenguaje HTML/XHTML para marcar
los contenidos, es decir, para designar la funcin de cada elemento dentro de la pgina:
prrafo, titular, texto destacado, tabla, lista de elementos, etc.
Una vez creados los contenidos, se utiliza el lenguaje CSS para definir el aspecto de cada
elemento: color, tamao y tipo de letra del texto, separacin horizontal y vertical entre
elementos, posicin de cada elemento dentro de la pgina, etc.
1.1. BREVE HISTORIA DE CSS
Las hojas de estilos aparecieron poco despus que el lenguaje de etiquetas SGML, alrededor
del ao 1970. Desde la creacin de SGML, se observ la necesidad de definir un
mecanismo que permitiera aplicar de forma consistente diferentes estilos a los documentos
electrnicos.
El gran impulso de los lenguajes de hojas de estilos se produjo con el boom de Internet y el
crecimiento exponencial del lenguaje HTML para la creacin de documentos electrnicos.
La guerra de navegadores y la falta de un estndar para la definicin de los estilos
dificultaban la creacin de documentos con la misma apariencia en diferentes navegadores.
El organismo W3C (http://www.w3.org/) (World Wide Web Consortium), encargado de crear
todos los estndares relacionados con la web, propuso la creacin de un lenguaje de hojas
de estilos especfico para el lenguaje HTML y se presentaron nueve propuestas. Las dos
propuestas que se tuvieron en cuenta fueron la CHSS (Cascading HTML Style Sheets) y la SSP
(Stream-based Style Sheet Proposal).
La propuesta CHSS fue realizada por Hkon Wium Lie y SSP fue propuesto por Bert Bos.
Entre finales de 1994 y 1995 Lie y Bos se unieron para definir un nuevo lenguaje que
tomaba lo mejor de cada propuesta y lo llamaron CSS (Cascading Style Sheets).
En 1995, el W3C decidi apostar por el desarrollo y estandarizacin de CSS y lo aadi a su
grupo de trabajo de HTML. A finales de 1996, el W3C public la primera recomendacin
oficial, conocida como "CSS nivel 1".
A principios de 1997, el W3C decide separar los trabajos del grupo de HTML en tres
secciones: el grupo de trabajo de HTML, el grupo de trabajo de DOM y el grupo de
trabajo de CSS.
El 12 de Mayo de 1998, el grupo de trabajo de CSS publica su segunda recomendacin
oficial, conocida como "CSS nivel 2". La versin de CSS que utilizan todos los
navegadores de hoy en da es CSS 2.1, una revisin de CSS 2 que an se est elaborando (la
Ing. Richard E. Mendoza G.
Universidad de Pamplona
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
Selectores, pseudo-clases y algunas

propiedades
Safari
WebKit Completo
Casi completo
Todos los selectores, pseudo-clases y

muchas propiedades
Opera
Presto
Casi completo

muchas propiedades
Internet
Explorer
Completo
versin 8.0
Prcticamente nulo
Google
Chrome
WebKit Completo
Casi completo

muchas propiedades
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>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ejemplo de estilos sin CSS</title>
</head>
<body>
<h1><font color="red" face="Arial" size="5">Titular de la pgina</font></h1>
<p><font color="gray" face="Verdana" size="2">Un prrafo de texto no muy largo.</font></p>

</body>
</html>
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:
<head>
<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>
CSS permite separar los contenidos de la pgina y su aspecto o presentacin. En el ejemplo

anterior, dentro de la propia pgina HTML se reserva una zona en la que se incluye toda la
informacin relacionada con los estilos de la pgina.
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:
<head>
<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.
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>:
<head>
<title>Ejemplo de estilos CSS en un archivo externo</title>
<link rel="stylesheet" type="text/css" href="/css/estilos.css" media="screen" />
</head>
<body>
</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.
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:
<head>
<title>Ejemplo de estilos CSS en un archivo externo</title>
<style type="text/css" media="screen">
@import '/css/estilos.css';
</style>
</head>
<body>
</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");
1.5.3. INCLUIR CSS EN LOS ELEMENTOS HTML

El ltimo mtodo para incluir estilos CSS en documentos HTML es el peor y el menos
utilizado, ya que tiene los mismos problemas que la utilizacin de las etiquetas <font>.
Ejemplo:
<head>
<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:
Figura 1.1. Componentes de un estilo CSS bsico

Los diferentes trminos se definen a continuacin:
Regla: cada uno de los estilos que componen una hoja de estilos CSS. Cada regla est compuesta de
una parte de "selectores", un smbolo de "llave de apertura" ({), otra parte denominada "declaracin" y
por ltimo, un smbolo de "llave de cierre" (}).
Selector: indica el elemento o elementos HTML a los que se aplica la regla CSS.
Declaracin: especifica los estilos que se aplican a los elementos. Est compuesta por una o ms
propiedades CSS.
Propiedad: permite modificar el aspecto de una caracterstica del elemento.
Valor: indica el nuevo valor de la caracterstica modificada en el elemento.
Un archivo CSS puede contener infinitas reglas CSS, cada regla puede contener infinitos selectores y
cada declaracin puede estar formada por un nmero infinito de pares propiedad/valor.
2. INTRODUCCIN Y LAS NUEVAS ETIQUETAS DE HTML5

HTML5 es la actualizacin de HTML, el lenguaje en el que es creada la web. HTML5
tambin es un termino de marketing para agrupar las nuevas tecnologas de desarrollo de
aplicaciones web: HTML5, CSS3 y nuevas capacidades de Javascript.
La versin anterior y ms usada de HTML, HTML4, carece de caractersticas necesarias para
la creacin de aplicaciones modernas basadas en un navegador. El uso fuerte de Javascript
ha ayudado a mejorar esto, gracias a frameworks como jQuery,Query UI, Sproutcore, entre
otros.
Flash en especial ha sido usado en reemplazo de HTML para desarrollar web apps que
superaran las habilidades de un navegador: Audio, video, webcams, micrfonos, datos
binarios, animaciones vectoriales, componentes de interfaz complejos, entre muchas
otras cosas. Ahora HTML5 es capaz de hacer esto sin necesidad de plugins y con una gran
compatibilidad entre navegadores.
2.1. Nuevas etiquetas de HTML5
HTML4 y HTML5 son 100% compatibles entre s. Todo el cdigo que tienes en HTML normal
seguir funcionando sin problemas en HTML5. Para empezar a usar HTML5 lo nico que
4
tienes que hacer es colocar este DOCTYPE antes de la etiqueta <html>:
<!DOCTYPE html>
5
Es un DOCTYPE mucho ms simplificado que XHTML (cuyas reglas siguen siendo usadas) y
te permite usar todas las habilidades de HTML5 sin que nada de lo que ya tienes
programado deje de funcionar.
Las principales etiquetas HTML5 nuevas no tienen una representacin especial en
pantalla. Todas se comportan como un <div> o un <span>. Pero cada una tiene un
significado semntico superior a un simple div o span.
<header>
Hacer cosas como <div id=header> es un poco estpido cuando el 99% de los proyectos
web tienen una cabecera. <header> est diseada para reemplazar la necesidad de crear
divs sin significado semntico.
<hgroup>
Muchos headers necesitan mltiples ttulos, como un blog que tiene un titulo y un tagline
explicando el blog. <hgroup> permite colocar un h1, h2 y h3 dentro del header sin afectar el
SEO, permitiendo usar otro h1 en el sitio.
En el HTML actual, slo puedes usar h1 una vez por sitio o el h1 pierde prioridad de SEO.
<nav>
Igual que <header>, <nav> est diseado para que ah coloques la botonera de navegacin
principal. Puedes colocar cualquier etiqueta dentro, aunque lo recomendado es usar listas
<ul>.

<section>
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>
</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>
2.2. Las etiquetas nuevas importantes de HTML5
Las etiquetas semnticas, a pesar de ser claves para posicionamiento en buscadores y
buen desarrollo 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 diferentes 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.

Multimedia - Guía CSS y HTML 5

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Multimedia - Guía CSS y HTML 5

Uploaded by

Copyright:

Available Formats

Multimedia y Laboratorio

Introduccin a CSS3 y HTML 5

TEORIA CSS Y HTML 5

Ing. Richard E. Mendoza G.

Selectores, pseudo-clases y algunas

Todos los selectores, pseudo-clases y

Todos los selectores, pseudo-clases y

Ing. Richard E. Mendoza G.

Introduccin a CSS3 y HTML 5

Todos los selectores, pseudo-clases y

Ing. Richard E. Mendoza G.

Introduccin a CSS3 y HTML 5

<p><font color="gray" face="Verdana" size="2">Un prrafo de texto no muy largo.</font></p>

CSS permite separar los contenidos de la pgina y su aspecto o presentacin. En el ejemplo

Ing. Richard E. Mendoza G.

Introduccin a CSS3 y HTML 5

Ing. Richard E. Mendoza G.

Ing. Richard E. Mendoza G.

Introduccin a CSS3 y HTML 5

1.5.3. INCLUIR CSS EN LOS ELEMENTOS HTML

Ing. Richard E. Mendoza G.

Introduccin a CSS3 y HTML 5

Figura 1.1. Componentes de un estilo CSS bsico

Ing. Richard E. Mendoza G.

Introduccin a CSS3 y HTML 5

2. INTRODUCCIN Y LAS NUEVAS ETIQUETAS DE HTML5

Ing. Richard E. Mendoza G.

Introduccin a CSS3 y HTML 5

2.2. Las etiquetas nuevas importantes de HTML5

Ing. Richard E. Mendoza G.

Ing. Richard E. Mendoza G.

You might also like