Apuntes Css y Divs

UNIDAD 1 Introduccin a HTML 5
Qu es el HTML 5?
HTML 5 (HyperTextMarkupLanguage, versin 5) es la quinta revisin importante del lenguaje bsico de la World
Wide Web.
HTML 5 probablemente se convertir en el nuevo estndar para HTML, XHTML y el DOM de HTML.
La versin anterior del HTML data de 1999, y desde entonces la Web ha cambiado muchsimo, HTML introduce
un nuevo mundo para el modelado de archivos HTML.
HTML 5 especifica dos variantes de sintaxis para HTML: un clsico HTML (text/html), la variante conocida
como HTML5 y una variante XHTML conocida como sintaxis XHTML5 que deber ser servida como XML
(XHTML) (application/xhtml+xml).
Esta es la primera vez que HTML y XHTML se han desarrollado en paralelo.
Estndar de la versin HTML 5

HTML 5, Todava se encuentra en modo experimental, lo cual indica la misma W3C; aunque ya es usado por
mltiples desarrolladores Web por sus avances, mejoras y ventajas.
Al no ser reconocido en viejas versiones de navegadores por sus nuevas etiquetas, se le recomienda al usuario
comn actualizar a la versin ms actual, para poder disfrutar de todo el potencial que trae HTML 5.
El desarrollo de este cdigo es regulado por el Consorcio W3C.
Podemos ver el estado de la versin HTML 5 y sus avances da a da en el sitio oficial de la W3C
http://www.w3.org/TR/html5/
Origen del HTML 5

El lenguaje HTML 5 se est desarrollando en cooperacin de dos entidades, the World Wide Web Consortium
(W3C) y the Web HypertextApplicationTechnologyWorkingGroup (WHATWG).
WHATWG se encontraba trabajando en mejoras para los formularios en la Web, mientras que W3C trabajaba en
XHTML 2.0. En el ao 2006, decidieron juntarse a trabajar en una nueva y mejor versin del lenguaje HTML,
dando as origen a la era de HTML 5
Reglas bsicas del HTML 5

Las son reglas bsicas establecidas para esta nueva versin del lenguaje HTML
Las nuevas funcionalidades se basarn en HTML, CSS, DOM, y JavaScript

Reducir el uso de plugins externos como por ejemplo Flash Player
Mejorar el manejo de errores
Mejores etiquetas de marcacin
HTML 5 deber ser independiente del dispositivo de visualizacin
El proceso de desarrollo ser visible para el pblico.
Nuevos Elementos
HTML 5 establece una serie de nuevos elementos y atributos que reflejan el uso tpico de los sitios Web modernos.
Algunos de ellos son tcnicamente similares a las etiquetas <div> y <span>, pero tienen un significado semntico,
como por ejemplo <nav> (bloque de navegacin del sitio Web) y <footer>. Otros elementos proporcionan nuevas
funcionalidades a travs de una interfaz estandarizada, como los elementos <audio> y <video>.
Mejoras en el elemento <canvas>, capaz de renderizar en algunos navegadores elementos 3D
Algunos elementos de HTML 4.01 han quedado obsoletos, incluyendo elementos puramente de presentacin, como
<font> y <center>, cuyos efectos son manejados por el CSS Tambin hay un renovado nfasis en la importancia
del scripting DOM para el comportamiento de la Web.
Mejoras ms significativas del HTML 5

Incorpora etiquetas (canvas 2D y 3D, audio, video) con codecs para mostrar los contenidos multimedia.
Actualmente hay una lucha entre imponer codecs libres (WebM + http://es.wikipedia.org/wiki/VP8 VP8) o
privativos (H.264/MPEG-4 AVC).
Etiquetas para manejar grandes conjuntos de datos: Datagrid, Details, menu y Command. Permiten generar tablas
dinmicas que pueden filtrar, ordenar y ocultar contenido en cliente.
Mejoras en los formularios. Nuevos tipos de datos (eMail, number, url, datetime ) y facilidades para validar el
contenido sin Javascript
Visores: MathML (frmulas matemticas) y SVG (grficos vectoriales). En general se deja abierto a poder
interpretar otros lenguajes XML.
Drag&Drop. Nueva funcionalidad para arrastrar objetos como imgenes.
Web Semntica
La Web semntica (del ingls semantic web) es la "Web de los datos". Se basa en la idea de aadir metadatos
semnticos y ontolgicos a la World Wide Web. Esas informaciones adicionales que describen el contenido, el
significado y la relacin de los datos se deben proporcionar de manera formal, para que as sea posible evaluarlas
automticamente por mquinas de procesamiento. El objetivo es mejorar Internet ampliando la interoperabilidad
entre los sistemas informticos usando "agentes inteligentes". Agentes inteligentes son programas en las
computadoras que buscan informacin sin operadores humanos.
El precursor de la idea, Tim Berners-Lee, intent desde el principio incluir informacin semntica en su creacin,
la World Wide Web, pero por diferentes causas no fue posible.
Por ese motivo introdujo el concepto de semntica con la intencin de recuperar dicha omisin.
Relacin con Internet

En la actualidad, la World Wide Web est basada principalmente en documentos escritos en HTML, un lenguaje de
marcas que sirve principalmente para crear hipertexto en Internet. El lenguaje HTML es vlido para adecuar el
aspecto visual de un documento e incluir objetos multimedia en el texto (imgenes, esquemas de dilogo, etc.).
Pero ofrece pocas posibilidades para categorizar los elementos que configuran el texto ms all de las tpicas
funciones estructurales, como sucede con otros lenguajes de maquetacin (tipo LaTeX).
HTML permite mediante una herramienta de visualizacin (como un navegador o un agente de usuario) mostrar
por ejemplo un catlogo de objetos en venta. El cdigo HTML de este catlogo puede explicitar aspectos como "el
ttulo del documento es Ferretera Acme"; pero no hay forma de precisar dentro del cdigo HTML si el producto
M270660 es una "batera Acme", con un "precio de venta al pblico" de 200 , o si es otro tipo de producto de
consumo (es decir, es una batera elctrica y no un instrumento musical, o un puchero). Lo nico que HTML
permite es alinear el precio en la misma fila que el nombre del producto. No hay forma de indicar "esto es un
catlogo", "batera Acme" es una batera elctrica, o "200 " es el precio. Tampoco hay forma de relacionar ambos
datos para describir un elemento especfico en oposicin a otros similares en el mismo catlogo.
La Web Semntica se ocupara de resolver estas deficiencias. Para ello dispone de tecnologas de descripcin de los
contenidos, como RDF y OWL, adems de XML, el lenguaje de marcas diseado para describir los datos. Estas
tecnologas se combinan para aportar descripciones explcitas de los recursos de la Web (ya sean estos catlogos,
formularios, mapas u otro tipo de objeto documental). De esta forma el contenido queda develado, como los datos
de una base de datos accesibles por Web, o las etiquetas inmersas en el documento (normalmente en XHTML, o
directamente en XML, y las instrucciones de visualizacin definidas en una hoja de estilos aparte). Estas etiquetas
permiten que los gestores de contenidos interpreten los documentos y realicen procesos inteligentes de captura y
tratamiento de informacin.
Barreras
El desarrollo y difusin masivos de la web semntica tiene algunas dificultades que no ha podido superar todava:
una de ellas es tecnolgica y la otra est relacionada con la falta de inters de los propietarios de las pginas web.
Las tecnologas para expresar la informacin en el formato que requiere una web semntica existen hace aos.
Quizs la componente ms especializada sea OWL, que existe como estndar del W3C desde 2004. El componente
tecnolgico que falta es el que permita convertir de forma automtica el abundante contenido de texto de las
pginas web en marcas OWL. En 2009 la web semntica requiere que los creadores de las pginas web traduzcan
"a mano" su contenido en marcas OWL, para que pueda ser interpretado por agentes semnticos. Afortunadamente
muchas pginas (aunque no representen un porcentaje elevado de todas las pginas del mundo) tienen informacin
formateada en su base de datos, y pueden realizar esta conversin de manera automtica. Por ejemplo, un sitio con
miles de fichas de pelculas, que incluyen datos como ttulo, director, fecha de estreno, tiene estos datos
prolijamente ordenados y clasificados en una base de datos, lo que les permite elaborar un traductor de "ficha de
pelcula" a OWL, que sirva para todas las fichas, sin necesidad de tener que realizar la traduccin a mano para cada
una.
La otra barrera que se opone pasivamente a la web semntica es el modelo de negocio de gran cantidad de pginas
web, que obtienen ingresos de la publicidad. Estos ingresos son posibles nicamente si sus pginas son visitadas
por una persona, y se pierden si los datos quedan disponibles para que los interprete un proceso automtico.
El siguiente ejemplo arbitrario y parcial ilustra este concepto: para un trabajo de investigacin para la escuela sobre
la vida de un prcer, un sistema semntico realiza la investigacin y presenta en pantalla el resultado: fecha de
nacimiento y defuncin, batallas en las que particip, hechos destacados, frases clebres, y todo esto sin necesidad
de acceder a ninguna pgina web especfica, y por lo tanto sin consumir la publicidad de los sitios que pusieron a
disposicin esa informacin.
La visin no debe encerrarse en estos trminos. Es muy probable que, de surgir una web semntica masiva, el
modelo de negocios se adapte. Sin embargo, mientras no haya indicios de que esto vaya a suceder de manera
inevitable e inminente, no es lgico suponer que los sitios web basados en publicidad apoyen su desarrollo
poniendo su informacin en el formato necesario.
Componentes de la Web Semntica
Los principales componentes de la Web Semntica son los metalenguajes y los estndares de representacin XML,
XML Schema, RDF, RDF Schema y OWL. La OWL WebOntologyLanguageOverview describe la funcin y
relacin de cada uno de estos componentes de la Web Semntica:
XML aporta la sintaxis superficial para los documentos estructurados, pero sin dotarles de ninguna restriccin
sobre el significado.
XML Schema es un lenguaje para definir la estructura de los documentos XML.
RDF es un modelo de datos para los recursos y las relaciones que se puedan establecer entre ellos. Aporta una
semntica bsica para este modelo de datos que puede representarse mediante XML.
RDF Schema es un vocabulario para describir las propiedades y las clases de los recursos RDF, con una semntica
para establecer jerarquas de generalizacin entre dichas propiedades y clases.
OWL aade ms vocabulario para describir propiedades y clases: tales como relaciones entre clases (p.ej.
disyuncin), cardinalidad (por ejemplo "nicamente uno"), igualdad, tipologas de propiedades ms complejas,
caracterizacin de propiedades (por ejemplo simetra) o clases enumeradas.
La usabilidad y aprovechamiento de la Web y sus recursos interconectados puede aumentar con la web semntica
gracias a:
Los documentos etiquetados con informacin semntica (comprese sta con la etiqueta <meta> de HTML, usada
para facilitar el trabajo de los robots). Se pretende que esta informacin sea interpretada por el ordenador con una
capacidad comparable a la del lector humano. El etiquetado puede incluir metadatos descriptivos de otros aspectos
documentales o protocolarios.
Vocabularios comunes de metadatos (Ontologa (Informtica)) y mapas entre vocabularios que permitan a quienes
elaboran los documentos disponer de nociones claras sobre cmo deben etiquetarlos para que los agentes
automticos puedan usar la informacin contenida en los metadatos (p.ej. el metadato author tenga el significado de
"autor de la pgina" y no el del "autor del objeto descrito en la pgina").
Agentes automticos que realicen tareas para los usuarios de estos metadatos de la Web Semntica
Servicios Web (a menudo con agentes propios) que provean de informacin a los agentes (por ejemplo un servicio
de garantas a quien un agente pudiera consultar sobre si un comercio electrnico tiene un historial de mal servicio
o de generar correo basura).
Los proveedores primarios de esta tecnologa son las URIs que identifican los recursos junto con XML y los
namespaces. Si a esto se aade un poco de lgica, mediante una RDF, u otras tecnologas como los mapas
temticos y algo de razonamiento basado en tcnicas de inteligencia artificial, Internet podra estar cerca de
alcanzar las aspiraciones iniciales de su inventor, Tim Berners-Lee.
Servicio de notificacin: En la ltima versin, que es 3.0, Web Semntica Ping servicio tiene la capacidad de
validar los recursos RDF. Hay una lista de pings de exportacin simplificado sistema que fue desarrollado en esta
versin. El ping a la infraestructura se ha ganado velocidad considerable. Una de las razones de la mejora es que se
cambi la base de datos de MySQL a Virtuoso. Adems, la interfaz de usuario se ha actualizado. Nuevas
estadsticas estn disponibles con esta edicin tambin. La capacidad de proporcionar estadsticas sobre todos los
nombres y todas las estadsticas sobre los tipos, se ha aadido. Una buena caracterstica de proporcionar la lista de
nombres utilizados para describir las entidades en RDF. Todas las estadsticas sobre los tipos da el nmero de
entidades definidas a mquina en cada RDF Ping documento conocido por La Web Semntica.
Nuevas etiquetas de HTML 5

A continuacin un listado de todas las nuevas etiquetas de HTML 5 separadas por grupos, ms adelante se
explicar en detalle cada una de ella.
Nuevas etiquetas de marcacin semntica

EtiquetaDescripcin
<article>
Especifica independiente, autnomo de contenido, podra ser una noticia, artculo, blog, foro, u otros
artculos que pueden ser distribuidos de forma independiente del resto del sitio.
<aside>Para el contenido aparte. El contenido de un lado debe estar relacionada con el contenido principal.
<comad>Un botn o botn de radio, o una casilla de verificacin
<details>Para describir los detalles de un documento, o partes de un documento
<summary>A ttulo o resumen, en el interior del elemento de detalles
<figure>Para la agrupacin de una seccin de contenido independiente, podra ser un vdeo
<figcaption>El ttulo de la seccin de la figura
Para un pie de pgina de un documento o seccin, puede incluir el nombre del autor, la fecha del
documento, informacin de contacto, o la informacin de copyright
<footer>
<header>Para ver una introduccin de un documento o seccin, podra incluir la navegacin
Para una seccin de los ttulos, utilizando <h1> a <h6>, donde el ms grande es el principal ttulo de la
seccin, y los otros son sub-ttulos
<hgroup>
<mark>Para el texto que hay que destacar
<meter>Para realizar una medicin, slo si los valores mximo y mnimo se conocen
<nav>Para una seccin de la navegacin
<progress>El estado de un trabajo en progreso
<ruby>Para la anotacin de ruby??(notas chinos o caracteres)
<rt>Para la explicacin de la anotacin ruby
<rp>Lo que muestran los navegadores que no soportan el elemento de rub
Para una seccin de un documento. Como captulos, encabezados, pies de pgina, o cualquier otra
seccin del documento
<section>
<time>Para la definicin de un tiempo o una fecha, o ambos
<wbr>Separacin de palabras.
Nuevos Elementos multimedia

HTML5 proporciona un nuevo estndar para el contenido de los multimedia:
EtiquetaDescripcin
<audio>Para el contenido multimedia, sonidos, msica u otros flujos de audio
<video>Para el contenido de vdeo, como un clip de pelcula u otras corrientes de vdeo
Recurso de los medios de los elementos de los medios de comunicacin, que se define dentro de los
<source>
elementos de audio o vdeo
<embed>Para el contenido integrado, como un plug-in
El elemento Canvas
El elemento de tela se utiliza JavaScript para realizar dibujos en una pgina web.
EtiquetaDescripcin
<canvas>Para hacer grficos o animaciones.
Nuevos elementos de formulario
HTML5 ofrece ms elementos de formulario, con ms funcionalidades:

EtiquetaDescripcin
<datalist>Una lista de opciones de valores de entrada
<keygen>Generar claves para autenticar a los usuarios
<output>Para los diferentes tipos de produccin, tales como la produccin escrita por un guin
Nuevos atributos para los input

Adems, atribuyen el elemento de entrada de tipo tiene muchos nuevos valores, para el control de entrada mejor
antes de enviarlo al servidor:
TipoDescripcin
telEl valor de entrada es de tipo de nmero telefnico
searchEl campo de entrada es un campo de bsqueda
urlEl valor de entrada es una URL
emailEl valor de entrada es una o ms direcciones de correo electrnico
datetimeEl valor de entrada es una fecha y / o tiempo
daleEl valor de entrada es una fecha
monthEl valor de entrada un mes
weekEl valor de entrada es de semana
timeEl valor de entrada es de tipo tiempo
datetime-localEl valor de entrada es una fecha / hora local
numberEl valor de entrada es un nmero
rangeEl valor de entrada es un nmero en un rango determinado
colorEl valor de entrada es de un color hexadecimal, como # FF8800
placeholderEspecifica una sugerencia breve que describe el valor esperado de un campo de entrada
Diferencias entre HTML 5 y HTML4 / XHTML

A continuacin se detallan los cambios en las etiquetas entre las distintas versiones del lenguaje
EtiquetaAtributosComentarios
Estndar o ninguno
<!DOCTYPE>Estndar o ninguno
Atributo Aadido: media

<a>href | target | rel | hreflang | media | type
Atributo cambiado: Target
<abbr>Estndar o ninguno
<acronym>Etiqueta Eliminada
<address>Estndar o ninguno
<applet>Etiqueta eliminada
<area>Estndar o ninguno
<article>Atributos globalesNueva etiqueta
<aside>Atributos globalesNueva etiqueta
<audio>autobuffer | autoplay | controls | loop | srcNueva etiqueta
<b>Atributos globalesEtiqueta cambiada
<base>Estndar o ninguno
<basefont>Etiqueta eliminada
<bb>Estndar o ninguno
<bdo>Estndar o ninguno
<big>Etiqueta eliminada
<blockquote>Estndar o ninguno
<body>Estndar o ninguno
<br>Estndar o ninguno
<button>Estndar o ninguno
<canvas>height | widthNueva etiqueta
<caption>Estndar o ninguno
<center>Etiqueta eliminada
<cite>Atributos globalesEtiqueta cambiada
<code>Estndar o ninguno
<col>Estndar o ninguno
<colgroup>Estndar o ninguno
<command>checked | default | disabled | hidden | icon | label | radiogroup | typeNueva etiqueta
<datagrid>Estndar o ninguno
<datalist>Atributos globalesNueva etiqueta
<dd>Estndar o ninguno
<del>Estndar o ninguno
<details>openNueva etiqueta
<dialog>Atributos globalesNueva etiqueta
<dir>Etiqueta eliminada
<div>Estndar o ninguno
<dfn>Estndar o ninguno
<dl>Estndar o ninguno
<dt>Estndar o ninguno
<em>Estndar o ninguno
<embed>height | src | type | widthNueva etiqueta
<fieldset>Estndar o ninguno
<figure>Atributos globalesNueva etiqueta
<font>Etiqueta eliminada
<footer>Atributos globalesNueva etiqueta
<form>Estndar o ninguno
<frame>Etiqueta eliminada
<frameset>Etiqueta eliminada
<h1> ... <h6>Estndar o ninguno
<head>Estndar o ninguno
<header>Atributos globalesNueva etiqueta
<hgroup>Atributos globalesNueva etiqueta
<hr>NingunoEtiqueta cambiada
<html>Estndar o ninguno
<i>NingunoEtiqueta cambiada
<iframe>Estndar o ninguno
<img>Estndar o ninguno
accept | alt | auto-complete | autofocus | cheked | disabled | form | formaction |

Etiqueta cambiada:
formenctype | formmethod | formnovalidate | formtarget | height | list | max |
<input>
Aadidos 13
maxlength | min | multiple | name | pattern1 placeholder | readonly | required | size |
elementos a type
src | step | type | value | width
<ins>Estndar o ninguno
<isindex>Etiqueta eliminada
<kbd>Estndar o ninguno
<label>Estndar o ninguno
<legend>Estndar o ninguno
<li>Estndar o ninguno
<link>Estndar o ninguno
<mark>Atributos globalesNueva etiqueta
<map>Estndar o ninguno
<menu>Estndar o ninguno
<meta>Estndar o ninguno
<meter>high | low | max | min | optimum | valueNueva etiqueta
<nav>Atributos globalesNueva etiqueta
<noframes>Etiqueta eliminada
<noscript>Estndar o ninguno
<object>Estndar o ninguno
<ol>Estndar o ninguno
<optgroup>Estndar o ninguno
<option>Estndar o ninguno
<output>formNueva etiqueta
<p>Estndar o ninguno
<param>Estndar o ninguno
<pre>Estndar o ninguno
<progress>max | valueNueva etiqueta
<q>
<ruby>citeNueva etiqueta
<rp>Atributos globalesNueva etiqueta
<rt>Atributos globalesNueva etiqueta
<s>Etiqueta eliminada
<samp>Estndar o ninguno
<script>Estndar o ninguno
<section>citeNueva etiqueta
<select>Estndar o ninguno
<small>Atributos globalesEtiqueta Cambiada
<source>media | src | typeNueva etiqueta
<span>Estndar o ninguno
<strike>Etiqueta eliminada
<strong>Estndar o ninguno
<style>Estndar o ninguno
<sub>Estndar o ninguno
<sup>Estndar o ninguno
<table>Estndar o ninguno
<tbody>Estndar o ninguno
<td>Estndar o ninguno
<textarea>Estndar o ninguno
<tfoot>Estndar o ninguno
<th>Estndar o ninguno
<thead>Estndar o ninguno
<time>datetime | pubdateNueva etiqueta
<title>Estndar o ninguno
<tr>Estndar o ninguno
<tt>Etiqueta eliminada
<u>Etiqueta eliminada
<ul>Estndar o ninguno
<var>Estndar o ninguno
<video>src | poster | autobuffer | autoplay | loop | controls | width | heightNueva etiqueta
<xmp>Etiqueta eliminada
Compatibilidad de navegadores con HTML5 y CSS 3

Sabemos que hoy en da HTML 5 al igual que CSS 3, no es compatible con todos los navegadores, a continuacin
se presenta un tabla de compatibilidades con las versiones ms recientes de los navegadores,
Nota: Cabe destacar que esta compatibilidad cambia da a da, al igual que el estado de desarrollo de lenguaje
HTML 5.
Verificador de HTML 5
Para verificar la compatibilidad de tu navegador con HTML 5 se puede ingresar en la siguiente URL
http://html5test.com/
o bien en:
http://html5demos.com/
Otra pgina muy interesante que nos ayudar a saber la compatibilidad de las capacidades de HTML 5 con cada
uno de los navegadores es la siguiente:
http://caniuse.com/
Ejemplos de sitio desarrollados con HTML 5

Para ver proyectos desarrollados en HTML 5 y entender sus posibilidades, se puede visitar los listados debajo.
http://html5gallery.com/
Algunos sitios interesantes para ver desarrollados en HTML 5

http://www.nissanusa.com/leaf-electric-car/index#/leaf-electric-car/index
http://edirpedro.com.br/portfolio/
http://www.lucascotto.it/
http://www.esteemleadership.org/
Distribucin de mercado de los navegadores
A la hora de decidir si vamos a realizar nuestro proyecto en HTML 5 o no, es necesario realizar un anlisis sobre el
uso de los navegadores, dado que sabemos que HTML 5 no posee soporte completo en todos los navegadores y/o
todas la versiones de los mismos.
Para esto es necesario investigar sobre nuestro pblico objetivo, es decir los usuarios de nuestro sitio web, podemos
encontrar estadsticas en diversos lugares y fuentes las que brindadas a continuacin, son estadsticas recin
obtenidas de sitios masivos, con lo cual nos brindan informacin ms que representativa.
IE, sigue siendo el lder indiscutible con un 49% de los usuarios totales, as mismo el porcentaje de sus usuario fue
bajando mucho en los ltimos aos.
Firefox, le sigue con un 27% de los usuarios totales
Chrome posee hoy da un 17%, algo increble dado que es el ms reciente de los navegadores el resto de los
usuarios se dividen entre Safari y Opera; si bien opera es el navegador que menos usuarios posee, es el lder
indiscutible en los navegadores para dispositivos mviles.
Elementos de html 5
Declaracin de tipo de documento (doctype)
A diferencia de las versiones anteriores de html, donde existen ms de un tipo de doctype, HTML 5 cuenta con un
solo tipo de doctype que podemos ver a continuacin.
<!DOCTYPE HTML>
Declaracin del idioma

En HTML 5 es obligatorio declarar el idioma del sitio web, en el encabezado del mismo .
Declaracin del charset

La declaracin del charset es obligatoria en HTML 5, la misma se realiza en la etiqueta <meta>
El juego de caracteres ms utilizado y que es adecuado a nuestro idioma es el UTF-8.
Etiquetas deprecadas
Las siguientes etiquetas ya no pertenecen al estndar de HTML 5 fueron eliminadas ya que su funcin carece de
sentido ante las nuevas funcionalidades del HTML 5
<acronym>
<applet>
<basefont>
<big>
<center>
<font>
<frame>
<frameset>
<isindex>
<noframes>
<s>
<strike>
<tt>
<u>
<xmp>
Nuevas etiquetas de HTML 5

A continuacin se listan alfabticamente todas las nuevas etiquetas de HTML 5, y que tipo de atributos puede usar
cada una de ellas, ms adelante se explicar el uso especfico de cada una de ellas.
<article>Atributos globalesNueva etiqueta
<aside>Atributos globalesNueva etiqueta
<audio>autobuffer | autoplay | controls | loop | srcNueva etiqueta
<canvas>height | widthNueva etiqueta
<command>checked | default | disabled | hidden | icon | label | radiogroup | typeNueva etiqueta
<datalist>Atributos globalesNueva etiqueta
<details>openNueva etiqueta
<dialog>Atributos globalesNueva etiqueta
<embed>height | src | type | widthNueva etiqueta
<figure>Atributos globalesNueva etiqueta
<footer>Atributos globalesNueva etiqueta
<header>Atributos globalesNueva etiqueta
<hgroup>Atributos globalesNueva etiqueta
<mark>Atributos globalesNueva etiqueta
<map>Estndar o ninguno
<output>formNueva etiqueta
<progress>max | valueNueva etiqueta
<ruby>citeNueva etiqueta
<rp>Atributos globalesNueva etiqueta
<rt>Atributos globalesNueva etiqueta
<section>citeNueva etiqueta
<source>media | src | typeNueva etiqueta
<time>datetime | pubdateNueva etiqueta
<video>src | poster | autobuffer | autoplay | loop | controls | width | heightNueva etiqueta
Atributos Globales de HTML 5

A continuacin se listan en forma alfabtica los atributos globales de HTML 5, en otros captulos de este manual se
ver cmo usar especficamente cada uno de ellos. Aquellos que se agregan desde la versin HTML 5 aparecen
marcados como (nuevo)
ATRIBUTOVALORDESCRIPCION
accesskeycaracterAsigna una tecla como acceso directo.
classnombre de claseAsigna la clase que usara ese elemento (CSS)
contenteditable (nuevo)
true
Especifica si el usuario permite o no que el contenido sea editable.
false
contextmenu (nuevo)menu_idEspecifica el menu contextual de un elemento
ltr
dir Especifica la direccin del texto de un elemento
rtl
true
draggable (nuevo)falseEspecifica si es posible mover el elemento
auto
copy
dropzone (nuevo)moveEspecifica que pasa si el elemento es movido y soltado en otro elemento
link
hidden (nuevo)hiddenEspecifica si el elemento esta visible o no
ididEspecifica el nombre del elemento
langlanguage_codeEspecifica el lenguaje del elemento
spellcheck (nuevo)
true
Especifica si el elemento necesita ser comprobado gramaticalmente
false
stylestyle_definitionPermite agregar un estilo en lnea
tabindexnumberEspecifica el orden de tabulacin del elemento
titletextEspecifica el titulo del elemento
Elementos semnticos
Modelado semntico de un documento html
La gran diferencia para el modelado de un documento HTML es el correcto uso de las etiquetas semnticas, HTML
5 introduce una gran diferencia en este plano, a continuacin veremos una a una las nuevas etiquetas semnticas y
como usar cada una de ellas.
Etiqueta div
Las etiquetas div, son elementos de bloque, que nos permiten estructurar el contenido del documento en bloques,
cada uno de los cuales cumple alguna funcin especfica: encabezado, pie, men izquierdo, men derecho, zonas de
contenidos, etc.
A cada uno de los bloques corresponder un tag DIV, que siempre deber tener un atributo id para que
podamos referirnos a l desde un selector de elementos nicos en la hoja de estilos.
La etiqueta div es especfica para la diagramacin de nuestros archivos, y debe ser utilizada en lugar de las tablas.
Por su condicin de elemento de bloque las etiquetas div, siempre se ubicaran una debajo de la otra ocupando el
100% de ancho, en el mismo orden en el cual aparecen el en flujo normal de documento HTML.
Ejemplo:
<div id=caja></div>
Nuevas etiquetas semnticas

Etiqueta <header>
La etiqueta <header> es una de las nuevas etiquetas semnticas de HTML 5, que permite una mejor estructura del
documento HTML, la misma se utiliza para crear en encabezados del archivo dentro del cuerpo del mismo como
podemos ver en el ejemplo siguiente.
Ejemplo de uso de la etiqueta <header>
<body>
<header>
<h1>Bienvenidos a mi sitio web</h1>
<p>Mi nombre es Eugenia</p>
</header>
<p>El resto de mi sitio web.</p>
</body>
Dentro de esta etiqueta podemos incluir informacin relevante como ser el ttulo principal del documento.
Modo de uso de esta etiqueta
La etiqueta <header> se puede usar las veces que sea necesaria , aunque muchos autores recomiendan utilizarla una
sola vez por documento.
Soporte de navegadores
La etiqueta <header> es soportada por la mayor parte de los navegadores en sus versiones ms actuales a saber:
Firefox
Chrome
Safari
Opera
IE (desde la versin 9)
Atributos que puede utilizar
La etiqueta <header> soporta atributos globales y atributos de evento.
Etiqueta <nav>
La etiqueta <nav> es una de las nuevas etiquetas semnticas de HTML 5, que permite una mejor estructura del
documento HTML, la misma se utiliza para crear en el rea de la navegacin principal que un documento
conteniendo los links a las distintas secciones del sitio, se utiliza dentro del cuerpo del mismo como podemos ver
en el ejemplo siguiente.
Ejemplo de uso de la etiqueta <nav>
<body>
<nav>
<a target="_blank" href="default.asp">Home</a>
<a target="_blank" href="tag_meter.asp">Clientes</a>
<a target="_blank" href="tag_noscript.asp">Contacto</a>
</nav>
</body>
Si bien segn la especificacin hasta el da de hoy de la W3C indica que se puede usar ms de una vez la etiqueta
<nav> , Pero muchos autores recomiendan utilizar esta etiqueta una nica vez por documento para la negacin
principal del sitio.
Nota: Vale recordar que el estndar HTML 5 aun no esta terminado y las reglas pueden variar en los meses
siguientes.
La etiqueta <nav> es soportada por la mayor parte de los navegadores en sus versiones mas actuales a saber:
Firefox
Chrome
Safari
Opera
La etiqueta <nav> soporta atributos globales y atributos de evento.
Etiqueta <footer>
La etiqueta <footer> es una de las nuevas etiquetas semnticas de HTML 5, que permite una mejor estructura del
documento HTML, la misma se utiliza para crear el pie de pgina del documento, se utiliza dentro del cuerpo del
documento y permite contener la informacin relacionada a los legales por ejemplo, como podemos ver en el
ejemplo siguiente.
Ejemplo de uso de la etiqueta <footer>
<body>
<footer>Este documento fue escrito en el 2011</footer>
</body>
La etiqueta <footer> se puede usar las veces que sea necesaria , aunque muchos autores recomiendan utilizar una
sola vez por documento.
La etiqueta <footer> es soportada por la mayor parte de los navegadores en sus versiones ms actuales a saber:
Firefox
Chrome
Safari
Opera
La etiqueta <footer> soporta atributos globales y atributos de evento.
Etiqueta <section>
La etiqueta <section> es una de las nuevas etiquetas semnticas de HTML 5, que permite una mejor estructura del
documento HTML, la misma se utiliza para crear una seccin dentro del documento HTML, en muchos casos la
utilizamos donde antes slo podamos usar un div.
Esta etiqueta, se utiliza dentro del cuerpo del documento y permite contener la informacin relacionada relevante
del sitio y tambin otra etiquetas semnticas como podemos ver en el ejemplo siguiente.
Ejemplo de uso de la etiqueta <section>
<body>
<section>
<h1>WWF</h1>
<p>La WorldWildlifeFoundation naci en el ao 1961...</p>
</section>
</body>
La etiqueta <section> se puede usar las veces que sea necesaria en cada documento HTML.
La etiqueta <section> es soportada por la mayor parte de los navegadores en sus versiones mas actuales a saber:
Firefox
Chrome
Safari
Opera
La etiqueta <section> soporta atributos globales y atributos de evento.
Etiqueta <article>
La etiqueta <article> es una de las nuevas etiquetas semnticas de HTML 5, que permite una mejor estructura del
documento HTML, la misma se utiliza para crear artculos dentro de los documentos HTML, como podemos ver en
el ejemplo siguiente.
Ejemplo de uso de la etiqueta <section>
<body>
<article>
<a target="_blank" href="http://blog.netscape.com/2007/12/28/
end-of-support-for-netscape-web-browsers">
Netscape muri</a><br />
AOL es una de las grandes empresas que hacen hoy a la web....
</article>
</body>
La etiqueta <article> se puede usar las veces que sea necesaria en cada documento HTML.
Si bien su uso sigue siendo un tanto confuso, habitualmente se utiliza para incorporar contenidos independientes
como:
post de foros
artculos de diarios
entradas de blogs
comentarios de usuarios
rss
As mismo tambin es utilizada para introducir contenido esttico como ser, la tpica informacin de quienes
somos por ejemplo.
La etiqueta <article> es soportada por la mayor parte de los navegadores en sus versiones ms actuales a saber:
Firefox
Chrome
Safari
Opera
La etiqueta <article> soporta atributos globales y atributos de evento.
Etiqueta <aside>
La etiqueta <aside> es una de las nuevas etiquetas semnticas de HTML 5, que permite una mejor estructura del
documento HTML, la misma se utiliza para agregar contenidos complementarios al contenido principal del
documento, son contenidos relacionados pero de menos importancia, que podran en todo caso ser omitidos, la
misma se utiliza dentro del cuerpo del documento, como podemos ver en el siguiente ejemplo.
Ejemplo de uso de la etiqueta <aside>
<body>
<p>Me voy de vacaciones a Miami este verano</p>
<aside>
<h4>Miami</h4>
Es una ciudad en el sur de EEUU
</aside>
</body>
La etiqueta <aside> es comnmente usada en la barra lateral de la derecha y dentro de una etiqueta <article>.
La etiqueta <aside> se puede usar las veces que sea necesaria en cada documento HTML.
Esta etiqueta posee contenido que no es esencial para el sitio, la misma es ignorada cuando se ingresa mediante un
dispositivo mvil o un lector de pantalla.
La etiqueta <aside> es soportada por la mayor parte de los navegadores en sus versiones ms actuales a saber:
Firefox
Chrome
Safari
Opera
La etiqueta <aside> soporta atributos globales y atributos de evento.
Etiqueta <hgroup>
La etiqueta <hgroup> es una de las nuevas etiquetas semnticas de HTML 5, que permite una mejor estructura del
documento HTML, la misma se utiliza para crear un grupo de ttulos dentro de un documento HTML. Esta
etiqueta, se utiliza dentro del cuerpo del documento como podemos ver en el ejemplo siguiente.
Ejemplo de uso de la etiqueta <hgroup>
<body>
<hgroup>
<h1>Bienvenidos a mi web site</h1>
<h2>una nueva forma de comprar</h2>
</hgroup>
<p>El resto del sitio....</p>
</body>
La etiqueta <hgroup> se puede usar las veces que sea necesaria en cada documento HTML y debe estar dentro de
la etiqueta <header>.
La etiqueta <hgroup> es soportada por la mayor parte de los navegadores en sus versiones ms actuales a saber:
Firefox
Chrome
Safari
Opera
La etiqueta <hgroup> soporta atributos globales y atributos de evento.
Etiqueta <figure>
La etiqueta <figure> es una de las nuevas etiquetas semnticas de HTML 5, que permite una mejor estructura del
documento HTML, la misma se utiliza para crear una figura, es decir agrupa una imagen con un contenido de texto
relevante se utiliza dentro del cuerpo del documento como podemos ver en el ejemplo siguiente.
Ejemplo de uso de la etiqueta <figure>
<body>
<figure>
<p>Vista desde la cpula de la catedral </p>
<imgsrc="img_pulpit.jpg" width="304" height="228">

</figure>
</body>
La etiqueta <figure> se puede usar las veces que sea necesaria en cada documento HTML.
El contenido de la etiqueta <figure> debe ser relevante para el contenido principal de la pgina, pero sin el
contenido debe poder ser comprendido independientemente, es decir la si la etiqueta <figure> es omitida, no debe
afectar a la comprensin del contenido del sitio.
Se suele utilizar junto con la etiqueta <figcaption> para agregar un ttulo a esa figura.
La etiqueta <figure> es soportada por la mayor parte de los navegadores en sus versiones ms actuales a saber:
Firefox
Chrome
Safari
Opera
La etiqueta <figure> soporta atributos globales y atributos de evento.
Etiqueta <figcaption>
La etiqueta <figcaption> es una de las nuevas etiquetas semnticas de HTML 5, que permite una mejor estructura
del documento HTML, la misma se utiliza para crear un ttulo dentro de la etiqueta <figure>, se utiliza dentro del
cuerpo del documento como podemos ver en el ejemplo siguiente.
Ejemplo de uso de la etiqueta <figcaption>
<body>
<figure>
<figcaption>Vista desde la cpula de la capital</figcaption>
<imgsrc="img_pulpit.jpg" width="304" height="228">
</figure>
</body>
La etiqueta <figcaption> se puede usar las veces que sea necesaria en cada documento HTML, pero siempre debe ir
dentro de la etiqueta <figure>.
La etiqueta <figcaption> debe ser el 1 hijo dentro de la etiqueta <figure>.
La etiqueta <figcaption> es soportada por la mayor parte de los navegadores en sus versiones ms actuales a saber:
Firefox
Chrome
Safari
Opera
La etiqueta <figcaption> soporta atributos globales y atributos de evento.
CSS
Qu es el CSS
El trmino CSS significa, hojas de estilo en cascada (Cascading Style Sheets, CSS), las mismas son un lenguaje
formal usado para definir la presentacin de un documento estructurado escrito en HTML o XML (y por extensin
en XHTML). El W3C (World Wide Web Consortium) es el encargado de formular la especificacin de las hojas de
estilo que servirn de estndar para los agentes de usuario o navegadores.
Cules son los beneficios de trabajar con CSS

Las ventajas de utilizar CSS son:
Control centralizado de la presentacin de un sitio web completo con lo que se agiliza de forma considerable la
actualizacin del mismo.
Los Navegadores permiten a los usuarios especificar su propia hoja de estilo local que ser aplicada a un sitio
web, con lo que aumenta considerablemente la accesibilidad. Por ejemplo, personas con deficiencias visuales
pueden configurar su propia hoja de estilo para aumentar el tamao del texto o remarcar ms los enlaces.
Una pgina puede disponer de diferentes hojas de estilo segn el dispositivo que la muestre o incluso a eleccin
del usuario. Por ejemplo, para ser impresa, mostrada en un dispositivo mvil, o ser "leda" por un sintetizador de
voz.
El documento HTML en s mismo es ms claro de entender y se consigue reducir considerablemente su tamao
(siempre y cuando no se utilice estilo en lnea).
Versiones de CSS
Hay varias versiones: CSS1 y CSS2, con CSS3 en desarrollo por el World Wide Web Consortium (W3C).
Los navegadores modernos implementan CSS1 bastante bien, aunque existen pequeas diferencias de
implementacin segn marcas y versiones de los navegadores. CSS2, sin embargo, est slo parcialmente
implementado en los ms recientes.
Trabajando con CSS

Declaracin de reglas de estilo
En HTML haba tres opciones para definir estilos, ahora, en XHTML, solo hay dos maneras.
a- Hoja de estilo externa

b- Hoja de estilo embebida en el encabezado del documento
c- Estilos en lnea (vlida solamente para HTML)
Hoja de estilo externa

Las reglas de estilo se crean en un archivo CSS independiente que se vincula a los archivos XHTML, esta es la
forma ms recomendable para trabajar ya que tiene una ventaja muy grande y es que podemos tener muchas
pginas enlazando a la misma hoja de estilos.
Si ms adelante queremos cambiar algo, slo hemos de modificar un archivo (la hoja de estilos) y afectar a todas
las pginas. Podemos enlazar una o ms hojas poniendo esto dentro de la cabecera (head):
<link target="_blank" href="nuestra_hoja.css" rel="stylesheet" type="text/css" />Hoja de estilo

embebida en el encabezado del documento
Esta opcin consiste en escribir la informacin referente a los estilos dentro mismo del archivo XHTML. Lo
podemos hacer escribiendo entre las etiquetas <style> y </style>, que tambin deben ir en la cabecera (head).
Si hacemos las dos cosas a la vez, siempre tienen prioridad las reglas que estn dentro de <style> (lo local
predomina sobre lo global).
Estilos en lnea
La tercera forma era incluir el atributo style dentro de algn elemento HTML, su uso es especfico para la creacin
de newsletters
Vinculacin de una hoja de estilo
Para vincular un archivo HTML con un CSS debemos introducir el siguiente cdigo en el encabezado de
documento:
<link target="_blank" href="nuestra_hoja.css" rel="stylesheet" type="text/css" />
Diferencia entre vinculacin e importacin de una hoja de estilo

Las hojas de estilo pueden vincularse mediante una hoja intermedia que haga de hoja maestra:
<link rel=stylesheet target="_blank" href=hoja_maestra.css type=text/css media=all>

A su vez, desde dentro de hoja_maestra.css podemos importar distintas hojas:
@importurl(default.css);
@importurl(impresion.css);
@import url(pantalla.css);
@import url(palm.css);
@import url(celular.css);
De esta manera, el mantenimiento y degradacin sin errores es mucho ms simple.
Reglas de estilo
En una hoja de estilos definimos reglas que consisten en mencionar selectores a los que les asignamos una serie de
propiedades. Por ejemplo, si queremos que nuestra pgina web tenga el fondo blanco, las letras grises y use una
fuente Arial de 11 pxeles de tamao.
Sintaxis de las reglas de estilo
Todas las reglas de estilo tiene la misma sintaxis, un selector y una serie de atributos encerrados entre llaves, una
regla puede tener N cantidad de atributos, cada atributo se separa por : de su valor.
Siempre al final de cada valor usamos ; para terminar esa sentencia y separarlo del prximo atributo.
selector {atributo: valor}
Ejemplo: regla de estilo con un solo atributo
h1 { background-color:#ff2200; }
Ejemplo: regla de estilo con varios atributos
h1 { background-color:#ff2200;
font-size:15px;
color:#ff0011 }
Selectores
Los selectores se utilizan para elegir a qu elemento del XHTML aplicar las propiedades que escribimos.
Hay diferentes tipos de selectores, los ms importantes son los que se detallan a continuacin.
Elementos HTML (etiquetas)
Se utilizan para redefinir el aspecto de una etiqueta especfica.
Si queremos elegir una etiqueta o tag XHTML, simplemente escribimos su nombre. Por ejemplo, si queremos
establecer propiedades para los prrafos:
p{
...
}
La regla definida aplicar a todos los prrafos de nuestros archivos XHTML, y solo a ellos.
Identificadores
Tambin podemos elegir un elemento #unico utilizando su atributo id. Para ello, empleamos el numeral:
#menu {
...
}
nota: debemos recordar que los id, no pueden repetirse en un archivo XHTML
Luego, el cdigo XHTML donde aparezca ese elemento nico sera as:
<div id="menu">Este es el menu</div>

Clases
Tambin existen los selectores de clases, Podemos definir una clase y hacer que muchos elementos la utilicen,
escribiendo un punto antes del nombre.
Por ejemplo, si queremos destacar algo:
.destacado {
...
}
Luego podramos usar esa clase en todos los prrafos que querramos (o en cualquier otro elemento, como ttulos,
listas, etc.), usando el atributo class.
De este modo:
<p class="importante">Contenido</p>
nota: existen otros tipo de selectores que iremos viendo a lo largo de este curso
Formato de comentario
Como todo lenguaje en CSS tambin tenemos un formato de comentario, que nos permite dejar comentarios en el
cdigo, como vemos a continuacin.
Ejemplo:
/* Reglas de estilo para el home */
Estructura y Herencia
La estructura del documento es determinante para la forma en que CSS aplica los estilos al documento, sobre todo
en torno a las relaciones entre padres e hijos.
El primer gran beneficio de este tipo de relaciones es el hecho de que podemos definir relaciones de contexto entre
los elementos. Por ejemplo, si queremos definir que los EM que estn dentro de un H1 sern grises, podemos
aadir un atributo CLASS a cada EM que est dentro de un H1, o definir una regla como la siguiente:
H1em {color: gray;}
Herencia
Es la propiedad por al cual un estilo no slo se aplica a un elemento en concreto, sino que es heredado por sus
descendientes y aplicado por estos:
h1 {color: gray;}
<h1>Hola<em>Mundo</em></h1>
Debemos tener en cuenta que no todas las propiedades se heredan. Existen una serie de razones (normalmente de
sentido comn) por las cuales algunas propiedades no se pueden heredar, por ejemplo la definicin de bordes
Selectores de grupo
En CSS tenemos la posibilidad de agrupar selectores, siempre que tengamos reglas que posean atributos comunes
entre si, podemos crear un grupo con ellos, los selectores se separan con comas, como en el siguiente ejemplo,
todas las etiquetas H tendrn color verde
Ejemplo:
h1,h2,h3,h4,h5,h6 { color: green; }
Atributos tipogrficos
En la categora Tipo, vamos a encontrar todos los atributos que se aplican a los elementos de tipografa.
Font Family (Familia de fuente)

Sintaxis: font-family: [[<nombre-de-familia> | <familia-genrica>],]* [<nombre-de-familia> | <familiagenrica>]
Valores posibles:<nombre-de-familia>
Puede usarse cualquier nombre de familia de Fuentes <familia-genrica>
serif (por ej., Times)
sans-serif (por ej., Arial o Helvtica)
cursive (por ej., Zapf-Chancery)
fantasy (por ej., Western)
monospace (por ej., Courier)
Valor inicial: Determinado por el navegador
Se aplica a: Todos los elementos
Heredado: Si
Las familias de fuentes pueden asignarse por un nombre de fuente especfica o por una familia de Fuentes genrica.
Obviamente, si define una fuente especfica, no ser tan probable de encontrar como una familia de fuente genrica.
Puede hacer mltiples asignaciones de familias, y si hace una asignacin de fuente especfica, debera ser seguida
por un nombre de familia genrica en el caso de que la primera seleccin no se halle presente.
Un ejemplo de declaracin de font-family:
p { font-family: "New Century Schoolbook", Times, serif }
Note que las dos primeras asignaciones son fuentes de tipo especfico: New Century Schoolbook y Times.
Sin embargo, ya que ambas son fuentes serif, la familia genrica est listada como un respaldo en el caso de que el
sistema no tenga ninguna de las dos, sino otra fuente serif que cumpla los requisitos.
Cualquier nombre de fuente que contenga un espacio en blanco deber ser entrecomillada, con comillas simples o
dobles.
La familia de fuente tambin puede darse con la propiedad font.
Font Style (Estilo de fuente)

Sintaxis: font-style: <valor>
Valores posibles: normal | italic | oblique
Valor inicial: normal
Heredado: Si
La propiedad font-style define que la fuente se muestre en una de tres formas: normal, itlica u oblicua (inclinada).
Una hoja de estilo de muestra con declaraciones font-style
Ejemplo:
h1 { font-style: oblique } o p { font-style: normal }
Font Variant (Variante de fuente )

Sintaxis: font-variant: <valor>
Valores posibles:normal | small-caps
Heredado: Si
La propiedad font-variant determina si la fuente se muestra en maysculas tipo normal o pequeas smallcaps.
Las small-caps se muestran cuando todas las letras de la palabra estn en maysculas, con caracteres ligeramente
ms grandes que las minsculas. Posteriores versiones de CSS pueden soportar variantes
adicionales como condensada, expandida, nmeros en small-caps u otras variantes personalizadas.
Un ejemplo de una asignacin font-variant:
strong { font-variant: small-caps }
Font Weight (Peso de fuente)

Sintaxis: font-weight: <valor>
Valores posibles: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
Heredado: Si
La propiedad font-weight se usa para especificar el peso de la fuente. Los valores bolder y lighter son relativos al
peso de la fuente heredada, mientras que los otros valores son pesos de fuente absolutos.
Algunos ejemplos de asignacin de font-weight:
h1 { font-weight: 800 } o p { font-weight: normal }
Font Size (Tamao de fuente)

Sintaxis: font-size: <tamao-absoluto> | <tamao-relativo> | <longitud> | <porcentaje>
Valores posibles:
l <tamao-absoluto>
m xx-small | x-small | small | medium | large | x-large | xx-large
l <tamao-relativo>
mlarger | smaller
l <longitud>
l <porcentaje> (en relacin al elemento padre)
Valor inicial: medium
Heredado: Si
La propiedad font-size se usa para modificar el tamao de la fuente mostrada. Las longitudes absolutas (usando
unidades como pt e in) deberan usarse racionalmente debido a su poca capacidad de adaptarse a diferentes
ambientes de navegacin. Las fuentes con longitudes absolutas pueden ser muy pequeas o grandes para un
usuario.
Algunos ejemplos de asignacin de tamao seran:
h1 { font-size: large }
p { font-size: 12pt }
li { font-size: 90% }
strong { font-size: larger }
Los autores deben estar conscientes de que Microsoft Internet Explorer 3.x aplica incorrectamente las unidades em
y ex cmo pixels, lo que puede hacer el texto ilegible. El navegador tambin aplica incorrectamente valores de
porcentaje relativos al tamao de fuente por defecto para el selector, en vez de en relacin al tamao de fuente del
elemento padre. Esto hace que reglas como:
#contenidoDeLaClase h1{ font-size: 200% }
sean peligrosas, porque el tamao ser dos veces el tamao de la fuente por defecto de IE para encabezados de
nivel-uno, en lugar de dos veces el tamao de fuente del elemento padre. En este caso, BODY sera muy
probablemente el elemento padre, y definira posiblemente un tamao de fuente mdium, mientras que el tamao
de fuente para el encabezado de nivel uno aplicado por IE probablemente sera considerado xx-large.
Considerando estos defectos, los autores deberan tener cuidado al usar valores de porcentaje para font-size, y
probablemente deberan evitar unidades em y ex para esta propiedad.
Font (Fuente) // declaracin en una sola lnea

Sintaxis: font: <valor>
Valores posibles: [ <font-style> || <font-variant> || <font-weight>]? <font-size>[ /<line-height>]? <familia de
fuente>
Valor inicial: No definido
Heredado: Si
La propiedad font puede usarse como una forma rpida para las diferentes propiedades de fuentes, as como para
line-height (altura de lnea).
Por ejemplo,
p { font: italicbold 12pt/14pt Times, serif }
Especifica prrafos con negrita (bold) e itlica (italic), fuente Times o serif con un tamao de 12 puntos y una
altura de lnea de 14 puntos.
Atributos de color
El atributo color, permite modificar el color de las tipografas
Color
Sintaxis: color: <color>
Valor inicial: Determinado por el navegador
Heredado: Si
La propiedad color permite especificar el color de un elemento.
Algunos ejemplos de reglas de color:
#contenidoDeLaClase h1{ color: blue }
h2 { color: #000080 }
h3 { color: #0c0 }
UNIDAD 2 - Diagramacin Bsica

Etiqueta div
Las etiquetas div, son elementos de bloque, que nos permiten estructurar el contenido del documento en bloques,
cada uno de los cuales cumple alguna funcin especfica: encabezado, pie, men izquierdo, men derecho, zonas de
contenidos, etc.
A cada uno de los bloques corresponder un tag DIV, que siempre deber tener un atributo id para que
podamos referirnos a l desde un selector de elementos nicos en la hoja de estilos.
La etiqueta div es especfica para la diagramacin de nuestros archivos, y debe ser utilizada en lugar de las tablas.
Por su condicin de elemento de bloque las etiquetas div, siempre se ubicaran una debajo de la otra ocupando el
100% de ancho, en el mismo orden en el cual aparecen el en flujo normal de documento HTML.
Ejemplo:
<div id=caja></div>
Por qu reemplazar las tablas por etiquetas div u otras etiquetas

semnticas
Al usar tablas para diagramar un sitio web, mezclamos presentacin con contenido, por lo que el ancho de banda
necesario (y el tiempo de carga) es mucho mayor de lo necesario, ya que por cada pgina visitada, el usuario debe
cargar no solo el "contenido", sino la presentacin completa (tablas, fondos, estilos) nuevamente.
Por otro lado, al momento de redisear un sitio es mucho ms difcil de lo necesario. Debido a que las tablas se
pueden ver en la pantalla de un nico modo, si luego queremos cambiar el diseo de un sitio entero, deberemos
cambiar cada tabla de cada una de las pginas del sitio. No es algo muy prctico que digamos. Con un sitio
XHTML y CSS, lo nico que necesitamos cambiar y subir por FTP es la hoja de estilos (un solo archivo).
Las tablas no ayudan a acceder al contenido del sitio a usuarios con discapacidades. Algo que parezca visualmente
ordenado en la pantalla, puede ser ledo por un lector de pantalla en un orden (el de las celdas de la tabla) que
puede no ser el lgico. Muchos pases (entre ellos Espaa, una de las principales fuentes de trabajo para los
latinoamericanos) ya tienen legislacin que obliga a hacer sitios accesibles.
Muchas personas visitan sitios web desde sus palms y telfonos celulares, y no tienen espacio suficiente en sus
pequeas pantalla para el ancho forzado de una tabla. Un sitio bien realizado en CSS escala perfectamente y
muestra el contenido secuencialmente, para que pueda ser ledo en "bloques lgicos" (cada DIV) en una pequea
pantalla.
Las tablas son muy complejas de comprender dentro del cdigo HTML para nosotros mismos!. Antes an de haber
puesto ningn contenido dentro de ellas, ya tenemos tres niveles de tabulado (la tabla, la fila y el td). Ni hablar con
tablas anidadas...
Las tablas se posicionan peor en los buscadores. Usando un tpico men de navegacin ubicado en un td a la
izquierda del contenido, el men ser ledo al principio por el motor de bsqueda, y muchos motores de bsqueda
no irn ms all, ya que solo leen una determinada cantidad de caracteres, y si leen todos, dan ms relevancia a lo
ubicado cerca del comienzo.
Las tablas demoran ms en mostrarse que los DIVs de CSS. Esto es muy notorio para usuarios de Explorer, que
espera a leer el "cierre" de la tabla antes de mostrar nada. Como toda la pgina completa puede constar de una
nica gran tabla, hasta que no se carga todo el contenido nada aparece en la pantalla. En cambio, los DIVs son
pequeos bloques que van apareciendo rpidamente uno tras otro.
Selectores de id
Como ya vimos el captulo anterior, los selectores de id, se utilizan para crear reglas de estilo para elementos
nicos,
Recordemos su sintaxis
#menu {
...
}
Luego, el cdigo XHTML donde aparezca ese elemento nico sera as:
<div id="menu">Este es el menu</div>
Estos selectores son los ms adecuados para trabajar con las etiquetas div, ya que cada bloque de contenido es
nico y diferente del resto.
Atributos de tamao
Cuando trabajamos con etiquetas div, generalmente utilizamos atributos de tamao,
Ancho y altura, que sirven para determinar que porcin quiero que ocupe la caja como los que veremos a
continuacin.
Width (ancho)
Para establecer el ancho de un elemento utilizamos el atributo width, cuyo valor puede ser fijo o variable.
Ejemplos:
width: 150px; o width: 50%;
en el caso del valor porcentual, el mismo se corresponde con el elemento padre es decir el elemento que
contenedor, en el caso de estar hablando de un elemento que no est contenido por otro, dicho porcentaje se
corresponde entonces con el ancho de la etiqueta body, que ocupa el 100% del ancho de la pantalla.
Height (alto)
El atributo height, se comporta exactamente igual que el anterior, pero sirve lgicamente para determinar la altura
de un elemento.
height: 50%; o height: 300px;
Atributos de fondo
Los atributos de fondo, permiten modificar las propiedades de los fondos de los elementos as como tambin incluir
imgenes de fondo.
Background-color (color de fondo)

Sintaxis: background-color: <valor>
Valores posibles:<color> | transparent
Valor inicial:transparent
Heredado: No
La propiedad background-color establece el color del fondo de un elemento.
Por ejemplo:
body { background-color: white }
h1 { background-color: #000080 }
Para ayudar a evitar conflictos con hojas de estilo del usuario, siempre que use background-color debera
especificar background-image. En la mayora de casos, es adecuado background-image: none.
Los autores tambin pueden usar la forma rpida de la propiedad background, que est mejor soportada que la
propiedad background-color.
Background Image (Imagen de fondo)

Sintaxis: background-image: <valor>
Valores posibles:<url> | none
Valor inicial:none
Heredado: No
La propiedad background-image establece la imagen de fondo de un elemento.
Por ejemplo:
body { background-image: url(/images/foo.gif) }
p { background-image: url(http://www.htmlhelp.com/fondo.png) }
Cuando se define una imagen de fondo (backgroundimage), tambin debera definirse un background color (color
de fondo) similar para aquellos que no cargan las imgenes.
propiedad background-image.
Background-repeat (Repetir fondo)

Sintaxis: background-repeat: <valor>
Valores posibles:repeat | repeat-x | repeat-y | no-repeat
Valor inicial:repeat
Heredado: No
La propiedad background-repeat determina cmo se repite la backgroundimage (imagen de fondo) especificada. El
valor repeat-x repetir la imagen horizontalmente mientras que el valor repeat-y repetir la imagen verticalmente.
Por ejemplo:
body { background: white url(caramelo.gif);
background-repeat: repeat-x }
En el ejemplo de arriba, la imagen solo ser organizada en mosaico horizontal.
propiedad background-repeat.
Background-attachment (Fijacin de fondo)

Sintaxis: background-attachment: <valor>
Valores posibles: scroll | fixed
Valor inicial:scroll
Heredado: No
La propiedad background-attachment determina si la backgroundimage (imagen de fondo) especificada se

desplazar con el contenido o ser fija con respecto al lienzo.
Por ejemplo, la lnea siguiente especifica una imagen de fondo fija:
body { background: white url(candybar.gif);
background-attachment: fixed }
propiedad background-attachment.
Background-position (Posicin del fondo)
Sintaxis: background-position: <valor>

Valores posibles: [<porcentaje> | <longitud>]{1,2} | [top | center | bottom] || [left | center | right]
Valor inicial: 0% 0%
Se aplica a: Elementos de nivel bloque y elementos reemplazados
Heredado: No
La propiedad background-position da la posicin inicial de la backgroundimage (imagen de fondo) especificada.
Esta propiedad solo puede aplicarse a elementos de nivel bloque y a elementos reemplazados.
(Un elemento reemplazado es aquel del que slo se conocen las dimensiones intrnsecas; los elementos
reemplazados HTML incluyen IMG, INPUT, TEXTAREA, SELECT, y OBJECT.)
La forma ms sencilla de asignar una ubicacin de fondo es con palabras clave:
l Palabras clave horizontales (left, center, right)
l Palabras clave horizontales verticales (top, center, bottom)
Tambin pueden usarse porcentajes y longitudes para asignar la posicin de la imagen de fondo. Los porcentajes
son relativos al tamao del elemento. Aunque se permiten longitudes, no se recomiendan debido a su inherente
debilidad al tratar con diferentes resoluciones de pantalla.
Al usar porcentajes o longitudes, se especifica primero la posicin horizontal y luego la vertical. Un valor como
20% 65% especifica que la imagen se colocar 20% a la derecha y 65% abajo del elemento. Un valor como 5px
10px especifica que la esquina superior izquierda de la imagen se colocar 5 pixels a la derecha y 10 pixels abajo
de la esquina superior izquierda del elemento.
Si solo se da el valor horizontal, la posicin vertical ser 50%. Se permiten combinaciones de longitudes y
porcentajes, ya que son posiciones negativas. Por ejemplo, 10% -2cm est permitido. Sin embargo, porcentajes y
longitudes no pueden combinarse con palabras clave.
Las palabras clave son interpretadas como sigue:
l top left = left top = 0% 0%

l top = top center = center top = 50% 0%
l right top = top right = 100% 0%
l left = left center = center left = 0% 50%
l center = center center = 50% 50%
l right = right center = center right = 100% 50%
l bottom left = left bottom = 0% 100%
l bottom = bottom center = center bottom = 50% 100%
l bottom right = right bottom = 100% 100%
Si la imagen de fondo est fija en relacin al lienzo, la imagen es colocada en relacin al lienzo y no al elemento.
propiedad background-position.
Background (Fondo) (declaracin de una sola lnea)
Sintaxis: background: <valor>

Valores posibles:<background-color> || <background-image> || <background-repeat> || <background-attachment> ||
<background-position>
Valor inicial: No definido
Heredado: No
La propiedad background es una forma rpida para las propiedades ms especficas relacionadas con background.
Algunos ejemplos de declaraciones de background:
body { background: white url(http://www.htmlhelp.com/foo.gif) }
#contenidoDeLaClase h1{ background: #7fffd4 }
p { background: url(../fondos/peon.png) #f0f8ff fixed }
table { background: #0c0 url(hojas.jpg) no-repeat bottom right }
Un valor no especificado recibir el valor inicial. Por ejemplo, en las tres primeras reglas de arriba, la propiedad
background-position ser establecida a 0% 0%.
Para ayudar a evitar conflictos con hojas de estilo del usuario, siempre deberan especificarse juntas las propiedades
background y color.
Diagramacin de una columna

Es hora de comenzar a diagramar nuestra pgina, para ello comenzaremos con una diagramacin simple de una
columna como se muestra en la imagen de referencia
Qu debemos hacer?
-En el cuerpo del archivo HTML insertaremos:
<div id="encabezado">Este es el encabezado.</div>

<div id="cuerpo">Este es el cuerpo.</div>
<div id="pie">Este es el pie.</div>
Luego en la hoja de estilo debemos crear cada una de las reglas de estilo para los id utilizados
Ejemplo:
#encabezado {
width:700px;
height:200px;
background-color:#ff2200;
}
Eso es todo simple no? Ahora avancemos un poco ms para conseguir diagramaciones ms complejas con dos y
tres columnas.
Diagramacin de una columna de dos y tres columnas por flotacin

Casi siempre vamos a necesitar desarrollar diseos con dos o tres columnas donde podamos incluir nuestros
contenidos, como se muestra en la imagen de referencia
para ello existen dos alternativas posibles que permiten alterar el flujo normal del HTML logrando ubicar un
elemento div junto a otro, una posibilidad es, desarrollar una estructura flotante, y la otra alternativa es trabajar con
posicin como veremos en la prxima unidad; a continuacin aprenderemos desarrollar estructuras flotantes.
Utilizacin del atributo Float

El atributo float sirve para alinear un elemento, junto a otro, o bien hacer que el texto de alrededor del mismo se
fluja entorno a dicho elemento.
Sus posibles valores son left (para alinear el elemento a la izquierda) y right (para alinearlo a la derecha).
Un elemento con float debe tener definida su anchura, de no ser as, no ser tratado como tal y la regla no se
aplicar.
Los elementos con el atributo float, no forman parte del flujo normal del documento HTML, razn por la cual los
elementos NO Flotantes que estn por debajo de estos se vern afectados en su ubicacin en el espacio.
Utilizacin del atributo Clear

El estilo "clear" se utiliza conjuntamente con float. Utilizamos este estilo cundo queremos que elementos que
tienen cerca un elemento flotante (mediante float) dejen de alinearse junto a l.
Sus posibles valores son left (el elemento no permite flotantes a su izquierda ), right (el elemento no permite
flotantes a su derecha ) o both (el elemento no permite flotantes a ningn lado).
Anidamiento de divs
Si bien no es la ms recomendado, en muchas ocasiones deberemos trabajar con divs anidados, es decir con un div
dentro de otro, para llegar a las diagramaciones deseadas, a continuacin un ejemplo de div anidado:
<div id=contenido>
<div id=logo></div>
</div>
En este ejemplo el div logo, est contenido dentro del div con id contenido, por ende decimos que el div con id
contenido es el padre del div con id logo y lgicamente el div de id logo es hijo de contenido.
Selector universal
El selector universal, escrito "*", se corresponde con el nombre de cualquier tipo de elemento. Es equivalente con
cualquier elemento en la estructura del documento.
En la prctica es difcil que un mismo estilo se pueda aplicar a todos los elementos de una pgina; pero lo
utilizamos siempre para formatear a 0 los mrgenes y los rellenos, atributos que suelen interpretarse por defecto de
manera diferente por los navegadores.
De la siguiente forma eliminamos el margen y el relleno de todos los elementos HTML
*{
margin: 0;
padding: 0;
}
Por otro lado, el selector universal, Se aplica a algunos "hacks" para IE o en combinacin con otros selectores, tema
que veremos ms adelante en el curso.
UNIDAD 3 - Diagramacin Avanzada

Modelo de caja
El modelo de caja de CSS describe las cajas rectangulares que son generadas por los elementos en la estructura del
documento y compuestas de acuerdo al modelo de formato visual.
Cada caja tiene un rea de contenido (ej., texto, una imagen, etc.) y las reas circundantes opcionales de padding,
border y margin; el tamao de cada rea es especificado por las propiedades que se definen abajo. El siguiente
diagrama muestra cmo se relacionan estas reas y la terminologa usada para referirse a las partes de margin,
border y padding:
Representacin grfica de la Caja y sus propiedades.
Atributos de la caja
Como vimos en el punto anterior, existen algunos atributos que son propios para el manejo de las cajas, cuyas
caractersticas especficas, veremos a continuacin.
Estos tres atributos, se comportan de forma similar y permiten manejar por separado cada uno de los lados de la
caja, de forma que podemos crear reglas de estilos que combinen distintas propiedades para una caja utilizando
todos los lados o solo algunos.
Margin (margen)
Es el espacio que hay entre el borde de una caja y otra caja. En el grfico es el espacio representado con el color
verde.
Al igual que el resto de los atributos de la caja, posee cuatro direcciones, Top, Right, Bottom y Left.
Los valores admitidos para este atributo son numricos y pueden estar expresados en distintas unidades y pueden
ser positivos o negativos
Ejemplos:
margin-top: 30px;
margin-right: 20px;
margin-bottom: 3em;
margin-left: 2em;
Borde (Border)
Es una lnea situada en el lmite de la caja, la misma puede tomar diferentes anchos y estilos.
El atributo de borde requiere tres valores, estilo, color y grosor
Los valores admitidos para este atributo son numricos y pueden estar expresados en distintas unidades y pueden
ser positivos o negativos
border-width
Puede marcarse en pxeles o con sus tres medidas pre-seteadasthin | medium | thick
Ejemplos
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-color
Puede indicarse que el elemento tenga color, sea transparente o que herede el color del elemento anterior. [ color |
transparent | inherit ]
Puede indicarse de 3 formas distintas, con el cdigo de color hexadecimal, tanto su forma corta como larga con la
clusula rgb, tanto en porcentajes como en nmeros enteros del 0-255 con el nombre del color.
Ejemplos
border-top-color: #rgb;
border-right- color: #rrggbb;

border-bottom- color: rgb(255,0,0);
border-left- color: rgb(100%, 0%, 0%);
border- color: red #000000 #333 rgb(50%,30%,20%);
border-style
El estilo del borde se puede elegir entre un listado de 10 opciones.
Es el tipo de lnea que vamos a utilizar para cada uno de los lados.
border-top-style: ridge;
border-right- style: inset;
border-bottom- style: outset;
border-left- style: solid;
Las diferentes opciones de lnea son:
none
Sin borde, el ancho del borde es cero.
hidden
Igual que none.
dotted
El borde es una serie de puntos.
dashed
El borde es una serie segmentos de lnea corta (guiones).
solid
El borde es una lnea simple.
double
El borde son dos lneas slidas, el ancho de cada lnea y el espacio entre ellas es igual al valor del ancho de borde.
groove
El borde se ve como si fue cavado en la pgina.
ridge
El borde se ve como si se estara saliendo para afuera de la pgina. Opuesto a groove.
inset
El borde da el aspecto de que la caja est hundida en la pgina.
outset
El borde da el aspecto de que la caja esta sobresalida de la pgina.
Relleno (Padding)
Es el espacio que hay entre el contenido y el borde de la caja. En el grfico anterior, es el espacio representado con
el color lila.
Los valores admitidos para este atributo son numricos y pueden estar expresados en distintas unidades.
Ejemplos
padding-top: 10px;
padding-right: 2em;
padding-bottom: 3em;
padding-left: 2em;
Escritura resumida (declaracin de una sola lnea)

Algunos atributos poseen lo que llamamos escritura resumida, es decir la declaracin de una sola lnea, esta forma
de escritura permite ahorrar lneas de cdigo y hacer ms fcil y rpida la edicin de nuestras reglas de estilo.
Declaracin una lnea para el padding

Utilizando el atributo padding, podemos optimizarlo de las siguientes formas
padding: 20px;
Aplica en este ejemplo, 20px de padding en todos los lados
padding: 20px 10px;
Aplica en este ejemplo, 20px de padding en los lados top y bottom y 10px a los lados right y left.
padding:10px 20px 5px 15px;
Aplica en este ejemplo, un valor de padding distinto en cada uno de los lados de la caja, el orden en que se aplican
es
padding: top right bottom left;
Esta es la forma ms conveniente para utilizar el atributo de padding
Declaracin una lnea para el margin

De igual manera que el punto anterior, podemos optimizar el uso del atributo margin de las siguientes maneras:
margin: 20px;
Aplica en este ejemplo, 20px de margin en todos los lados
margin: 20px 10px;
Aplica en este ejemplo, 20px de margin en los lados top y bottom y 10px a los lados right y left.
margin:10px 20px 5px 15px;
Aplica en este ejemplo, un valor de margin distinto en cada uno de los lados de la caja, el orden en que se aplican
es
margin: top right bottom left;
Esta es la forma ms conveniente para utilizar el atributo de margin
Declaracin una lnea para el borde

El atributo borde tambin puede ser optimizado utilizando declaraciones abreviadas
border-top: ancho estilo color;
border-right: ancho estilo color;
border-bottom: ancho estilo color;
border-left: ancho estilo color;
border: ancho estilo color;
En este caso se aplica a los cuatro bordes de la caja.
Ejemplo:
border: 1px solid #FF2200;
Diagramacin avanzada con posicin

Para crear diseos con diagramaciones ms complejas deberemos utilizar el atributo Position, que permite ubicar
los divs en el lugar exacto de la pantalla que deseemos.
Atributos de posicin
Los divs pueden posicionarse en la pantalla de 4 maneras diferentes:
Posicionamiento Esttico
Posicionamiento Absoluto
Posicionamiento Relativo
Posicionamiento Fijo.
Para todos los valores menos "static" podemos modificar la posicin del elemento por medio de las propiedades
top, bottom, left y right.
Static (esttico)
Los elementos con position:static, que es el valor por defecto de todos los elementos, no estarn posicionados. Su
posicin en la ventana estar determinada por dnde ocurren en el documento, es decir "Como caen".
Por lo tanto, que el valor static solo sirve para sobrescribir un valor previo de otro tipo.
Relative (relativo)
Los elementos con position:relative estn posicionados relativos a ellos mismos. Esto suena raro, pero puede ser
til a veces.
Si damos un valor a cualquier de las cuatro propiedades de los costados, el elemento relativo se mueve en relacin
a la posicin que habra ocupado si hubiese estado posicionado estticamente.
Si le ponemos position:relative a un elemento, sin dar valores para los costados, el elemento termina estando donde
habra estado si le hubisemos puesto position:static o si no le hubisemos puesto ninguna propiedad.
Si le ponemos top:10px, el elemento se mueve 10 pxeles desde su borde superior. Esto significa que se mueve
hacia abajo. Un valor negativo mueve el elemento en la direccin opuesta, as dara el mismo resultado poner
bottom:-10px. Esto quiere decir que no sirve de nada poner valores top y bottom, o left y right. Sin embargo, puede
ser que alguien quiera dar valores para top y left si quiere mover el elemento vertical y horizontalmente.
Ahora bien, esto no sirve de mucho para crear columnas, porque los elementos posicionados relativamente siguen
en el flujo del documento en la posicin donde estaban originalmente. Siguen ocupando espacio, pero no donde
aparecen, sino donde habran estado si hubiesen estado posicionados estticamente.
Qu significa esto? El posicionamiento relativo es mayormente til para mover un elemento algunos pxeles en
alguna direccin, o quedar un hueco en la pgina. Sin embargo, existe otra utilidad para esta propiedad que es
mucho ms importante: Un elemento posicionado relativamente cuenta cmo posicionado, aunque no se mueva ni
un solo pxel. Y esto es importante entre otras cosas porque un elemento relativo sirve para contener a otros, lo que
veremos a continuacin...
Absolute (absoluto)
Cuando la gente se refiere al posicionamiento, CSS-P o capas, lo que normalmente quieren decir es elementos con
position:absolute. Las propiedades top, bottom, left y right especifican la distancia del borde correspondiente. Pero
de qu?
Irnicamente, los elementos posicionados absolutamente son relativos. Si, han ledo correctamente. Un elemento
posicionado absolutamente est posicionado relativamente a otro elemento, llamado bloque contenedor.
El bloque contenedor de un elemento posicionado absolutamente es su ancestro (parent) posicionado ms cercano,

o si no hay tal elemento, el bloque contenedor inicial del documento (body o html).
Por ancestro posicionado quiero decir un elemento estructuralmente superior cuya propiedad de position es
absolute, fixed o relative. Asi que aqu est un uso importante para el posicionamiento relativo del que hablamos
antes. Definiendo position:relative para un elemento, sin moverlo, podemos establecer un nuevo contexto para sus
hijos posicionados absolutamente. Suena fcil, no?
Pero si no hay ancestro posicionado? Ah es donde entra el llamado bloque contenedor inicial. El estndar CSS
dice que esto lo elige el navegador. El estndar tambin dice que podra estar relacionado con la ventana de
visualizacin de la pgina. En la prctica esto significa que podra ser o el elemento BODY o el HTML.
Elementos posicionados absolutamente estn completamente eliminados del flujo del documento. Esto no significa
que no ocupan espacio. O, para ponerlo de otra manera, no afectan a los elementos subsiguientes. Por lo tanto
debemos asegurarnos de que nuestro contenido no termine debajo de un elemento posicionado absolutamente, a
menos que este sea el efecto que deseamos, obviamente.
Un elemento posicionado absolutamente con top:100px queda colocado tal que su borde superior esta 100 pxeles
sobre el borde de su bloque contenedor. En los navegadores que soportan CSS se pueden especificar valores para
los cuatro bordes y el navegador se encarga de calcular la altura y anchura. Tristemente esto no ocurre con Internet
Explorer, asi que es casi siempre necesario especificar al menos la anchura de un elemento posicionado
absolutamente.
Es perfectamente legal especificar valores negativos para los valores de los bordes, pero hay que tener cuidado, hay
que estar muy seguros de cul es el bloque contenedor. De otra manera existe el riesgo de que el contenido del
elemento posicionado absolutamente quede parcial o totalmente fuera de la pantalla.
Fixed
Dijimos antes que el posicionamiento absoluto es relativo, asi que no debera sorprender que el posicionamiento
fijo sea absoluto.
Un elemento con position:fixed est posicionado absolutamente con respecto a la ventana del navegador. El
posicionamiento fijo es similar al posicionamiento absoluto, pero tiene sus diferencias. La posicin siempre es
referente a la ventana del navegador; la ventana del navegador siempre es el bloque contenedor. El elemento no
est en el flujo del documento y se queda en su lugar aunque el usuario se mueva (scroll) por el documento.
Desafortunadamente Internet Explorer no soporta posicionamiento fijo. Hay otras maneras de imitar el
funcionamiento del posicionamiento fijo, pero esta propiedad no es tan til como parece. Si, es una manera de tener
un men que nunca se mueve, pero la mayora de los usuarios esperan que todo se mueva con la pgina. Ya hemos
visto el poco uso de los frames como para creer que esta propiedad seguir su mismo destino...
En resumen
El posicionamiento absoluto es til para tener un diseo con varias columnas, siempre y cuando se sepa cul ser la
ms larga. Ya que los elementos posicionados absolutamente estn fuera del flujo del documento, no afectan a los
elementos subsiguientes. Por eso es difcil tener un pie de pgina que ocupe toda la anchura de la pgina y que
aparezca despus de todas las columnas.
As como en todos los elementos del diseo web, es conveniente usar unidades relativas, as el diseo se puede
adaptar a todos los tamaos de pantalla. Por ejemplo, el valor de left debera estar especificado en em o en % y no
en px.
Si se especifica una anchura para un elemento posicionado absolutamente, explcitamente por medio de width en
porcentajes o implcitamente por medio de left y right, el estndar dice que debera ser calculado relativo al bloque
contenedor. Internet Explorer y Opera, ambos, hacen esto mal y usan la anchura del elemento padre como base para
sus clculos. Los navegadores basados en Gecko como Mozilla y Firefox lo hacen correctamente.
Con todos los tipos de posicionamiento, incluyendo relativo, deberan especificar los margin y padding
explcitamente, especialmente si se debe ver igual en todos los navegadores. Los navegadores tienen distintos
valores por defecto de estas propiedades.
Cuando elementos posicionados se superponen, podemos controlar el orden de apilamiento con la propiedad zindex. El elemento con el mayor z-index es el que queda ms arriba. Desafortunadamente esto no es tan simple
como parece, ya que cada bloque establece su contexto para el z-index. As que para poner un elemento encima de
otro elemento con un bloque contenedor diferente hay que incrementar el z-index del bloque contenedor del primer
elemento. En diseos complicados pueden surgir combinaciones imposibles, si se quiere apilar tres elementos
donde el del medio tiene un bloque contenedor diferente al de los otros dos. Esto, al parecer, es imposible.
El posicionamiento absoluto se usa tradicionalmente con elementos DIV, pero es perfectamente vlido usarlos con
otros elementos.
Diagramacin centrada
Es muy comn que deseemos realizar un diseo cuya diagramacin est centrada horizontalmente en la pantalla,
hacerlo es muy simple, debemos trabajar con mrgenes automticos, para que el navegador los calcule dependiendo
de la resolucin de pantalla, para ello debemos usar las siguientes declaraciones
En el HTML:
<div id="caja"></div>
En el CSS
#caja {
margin: auto;
height: 600px;
width: 950px;
}
Atributo de Z-index
La propiedad z-index sirve para especificar el orden de los elementos en el eje z, o dicho de otra forma, qu
elementos van encima de otros.
Solamente funciona cuando se ha definido en la misma regla la propiedad position, con los valores absolute o
relative.
Valores de la propiedad z-index:
auto: la posicin asignada por defecto.
numrico: en este caso el valor es un nmero entero, todo lo grande que se quiera, que podr ser positivo o
negativo.
Para que un elemento quede por encima de otro, el valor de su z-index ha de ser mayor.
Un ejemplo:
div#capa1 {position:relative;z-index:1;}
div#capa2 {position:absolute;z-index:3;}En el ejemplo hay dos capas. Puesto que la segunda (div#capa2) tiene un
valor de z-index mayor que la primera (div#capa1) ser esa la que quede por encima.
UNIDAD 4 - Barras de navegacin

Listas
En HTML, utilizamos listas para mostrar elementos en forma ordenada, tenemos dos tipos de listas que veremos a
continuacin:
Listas Ordenadas
Las listas ordenadas, implican orden jerrquico se muestran grficamente con nmero o letra
En el cdigo HTML veremos
<ol>
<li> item </li>
<li> item </li>
<li> item </li>
<li> item </li>
</ol>
en el navegador veremos el siguiente formato visual:
Listas desordenadas
Las listas ordenadas se muestran grficamente con una vieta
En el cdigo HTML veremos
<ul>
<li> item </li>
<li> item </li>
<li> item </li>
<li> item </li>
</ul>
En el navegador veremos el siguiente formato visual:
Atributos para las listas

Existen algunos atributos de CSS que son especficos para las listas y que nos permiten modificar su aspecto bsico
como veremos a continuacin;
,
Los valores posibles de son disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha, upper-alpha,
none.
Y su utilidad es especificar el tipo de vieta u objeto que antecede a cada elemento de una lista.
list-style-image,
Los valores posibles de list-style-image son url o none.
La sintaxis es: url (ruta/al/archivo).
Esta propiedad permite reemplazar las vietas predeterminadas por otras definidas por nosotros, que simplemente
son una imagen.
list-style-position,
Finalmente los valores de list-style-position son inside o outside.
Esta propiedad permite establecer si el elemento de lista se alinea a partir del segundo tem justo debajo del
primero, o si se corre a la izquierda y se ubica debajo de la vieta.
La siguiente hoja de estilo, por ejemplo, define reglas de estilo para los elementos de listas ordenadas <ol> y listas
desordenadas <ul>:
ul { : square; list-style-image: url(mi.gif)}
ol { : lower-alpha}
La regla <OL> est establecida para utilizar letras minsculas para cada elemento de lista (a, b, c, etc.), mientras
que la regla <UL> est establecida para utilizar una imagen como vieta. Si la imagen no se puede cargar, el
cdigo indica que el delimitador de elemento de lista square debe utilizarse en su lugar.
Si la propiedad list-style-position est fijada en inside, se muestra el texto de cada tem directamente debajo del
delimitador de lista.
Si el valor est fijado en outside, el texto se alinear bajo el primer carcter del elemento de lista, que est a la
derecha del delimitador:
Posicin exterior (outside):

* Item de lista 1
segunda lnea de tem de la lista
Posicin interior (inside):
* Item de lista 1
segunda lnea de tem de la lista
Declaracin de una sola lnea

Como en los ejemplos citados anteriormente, los atributos de listas se pueden escribir con la declaracin de una
sola lnea de la siguiente forma:
ul
{
list-style: square inside url('arrow.gif')
}
Creacin de barras de navegacin

Las listas son muy a menudo utilizadas para organizar mens; podemos crear barras de navegacin con diseos
variados utilizando colores e imgenes, y as lograr una barra de navegacin simple, vistosa y accesible.
Probaremos un men realizado ntegramente con propiedades de CSS que se ver como en la imagen de referencia.
En el HTML veremos
<ul>
<li><a target="_blank" href="home.html">HOME</a></li>
<li><a target="_blank" href="portfolio.html">PORTFOLIO</a></li>
<li><a target="_blank" href="servicios.html">SERVICIOS</a></li>
<li><a target="_blank" href="casos.html">CASOS</a></li>
<li><a target="_blank" href="contacto.html">CONTACTO</a></li>
</ul>
En el archivo de estilos veremos
li {
float:left;
width:100px;
height:30px;
background-image:url(bg.png);
background-repeat:no-repeat;
margin:5px;
padding: 0px;
text-align:center;
:none;
}
Selectores descendientes
En ocasiones vamos a necesitar aplicar una regla de estilo para una etiqueta determinada por ejemplo H1, pero
podemos encontrarnos con el caso donde tambin necesitamos que algunos elementos H1, tengan caractersticas
diferentes, para ello podemos resolverlo utilizando los que llamamos selectores descendientes.
Ya que necesitaremos selectores que se correspondan con un elemento que es el descendiente de otro elemento en
la estructura del documento (ej., "Que equivalga a aquellos elementos EM que estn contenidos en un elemento
H1").
Los selectores de descendientes expresan tal relacin dentro de un patrn. Un selector de descendiente se compone
de dos o ms selectores separados por un espacio en blanco. Un selector de descendiente de la forma "A B"
equivale cuando un elemento B en un descendiente arbitrario de algn elemento antepasado A.
Ejemplos:
Por ejemplo, considere las siguientes reglas:
h1 { color: red }
em { color: red }
Aunque la intencin de estas reglas es agregar nfasis al texto cambiando su color, el efecto se perder en un caso
como:
<H1>El ttulo es <EM>muy</EM> importante</H1>
Resolvemos este caso complementando las reglas anteriores con una regla que asigna un color azul al texto siempre
que un EM aparezca en cualquier lugar dentro de un H1:
h1 { color: red }
em { color: red }
h1 em { color: blue }
La tercer regla se corresponder con em en el siguiente fragmento:
<h1> Este <span class="myclass">ttulo es <em>muy</em> importante</span></H1>
Pseudo Elementos y Pseudo clases

En CSS2, el estilo se atribuye a un elemento basado en su posicin dentro de la estructura del documento. Este
sencillo modelo es suficiente para muchos casos, pero algunos temas comunes en la edicin pueden no ser posibles
por medio de la estructura del documento. Por ejemplo, en HTML 4.0, ningn elemento se refiere a la primera lnea
de una prrafo y, por consiguiente, ningn selector CSS simple puede referirse a ella.
CSS introduce los conceptos de pseudo-elementos y pseudo-clases para permitir aplicar el formato basado en
informacin que est fuera de la estructura del documento.
Los pseudo-elementos crean abstracciones acerca de la estructura del documento ms all de aquellas especificadas
por el lenguaje del documento. Por ejemplo, los lenguajes de documento no ofrecen mecanismos para acceder a la
primera letra o a la primera lnea del contenido de un elemento. Los pseudo-elementos de CSS permiten a los
diseadores de hojas de estilo referirse a esta informacin inaccesible por otros medios. Los pseudo-elementos
tambin pueden proporcionar a los diseadores de hojas de estilo un modo de asignar estilos a un elemento que no
existe en el documento fuente (ej., los pseudo-elementos y :after permite acceder al contenido generado).
Las pseudo-clases clasifican a los elementos basados en caractersticas ms all de su nombre, atributos o
contenido; en principio, atributos que no pueden deducirse de la estructura del documento. Las pseudo-clases
pueden ser dinmicas, en el sentido de que un elemento puede adquirir o perder una pseudo-clase a medida que el
usuario interacta con el documento. La excepcin es ':first-child', que puede deducirse de la estructura del
documento.
Ni los pseudo-elementos ni las pseudo-clases aparecen en el documento fuente o la estructura del documento.
Las pseudo-clases son permitidas en cualquier lugar dentro de un selector mientras que los pseudo-elementos slo
pueden aparecer despus del sujeto del selector.
Los nombres de los pseudo-elementos y las pseudo-clases no hacen distincin entre maysculas y minsculas.
Algunas pseudo-clases son mutuamente excluyentes, mientras otras pueden aplicarse simultneamente al mismo
elemento. En caso de reglas conflictivas, el orden de cascada normal determina el resultado.
Las aplicaciones del usuario de conformidad con HTML pueden ignorar todas las reglas con :first-line o :first-letter
en el selector o, alternativamente, puede dar soporte slo a un subconjunto de las propiedades en estos pseudoelementos.
Pseudoclases de vnculos
Las aplicaciones del usuario normalmente muestran los vnculos no visitados de un modo diferenciado de aquellos
previamente visitados. CSS proporciona las pseudo-clases ':link' y ':visited' para distinguirlos:
La pseudo-clase :link se aplica a los vnculos que an no han sido visitados.
La pseudo-clase :visited se aplica una vez que el vnculo ha sido visitado por el usuario.
Nota. Despus de cierta cantidad de tiempo, las aplicaciones del usuario pueden elegir devolver un vnculo visitado
a la condicin de (no visitado) ':link'.
Los dos estados son mutuamente excluyentes.
El lenguaje del documento determina qu elementos son las anclas de orgen de los hipervnculos. Por ejemplo, en
HTML 4.0, las pseudo-clases link se aplica a los elementos A con el atributo "href". De este modo, las siguientes
dos declaraciones CSS2 tienen un efecto similar:
A:link { color: red }
:link { color: red }
Ejemplos:
Si el siguiente link:
<A class="externo" target="_blank" href="http://out.side/">link externo</A>
ha sido visitado, esta regla:
A.externo:visited { color: blue }
provocar que sea azul.
Pseudo Clases dinmicas

Las aplicaciones del usuario interactivas a veces cambian el procesamiento en respuesta a las acciones del usuario.
CSS proporciona tres pseudo-clases para los casos comunes:
La pseudo-clase :hover se aplica mientras el usuario seala un elemento (con algn dispositivo para apuntar), pero
no lo activa. Por ejemplo, una aplicacin del usuario visual puede aplicar esta pseudo-clase cuando el cursor (el
puntero del ratn) se mueve por encima de una caja generada por el elemento. Las aplicaciones del usuario que no
ofrecen soporte a los medios interactivos no tienen que apoyar esta pseudo-clase. Algunas aplicaciones del usuario
con conformidad que soportan medios interactivos pueden no ser adecuadas para soportar esta pseudo-clase (ej.,
lpices pticos).
La pseudo-clase :active se aplica mientras un elemento est siendo activado por el usuario. Por ejemplo, el lapso
durante el cual el usuario presiona el botn del ratn y lo suelta.
La pseudo-clase :focus se aplica mientras un elemento tiene el foco (acepta eventos del teclado u otras formas de
entrada de texto).
Estas pseudo-clases no son mutuamente excluyentes. Un elemento puede recibir varias de ellas al mismo tiempo.
CSS no define qu elementos pueden estar en los estados anteriores o cmo se ingresa y se sale de los estados.
Mediante el uso de scripts se puede decidir si los elementos reaccionan a los eventos del usuarios o no, y los
distintos dispositivos y aplicaciones del usuario pueden tener diferentes maneras de apuntar o activar los elementos.
Las aplicaciones del usuario no son obligadas a redibujar el documento en uso a causa de las transiciones de las
pseudo-clases. Por ejemplo, un hoja de estilo puede especificar que la propiedad 'font-size' de un vnculo :active
debe ser mayor que la de un vnculo inactivo, pero como esto puede ocasionar que las letras cambien de posicin
cuando el lector selecciona el vnculo, una AU puede ignorar la regla de estilo correspondiente.
Ejemplos:
A:link
{ color: red }
/* vnculos no visitados */
A:visited { color: blue } /* vnculos visitados */

A:hover { color: yellow } /* el usuario seala el vnculo */
A:active { color: lime } /* vnculos activos */
Observe que A:hover debe ir despus que las reglas A:link y A:visited, de otro modo las reglas de cascada
ocultarn la propiedad 'color' de la regla A:hover. Tambin, debido a que A:active est ubicada despus de
A:hover, el color activo (lime) ser aplicado cuando el usuario active y seale el elemento A.
Ejemplos:
Un ejemplo de combinacin de pseudo-clases dinmicas:
A:focus { background: yellow }
A:focus:hover { background: white }
El ltimo selector equivale a los elementos A que se encuentran en la pseudo-clase :focus y en la pseudo-clase
:hover.
Para informacin acerca de la representacin del foco en los contornos, consulte por favor la seccin sobre foco
dinmico en los contornos.
Nota. En CSS1, la pseudo-clase ':active' era mutuamente excluyente con ':link' y ':visited'. Este ya no es el caso. Un
elemento puede ser ambos, ':visited' y ':active' (o ':link' y ':active') y la reglas normales de cascada determinan qu
propiedades se aplican
Pseudo elementos
El pseudo-elemento :first-line
El pseudo-elemento :first-line aplica estilos especiales a la primera lnea de un prrafo.
Por ejemplo:
P:first-line { text-transform: uppercase }
La regla anterior significa "convertir las letras de la primera lnea de cada prrafo en maysculas". Sin embargo, el
selector "P:first-line" no equivale a ningn elemento HTML real. Se corresponde con un pseudo-elemento que las
aplicaciones del usuario con conformidad insertarn al comienzo de cada prrafo.
Observe que la medida de la primer lnea depende de un nmero de factores, incluyendo el ancho de la pgina, el
tamao de la fuente, etc. De este modo, un prrafo HTML comn como:
<p>Este es algn prrafo largo en HTML que ser
partido en varias lneas. La primera lnea ser identificada
por una secuencia ficticia de marcas. Las otras lneas
sern tratadas como lneas comunes dentro del
prrafo.</p>
las lneas que resultan partidas como sigue:
ESTE ES ALGN PRRAFO LARGO EN HTML QUE
ser partido en varias lneas. La primer lnea ser
identificada por una secuencia ficticia de marcas.
Las otras lneas sern tratadas como lneas
comunes dentro del prrafo.
pueden ser "re-escritas" por las aplicaciones del usuario para incluir la secuencia ficticia de marcas para :first-line.
Esta secuencia ficticia de marcas ayuda a mostrar cmo se heredan las propiedades.
<p><P:first-line> Este es algn prrafo
largo en HTML que</P:first-line> ser partido
en varias lneas. La primer lnea ser identificada
por una secuencia ficticia de marcas. Las otras lneas
sern tratadas como lneas comunes dentro del
prrafo.</p>
Si un pseudo-elemento divide un elemento real, el efecto deseado a menudo se consigue con una secuencia ficticia
de marcas que cierra y reabre el elemento. De este modo, si marcamos el prrafo anterior con un elemento SPAN:
<p><span class="test"> Este es algn prrafo

largo en HTML que ser partido en varias lneas.</span>
La primer lnea ser identificada por una secuencia ficticia
de marcas. Las otras lneas sern tratadas como lneas comunes
dentro del prrafo.</P>
la aplicacin del usuario puede generar las marcas de inicio y cierre apropiadas para SPAN cuando inserta la
secuencia ficticia de marcas para :first-line.
<p><p:first-line><SPAN class="test"> Este es algn prrafo
largo en HTML que</span></p:first-line><span class="test">
ser partido en varias lneas.</span> La primer lnea ser
identificada por una secuencia ficticia de marcas. Las otras
lneas sern tratadas como lneas comunes dentro del prrafo.</p>
El pseudo-elemento :first-line slo puede ser aplicado en elementos a nivel de bloque.
El pseudo-elemento :first-line es similar a un elemento a nivel de lnea, pero con ciertas restricciones. Slo las
siguientes propiedades se aplican al pseudo-elemento :first-line: propiedades de la fuente, propiedades del color,
propiedades del fondo, 'word-spacing', 'letter-spacing', 'text-decoration', 'vertical-align', 'text-transform', 'lineheight', 'text-shadow' y 'clear'.
El pseudo-elemento :first-letter
El pseudo-elemento :first-letter puede ser usado para las "capitulares" y "capitulares cadas", que son efectos
tipogrficos de uso frecuente. Esta clase de letra inicial es similar a un elemento a nivel de lnea cuya propiedad
'float' es 'none', de otro modo es similar a un elemento flotante.
Estas son las propiedades que se aplican a los pseudo-elementos :first-letter: propiedades de la fuente, propiedades
del color, propiedades del fondo, 'text-decoration', 'vertical-align' (slo si 'float' es 'none'), 'text-transform', 'lineheight', propiedades de los mrgenes, propiedades del relleno, propiedades de los bordes, 'float', 'text-shadow' y
'clear'.
La siguiente CSS2 har una capitular cada que abarca dos lneas:
<html>
<head>
<title>capitular cada</title>
<style type="text/css">
p
{ font-size: 12pt; line-height: 12pt }
p:first-letter { font-size: 200%; font-style: italic;

font-weight: bold; float: left }
span
{ text-transform: uppercase }
</style>
</head>
<body>
<p><span>algunas</span> palabras de un artculo en un peridico.</p>
</body>
</html>
Este ejemplo sera formateado como sigue:
La secuencia ficticia de marcas es:
<p>
<span>
<p:first-letter>
a
</p:first-letter>lgunas
</span>
palabras de un artculo en un peridico.

</p>
Observe que la marca para el pseudo-elemento :first-letter es contigua al contenido (es decir, el carcter inicial),
mientras que la marca de inicio del pseudo-elemento :first-line se inserta despus de la marca de inicio del
elemento al que est asignado.

Con el propsito de conseguir el formato de las capitulares cadas tradicionales, las aplicaciones del usuario pueden
aproximar los tamaos de la fuente, por ejemplo para emparejar las lneas de base. Adems, el contorno del signo
puede ser tenido en cuenta al establecer el formato.
La puntuacin (es decir, los caracteres definidos en Unicode [UNICODE] en las clases de puntuacin "open" (Ps),
"close" (Pe) y "other" (Po)), que precede a la primera letra debe ser incluida, como en:
Los pseudo-elementos :first-letter equivalen a partes de los elementos a nivel de bloque solamente.
Algunos lenguajes pueden tener reglas especficas acerca de cmo tratar ciertas combinaciones de letras. En
alemn, por ejemplo, si la combinacin de las letras "ij" aparece al comienzo de una palabra, ambas letras deberan
ser consideradas dentro del pseudo-elemento :first-letter.
Ejemplos:
El siguiente ejemplo ilustra cmo pueden interactuar los pseudo-elementos que se superponen. La primera letra de
cada elemento P ser verde con una tamao de fuente de '24pt'. El resto de la primer lnea formateada ser azul
mientras que el resto del prrafo ser rojo.
p { color: red; font-size: 12pt }
p:first-letter { color: green; font-size: 200% }
p:first-line { color: blue }
<p>un texto corto que ocupa dos lneas</p>
Asumiendo que el corte de la lnea ocurre antes de la palabra "ocupa", la secuencia ficticia de marcas para este
fragmento podra ser:
<p>
<p:first-line>
<p:first-letter>
u
</p:first-letter>n texto corto que
</p:first-line>
ocupa dos lneas
</p>
Observe que el elemento :first-letter est dentro del elemento :first-line. Las propiedades adjudicadas a :first-line
son heredadas por :first-letter, pero son anuladas si la misma propiedad es determinada en :first-letter.
Los pseudo-elementos y :alter

Los pseudo-elementos '' y ':after' pueden ser usados para insertar un contenido generado antes o despus del
contenido del elemento. Son explicados en la seccin acerca de texto generado.
Ejemplos:
h1 {content: counter(chapno, upper-roman) ". "}
Cuando los pseudo-elementos :first-letter y :first-line son combinados con y :after, se aplican a la primera letra o
lnea del elemento que incluye el texto insertado.
Ejemplos:
p.special {content: "especial! "}
p.special:first-letter {color: #ffd800}
Esto procesar la "E" de "Especial!" en un amarillo oro.
Unidad 5 - Clases y estilos en lnea

Selectores de clase
Para las hojas de estilo usadas con HTML, los autores pueden usar el punto (.) como una alternativa a "~=" cuando
la correspondencia sea con el atributo "class". As, en HTML, "DIV.valor" y "DIV[class~=valor]" tiene el mismo
significado. El valor del atributo debe seguir inmediatamente al ".".
Ejemplos:
Por ejemplo, podemos asignar informacin de estilo a todos los elementos con class~="pastoral" como sigue:
*.pastoral { color: green } /* todos los elementos con class~=pastoral */
o simplemente
.pastoral { color: green } /* todos los elementos con class~=pastoral */
El siguiente slo asigna estilo a los elementos H1 con class~="pastoral":
h1.pastoral { color: green } /* elementos H1 con class~=pastoral */
Dadas estas reglas, la primera instancia de H1 abajo no tendra el texto en verde, mientras que la segunda s:
<h1>verde, no</h1>
<h1 class="pastoral">muy verde</h1>
Para equivaler a un subconjunto de valores "class", cada valor debe ir precedido por un ".", en cualquier orden.
Ejemplos:
Por ejemplo, la siguiente regla equivale a cualquier elemento P a cuyo atributo "class" le ha sido asignado una lista
de valores separados por espacios que incluyen "pastoral" y "marino":
p.pastoral.marino{ color: green }
Esta regla equivale en el caso de class="pastoral rojo azul marino" pero no se corresponde en class="pastoral rojo".
Nota: CSS le otorga tanto poder al atributo "class", que los autores podran conceptualmente disear su propio
"lenguaje del documento" basados en elementos con casi ninguna presentacin asociada (tales como DIV y SPAN
en HTML) y asignando informacin acerca del estilo a travs del atributo "class". Los autores deben evitar esta
prctica ya que los elementos estructurales de un lenguaje de documento comnmente tienen significados
aceptados y reconocidos mientras que las clases definidas por el autor no pueden tenerlos.
Selectores de contexto
Los selectores de contexto son simples cadenas de dos o ms selectores simples separados por espacio en blanco. A
estos selectores se les pueden asignar propiedades normales y, debido a las reglas del orden de cascada, tendrn
precedencia sobre selectores simples. Por ejemplo, el selector de contexto en:
p.verde{ background: green }
esp.verde. Esta regla dice que el texto con nfasis dentro del prrafo debera tener un fondo amarillo; el texto con
nfasis en un encabezado no sera afectado.
Orden de cascada
Cuando se usan varias hojas de estilo, puede haber un conflicto sobre cual controla a un selector en particular. En
estas situaciones, debe haber reglas para definir la regla de la hoja de estilo que prevalece. Las siguientes
caractersticas determinarn el resultado de hojas de estilo que se contraponen.
! important
Puede establecerse una regla como importante al especificar !important. Un estilo designado como importante
prevalecer sobre estilos contradictorios de similar nivel. Asimismo, ya que tanto el autor y el lector pueden
especificar reglas importantes, la regla del autor primar sobre la regla del lector en casos de importancia. Una
muestra del uso de la sentencia !important:
body { background: url(bar.gif) white;
background-repeat: repeat-x ! important}
Origen de las reglas (del autor frente a las del lector)
Como ya se mencion, tanto los autores como los lectores tienen la capacidad de especificar hojas de estilo.
Cuando hay un conflicto entre reglas, las reglas del autor prevalecern sobre las reglas del lector de similar peso.
Tanto las hojas de estilo del autor como las del lector primarn sobre las hojas de estilo incorporadas del
navegador.
Los autores deberan ser cautelosos con el empleo de reglas !important ya que primarn sobre las reglas ! important
del lector. Un usuario puede, por ejemplo, necesitar de grandes tamaos de fuentes o colores especiales debido a
problemas de visin, y tal usuario querr declarar que ciertas reglas de estilo sean ! importante, ya que algunos
estilos son vitales para que pueda leer una pgina. Cualquier regla !important prevalecer sobre las reglas normales,
por lo que se aconseja a los autores usar reglas normales casi exclusivamente para asegurar que los usuarios con
necesidades especiales de estilos puedan leer la pgina.
Jerarquas y especificidad
Calculando especificidad
Las hojas de estilo tambin pueden primar sobre hojas de estilo en conflicto basndose en su nivel de especificidad,
donde un estilo ms especfico siempre prevalecer sobre uno menos especfico. Simplemente es cuestin de contar
para calcular la especificidad de un selector.
Cuente el nmero de atributos ID en el selector.

Cuente el nmero de atributos CLASS en el selector.
Cuente el nmero nombres de etiquetas HTML en el selector.
Finalmente, escriba los tres nmeros en orden exacto sin espacios ni comas para obtener un nmero de tres dgitos.
(Nota: puede necesitar convertir los nmeros a una base mayor para terminar con tres dgitos.) La lista final de
nmeros que corresponden a selectores determinar fcilmente la especificidad, donde los nmeros ms altos
priman sobre los ms bajos. La siguiente es una lista de selectores ordenados por especificidad:
#id1
UL ULLI.red
LI.red
{xxx} /* a=1 b=0 c=0 --> especificidad = 100 */

LI
Orden de especificacin
Para hacerlo sencillo, cuando dos reglas tienen el mismo peso, prima la ltima regla especificada.
Estilos en lnea
Existe otra forma de aplicar estilos en forma directa sobre los elementos mediante el atributo Style como se muestra
en el siguiente ejemplo
<p "style="{color: #FF2200; font-size:20px}> Este es el texto </p
esta regla se aplica directamente a dicha etiqueta p y solo a esa, es el ms especfico de todos, la desventaja es que
no es una regla reutilizable, se recomienda no hacer uso excesivo de ella, no obstante es muy til para el diseo de
newsletter.
Atributo de overflow
Esta propiedad me permite decidir qu hacer con el contenido de una caja cuando excede su tamao. Esta
propiedad trabaja, acta cuando la caja tiene seteada dimensiones, si no tiene seteada dimensiones no se va a
manifestar visualmente por ms que la indiquemos.
Visible
Lo que excede queda visible
hidden
Lo que exceda se oculta
scroll
Lo que exceda se muestra, se auto genera una barra de scroll horizontal y una vertical.
auto
Lo que exceda se muestra, se auto genera una barra de scroll en la direccin que lo necesite.
inherit
Lo que exceda se hereda de la caja que contiene a la caja la cual se le indica la propiedad.
Filtro de opacidad
La opacidad se trabaja de dos maneras distintas en los navegadores ms comunes. Por un lado tenemos a Internet
Explorer, y por otro lado a todos los dems navegadores, es decir, Firefox, Opera o Chrome. Por ello, para
especificar la opacidad o transparencia tendremos que hacerlo con dos atributos distintos. En DesarrolloWeb.com
ya habamos tratado este tema con anterioridad, pero ahora vamos a ofrecer explicaciones ms completas.
Opacidad en Internet Explorer

En Explorer tenemos que indicar el grado de opacidad como un filtro de CSS. Dichos filtros se pueden aplicar con
el atributo filter de hojas de estilos. Existen varios filtros disponibles para hacer distintos efectos sobre elementos
de la pgina, en concreto el filtro opacity es el que nos interesa para definir transparencias. Se especifica de la
siguiente manera:
.claseopacidad{
filter:alpha(opacity=25);
}
Con esta declaracin de estilos conseguiremos que los elementos de la clase claseopacidad tuvieran un 25% de
opaco, o lo que es lo mismo, un 75% de transparente.
Ahora bien, en Explorer no s por qu, podemos encontrar un problema al utilizar el filtro opacity. Simplemente en
algunos casos no funcionar y no veremos la transparencia que hayamos declarado. Esto se soluciona aplicando
algn estilo adicional, aparte del propio filtro CSS. Por ejemplo, ponerle un ancho a la capa bastara, o tambin
colocarle un float:letf. Es importante saber esto, puesto que es el tpico bug que si no lo sabes puedes acabar con un
dolor de cabeza antes de dar con l.
Quedara por ejemplo as:
.claseopacidad {
filter:alpha(opacity=25);
width: 120px;}
Opacidad en Firefox, Opera, Chrome...

En estos navegadores se define la transparencia de una manera ms simple. Lo haremos a travs del atributo
opacity, de esta manera:
. claseopacidad {opacity: .5}
Con esto conseguiremos que la clase sea 50% transparente, o 50% opaca, como preferimos decir.
Unidad 6 - Integracin
Diagramacin de interfaz de altura variable
Hacks
Debido a la diversidad de navegadores y las diferencias entre versiones es muy til hacer uso de algunos hacks si
queremos que la apariencia de nuestras pginas en Internet Explorer, sea igual que en el resto de los navegadores
que soportan los estndares.
A continuacin veremos algunos hacks tiles, que podremos utilizar en nuestros archivos CSS para solucionar
problemas que nos suceden a diario con nuestros diseos web cuando se muestran con Internet Explorer.
El hack del guin bajo

Para el resto de los navegadores una propiedad con un guin bajo, u otro carcter alfanumrico delante es algo que
no existe, y por tanto no la interpretan, pero Internet Explorer las asimila sin problemas. Esto es algo que podemos
utilizar para definir propiedades en los estilos, destinadas slo a este navegador.
Este hack funciona para todas las versiones de Internet Explorer que existen hasta la fecha, pero es posible que deje
de funcionar en las prximas.
Ejemplo:
#textbox{
width: 450px;
_width:400px;
/* Firefox y los dems */

/* Internet Explorer 6 e inferiores */
}
Teniendo en cuenta que los navegadores sobrescriben las propiedades si stas se definen ms de una vez, dejando
establecida la que se define ltima; mostramos un ejemplo donde se muestran estos dos hacks que hemos descrito
anteriormente.
body {
background: #FFFFFF
/* Firefox y los dems */
*background: #000000
/* IE7 e inferiores */
_background: #CCCCCC;
/* Slo IE6 */
}
En el ejemplo que mostramos anteriormente el color de fondo de la pgina se ver blanco para Firefox, negro para
Internet Explorer 7 y gris para IE 6.
El uso de !important
Este operador es utilizado en los archivos CSS para que los navegadores respeten la importancia de la propiedad
que lo contenga y evite que se sobrescribe con otras que se definan posteriormente.
Internet Explorer 6 y las versiones anteriores no interpretan este operador; problema que fue solucionado en la
versin 7 de este navegador.
Ejemplo
p{
background: green !important; /* Navegadores superiores a IE 6 respetarn la importancia inmediatamente */
background: red; /* IE 6 y anteriores aplica este estilo aunque est marcado la anterior como importante */
}
En el ejemplo anterior el fondo de la pgina se mostrar rojo para IE 6, mientras que para Internet Explorer 7 y el
resto de los navegadores se ver verde.
Asignacin de hojas de estilo por navegador mediante IF

Para evitar el uso de hacks, podemos hacer uso de una sentencia condicional que solo el Explorer entiende. Para
eso, creamos una hoja de estilos comn, para todos los navegadores (los que respetan estrictamente los estndares)
sin usar ningn hack, confiando en que solo ellos leern esa hoja.
Luego, creamos una hoja con definiciones "revisadas" que sean vlidas para todas las versiones de Explorer.
Luego, una hoja con definiciones precisas para cada versin de Explorer.
Finalmente, incluimos las hojas 2 y 3 mediante un condicional que es ledo slo por Explorer 5, 5.5 y 6:

Luego, para cada versin slo cambia esto:

O bien:

Y para el 6:

Y para que se lean y "pisen" en el orden correcto, deberemos colocarlas de mayor a menor especificidad:
<link rel="stylesheet" type="text/css" target="_blank" href="comun.css" />

Apuntes Css y Divs

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

Apuntes Css y Divs

Uploaded by

Copyright:

Available Formats

UNIDAD 1 Introduccin a HTML 5

Esta es la primera vez que HTML y XHTML se han desarrollado en paralelo.

Estndar de la versin HTML 5

El desarrollo de este cdigo es regulado por el Consorcio W3C.

Origen del HTML 5

Reglas bsicas del HTML 5

Las nuevas funcionalidades se basarn en HTML, CSS, DOM, y JavaScript

Mejoras en el elemento <canvas>, capaz de renderizar en algunos navegadores elementos 3D

Mejoras ms significativas del HTML 5

Drag&Drop. Nueva funcionalidad para arrastrar objetos como imgenes.

Relacin con Internet

Componentes de la Web Semntica

XML Schema es un lenguaje para definir la estructura de los documentos XML.

Nuevas etiquetas de HTML 5

Nuevas etiquetas de marcacin semntica

<comad>Un botn o botn de radio, o una casilla de verificacin

<details>Para describir los detalles de un documento, o partes de un documento

<summary>A ttulo o resumen, en el interior del elemento de detalles

<figure>Para la agrupacin de una seccin de contenido independiente, podra ser un vdeo

<figcaption>El ttulo de la seccin de la figura

<header>Para ver una introduccin de un documento o seccin, podra incluir la navegacin

<mark>Para el texto que hay que destacar

<nav>Para una seccin de la navegacin

<progress>El estado de un trabajo en progreso

<ruby>Para la anotacin de ruby??(notas chinos o caracteres)

<rt>Para la explicacin de la anotacin ruby

<rp>Lo que muestran los navegadores que no soportan el elemento de rub

<time>Para la definicin de un tiempo o una fecha, o ambos

Nuevos Elementos multimedia

<audio>Para el contenido multimedia, sonidos, msica u otros flujos de audio

<video>Para el contenido de vdeo, como un clip de pelcula u otras corrientes de vdeo

<embed>Para el contenido integrado, como un plug-in

<canvas>Para hacer grficos o animaciones.

Nuevos elementos de formulario

HTML5 ofrece ms elementos de formulario, con ms funcionalidades:

<datalist>Una lista de opciones de valores de entrada

<keygen>Generar claves para autenticar a los usuarios

Nuevos atributos para los input

telEl valor de entrada es de tipo de nmero telefnico

searchEl campo de entrada es un campo de bsqueda

urlEl valor de entrada es una URL

emailEl valor de entrada es una o ms direcciones de correo electrnico

datetimeEl valor de entrada es una fecha y / o tiempo

daleEl valor de entrada es una fecha

monthEl valor de entrada un mes

weekEl valor de entrada es de semana

timeEl valor de entrada es de tipo tiempo

datetime-localEl valor de entrada es una fecha / hora local

numberEl valor de entrada es un nmero

rangeEl valor de entrada es un nmero en un rango determinado

colorEl valor de entrada es de un color hexadecimal, como # FF8800

Diferencias entre HTML 5 y HTML4 / XHTML

Estndar o ninguno

Atributo Aadido: media

<article>Atributos globalesNueva etiqueta

<aside>Atributos globalesNueva etiqueta

<audio>autobuffer | autoplay | controls | loop | srcNueva etiqueta

<b>Atributos globalesEtiqueta cambiada

<canvas>height | widthNueva etiqueta

<cite>Atributos globalesEtiqueta cambiada

<command>checked | default | disabled | hidden | icon | label | radiogroup | typeNueva etiqueta

<datalist>Atributos globalesNueva etiqueta

<dialog>Atributos globalesNueva etiqueta

<embed>height | src | type | widthNueva etiqueta