Apuntes Css y Divs

UNIDAD 1 – Introducción a HTML 5

¿Qué es el HTML 5?

HTML 5 (HyperTextMarkupLanguage, versión 5) es la quinta revisión importante del lenguaje básico de la World

Wide Web.

HTML 5 probablemente se convertirá en el nuevo estándar para HTML, XHTML y el DOM de HTML.

La versión anterior del HTML data de 1999, y desde entonces la Web ha cambiado muchísimo, HTML introduce

un nuevo mundo para el modelado de archivos HTML.

HTML 5 especifica dos variantes de sintaxis para HTML: un «clásico» 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.

Estándar de la versión HTML 5

HTML 5, Todavía se encuentra en modo experimental, lo cual indica la misma W3C; aunque ya es usado por

múltiples 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

común actualizar a la versión más actual, para poder disfrutar de todo el potencial que trae HTML 5.

El desarrollo de este código es regulado por el Consorcio W3C.

Podemos ver el estado de la versión HTML 5 y sus avances día a día 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 cooperación de dos entidades, the World Wide Web Consortium

(W3C) y the Web HypertextApplicationTechnologyWorkingGroup (WHATWG).

http://www.google.com/url?q=http://www.w3.org/TR/html5/&sa=D&sntz=1&usg=AFQjCNE1IC5MocvvRRwDT4ukaaslX5x0sA

WHATWG se encontraba trabajando en mejoras para los formularios en la Web, mientras que W3C trabajaba en

XHTML 2.0. En el año 2006, decidieron juntarse a trabajar en una nueva y mejor versión del lenguaje HTML,

dando así origen a la era de HTML 5

Reglas básicas del HTML 5

Las son reglas básicas establecidas para esta nueva versión del lenguaje HTML

Las nuevas funcionalidades se basarán 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 marcación●

HTML 5 deberá ser independiente del dispositivo de visualización●

El proceso de desarrollo será visible para el público.●

Nuevos Elementos

HTML 5 establece una serie de nuevos elementos y atributos que reflejan el uso típico de los sitios Web modernos.

Algunos de ellos son técnicamente similares a las etiquetas <div> y <span>, pero tienen un significado semántico,

como por ejemplo <nav> (bloque de navegación del sitio Web) y <footer>. Otros elementos proporcionan nuevas

funcionalidades a través 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 presentación, como

<font> y <center>, cuyos efectos son manejados por el CSS También hay un renovado énfasis en la importancia

del scripting DOM para el comportamiento de la Web.

Mejoras más 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/VP8VP8) o

privativos (H.264/MPEG-4 AVC).

Etiquetas para manejar grandes conjuntos de datos: Datagrid, Details, menu y Command. Permiten generar tablas

dinámicas 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

http://www.google.com/url?q=http://es.wikipedia.org/wiki/WebM&sa=D&sntz=1&usg=AFQjCNH1w1xKsEpbFw-cl09j3E4a-VjM5w

http://www.google.com/url?q=http://es.wikipedia.org/wiki/VP8&sa=D&sntz=1&usg=AFQjCNExs4z_D9jZ48_Jj6sfSkMbwbFnLg

http://www.google.com/url?q=http://es.wikipedia.org/wiki/VP8&sa=D&sntz=1&usg=AFQjCNExs4z_D9jZ48_Jj6sfSkMbwbFnLg

http://www.google.com/url?q=http://es.wikipedia.org/wiki/H.264/MPEG-4_AVC&sa=D&sntz=1&usg=AFQjCNEGq0AJo2QhUgj6ZeNx-HMkS8qUmg

Visores: MathML (fórmulas matemáticas) y SVG (gráficos vectoriales). En general se deja abierto a poder

interpretar otros lenguajes XML.

Drag&Drop. Nueva funcionalidad para arrastrar objetos como imágenes.

Web Semántica

La Web semántica (del inglés semantic web) es la "Web de los datos". Se basa en la idea de añadir metadatos

semánticos y ontológicos a la World Wide Web. Esas informaciones adicionales —que describen el contenido, el

significado y la relación de los datos— se deben proporcionar de manera formal, para que así sea posible evaluarlas

automáticamente por máquinas de procesamiento. El objetivo es mejorar Internet ampliando la interoperabilidad

entre los sistemas informáticos usando "agentes inteligentes". Agentes inteligentes son programas en las

computadoras que buscan información sin operadores humanos.

El precursor de la idea, Tim Berners-Lee, intentó desde el principio incluir información semántica en su creación,

la World Wide Web, pero por diferentes causas no fue posible.

Por ese motivo introdujo el concepto de semántica con la intención de recuperar dicha omisión.

Relación 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 válido para adecuar el

aspecto visual de un documento e incluir objetos multimedia en el texto (imágenes, esquemas de diálogo, etc.).

Pero ofrece pocas posibilidades para categorizar los elementos que configuran el texto más allá de las típicas

funciones estructurales, como sucede con otros lenguajes de maquetación (tipo LaTeX).

HTML permite mediante una herramienta de visualización (como un navegador o un agente de usuario) mostrar

por ejemplo un catálogo de objetos en venta. El código HTML de este catálogo puede explicitar aspectos como "el

título del documento es Ferretería Acme"; pero no hay forma de precisar dentro del código HTML si el producto

M270660 es una "batería Acme", con un "precio de venta al público" de 200 €, o si es otro tipo de producto de

consumo (es decir, es una batería eléctrica 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

catálogo", "batería Acme" es una batería eléctrica, o "200 €" es el precio. Tampoco hay forma de relacionar ambos

datos para describir un elemento específico en oposición a otros similares en el mismo catálogo.

La Web Semántica se ocuparía de resolver estas deficiencias. Para ello dispone de tecnologías de descripción de los

contenidos, como RDF y OWL, además de XML, el lenguaje de marcas diseñado para describir los datos. Estas

tecnologías se combinan para aportar descripciones explícitas de los recursos de la Web (ya sean estos catálogos,

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 visualización 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 información.

Barreras

El desarrollo y difusión masivos de la web semántica tiene algunas dificultades que no ha podido superar todavía:

una de ellas es tecnológica y la otra está relacionada con la falta de interés de los propietarios de las páginas web.

Las tecnologías para expresar la información en el formato que requiere una web semántica existen hace años.

Quizás la componente más especializada sea OWL, que existe como estándar del W3C desde 2004. El componente

tecnológico que falta es el que permita convertir de forma automática el abundante contenido de texto de las

páginas web en marcas OWL. En 2009 la web semántica requiere que los creadores de las páginas web traduzcan

"a mano" su contenido en marcas OWL, para que pueda ser interpretado por agentes semánticos. Afortunadamente

muchas páginas (aunque no representen un porcentaje elevado de todas las páginas del mundo) tienen información

formateada en su base de datos, y pueden realizar esta conversión de manera automática. Por ejemplo, un sitio con

miles de fichas de películas, que incluyen datos como título, 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

película" a OWL, que sirva para todas las fichas, sin necesidad de tener que realizar la traducción a mano para cada

una.

La otra barrera que se opone pasivamente a la web semántica es el modelo de negocio de gran cantidad de páginas

web, que obtienen ingresos de la publicidad. Estos ingresos son posibles únicamente si sus páginas son visitadas

por una persona, y se pierden si los datos quedan disponibles para que los interprete un proceso automático.

El siguiente ejemplo arbitrario y parcial ilustra este concepto: para un trabajo de investigación para la escuela sobre

la vida de un prócer, un sistema semántico realiza la investigación y presenta en pantalla el resultado: fecha de

nacimiento y defunción, batallas en las que participó, hechos destacados, frases célebres, y todo esto sin necesidad

de acceder a ninguna página web específica, y por lo tanto sin consumir la publicidad de los sitios que pusieron a

disposición esa información.

La visión no debe encerrarse en estos términos. Es muy probable que, de surgir una web semántica 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 lógico suponer que los sitios web basados en publicidad apoyen su desarrollo

poniendo su información en el formato necesario.

Componentes de la Web Semántica

Los principales componentes de la Web Semántica son los metalenguajes y los estándares de representación XML,

XML Schema, RDF, RDF Schema y OWL. La OWL WebOntologyLanguageOverview describe la función y

relación de cada uno de estos componentes de la Web Semántica:

XML aporta la sintaxis superficial para los documentos estructurados, pero sin dotarles de ninguna restricción

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

semántica básica 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 semántica

para establecer jerarquías de generalización entre dichas propiedades y clases.

OWL añade más vocabulario para describir propiedades y clases: tales como relaciones entre clases (p.ej.

disyunción), cardinalidad (por ejemplo "únicamente uno"), igualdad, tipologías de propiedades más complejas,

caracterización de propiedades (por ejemplo simetría) o clases enumeradas.

La usabilidad y aprovechamiento de la Web y sus recursos interconectados puede aumentar con la web semántica

gracias a:

Los documentos etiquetados con información semántica (compárese ésta con la etiqueta <meta> de HTML, usada

para facilitar el trabajo de los robots). Se pretende que esta información 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 (Ontología (Informática)) y mapas entre vocabularios que permitan a quienes

elaboran los documentos disponer de nociones claras sobre cómo deben etiquetarlos para que los agentes

automáticos puedan usar la información contenida en los metadatos (p.ej. el metadato author tenga el significado de

"autor de la página" y no el del "autor del objeto descrito en la página").

Agentes automáticos que realicen tareas para los usuarios de estos metadatos de la Web Semántica

Servicios Web (a menudo con agentes propios) que provean de información a los agentes (por ejemplo un servicio

de garantías a quien un agente pudiera consultar sobre si un comercio electrónico tiene un historial de mal servicio

o de generar correo basura).

Los proveedores primarios de esta tecnología son las URIs que identifican los recursos junto con XML y los

namespaces. Si a esto se añade un poco de lógica, mediante una RDF, u otras tecnologías como los mapas

temáticos y algo de razonamiento basado en técnicas de inteligencia artificial, Internet podría estar cerca de

alcanzar las aspiraciones iniciales de su inventor, Tim Berners-Lee.

Servicio de notificación: En la última versión, que es 3.0, Web Semántica Ping servicio tiene la capacidad de

validar los recursos RDF. Hay una lista de pings de exportación simplificado sistema que fue desarrollado en esta

versión. 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. Además, la interfaz de usuario se ha actualizado. Nuevas

estadísticas están disponibles con esta edición también. La capacidad de proporcionar estadísticas sobre todos los

nombres y todas las estadísticas sobre los tipos, se ha añadido. Una buena característica de proporcionar la lista de

nombres utilizados para describir las entidades en RDF. Todas las estadísticas sobre los tipos da el número de

entidades definidas a máquina en cada RDF Ping documento conocido por La Web Semántica.

Nuevas etiquetas de HTML 5

A continuación un listado de todas las nuevas etiquetas de HTML 5 separadas por grupos, más adelante se

explicará en detalle cada una de ella.

Nuevas etiquetas de marcación semántica

EtiquetaDescripción

<article>Especifica independiente, autónomo de contenido, podría ser una noticia, artículo, blog, foro, u otrosartículos 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 botón o botón de radio, o una casilla de verificación

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

<summary>A título o resumen, en el interior del elemento de detalles

<figure>Para la agrupación de una sección de contenido independiente, podría ser un vídeo

<figcaption>El título de la sección de la figura

<footer>Para un pie de página de un documento o sección, puede incluir el nombre del autor, la fecha deldocumento, información de contacto, o la información de copyright

<header>Para ver una introducción de un documento o sección, podría incluir la navegación

<hgroup>Para una sección de los títulos, utilizando <h1> a <h6>, donde el más grande es el principal título de lasección, y los otros son sub-títulos

<mark>Para el texto que hay que destacar

<meter>Para realizar una medición, sólo si los valores máximo y mínimo se conocen

<nav>Para una sección de la navegación

<progress>El estado de un trabajo en progreso

<ruby>Para la anotación de ruby??(notas chinos o caracteres)

<rt>Para la explicación de la anotación ruby

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

<section>Para una sección de un documento. Como capítulos, encabezados, pies de página, o cualquier otrasección del documento

<time>Para la definición de un tiempo o una fecha, o ambos

<wbr>Separación de palabras.

Nuevos Elementos multimedia

HTML5 proporciona un nuevo estándar para el contenido de los multimedia:


<audio>Para el contenido multimedia, sonidos, música u otros flujos de audio

<video>Para el contenido de vídeo, como un clip de película u otras corrientes de vídeo

<source>Recurso de los medios de los elementos de los medios de comunicación, que se define dentro de loselementos de audio o vídeo

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

El elemento Canvas

El elemento de tela se utiliza JavaScript para realizar dibujos en una página web.


<canvas>Para hacer gráficos o animaciones.

Nuevos elementos de formulario

HTML5 ofrece más elementos de formulario, con más funcionalidades:


<datalist>Una lista de opciones de valores de entrada

<keygen>Generar claves para autenticar a los usuarios

<output>Para los diferentes tipos de producción, tales como la producción escrita por un guión

Nuevos atributos para los input

Además, atribuyen el elemento de entrada de tipo tiene muchos nuevos valores, para el control de entrada mejor

antes de enviarlo al servidor:

TipoDescripción

telEl valor de entrada es de tipo de número telefónico

searchEl campo de entrada es un campo de búsqueda

urlEl valor de entrada es una URL

emailEl valor de entrada es una o más direcciones de correo electrónico

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 número

rangeEl valor de entrada es un número 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 continuación se detallan los cambios en las etiquetas entre las distintas versiones del lenguaje

EtiquetaAtributosComentarios

Estándar o ninguno

<!DOCTYPE>Estándar o ninguno

<a>href | target | rel | hreflang | media | typeAtributo Añadido: mediaAtributo cambiado: Target

<abbr>Estándar o ninguno

<acronym>Etiqueta Eliminada

<address>Estándar o ninguno

<applet>Etiqueta eliminada

<area>Estándar o ninguno

<article>Atributos globalesNueva etiqueta

<aside>Atributos globalesNueva etiqueta

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

<b>Atributos globalesEtiqueta cambiada

<base>Estándar o ninguno

<basefont>Etiqueta eliminada

<bb>Estándar o ninguno

<bdo>Estándar o ninguno

<big>Etiqueta eliminada

<blockquote>Estándar o ninguno

<body>Estándar o ninguno

<br>Estándar o ninguno

<button>Estándar o ninguno

<canvas>height | widthNueva etiqueta

<caption>Estándar o ninguno

<center>Etiqueta eliminada

<cite>Atributos globalesEtiqueta cambiada

<code>Estándar o ninguno

<col>Estándar o ninguno

<colgroup>Estándar o ninguno

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

<datagrid>Estándar o ninguno

<datalist>Atributos globalesNueva etiqueta

<dd>Estándar o ninguno

<del>Estándar o ninguno

<details>openNueva etiqueta

<dialog>Atributos globalesNueva etiqueta

<dir>Etiqueta eliminada

<div>Estándar o ninguno

<dfn>Estándar o ninguno

<dl>Estándar o ninguno

<dt>Estándar o ninguno

<em>Estándar o ninguno

<embed>height | src | type | widthNueva etiqueta

<fieldset>Estándar o ninguno

<figure>Atributos globalesNueva etiqueta

<font>Etiqueta eliminada

<footer>Atributos globalesNueva etiqueta

<form>Estándar o ninguno

<frame>Etiqueta eliminada

<frameset>Etiqueta eliminada

<h1> ... <h6>Estándar o ninguno

<tr>Estándar o ninguno

<tt>Etiqueta eliminada

<u>Etiqueta eliminada

<ul>Estándar o ninguno

<var>Estándar 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 día HTML 5 al igual que CSS 3, no es compatible con todos los navegadores, a continuación

se presenta un tabla de compatibilidades con las versiones más recientes de los navegadores,

Nota: Cabe destacar que esta compatibilidad cambia día a día, 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 página 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/

Distribución 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 análisis sobre el

http://www.google.com/url?q=http://html5test.com/&sa=D&sntz=1&usg=AFQjCNGfDILofD405hiFD67wvazu_tswtw

http://www.google.com/url?q=http://caniuse.com/&sa=D&sntz=1&usg=AFQjCNHniSaW3oijVj2tnXPihqRE1Q1GQQ

http://www.google.com/url?q=http://html5gallery.com/&sa=D&sntz=1&usg=AFQjCNHEcOJEqQJA1SIYIF1NuUpRNghaVQ

http://www.google.com/url?q=http://edirpedro.com.br/portfolio/&sa=D&sntz=1&usg=AFQjCNGUoZLA_gaUgm2igWxwJKE9ddXS1Q

http://www.google.com/url?q=http://www.lucascotto.it/&sa=D&sntz=1&usg=AFQjCNGXFo8yFv8O5nr1AQqzRj_TzcNh7Q

http://www.google.com/url?q=http://www.esteemleadership.org/&sa=D&sntz=1&usg=AFQjCNHv6S2q_mvNNIn6ImUFbVYXM7wUZg

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 público objetivo, es decir los usuarios de nuestro sitio web, podemos

encontrar estadísticas en diversos lugares y fuentes las que brindadas a continuación, son estadísticas recién

obtenidas de sitios masivos, con lo cual nos brindan información más que representativa.

IE, sigue siendo el líder indiscutible con un 49% de los usuarios totales, así mismo el porcentaje de sus usuario fue

bajando mucho en los últimos años.

Firefox, le sigue con un 27% de los usuarios totales

Chrome posee hoy día un 17%, algo increíble dado que es el más 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 líder

indiscutible en los navegadores para dispositivos móviles.

Elementos de html 5

Declaración de tipo de documento (doctype)

A diferencia de las versiones anteriores de html, donde existen más de un tipo de doctype, HTML 5 cuenta con un

solo tipo de doctype que podemos ver a continuación.

<!DOCTYPE HTML>

Declaración del idioma

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

Declaración del charset

La declaración del charset es obligatoria en HTML 5, la misma se realiza en la etiqueta <meta>

El juego de caracteres más utilizado y que es adecuado a nuestro idioma es el UTF-8.

Etiquetas deprecadas

Las siguientes etiquetas ya no pertenecen al estándar de HTML 5 fueron eliminadas ya que su función 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 continuación se listan alfabéticamente todas las nuevas etiquetas de HTML 5, y que tipo de atributos puede usar

cada una de ellas, más adelante se explicará el uso específico 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>Estándar 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 continuación se listan en forma alfabética los atributos globales de HTML 5, en otros capítulos de este manual se

verá cómo usar específicamente cada uno de ellos. Aquellos que se agregan desde la versión 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)truefalse

Especifica si el usuario permite o no que el contenido sea editable.

contextmenu (nuevo)menu_idEspecifica el menu contextual de un elemento

dirltrrtl

Especifica la dirección del texto de un elemento

draggable (nuevo)truefalseauto

Especifica si es posible mover el elemento

dropzone (nuevo)copymovelink

Especifica que pasa si el elemento es movido y soltado en otro elemento

hidden (nuevo)hiddenEspecifica si el elemento esta visible o no

ididEspecifica el nombre del elemento

langlanguage_codeEspecifica el lenguaje del elemento

spellcheck (nuevo)truefalse

Especifica si el elemento necesita ser comprobado gramaticalmente

stylestyle_definitionPermite agregar un estilo en línea

tabindexnumberEspecifica el orden de tabulación del elemento

titletextEspecifica el titulo del elemento

Elementos semánticos

Modelado semántico de un documento html

La gran diferencia para el modelado de un documento HTML es el correcto uso de las etiquetas semánticas, HTML

5 introduce una gran diferencia en este plano, a continuación veremos una a una las nuevas etiquetas semánticas 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 función específica: 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 específica para la diagramación de nuestros archivos, y debe ser utilizada en lugar de las tablas.

Por su condición 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 semánticas

Etiqueta <header>

La etiqueta <header> es una de las nuevas etiquetas semánticas 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 información relevante como ser el título 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 más actuales a saber:

Firefox

Chrome

Safari

Opera

IE (desde la versión 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 semánticas de HTML 5, que permite una mejor estructura del

documento HTML, la misma se utiliza para crear en el área de la navegación 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 según la especificación hasta el día de hoy de la W3C indica que se puede usar más de una vez la etiqueta

<nav> , Pero muchos autores recomiendan utilizar esta etiqueta una única vez por documento para la negación

principal del sitio.

Nota: Vale recordar que el estándar 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 semánticas de HTML 5, que permite una mejor estructura del

documento HTML, la misma se utiliza para crear el pie de página del documento, se utiliza dentro del cuerpo del

documento y permite contener la información 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 más 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 semánticas de HTML 5, que permite una mejor estructura del

documento HTML, la misma se utiliza para crear una sección dentro del documento HTML, en muchos casos la

utilizamos donde antes sólo podíamos usar un div.

Esta etiqueta, se utiliza dentro del cuerpo del documento y permite contener la información relacionada relevante

del sitio y también otra etiquetas semánticas 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 año 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 semánticas de HTML 5, que permite una mejor estructura del

documento HTML, la misma se utiliza para crear artículos 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

artículos de diarios

entradas de blogs

comentarios de usuarios

rss

Así mismo también es utilizada para introducir contenido estático como ser, la típica información de quienes

somos por ejemplo.


La etiqueta <article> es soportada por la mayor parte de los navegadores en sus versiones más 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 semánticas 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 podrían 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 comúnmente 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 móvil o un lector de pantalla.


La etiqueta <aside> es soportada por la mayor parte de los navegadores en sus versiones más 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 semánticas de HTML 5, que permite una mejor estructura del

documento HTML, la misma se utiliza para crear un grupo de títulos 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 más 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 semánticas 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 cúpula 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 página, pero sin el

contenido debe poder ser comprendido independientemente, es decir la si la etiqueta <figure> es omitida, no debe

afectar a la comprensión del contenido del sitio.

Se suele utilizar junto con la etiqueta <figcaption> para agregar un título a esa figura.


La etiqueta <figure> es soportada por la mayor parte de los navegadores en sus versiones más 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 semánticas de HTML 5, que permite una mejor estructura

del documento HTML, la misma se utiliza para crear un título 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 cúpula 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 más actuales a saber:

Firefox

Chrome

Safari

Opera



La etiqueta <figcaption> soporta atributos globales y atributos de evento.

CSS

Qué es el CSS

El término CSS significa, hojas de estilo en cascada (Cascading Style Sheets, CSS), las mismas son un lenguajeformal usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensiónen XHTML). El W3C (World Wide Web Consortium) es el encargado de formular la especificación de las hojas deestilo que servirán de estándar para los agentes de usuario o navegadores.

Cuáles son los beneficios de trabajar con CSS

Las ventajas de utilizar CSS son:

Control centralizado de la presentación de un sitio web completo con lo que se agiliza de forma considerable la●

actualización 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 visualespueden configurar su propia hoja de estilo para aumentar el tamaño del texto o remarcar más los enlaces.Una página puede disponer de diferentes hojas de estilo según el dispositivo que la muestre o incluso a elección●

del usuario. Por ejemplo, para ser impresa, mostrada en un dispositivo móvil, o ser "leída" por un sintetizador devoz.El documento HTML en sí mismo es más claro de entender y se consigue reducir considerablemente su tamaño●

(siempre y cuando no se utilice estilo en línea).

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 pequeñas diferencias deimplementación según marcas y versiones de los navegadores. CSS2, sin embargo, está sólo parcialmenteimplementado en los más recientes.

Trabajando con CSS

Declaración de reglas de estilo

En HTML había 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 línea (válida 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 laforma más recomendable para trabajar ya que tiene una ventaja muy grande y es que podemos tener muchaspáginas enlazando a la misma hoja de estilos.

Si más adelante queremos cambiar algo, sólo hemos de modificar un archivo (la hoja de estilos) y afectará a todaslas páginas. Podemos enlazar una o más hojas poniendo esto dentro de la cabecera (head):

<link target="_blank" href="nuestra_hoja.css" rel="stylesheet" type="text/css" />Hoja de estiloembebida en el encabezado del documento

Esta opción consiste en escribir la información referente a los estilos dentro mismo del archivo XHTML. Lopodemos hacer escribiendo entre las etiquetas <style> y </style>, que también deben ir en la cabecera (head).

Si hacemos las dos cosas a la vez, siempre tienen prioridad las reglas que estén dentro de <style> (lo localpredomina sobre lo global).

Estilos en línea

La tercera forma era incluir el atributo style dentro de algún elemento HTML, su uso es específico para la creaciónde newsletters

Vinculación de una hoja de estilo

Para vincular un archivo HTML con un CSS debemos introducir el siguiente código en el encabezado dedocumento:

<link target="_blank" href="nuestra_hoja.css" rel="stylesheet" type="text/css" />

Diferencia entre vinculación e importación 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 degradación sin errores es mucho más simple.

Reglas de estilo

En una hoja de estilos definimos reglas que consisten en mencionar selectores a los que les asignamos una serie depropiedades. Por ejemplo, si queremos que nuestra página web tenga el fondo blanco, las letras grises y use unafuente Arial de 11 píxeles de tamaño.

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, unaregla 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 próximo 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 más importantes son los que se detallan a continuación.

Elementos HTML (etiquetas)

Se utilizan para redefinir el aspecto de una etiqueta específica.

Si queremos elegir una etiqueta o tag XHTML, simplemente escribimos su nombre. Por ejemplo, si queremosestablecer propiedades para los párrafos:

p {

...

}

La regla definida aplicará a todos los párrafos de nuestros archivos XHTML, y solo a ellos.

Identificadores

También 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 código XHTML donde aparezca ese elemento único sería así:

<div id="menu">Este es el menu</div>

Clases

También 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 podríamos usar esa clase en todos los párrafos que querramos (o en cualquier otro elemento, como títulos,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 también tenemos un formato de comentario, que nos permite dejar comentarios en elcódigo, como vemos a continuación.

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 todoen 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 entrelos elementos. Por ejemplo, si queremos definir que los EM que estén dentro de un H1 serán grises, podemosañadir 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 sólo se aplica a un elemento en concreto, sino que es heredado por susdescendientes 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 desentido común) por las cuales algunas propiedades no se pueden heredar, por ejemplo la definición de bordes

Selectores de grupo

En CSS tenemos la posibilidad de agrupar selectores, siempre que tengamos reglas que posean atributos comunesentre si, podemos crear un grupo con ellos, los selectores se separan con comas, como en el siguiente ejemplo,todas las etiquetas H tendrán color verde

Ejemplo:

h1,h2,h3,h4,h5,h6 { color: green; }

Atributos tipográficos

En la categoría Tipo, vamos a encontrar todos los atributos que se aplican a los elementos de tipografía.

Font Family (Familia de fuente)

Sintaxis: font-family: [[<nombre-de-familia> | <familia-genérica>],]* [<nombre-de-familia> | <familiagenérica>]

Valores posibles:<nombre-de-familia>

Puede usarse cualquier nombre de familia de Fuentes <familia-genérica>

serif (por ej., Times)

sans-serif (por ej., Arial o Helvética)

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 específica o por una familia de Fuentes genérica.Obviamente, si define una fuente específica, no será tan probable de encontrar como una familia de fuente genérica.Puede hacer múltiples asignaciones de familias, y si hace una asignación de fuente específica, debería ser seguidapor un nombre de familia genérica en el caso de que la primera selección no se halle presente.

Un ejemplo de declaración de font-family:

p { font-family: "New Century Schoolbook", Times, serif }

Note que las dos primeras asignaciones son fuentes de tipo específico: New Century Schoolbook y Times.

Sin embargo, ya que ambas son fuentes serif, la familia genérica está listada como un respaldo en el caso de que elsistema 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 odobles.

La familia de fuente también 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, itálica 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 mayúsculas tipo normal o pequeñas smallcaps.

Las small-caps se muestran cuando todas las letras de la palabra están en mayúsculas, con caracteres ligeramentemás grandes que las minúsculas. Posteriores versiones de CSS pueden soportar variantes

adicionales como condensada, expandida, números en small-caps u otras variantes personalizadas.

Un ejemplo de una asignación 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 alpeso de la fuente heredada, mientras que los otros valores son pesos de fuente absolutos.

Algunos ejemplos de asignación de font-weight:

h1 { font-weight: 800 } o p { font-weight: normal }

Font Size (Tamaño de fuente)

Sintaxis: font-size: <tamaño-absoluto> | <tamaño-relativo> | <longitud> | <porcentaje>

Valores posibles:

l <tamaño-absoluto>

m xx-small | x-small | small | medium | large | x-large | xx-large

l <tamaño-relativo>

mlarger | smaller

l <longitud>

l <porcentaje> (en relación al elemento padre)

Valor inicial: medium


Heredado: Si

La propiedad font-size se usa para modificar el tamaño de la fuente mostrada. Las longitudes absolutas (usandounidades como pt e in) deberían usarse racionalmente debido a su poca capacidad de adaptarse a diferentesambientes de navegación. Las fuentes con longitudes absolutas pueden ser muy pequeñas o grandes para unusuario.

Algunos ejemplos de asignación de tamaño serían:

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 emy ex cómo pixels, lo que puede hacer el texto ilegible. El navegador también aplica incorrectamente valores deporcentaje relativos al tamaño de fuente por defecto para el selector, en vez de en relación al tamaño de fuente delelemento padre. Esto hace que reglas como:

#contenidoDeLaClase h1{ font-size: 200% }

sean peligrosas, porque el tamaño será dos veces el tamaño de la fuente por defecto de IE para encabezados denivel-uno, en lugar de dos veces el tamaño de fuente del elemento padre. En este caso, BODY sería muyprobablemente el elemento padre, y definiría posiblemente un tamaño de fuente médium, mientras que el tamañode fuente para el encabezado de nivel uno aplicado por IE probablemente sería considerado xx-large.

Considerando estos defectos, los autores deberían tener cuidado al usar valores de porcentaje para font-size, yprobablemente deberían evitar unidades em y ex para esta propiedad.

Font (Fuente) // declaración en una sola línea

Sintaxis: font: <valor>

Valores posibles: [ <font-style> || <font-variant> || <font-weight>]? <font-size>[ /<line-height>]? <familia defuente>

Valor inicial: No definido


Heredado: Si

La propiedad font puede usarse como una forma rápida para las diferentes propiedades de fuentes, así como paraline-height (altura de línea).

Por ejemplo,

p { font: italicbold 12pt/14pt Times, serif }

Especifica párrafos con negrita (bold) e itálica (italic), fuente Times o serif con un tamaño de 12 puntos y unaaltura de línea de 14 puntos.

Atributos de color

El atributo color, permite modificar el color de las tipografías

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 - Diagramación Básica

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 función específica: encabezado, pie, menú izquierdo, menú derecho, zonas decontenidos, etc.

A cada uno de los bloques corresponderá un tag “DIV”, que siempre deberá tener un atributo “id” para quepodamos referirnos a él desde un selector de elementos únicos en la hoja de estilos.

La etiqueta div es específica para la diagramación de nuestros archivos, y debe ser utilizada en lugar de las tablas.

Por su condición de elemento de bloque las etiquetas div, siempre se ubicaran una debajo de la otra ocupando el100% 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 etiquetassemánticas

Al usar tablas para diagramar un sitio web, mezclamos presentación con contenido, por lo que el ancho de bandanecesario (y el tiempo de carga) es mucho mayor de lo necesario, ya que por cada página visitada, el usuario debecargar no solo el "contenido", sino la presentación completa (tablas, fondos, estilos) nuevamente.

Por otro lado, al momento de rediseñar un sitio es mucho más difícil de lo necesario. Debido a que las tablas sepueden ver en la pantalla de un único modo, si luego queremos cambiar el diseño de un sitio entero, deberemoscambiar cada tabla de cada una de las páginas del sitio. No es algo muy práctico que digamos. Con un sitioXHTML 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 visualmenteordenado en la pantalla, puede ser leído por un lector de pantalla en un orden (el de las celdas de la tabla) quepuede no ser el lógico. Muchos países (entre ellos España, una de las principales fuentes de trabajo para loslatinoamericanos) ya tienen legislación que obliga a hacer sitios accesibles.

Muchas personas visitan sitios web desde sus palms y teléfonos celulares, y no tienen espacio suficiente en suspequeñas pantalla para el ancho forzado de una tabla. Un sitio bien realizado en CSS escala perfectamente ymuestra el contenido secuencialmente, para que pueda ser leído en "bloques lógicos" (cada DIV) en una pequeñapantalla.

Las tablas son muy complejas de comprender dentro del código HTML para nosotros mismos!. Antes aún de haberpuesto ningún contenido dentro de ellas, ya tenemos tres niveles de tabulado (la tabla, la fila y el td). Ni hablar contablas anidadas...

Las tablas se posicionan peor en los buscadores. Usando un típico menú de navegación ubicado en un td a laizquierda del contenido, el menú será leído al principio por el motor de búsqueda, y muchos motores de búsqueda

no irán más allá, ya que solo leen una determinada cantidad de caracteres, y si leen todos, dan más relevancia a loubicado cerca del comienzo.

Las tablas demoran más en mostrarse que los DIVs de CSS. Esto es muy notorio para usuarios de Explorer, queespera a leer el "cierre" de la tabla antes de mostrar nada. Como toda la página 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 sonpequeños bloques que van apareciendo rápidamente uno tras otro.

Selectores de id

Como ya vimos el capítulo anterior, los selectores de id, se utilizan para crear reglas de estilo para elementosúnicos,

Recordemos su sintaxis

#menu {

...

}

Luego, el código XHTML donde aparezca ese elemento único sería así:

<div id="menu">Este es el menu</div>

Estos selectores son los más adecuados para trabajar con las etiquetas div, ya que cada bloque de contenido esúnico y diferente del resto.

Atributos de tamaño

Cuando trabajamos con etiquetas div, generalmente utilizamos atributos de tamaño,

Ancho y altura, que sirven para determinar que porción quiero que ocupe la caja como los que veremos acontinuación.

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 secorresponde 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 lógicamente para determinar la alturade 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 también incluirimágenes 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 deberíaespecificar background-image. En la mayoría de casos, es adecuado background-image: none.

Los autores también pueden usar la forma rápida de la propiedad background, que está mejor soportada que lapropiedad 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), también debería definirse un background color (colorde fondo) similar para aquellos que no cargan las imágenes.

Los autores también pueden usar la forma rápida de la propiedad background, que está mejor soportada que lapropiedad 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 cómo se repite la backgroundimage (imagen de fondo) especificada. Elvalor 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.

Los autores también pueden usar la forma rápida de la propiedad background, que está mejor soportada que lapropiedad background-repeat.

Background-attachment (Fijación 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 sedesplazará con el contenido o será fija con respecto al lienzo.

Por ejemplo, la línea siguiente especifica una imagen de fondo fija:

body { background: white url(candybar.gif);

background-attachment: fixed }

Los autores también pueden usar la forma rápida de la propiedad background, que está mejor soportada que lapropiedad background-attachment.

Background-position (Posición 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 posición 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 sólo se conocen las dimensiones intrínsecas; los elementosreemplazados HTML incluyen IMG, INPUT, TEXTAREA, SELECT, y OBJECT.)

La forma más sencilla de asignar una ubicación de fondo es con palabras clave:

l Palabras clave horizontales (left, center, right)

l Palabras clave horizontales verticales (top, center, bottom)

También pueden usarse porcentajes y longitudes para asignar la posición de la imagen de fondo. Los porcentajesson relativos al tamaño del elemento. Aunque se permiten longitudes, no se recomiendan debido a su inherentedebilidad al tratar con diferentes resoluciones de pantalla.

Al usar porcentajes o longitudes, se especifica primero la posición horizontal y luego la vertical. Un valor como20% 65% especifica que la imagen se colocará 20% a la derecha y 65% abajo del elemento. Un valor como 5px10px especifica que la esquina superior izquierda de la imagen se colocará 5 pixels a la derecha y 10 pixels abajode la esquina superior izquierda del elemento.

Si solo se da el valor horizontal, la posición vertical será 50%. Se permiten combinaciones de longitudes yporcentajes, ya que son posiciones negativas. Por ejemplo, 10% -2cm está permitido. Sin embargo, porcentajes ylongitudes 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 relación al lienzo, la imagen es colocada en relación al lienzo y no al elemento.

Los autores también pueden usar la forma rápida de la propiedad background, que está mejor soportada que lapropiedad background-position.

Background (Fondo) (declaración de una sola línea)

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 rápida para las propiedades más específicas 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 propiedadbackground-position será establecida a 0% 0%.

Para ayudar a evitar conflictos con hojas de estilo del usuario, siempre deberían especificarse juntas las propiedades

background y color.

Diagramación de una columna

Es hora de comenzar a diagramar nuestra página, para ello comenzaremos con una diagramación simple de unacolumna 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 más para conseguir diagramaciones más complejas con dos ytres columnas.

Diagramación de una columna de dos y tres columnas por flotación

Casi siempre vamos a necesitar desarrollar diseños con dos o tres columnas donde podamos incluir nuestroscontenidos, como se muestra en la imagen de referencia

para ello existen dos alternativas posibles que permiten alterar el flujo normal del HTML logrando ubicar unelemento div junto a otro, una posibilidad es, desarrollar una estructura flotante, y la otra alternativa es trabajar conposición como veremos en la próxima unidad; a continuación aprenderemos desarrollar estructuras flotantes.

Utilización del atributo Float

El atributo float sirve para alinear un elemento, junto a otro, o bien hacer que el texto de alrededor del mismo sefluja 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 seaplicará.

Los elementos con el atributo float, no forman parte del flujo normal del documento HTML, razón por la cual loselementos NO Flotantes que estén por debajo de estos se verán afectados en su ubicación en el espacio.

Utilización del atributo Clear

El estilo "clear" se utiliza conjuntamente con float. Utilizamos este estilo cuándo queremos que elementos quetienen 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 permiteflotantes a su derecha ) o both (el elemento no permite flotantes a ningún lado).

Anidamiento de divs

Si bien no es la más recomendado, en muchas ocasiones deberemos trabajar con divs anidados, es decir con un div

dentro de otro, para llegar a las diagramaciones deseadas, a continuación 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 idcontenido es el padre del div con id logo y lógicamente 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 concualquier elemento en la estructura del documento.

En la práctica es difícil que un mismo estilo se pueda aplicar a todos los elementos de una página; pero loutilizamos siempre para formatear a 0 los márgenes y los rellenos, atributos que suelen interpretarse por defecto demanera 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 combinación con otros selectores, temaque veremos más adelante en el curso.

UNIDAD 3 - Diagramación Avanzada

Modelo de caja

El modelo de caja de CSS describe las cajas rectangulares que son generadas por los elementos en la estructura deldocumento 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 tamaño de cada área es especificado por las propiedades que se definen abajo. El siguientediagrama muestra cómo se relacionan estas áreas y la terminología usada para referirse a las partes de margin,border y padding:

Representación gráfica 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, cuyascaracterísticas específicas, veremos a continuación.

Estos tres atributos, se comportan de forma similar y permiten manejar por separado cada uno de los lados de lacaja, de forma que podemos crear reglas de estilos que combinen distintas propiedades para una caja utilizandotodos los lados o solo algunos.

Margin (margen)

Es el espacio que hay entre el borde de una caja y otra caja. En el gráfico 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 numéricos y pueden estar expresados en distintas unidades y puedenser positivos o negativos

Ejemplos:

margin-top: 30px;

margin-right: 20px;

margin-bottom: 3em;

margin-left: 2em;

Borde (Border)

Es una línea situada en el límite 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 numéricos y pueden estar expresados en distintas unidades y puedenser positivos o negativos

border-width

Puede marcarse en píxeles 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 código de color hexadecimal, tanto su forma corta como larga con lacláusula rgb, tanto en porcentajes como en números 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 línea 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 línea 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 línea corta (guiones).

solid

El borde es una línea simple.

double

El borde son dos líneas sólidas, el ancho de cada línea y el espacio entre ellas es igual al valor del ancho de borde.

groove

El borde se ve como si fue cavado en la página.

ridge

El borde se ve como si se estaría saliendo para afuera de la página. Opuesto a groove.

inset

El borde da el aspecto de que la caja está hundida en la página.

outset

El borde da el aspecto de que la caja esta sobresalida de la página.

Relleno (Padding)

Es el espacio que hay entre el contenido y el borde de la caja. En el gráfico anterior, es el espacio representado conel color lila.


Los valores admitidos para este atributo son numéricos y pueden estar expresados en distintas unidades.

Ejemplos

padding-top: 10px;

padding-right: 2em;

padding-bottom: 3em;

padding-left: 2em;

Escritura resumida (declaración de una sola línea)

Algunos atributos poseen lo que llamamos escritura resumida, es decir la declaración de una sola línea, esta formade escritura permite ahorrar líneas de código y hacer más fácil y rápida la edición de nuestras reglas de estilo.

Declaración una línea 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 aplicanes

padding: top right bottom left;

Esta es la forma más conveniente para utilizar el atributo de padding

Declaración una línea 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 aplicanes

margin: top right bottom left;

Esta es la forma más conveniente para utilizar el atributo de margin

Declaración una línea para el borde

El atributo borde también 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;

Diagramación avanzada con posición

Para crear diseños con diagramaciones más complejas deberemos utilizar el atributo Position, que permite ubicarlos divs en el lugar exacto de la pantalla que deseemos.

Atributos de posición

Los divs pueden posicionarse en la pantalla de 4 maneras diferentes:

Posicionamiento Estático●

Posicionamiento Absoluto●

Posicionamiento Relativo●

Posicionamiento Fijo.●

Para todos los valores menos "static" podemos modificar la posición del elemento por medio de las propiedadestop, bottom, left y right.

Static (estático)

Los elementos con position:static, que es el valor por defecto de todos los elementos, no estarán posicionados. Suposición en la ventana estará determinada por dónde 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 están 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 relacióna la posición que habría ocupado si hubiese estado posicionado estáticamente.

Si le ponemos position:relative a un elemento, sin dar valores para los costados, el elemento termina estando dondehabría estado si le hubiésemos puesto position:static o si no le hubiésemos puesto ninguna propiedad.

Si le ponemos top:10px, el elemento se mueve 10 píxeles desde su borde superior. Esto significa que se muevehacia abajo. Un valor negativo mueve el elemento en la dirección opuesta, así daría el mismo resultado ponerbottom:-10px. Esto quiere decir que no sirve de nada poner valores top y bottom, o left y right. Sin embargo, puedeser 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 siguenen el flujo del documento – en la posición donde estaban originalmente. Siguen ocupando espacio, pero no dondeaparecen, sino donde habrían estado si hubiesen estado posicionados estáticamente.

¿Qué significa esto? El posicionamiento relativo es mayormente útil para mover un elemento algunos píxeles enalguna dirección, o quedará un hueco en la página. Sin embargo, existe otra utilidad para esta propiedad que esmucho más importante: Un elemento posicionado relativamente cuenta cómo posicionado, aunque no se mueva niun solo píxel. Y esto es importante entre otras cosas porque un elemento relativo sirve para contener a otros, lo queveremos a continuación...

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é?

Irónicamente, los elementos posicionados absolutamente son relativos. Si, han leído correctamente. Un elementoposicionado absolutamente está posicionado relativamente a otro elemento, llamado bloque contenedor.

El bloque contenedor de un elemento posicionado absolutamente es su ancestro (parent) posicionado más 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 esabsolute, fixed o relative. Asi que aquí está un uso importante para el posicionamiento relativo del que hablamosantes. Definiendo position:relative para un elemento, sin moverlo, podemos establecer un nuevo contexto para sushijos posicionados absolutamente. Suena fácil, no?

¿Pero si no hay ancestro posicionado? Ahí es donde entra el llamado bloque contenedor inicial. El estándar CSSdice que esto lo elige el navegador. El estándar también dice que podría estar relacionado con la ventana devisualización de la página. En la práctica esto significa que podría ser o el elemento BODY o el HTML.

Elementos posicionados absolutamente están completamente eliminados del flujo del documento. Esto no significaque no ocupan espacio. O, para ponerlo de otra manera, no afectan a los elementos subsiguientes. Por lo tantodebemos asegurarnos de que nuestro contenido no termine debajo de un elemento posicionado absolutamente, amenos que este sea el efecto que deseamos, obviamente.

Un elemento posicionado absolutamente con top:100px queda colocado tal que su borde superior esta 100 píxelessobre el borde de su bloque contenedor. En los navegadores que soportan CSS se pueden especificar valores paralos cuatro bordes y el navegador se encarga de calcular la altura y anchura. Tristemente esto no ocurre con InternetExplorer, asi que es casi siempre necesario especificar al menos la anchura de un elemento posicionadoabsolutamente.

Es perfectamente legal especificar valores negativos para los valores de los bordes, pero hay que tener cuidado, hay

que estar muy seguros de cuál 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 debería 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 posición 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 elfuncionamiento del posicionamiento fijo, pero esta propiedad no es tan útil como parece. Si, es una manera de tenerun menú que nunca se mueve, pero la mayoría de los usuarios esperan que todo se mueva con la página. Ya hemosvisto 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 diseño con varias columnas, siempre y cuando se sepa cuál será la

más larga. Ya que los elementos posicionados absolutamente están fuera del flujo del documento, no afectan a los

elementos subsiguientes. Por eso es difícil tener un pie de página que ocupe toda la anchura de la página y que

aparezca después de todas las columnas.

Así como en todos los elementos del diseño web, es conveniente usar unidades relativas, así el diseño se puedeadaptar a todos los tamaños de pantalla. Por ejemplo, el valor de left debería estar especificado en em o en % y noen px.

Si se especifica una anchura para un elemento posicionado absolutamente, explícitamente por medio de width enporcentajes o implícitamente por medio de left y right, el estándar dice que debería ser calculado relativo al bloquecontenedor. Internet Explorer y Opera, ambos, hacen esto mal y usan la anchura del elemento padre como base parasus cálculos. Los navegadores basados en Gecko como Mozilla y Firefox lo hacen correctamente.

Con todos los tipos de posicionamiento, incluyendo relativo, deberían especificar los margin y paddingexplícitamente, especialmente si se debe ver igual en todos los navegadores. Los navegadores tienen distintosvalores por defecto de estas propiedades.

Cuando elementos posicionados se superponen, podemos controlar el orden de apilamiento con la propiedad z-index. El elemento con el mayor z-index es el que queda más arriba. Desafortunadamente esto no es tan simplecomo parece, ya que cada bloque establece su contexto para el z-index. Así que para poner un elemento encima deotro elemento con un bloque contenedor diferente hay que incrementar el z-index del bloque contenedor del primerelemento. En diseños complicados pueden surgir combinaciones imposibles, si se quiere apilar tres elementosdonde 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 válido usarlos con

otros elementos.

Diagramación centrada

Es muy común que deseemos realizar un diseño cuya diagramación esté centrada horizontalmente en la pantalla,hacerlo es muy simple, debemos trabajar con márgenes automáticos, para que el navegador los calcule dependiendode la resolución 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 orelative.

Valores de la propiedad z-index:

auto: la posición asignada por defecto.

numérico: en este caso el valor es un número entero, todo lo grande que se quiera, que podrá ser positivo onegativo.

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 unvalor de z-index mayor que la primera (div#capa1) será esa la que quede por encima.

UNIDAD 4 - Barras de navegación

Listas

En HTML, utilizamos listas para mostrar elementos en forma ordenada, tenemos dos tipos de listas que veremos acontinuación:

Listas Ordenadas

Las listas ordenadas, implican orden jerárquico se muestran gráficamente con número o letra

En el código 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 gráficamente con una viñeta

En el código 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 específicos para las listas y que nos permiten modificar su aspecto básicocomo veremos a continuación;

,

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 viñeta 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 viñetas predeterminadas por otras definidas por nosotros, que simplementeson 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 delprimero, o si se corre a la izquierda y se ubica debajo de la viñeta.

La siguiente hoja de estilo, por ejemplo, define reglas de estilo para los elementos de listas ordenadas <ol> y listasdesordenadas <ul>:

ul { : square; list-style-image: url(mi.gif)}

ol { : lower-alpha}

La regla <OL> está establecida para utilizar letras minúsculas para cada elemento de lista (a, b, c, etc.), mientrasque la regla <UL> está establecida para utilizar una imagen como viñeta. Si la imagen no se puede cargar, elcódigo 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 deldelimitador de lista.

Si el valor está fijado en outside, el texto se alineará bajo el primer carácter del elemento de lista, que está a laderecha del delimitador:

Posición exterior (outside):

* Item de lista 1

segunda línea de ítem de la lista

Posición interior (inside):

* Item de lista 1

segunda línea de ítem de la lista

Declaración de una sola línea

Como en los ejemplos citados anteriormente, los atributos de listas se pueden escribir con la declaración de unasola línea de la siguiente forma:

ul

{

list-style: square inside url('arrow.gif')

}

Creación de barras de navegación

Las listas son muy a menudo utilizadas para organizar menús; podemos crear barras de navegación con diseñosvariados utilizando colores e imágenes, y así lograr una barra de navegación 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, peropodemos encontrarnos con el caso donde también necesitamos que algunos elementos H1, tengan característicasdiferentes, 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 enla estructura del documento (ej., "Que equivalga a aquellos elementos EM que están contenidos en un elementoH1").

Los selectores de descendientes expresan tal relación dentro de un patrón. Un selector de descendiente se componede dos o más 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 algún elemento antepasado A.

Ejemplos:

Por ejemplo, considere las siguientes reglas:

h1 { color: red }

em { color: red }

Aunque la intención de estas reglas es agregar énfasis al texto cambiando su color, el efecto se perderá en un casocomo:

<H1>El título es <EM>muy</EM> importante</H1>

Resolvemos este caso complementando las reglas anteriores con una regla que asigna un color azul al texto siempreque 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">título es <em>muy</em> importante</span></H1>

Pseudo Elementos y Pseudo clases

En CSS2, el estilo se atribuye a un elemento basado en su posición dentro de la estructura del documento. Estesencillo modelo es suficiente para muchos casos, pero algunos temas comunes en la edición pueden no ser posiblespor medio de la estructura del documento. Por ejemplo, en HTML 4.0, ningún elemento se refiere a la primera líneade una párrafo y, por consiguiente, ningún selector CSS simple puede referirse a ella.

CSS introduce los conceptos de pseudo-elementos y pseudo-clases para permitir aplicar el formato basado eninformación que está fuera de la estructura del documento.

Los pseudo-elementos crean abstracciones acerca de la estructura del documento más allá de aquellas especificadaspor el lenguaje del documento. Por ejemplo, los lenguajes de documento no ofrecen mecanismos para acceder a laprimera letra o a la primera línea del contenido de un elemento. Los pseudo-elementos de CSS permiten a losdiseñadores de hojas de estilo referirse a esta información inaccesible por otros medios. Los pseudo-elementostambién pueden proporcionar a los diseñadores de hojas de estilo un modo de asignar estilos a un elemento que noexiste en el documento fuente (ej., los pseudo-elementos y :after permite acceder al contenido generado).

Las pseudo-clases clasifican a los elementos basados en características más allá de su nombre, atributos ocontenido; en principio, atributos que no pueden deducirse de la estructura del documento. Las pseudo-clasespueden ser dinámicas, en el sentido de que un elemento puede adquirir o perder una pseudo-clase a medida que elusuario interactúa con el documento. La excepción es ':first-child', que puede deducirse de la estructura deldocumento.

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 sólopueden aparecer después del sujeto del selector.

Los nombres de los pseudo-elementos y las pseudo-clases no hacen distinción entre mayúsculas y minúsculas.

Algunas pseudo-clases son mutuamente excluyentes, mientras otras pueden aplicarse simultáneamente al mismoelemento. 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-letteren el selector o, alternativamente, puede dar soporte sólo a un subconjunto de las propiedades en estos pseudo-elementos.

Pseudoclases de vínculos

Las aplicaciones del usuario normalmente muestran los vínculos no visitados de un modo diferenciado de aquellospreviamente visitados. CSS proporciona las pseudo-clases ':link' y ':visited' para distinguirlos:

La pseudo-clase :link se aplica a los vínculos que aún no han sido visitados.

La pseudo-clase :visited se aplica una vez que el vínculo ha sido visitado por el usuario.

Nota. Después de cierta cantidad de tiempo, las aplicaciones del usuario pueden elegir devolver un vínculo visitadoa la condición de (no visitado) ':link'.

Los dos estados son mutuamente excluyentes.

El lenguaje del documento determina qué elementos son las anclas de orígen de los hipervínculos. Por ejemplo, enHTML 4.0, las pseudo-clases link se aplica a los elementos A con el atributo "href". De este modo, las siguientesdos 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 dinámicas

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 señala un elemento (con algún dispositivo para apuntar), perono lo activa. Por ejemplo, una aplicación del usuario visual puede aplicar esta pseudo-clase cuando el cursor (elpuntero del ratón) se mueve por encima de una caja generada por el elemento. Las aplicaciones del usuario que noofrecen soporte a los medios interactivos no tienen que apoyar esta pseudo-clase. Algunas aplicaciones del usuariocon conformidad que soportan medios interactivos pueden no ser adecuadas para soportar esta pseudo-clase (ej.,lápices ópticos).

La pseudo-clase :active se aplica mientras un elemento está siendo activado por el usuario. Por ejemplo, el lapsodurante el cual el usuario presiona el botón del ratón y lo suelta.

La pseudo-clase :focus se aplica mientras un elemento tiene el foco (acepta eventos del teclado u otras formas deentrada 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 cómo 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 losdistintos 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 laspseudo-clases. Por ejemplo, un hoja de estilo puede especificar que la propiedad 'font-size' de un vínculo :activedebe ser mayor que la de un vínculo inactivo, pero como esto puede ocasionar que las letras cambien de posicióncuando el lector selecciona el vínculo, una AU puede ignorar la regla de estilo correspondiente.

Ejemplos:

A:link { color: red } /* vínculos no visitados */

A:visited { color: blue } /* vínculos visitados */

A:hover { color: yellow } /* el usuario señala el vínculo */

A:active { color: lime } /* vínculos activos */

Observe que A:hover debe ir después que las reglas A:link y A:visited, de otro modo las reglas de cascadaocultarán la propiedad 'color' de la regla A:hover. También, debido a que A:active está ubicada después deA:hover, el color activo (lime) será aplicado cuando el usuario active y señale el elemento A.

Ejemplos:

Un ejemplo de combinación de pseudo-clases dinámicas:

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 información acerca de la representación del foco en los contornos, consulte por favor la sección sobre focodinámico en los contornos.

Nota. En CSS1, la pseudo-clase ':active' era mutuamente excluyente con ':link' y ':visited'. Este ya no es el caso. Unelemento 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 línea de un párrafo.

Por ejemplo:

P:first-line { text-transform: uppercase }

La regla anterior significa "convertir las letras de la primera línea de cada párrafo en mayúsculas". Sin embargo, elselector "P:first-line" no equivale a ningún elemento HTML real. Se corresponde con un pseudo-elemento que lasaplicaciones del usuario con conformidad insertarán al comienzo de cada párrafo.

Observe que la medida de la primer línea depende de un número de factores, incluyendo el ancho de la página, eltamaño de la fuente, etc. De este modo, un párrafo HTML común como:

<p>Este es algún párrafo largo en HTML que será

partido en varias líneas. La primera línea será identificada

por una secuencia ficticia de marcas. Las otras líneas

serán tratadas como líneas comunes dentro del

párrafo.</p>

las líneas que resultan partidas como sigue:

ESTE ES ALGÚN PÁRRAFO LARGO EN HTML QUE

será partido en varias líneas. La primer línea será

identificada por una secuencia ficticia de marcas.

Las otras líneas serán tratadas como líneas

comunes dentro del párrafo.

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 cómo se heredan las propiedades.

<p><P:first-line> Este es algún párrafo

largo en HTML que</P:first-line> será partido

en varias líneas. La primer línea será identificada

por una secuencia ficticia de marcas. Las otras líneas

serán tratadas como líneas comunes dentro del

párrafo.</p>

Si un pseudo-elemento divide un elemento real, el efecto deseado a menudo se consigue con una secuencia ficticiade marcas que cierra y reabre el elemento. De este modo, si marcamos el párrafo anterior con un elemento SPAN:

<p><span class="test"> Este es algún párrafo

largo en HTML que será partido en varias líneas.</span>

La primer línea será identificada por una secuencia ficticia

de marcas. Las otras líneas serán tratadas como líneas comunes

dentro del párrafo.</P>

la aplicación del usuario puede generar las marcas de inicio y cierre apropiadas para SPAN cuando inserta lasecuencia ficticia de marcas para :first-line.

<p><p:first-line><SPAN class="test"> Este es algún párrafo

largo en HTML que</span></p:first-line><span class="test">

será partido en varias líneas.</span> La primer línea será

identificada por una secuencia ficticia de marcas. Las otras

líneas serán tratadas como líneas comunes dentro del párrafo.</p>

El pseudo-elemento :first-line sólo puede ser aplicado en elementos a nivel de bloque.

El pseudo-elemento :first-line es similar a un elemento a nivel de línea, pero con ciertas restricciones. Sólo lassiguientes 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', 'line-height', 'text-shadow' y 'clear'.

El pseudo-elemento :first-letter

El pseudo-elemento :first-letter puede ser usado para las "capitulares" y "capitulares caídas", que son efectostipográficos de uso frecuente. Esta clase de letra inicial es similar a un elemento a nivel de línea 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, propiedadesdel color, propiedades del fondo, 'text-decoration', 'vertical-align' (sólo si 'float' es 'none'), 'text-transform', 'line-height', propiedades de los márgenes, propiedades del relleno, propiedades de los bordes, 'float', 'text-shadow' y'clear'.

La siguiente CSS2 hará una capitular caída que abarca dos líneas:

<html>

<head>

<title>capitular caída</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 artículo en un periódico.</p>

</body>

</html>

Este ejemplo sería formateado como sigue:

La secuencia ficticia de marcas es:

<p>

<span>

<p:first-letter>

a

</p:first-letter>lgunas

</span>

palabras de un artículo en un periódico.

</p>

Observe que la marca para el pseudo-elemento :first-letter es contigua al contenido (es decir, el carácter inicial),mientras que la marca de inicio del pseudo-elemento :first-line se inserta después de la marca de inicio del

elemento al que está asignado.

Con el propósito de conseguir el formato de las capitulares caídas tradicionales, las aplicaciones del usuario puedenaproximar los tamaños de la fuente, por ejemplo para emparejar las líneas de base. Además, el contorno del signopuede ser tenido en cuenta al establecer el formato.

La puntuación (es decir, los caracteres definidos en Unicode [UNICODE] en las clases de puntuación "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 específicas acerca de cómo tratar ciertas combinaciones de letras. Enalemán, por ejemplo, si la combinación de las letras "ij" aparece al comienzo de una palabra, ambas letras deberíanser consideradas dentro del pseudo-elemento :first-letter.

Ejemplos:

El siguiente ejemplo ilustra cómo pueden interactuar los pseudo-elementos que se superponen. La primera letra decada elemento P será verde con una tamaño de fuente de '24pt'. El resto de la primer línea formateada será azulmientras que el resto del párrafo 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 líneas</p>

Asumiendo que el corte de la línea ocurre antes de la palabra "ocupa", la secuencia ficticia de marcas para estefragmento podría ser:

<p>

<p:first-line>

<p:first-letter>

u

</p:first-letter>n texto corto que

</p:first-line>

ocupa dos líneas

</p>

Observe que el elemento :first-letter está dentro del elemento :first-line. Las propiedades adjudicadas a :first-lineson 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 después delcontenido del elemento. Son explicados en la sección 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 olínea 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 línea

Selectores de clase

Para las hojas de estilo usadas con HTML, los autores pueden usar el punto (.) como una alternativa a "~=" cuandola correspondencia sea con el atributo "class". Así, en HTML, "DIV.valor" y "DIV[class~=valor]" tiene el mismosignificado. El valor del atributo debe seguir inmediatamente al ".".

Ejemplos:

Por ejemplo, podemos asignar información 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 sólo 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 tendría 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 listade 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 podrían conceptualmente diseñar su propio"lenguaje del documento" basados en elementos con casi ninguna presentación asociada (tales como DIV y SPANen HTML) y asignando información acerca del estilo a través del atributo "class". Los autores deben evitar estapráctica ya que los elementos estructurales de un lenguaje de documento comúnmente tienen significadosaceptados 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 más selectores simples separados por espacio en blanco. Aestos selectores se les pueden asignar propiedades normales y, debido a las reglas del orden de cascada, tendránprecedencia 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 párrafo debería tener un fondo amarillo; el texto conénfasis en un encabezado no sería afectado.

Orden de cascada

Cuando se usan varias hojas de estilo, puede haber un conflicto sobre cual controla a un selector en particular. Enestas situaciones, debe haber reglas para definir la regla de la hoja de estilo que prevalece. Las siguientescaracterísticas determinarán el resultado de hojas de estilo que se contraponen.

! important

Puede establecerse una regla como importante al especificar !important. Un estilo designado como importanteprevalecerá sobre estilos contradictorios de similar nivel. Asimismo, ya que tanto el autor y el lector puedenespecificar reglas importantes, la regla del autor primará sobre la regla del lector en casos de importancia. Unamuestra 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 prevalecerán sobre las reglas del lector de similar peso.Tanto las hojas de estilo del autor como las del lector primarán sobre las hojas de estilo incorporadas delnavegador.

Los autores deberían ser cautelosos con el empleo de reglas !important ya que primarán sobre las reglas ! importantdel lector. Un usuario puede, por ejemplo, necesitar de grandes tamaños de fuentes o colores especiales debido aproblemas de visión, y tal usuario querrá declarar que ciertas reglas de estilo sean ! importante, ya que algunosestilos son vitales para que pueda leer una página. 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 connecesidades especiales de estilos puedan leer la página.

Jerarquías y especificidad

Calculando especificidad

Las hojas de estilo también pueden primar sobre hojas de estilo en conflicto basándose en su nivel de especificidad,donde un estilo más específico siempre prevalecerá sobre uno menos específico. Simplemente es cuestión de contarpara calcular la especificidad de un selector.

Cuente el número de atributos ID en el selector.

Cuente el número de atributos CLASS en el selector.

Cuente el número nombres de etiquetas HTML en el selector.

Finalmente, escriba los tres números en orden exacto sin espacios ni comas para obtener un número de tres dígitos.(Nota: puede necesitar convertir los números a una base mayor para terminar con tres dígitos.) La lista final denúmeros que corresponden a selectores determinará fácilmente la especificidad, donde los números más altospriman sobre los más bajos. La siguiente es una lista de selectores ordenados por especificidad:

#id1 {xxx} /* a=1 b=0 c=0 --> especificidad = 100 */

UL ULLI.red {xxx} /* a=0 b=1 c=3 --> especificidad = 013 */

LI.red {xxx} /* a=0 b=1 c=1 --> especificidad = 011 */

LI {xxx} /* a=0 b=0 c=1 --> especificidad = 001 */

Orden de especificación

Para hacerlo sencillo, cuando dos reglas tienen el mismo peso, prima la última regla especificada.

Estilos en línea

Existe otra forma de aplicar estilos en forma directa sobre los elementos mediante el atributo Style como se muestraen 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 más específico de todos, la desventaja es queno es una regla reutilizable, se recomienda no hacer uso excesivo de ella, no obstante es muy útil para el diseño denewsletter.

Atributo de overflow

Esta propiedad me permite decidir qué hacer con el contenido de una caja cuando excede su tamaño. Estapropiedad trabaja, actúa cuando la caja tiene seteada dimensiones, si no tiene seteada dimensiones no se va amanifestar visualmente por más 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 dirección 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 más comunes. Por un lado tenemos a InternetExplorer, y por otro lado a todos los demás navegadores, es decir, Firefox, Opera o Chrome. Por ello, paraespecificar la opacidad o transparencia tendremos que hacerlo con dos atributos distintos. En DesarrolloWeb.comya habíamos tratado este tema con anterioridad, pero ahora vamos a ofrecer explicaciones más completas.

Opacidad en Internet Explorer

En Explorer tenemos que indicar el grado de opacidad como un filtro de CSS. Dichos filtros se pueden aplicar conel atributo filter de hojas de estilos. Existen varios filtros disponibles para hacer distintos efectos sobre elementosde la página, en concreto el filtro opacity es el que nos interesa para definir transparencias. Se especifica de lasiguiente manera:

.claseopacidad{

filter:alpha(opacity=25);

}

Con esta declaración de estilos conseguiremos que los elementos de la clase claseopacidad tuvieran un 25% deopaco, 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 enalgunos casos no funcionará y no veremos la transparencia que hayamos declarado. Esto se soluciona aplicandoalgún estilo adicional, aparte del propio filtro CSS. Por ejemplo, ponerle un ancho a la capa bastaría, o tambiéncolocarle un float:letf. Es importante saber esto, puesto que es el típico bug que si no lo sabes puedes acabar con undolor de cabeza antes de dar con él.

Quedaría 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 más simple. Lo haremos a través del atributoopacity, de esta manera:

. claseopacidad {opacity: .5}

Con esto conseguiremos que la clase sea 50% transparente, o 50% opaca, como preferimos decir.

Unidad 6 - Integración

Diagramación 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 siqueremos que la apariencia de nuestras páginas en Internet Explorer, sea igual que en el resto de los navegadoresque soportan los estándares.

A continuación veremos algunos hacks útiles, que podremos utilizar en nuestros archivos CSS para solucionarproblemas que nos suceden a diario con nuestros diseños web cuando se muestran con Internet Explorer.

El hack del guión bajo

Para el resto de los navegadores una propiedad con un guión bajo, u otro carácter alfanumérico delante es algo queno existe, y por tanto no la interpretan, pero Internet Explorer las asimila sin problemas. Esto es algo que podemosutilizar para definir propiedades en los estilos, destinadas sólo a este navegador.

Este hack funciona para todas las versiones de Internet Explorer que existen hasta la fecha, pero es posible que dejede funcionar en las próximas.

Ejemplo:

#textbox{

width: 450px; /* Firefox y los demás */

_width:400px; /* Internet Explorer 6 e inferiores */

}

Teniendo en cuenta que los navegadores sobrescriben las propiedades si éstas se definen más de una vez, dejandoestablecida la que se define última; mostramos un ejemplo donde se muestran estos dos hacks que hemos descritoanteriormente.

body {

background: #FFFFFF /* Firefox y los demás */

*background: #000000 /* IE7 e inferiores */

_background: #CCCCCC; /* Sólo IE6 */

}

En el ejemplo que mostramos anteriormente el color de fondo de la página se verá blanco para Firefox, negro paraInternet 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 propiedadque 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 laversión 7 de este navegador.

Ejemplo

p {

background: green !important; /* Navegadores superiores a IE 6 respetarán 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 página se mostrará rojo para IE 6, mientras que para Internet Explorer 7 y elresto de los navegadores se verá verde.

Asignación 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. Paraeso, creamos una hoja de estilos común, para todos los navegadores (los que respetan estrictamente los estándares)sin usar ningún hack, confiando en que solo ellos leerán esa hoja.

Luego, creamos una hoja con definiciones "revisadas" que sean válidas para todas las versiones de Explorer.

Luego, una hoja con definiciones precisas para cada versión de Explorer.

Finalmente, incluimos las hojas 2 y 3 mediante un condicional que es leído sólo por Explorer 5, 5.5 y 6:



Luego, para cada versión sólo 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

Documents

Transcript of Apuntes Css y Divs