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). 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/VP8 VP8) 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 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 proveedores primarios de esta tecnología son las URIs que identifican los recursos junto con XML y los namespaces. Se pretende que esta información sea interpretada por el ordenador con una capacidad comparable a la del lector humano. 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. caracterización de propiedades (por ejemplo simetría) o clases enumeradas. el metadato author tenga el significado de "autor de la página" y no el del "autor del objeto descrito en la página"). XML Schema. tipologías de propiedades más complejas. igualdad.ej. 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.Los principales componentes de la Web Semántica son los metalenguajes y los estándares de representación XML. Aporta una semántica básica para este modelo de datos que puede representarse mediante XML. disyunción).ej. RDF Schema y OWL. con una semántica para establecer jerarquías de generalización entre dichas propiedades y clases. usada para facilitar el trabajo de los robots). Si a esto se añade un poco de lógica. RDF Schema es un vocabulario para describir las propiedades y las clases de los recursos RDF. XML Schema es un lenguaje para definir la estructura de los documentos XML. OWL añade más vocabulario para describir propiedades y clases: tales como relaciones entre clases (p. RDF es un modelo de datos para los recursos y las relaciones que se puedan establecer entre ellos. 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). RDF. mediante una RDF. 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. u otras tecnologías como los mapas . pero sin dotarles de ninguna restricción sobre el significado. cardinalidad (por ejemplo "únicamente uno"). El etiquetado puede incluir metadatos descriptivos de otros aspectos documentales o protocolarios. se ha añadido. información de contacto. Servicio de notificación: En la última versión. El contenido de un lado debe estar relacionada con el contenido principal. El ping a la infraestructura se ha ganado velocidad considerable. en el interior del elemento de detalles <figure>Para la agrupación de una sección de contenido independiente. Internet podría estar cerca de alcanzar las aspiraciones iniciales de su inventor. Tim Berners-Lee. podría ser un vídeo <figcaption>El título de la sección de la figura Para un pie de página de un documento o sección. la fecha del documento. Además. 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. La capacidad de proporcionar estadísticas sobre todos los nombres y todas las estadísticas sobre los tipos. o la información de copyright <footer> <header>Para ver una introducción de un documento o sección. más adelante se explicará en detalle cada una de ella. artículo. Hay una lista de pings de exportación simplificado sistema que fue desarrollado en esta versión. o partes de un documento <summary>A título o resumen. Nuevas estadísticas están disponibles con esta edición también. podría ser una noticia. puede incluir el nombre del autor. Nuevas etiquetas de HTML 5 A continuación un listado de todas las nuevas etiquetas de HTML 5 separadas por grupos. Una de las razones de la mejora es que se cambió la base de datos de MySQL a Virtuoso. la interfaz de usuario se ha actualizado. que es 3.temáticos y algo de razonamiento basado en técnicas de inteligencia artificial. Web Semántica Ping servicio tiene la capacidad de validar los recursos RDF. blog. autónomo de contenido. podría incluir la navegación .0. u otros artículos que pueden ser distribuidos de forma independiente del resto del sitio. foro. o una casilla de verificación <details>Para describir los detalles de un documento. <aside>Para el contenido aparte. <comad>Un botón o botón de radio. Nuevas etiquetas de marcación semántica EtiquetaDescripción <article> Especifica independiente. Una buena característica de proporcionar la lista de nombres utilizados para describir las entidades en RDF. donde el más grande es el principal título de la secció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í Para una sección de un documento. utilizando <h1> a <h6>. Como capítulos. encabezados. o ambos <wbr>Separación de palabras. que se define dentro de los <source> elementos de audio o vídeo <embed>Para el contenido integrado. sonidos.Para una sección de los títulos. pies de página. música u otros flujos de audio <video>Para el contenido de vídeo. como un plug-in El elemento Canvas . y los otros son sub-títulos <hgroup> <mark>Para el texto que hay que destacar <meter>Para realizar una medición. como un clip de película u otras corrientes de vídeo Recurso de los medios de los elementos de los medios de comunicación. o cualquier otra sección del documento <section> <time>Para la definición de un tiempo o una fecha. Nuevos Elementos multimedia HTML5 proporciona un nuevo estándar para el contenido de los multimedia: EtiquetaDescripción <audio>Para el contenido multimedia. 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 .El elemento de tela se utiliza JavaScript para realizar dibujos en una página web. tales como la producción escrita por un guión Nuevos atributos para los input Además. EtiquetaDescripción <canvas>Para hacer gráficos o animaciones. con más funcionalidades: EtiquetaDescripción <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. Nuevos elementos de formulario HTML5 ofrece más elementos de formulario. 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.-->Estándar o ninguno <!DOCTYPE>Estándar o ninguno Atributo Añadido: media <a>href | target | rel | hreflang | media | type Atributo 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 . 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 <!-. <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 ... <head>Estándar o ninguno <header>Atributos globalesNueva etiqueta <hgroup>Atributos globalesNueva etiqueta <hr>NingunoEtiqueta cambiada <html>Estándar o ninguno <i>NingunoEtiqueta cambiada <iframe>Estándar o ninguno <img>Estándar o ninguno accept | alt | auto-complete | autofocus | cheked | disabled | form | formaction | Etiqueta cambiada: formenctype | formmethod | formnovalidate | formtarget | height | list | max | <input> Añadidos 13 maxlength | min | multiple | name | pattern1 placeholder | readonly | required | size | elementos a type src | step | type | value | width <ins>Estándar o ninguno <isindex>Etiqueta eliminada <kbd>Estándar o ninguno <label>Estándar o ninguno <legend>Estándar o ninguno <li>Estándar o ninguno <link>Estándar o ninguno <mark>Atributos globalesNueva etiqueta <map>Estándar o ninguno <menu>Estándar o ninguno . <meta>Estándar o ninguno <meter>high | low | max | min | optimum | valueNueva etiqueta <nav>Atributos globalesNueva etiqueta <noframes>Etiqueta eliminada <noscript>Estándar o ninguno <object>Estándar o ninguno <ol>Estándar o ninguno <optgroup>Estándar o ninguno <option>Estándar o ninguno <output>formNueva etiqueta <p>Estándar o ninguno <param>Estándar o ninguno <pre>Estándar o ninguno <progress>max | valueNueva etiqueta <q> <ruby>citeNueva etiqueta <rp>Atributos globalesNueva etiqueta <rt>Atributos globalesNueva etiqueta <s>Etiqueta eliminada <samp>Estándar o ninguno . <script>Estándar o ninguno <section>citeNueva etiqueta <select>Estándar o ninguno <small>Atributos globalesEtiqueta Cambiada <source>media | src | typeNueva etiqueta <span>Estándar o ninguno <strike>Etiqueta eliminada <strong>Estándar o ninguno <style>Estándar o ninguno <sub>Estándar o ninguno <sup>Estándar o ninguno <table>Estándar o ninguno <tbody>Estándar o ninguno <td>Estándar o ninguno <textarea>Estándar o ninguno <tfoot>Estándar o ninguno <th>Estándar o ninguno <thead>Estándar o ninguno <time>datetime | pubdateNueva etiqueta <title>Estándar o ninguno . 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.<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. al igual que el estado de desarrollo de lenguaje HTML 5. no es compatible con todos los navegadores. . com.org/ Distribución de mercado de los navegadores A la hora de decidir si vamos a realizar nuestro proyecto en HTML 5 o no.esteemleadership.nissanusa.it/ http://www.com/ Ejemplos de sitio desarrollados con HTML 5 Para ver proyectos desarrollados en HTML 5 y entender sus posibilidades.Verificador de HTML 5 Para verificar la compatibilidad de tu navegador con HTML 5 se puede ingresar en la siguiente URL http://html5test.com/leaf-electric-car/index#/leaf-electric-car/index http://edirpedro.lucascotto. se puede visitar los listados debajo. http://html5gallery.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. es necesario realizar un análisis sobre el .br/portfolio/ http://www.com/ Algunos sitios interesantes para ver desarrollados en HTML 5 http://www. <!DOCTYPE HTML> Declaración del idioma En HTML 5 es obligatorio declarar el idioma del sitio web. Declaración del charset La declaración del charset es obligatoria en HTML 5. podemos encontrar estadísticas en diversos lugares y fuentes las que brindadas a continuación. 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. es decir los usuarios de nuestro sitio web. donde existen más de un tipo de doctype. es el líder indiscutible en los navegadores para dispositivos móviles. dado que sabemos que HTML 5 no posee soporte completo en todos los navegadores y/o todas la versiones de los mismos. le sigue con un 27% de los usuarios totales Chrome posee hoy día un 17%. Para esto es necesario investigar sobre nuestro público objetivo. . si bien opera es el navegador que menos usuarios posee. en el encabezado del mismo . Firefox. son estadísticas recién obtenidas de sitios masivos.uso de los navegadores. con lo cual nos brindan información más que representativa. así mismo el porcentaje de sus usuario fue bajando mucho en los últimos años. algo increíble dado que es el más reciente de los navegadores el resto de los usuarios se dividen entre Safari y Opera. Elementos de html 5 Declaración de tipo de documento (doctype) A diferencia de las versiones anteriores de html. IE. sigue siendo el líder indiscutible con un 49% de los usuarios totales. HTML 5 cuenta con un solo tipo de doctype que podemos ver a continuación. 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> . más adelante se explicará el uso específico de cada una de ellas.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. <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 . false . classnombre de claseAsigna la clase que usara ese elemento (CSS) contenteditable (nuevo) true Especifica si el usuario permite o no que el contenido sea editable. Aquellos que se agregan desde la versión HTML 5 aparecen marcados como (nuevo) ATRIBUTOVALORDESCRIPCION accesskeycaracterAsigna una tecla como acceso directo. en otros capítulos de este manual se verá cómo usar específicamente cada uno de ellos.<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. Etiqueta div Las etiquetas div. a continuación veremos una a una las nuevas etiquetas semánticas y como usar cada una de ellas. son elementos de bloque. que nos permiten estructurar el contenido del documento en “bloques”.contextmenu (nuevo)menu_idEspecifica el menu contextual de un elemento ltr dir Especifica la dirección del texto de un elemento rtl true draggable (nuevo)falseEspecifica si es posible mover el elemento auto copy dropzone (nuevo)moveEspecifica que pasa si el elemento es movido y soltado en otro elemento link hidden (nuevo)hiddenEspecifica si el elemento esta visible o no ididEspecifica el nombre del elemento langlanguage_codeEspecifica el lenguaje del elemento spellcheck (nuevo) true Especifica si el elemento necesita ser comprobado gramaticalmente false stylestyle_definitionPermite agregar un estilo en 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. menú izquierdo. la misma se utiliza para crear en encabezados del archivo dentro del cuerpo del mismo como podemos ver en el ejemplo siguiente. menú derecho. que permite una mejor estructura del documento HTML. pie.</p> . A cada uno de los bloques corresponderá un tag “DIV”. 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. que siempre deberá tener un atributo “id” para que podamos referirnos a él desde un selector de elementos únicos en la hoja de estilos. 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. y debe ser utilizada en lugar de las tablas. zonas de contenidos. 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.cada uno de los cuales cumple alguna función específica: encabezado. La etiqueta div es específica para la diagramación de nuestros archivos. etc. Por su condición de elemento de bloque las etiquetas div. Modo de uso de esta etiqueta La etiqueta <header> se puede usar las veces que sea necesaria . . 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.</body> Dentro de esta etiqueta podemos incluir información relevante como ser el título principal del documento. Etiqueta <nav> La etiqueta <nav> es una de las nuevas etiquetas semánticas de HTML 5. aunque muchos autores recomiendan utilizarla una sola vez por documento. que permite una mejor estructura del documento HTML. 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. se utiliza dentro del cuerpo del mismo como podemos ver en el ejemplo siguiente. asp">Clientes</a> <a target="_blank" href="tag_noscript.asp">Contacto</a> </nav> </body> Modo de uso de esta etiqueta 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> .Ejemplo de uso de la etiqueta <nav> <body> <nav> <a target="_blank" href="default.asp">Home</a> <a target="_blank" href="tag_meter. Pero muchos autores recomiendan utilizar esta etiqueta una única vez por documento para la negación principal del sitio. Soporte de navegadores La etiqueta <nav> es soportada por la mayor parte de los navegadores en sus versiones mas actuales a saber: Firefox Chrome Safari Opera . Nota: Vale recordar que el estándar HTML 5 aun no esta terminado y las reglas pueden variar en los meses siguientes. 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.IE (desde la versión 9) Atributos que puede utilizar La etiqueta <nav> soporta atributos globales y atributos de evento. aunque muchos autores recomiendan utilizar una sola vez por documento. Soporte de navegadores La etiqueta <footer> es soportada por la mayor parte de los navegadores en sus versiones más actuales a saber: Firefox Chrome Safari . 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> Modo de uso de esta etiqueta La etiqueta <footer> se puede usar las veces que sea necesaria . Etiqueta <footer> La etiqueta <footer> es una de las nuevas etiquetas semánticas de HTML 5. 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..Opera IE (desde la versión 9) Atributos que puede utilizar La etiqueta <footer> soporta atributos globales y atributos de evento. la misma se utiliza para crear una sección dentro del documento HTML. Ejemplo de uso de la etiqueta <section> <body> <section> <h1>WWF</h1> <p>La WorldWildlifeFoundation nació en el año 1961. Esta etiqueta. en muchos casos la utilizamos donde antes sólo podíamos usar un div. que permite una mejor estructura del documento HTML. Etiqueta <section> La etiqueta <section> es una de las nuevas etiquetas semánticas de HTML 5. Soporte de navegadores .</p> </section> </body> Modo de uso de esta etiqueta La etiqueta <section> se puede usar las veces que sea necesaria en cada documento HTML.. Etiqueta <article> La etiqueta <article> es una de las nuevas etiquetas semánticas de HTML 5.netscape. </article> </body> . Ejemplo de uso de la etiqueta <section> <body> <article> <a target="_blank" href="http://blog.La etiqueta <section> es soportada por la mayor parte de los navegadores en sus versiones mas actuales a saber: Firefox Chrome Safari Opera IE (desde la versión 9) Atributos que puede utilizar La etiqueta <section> soporta atributos globales y atributos de evento. que permite una mejor estructura del documento HTML. como podemos ver en el ejemplo siguiente.. la misma se utiliza para crear artículos dentro de los documentos HTML..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.. la típica información de quienes somos por ejemplo. Soporte de navegadores La etiqueta <article> 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 . 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.Modo de uso de esta etiqueta La etiqueta <article> se puede usar las veces que sea necesaria en cada documento HTML. Etiqueta <aside> La etiqueta <aside> es una de las nuevas etiquetas semánticas de HTML 5.La etiqueta <article> soporta atributos globales y atributos de evento. Modo de uso de esta etiqueta La etiqueta <aside> se puede usar las veces que sea necesaria en cada documento HTML. 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>. 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. Soporte de navegadores La etiqueta <aside> es soportada por la mayor parte de los navegadores en sus versiones más actuales a saber: . son contenidos relacionados pero de menos importancia. la misma se utiliza dentro del cuerpo del documento. que podrían en todo caso ser omitidos. la misma se utiliza para agregar contenidos complementarios al contenido principal del documento. 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. 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.Firefox Chrome Safari Opera IE (desde la versión 9) Atributos que puede utilizar La etiqueta <aside> soporta atributos globales y atributos de evento.. se utiliza dentro del cuerpo del documento como podemos ver en el ejemplo siguiente. Etiqueta <hgroup> La etiqueta <hgroup> es una de las nuevas etiquetas semánticas de HTML 5. que permite una mejor estructura del documento HTML.</p> </body> . Modo de uso de esta etiqueta La etiqueta <hgroup> se puede usar las veces que sea necesaria en cada documento HTML y debe estar dentro de la etiqueta <header>. la misma se utiliza para crear una figura. Etiqueta <figure> La etiqueta <figure> es una de las nuevas etiquetas semánticas de HTML 5. que permite una mejor estructura del documento HTML. 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. Soporte de navegadores La etiqueta <hgroup> 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 <hgroup> soporta atributos globales y atributos de evento. Ejemplo de uso de la etiqueta <figure> <body> <figure> <p>Vista desde la cúpula de la catedral </p> . <imgsrc="img_pulpit. es decir la si la etiqueta <figure> es omitida. pero sin el contenido debe poder ser comprendido independientemente. El contenido de la etiqueta <figure> debe ser relevante para el contenido principal de la página. Soporte de navegadores La etiqueta <figure> 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 <figure> soporta atributos globales y atributos de evento.jpg" width="304" height="228"> </figure> </body> Modo de uso de esta etiqueta La etiqueta <figure> se puede usar las veces que sea necesaria en cada documento HTML. Etiqueta <figcaption> . Se suele utilizar junto con la etiqueta <figcaption> para agregar un título a esa figura. no debe afectar a la comprensión del contenido del sitio. jpg" width="304" height="228"> </figure> </body> Modo de uso de esta etiqueta La etiqueta <figcaption> se puede usar las veces que sea necesaria en cada documento HTML. Ejemplo de uso de la etiqueta <figcaption> <body> <figure> <figcaption>Vista desde la cúpula de la capital</figcaption> <imgsrc="img_pulpit. se utiliza dentro del cuerpo del documento como podemos ver en el ejemplo siguiente. La etiqueta <figcaption> debe ser el 1º hijo dentro de la etiqueta <figure>. la misma se utiliza para crear un título dentro de la etiqueta <figure>. Soporte de navegadores La etiqueta <figcaption> es soportada por la mayor parte de los navegadores en sus versiones más actuales a saber: Firefox Chrome Safari Opera . pero siempre debe ir dentro de la etiqueta <figure>.La etiqueta <figcaption> es una de las nuevas etiquetas semánticas de HTML 5. que permite una mejor estructura del documento HTML. Una página puede disponer de diferentes hojas de estilo según el dispositivo que la muestre o incluso a elección del usuario. 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). está sólo parcialmente implementado en los más recientes. Trabajando con CSS Declaración de reglas de estilo En HTML había tres opciones para definir estilos. hojas de estilo en cascada (Cascading Style Sheets. Versiones de CSS Hay varias versiones: CSS1 y CSS2. en XHTML. CSS). las mismas son un lenguaje formal usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML). . o ser "leída" por un sintetizador de voz. personas con deficiencias visuales pueden configurar su propia hoja de estilo para aumentar el tamaño del texto o remarcar más los enlaces. Los navegadores modernos implementan CSS1 bastante bien. mostrada en un dispositivo móvil. CSS Qué es el CSS El término CSS significa. solo hay dos maneras. para ser impresa. 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. El W3C (World Wide Web Consortium) es el encargado de formular la especificación de las hojas de estilo que servirán de estándar para los agentes de usuario o navegadores. aunque existen pequeñas diferencias de implementación según marcas y versiones de los navegadores. Los Navegadores permiten a los usuarios especificar su propia hoja de estilo local que será aplicada a un sitio web. CSS2. con lo que aumenta considerablemente la accesibilidad. sin embargo. Por ejemplo. con CSS3 en desarrollo por el World Wide Web Consortium (W3C).IE (desde la versión 9) Atributos que puede utilizar La etiqueta <figcaption> soporta atributos globales y atributos de evento. Por ejemplo. ahora. sólo hemos de modificar un archivo (la hoja de estilos) y afectará a todas las páginas. esta es la forma más recomendable para trabajar ya que tiene una ventaja muy grande y es que podemos tener muchas páginas enlazando a la misma hoja de estilos. Si hacemos las dos cosas a la vez.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. Lo podemos hacer escribiendo entre las etiquetas <style> y </style>. Podemos enlazar una o más hojas poniendo esto dentro de la cabecera (head): <link target="_blank" href="nuestra_hoja.css”).css" rel="stylesheet" type="text/css" />Hoja de estilo embebida en el encabezado del documento Esta opción consiste en escribir la información referente a los estilos dentro mismo del archivo XHTML. siempre tienen prioridad las reglas que estén dentro de <style> (lo local predomina sobre lo global). .css” podemos importar distintas hojas: @importurl(“default.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. desde dentro de “hoja_maestra. Si más adelante queremos cambiar algo.css” type=”text/css” media=”all”> A su vez.css”). @import url(“pantalla.Hoja de estilo embebida en el encabezado del documento c. que también deben ir en la cabecera (head).a. @importurl(“impresion. Estilos en línea La tercera forma era incluir el atributo style dentro de algún elemento HTML.css”).Hoja de estilo externa b. su uso es específico para la creación de 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 de documento: <link target="_blank" href="nuestra_hoja. Reglas de estilo En una hoja de estilos definimos reglas que consisten en mencionar selectores a los que les asignamos una serie de propiedades. cada atributo se separa por : de su valor. De esta manera. @import url(“celular. Por ejemplo. font-size:15px. el mantenimiento y degradación sin errores es mucho más simple. Elementos HTML (etiquetas) Se utilizan para redefinir el aspecto de una etiqueta específica. . color:#ff0011 } Selectores Los selectores se utilizan para elegir a qué elemento del XHTML aplicar las propiedades que escribimos. Si queremos elegir una etiqueta o tag XHTML.. si queremos que nuestra página web tenga el fondo blanco. Hay diferentes tipos de selectores.. simplemente escribimos su nombre.css”). las letras grises y use una fuente Arial de 11 píxeles de tamaño. } Ejemplo: regla de estilo con varios atributos h1 { background-color:#ff2200. los más importantes son los que se detallan a continuación. Siempre al final de cada valor usamos . Por ejemplo.@import url(“palm.css”). selector {atributo: valor} Ejemplo: regla de estilo con un solo atributo h1 { background-color:#ff2200. una regla puede tener N cantidad de atributos. un selector y una serie de atributos encerrados entre llaves. si queremos establecer propiedades para los párrafos: p{ . para terminar esa sentencia y separarlo del próximo atributo. Sintaxis de las reglas de estilo Todas las reglas de estilo tiene la misma sintaxis. 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. como títulos. Para ello. listas. no pueden repetirse en un archivo XHTML Luego.. Ejemplo: /* Reglas de estilo para el home */ . 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. escribiendo un punto antes del nombre. } Luego podríamos usar esa clase en todos los párrafos que querramos (o en cualquier otro elemento.} La regla definida aplicará a todos los párrafos de nuestros archivos XHTML.. Identificadores También podemos elegir un elemento #unico utilizando su atributo id. y solo a ellos. si queremos destacar algo: . Podemos definir una clase y hacer que muchos elementos la utilicen.destacado { . } nota: debemos recordar que los id. como vemos a continuación. que nos permite dejar comentarios en el código. Por ejemplo. usando el atributo class. empleamos el numeral: #menu { ..). etc.. vamos a encontrar todos los atributos que se aplican a los elementos de tipografía.h4. .} Herencia Es la propiedad por al cual un estilo no sólo se aplica a un elemento en concreto. sobre todo en torno a las relaciones entre padres e hijos. Existen una serie de razones (normalmente de sentido común) por las cuales algunas propiedades no se pueden heredar. como en el siguiente ejemplo. si queremos definir que los EM que estén dentro de un H1 serán grises.h3.h5.Estructura y Herencia La estructura del documento es determinante para la forma en que CSS aplica los estilos al documento. siempre que tengamos reglas que posean atributos comunes entre si. todas las etiquetas H tendrán color verde Ejemplo: h1.} <h1>Hola<em>Mundo</em></h1> Debemos tener en cuenta que no todas las propiedades se heredan. podemos añadir un atributo CLASS a cada EM que esté dentro de un H1. por ejemplo la definición de bordes Selectores de grupo En CSS tenemos la posibilidad de agrupar selectores. sino que es heredado por sus descendientes y aplicado por estos: h1 {color: gray. Por ejemplo. los selectores se separan con comas. o definir una regla como la siguiente: H1em {color: gray.h2. } Atributos tipográficos En la categoría Tipo. podemos crear un grupo con ellos.h6 { color: green. El primer gran beneficio de este tipo de relaciones es el hecho de que podemos definir relaciones de contexto entre los elementos. .. serif } Note que las dos primeras asignaciones son fuentes de tipo específico: New Century Schoolbook y Times.. no será tan probable de encontrar como una familia de fuente genérica. Sin embargo. Un ejemplo de declaración de font-family: p { font-family: "New Century Schoolbook". y si hace una asignación de fuente específica. Arial o Helvética) cursive (por ej. ya que ambas son fuentes serif. si define una fuente específica. Zapf-Chancery) fantasy (por ej.]* [<nombre-de-familia> | <familiagenérica>] Valores posibles:<nombre-de-familia> Puede usarse cualquier nombre de familia de Fuentes <familia-genérica> serif (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. Times..Font Family (Familia de fuente) Sintaxis: font-family: [[<nombre-de-familia> | <familia-genérica>].. Font Style (Estilo de fuente) Sintaxis: font-style: <valor> Valores posibles: normal | italic | oblique Valor inicial: normal Se aplica a: Todos los elementos . La familia de fuente también puede darse con la propiedad font. Puede hacer múltiples asignaciones de familias. Times) sans-serif (por ej. debería ser seguida por un nombre de familia genérica en el caso de que la primera selección no se halle presente. con comillas simples o dobles. Cualquier nombre de fuente que contenga un espacio en blanco deberá ser entrecomillada. Western) monospace (por ej. sino otra fuente serif que cumpla los requisitos. Obviamente. la familia genérica está listada como un respaldo en el caso de que el sistema no tenga ninguna de las dos. con caracteres ligeramente más grandes que las minúsculas. Algunos ejemplos de asignación de font-weight: h1 { font-weight: 800 } o p { font-weight: normal } . Posteriores versiones de CSS pueden soportar variantes adicionales como condensada. 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 Valor inicial: normal Se aplica a: Todos los elementos Heredado: Si La propiedad font-weight se usa para especificar el peso de la fuente. expandida. números en small-caps u otras variantes personalizadas.Heredado: Si La propiedad font-style define que la fuente se muestre en una de tres formas: normal. 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 Valor inicial: normal Se aplica a: Todos los elementos Heredado: Si La propiedad font-variant determina si la fuente se muestra en mayúsculas tipo normal o pequeñas smallcaps. Los valores bolder y lighter son relativos al peso de la fuente heredada. itálica u oblicua (inclinada). Las small-caps se muestran cuando todas las letras de la palabra están en mayúsculas. mientras que los otros valores son pesos de fuente absolutos. mientras que el tamaño de fuente para el encabezado de nivel uno aplicado por IE probablemente sería considerado xx-large. Las fuentes con longitudes absolutas pueden ser muy pequeñas o grandes para un usuario.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 Se aplica a: Todos los elementos Heredado: Si La propiedad font-size se usa para modificar el tamaño de la fuente mostrada. porque el tamaño será dos veces el tamaño de la fuente por defecto de IE para encabezados de nivel-uno. BODY sería muy probablemente el elemento padre. y definiría posiblemente un tamaño de fuente médium. Considerando estos defectos. El navegador también aplica incorrectamente valores de porcentaje relativos al tamaño de fuente por defecto para el selector. en vez de en relación al tamaño de fuente del elemento padre. En este caso.x aplica incorrectamente las unidades em y ex cómo pixels. los autores deberían tener cuidado al usar valores de porcentaje para font-size. en lugar de dos veces el tamaño de fuente del elemento padre. y probablemente deberían evitar unidades em y ex para esta propiedad. Las longitudes absolutas (usando unidades como pt e in) deberían usarse racionalmente debido a su poca capacidad de adaptarse a diferentes ambientes de navegación. . Esto hace que reglas como: #contenidoDeLaClase h1{ font-size: 200% } sean peligrosas. 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. lo que puede hacer el texto ilegible. 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 de fuente> Valor inicial: No definido Se aplica a: Todos los elementos Heredado: Si La propiedad font puede usarse como una forma rápida para las diferentes propiedades de fuentes. Atributos de color El atributo color. permite modificar el color de las tipografías Color Sintaxis: color: <color> Valor inicial: Determinado por el navegador Se aplica a: Todos los elementos 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 } . serif } Especifica párrafos con negrita (bold) e itálica (italic). p { font: italicbold 12pt/14pt Times. fuente Times o serif con un tamaño de 12 puntos y una altura de línea de 14 puntos. así como para line-height (altura de línea). Por ejemplo. siempre se ubicaran una debajo de la otra ocupando el 100% de ancho. el menú será leído al principio por el motor de búsqueda. pie. que nos permiten estructurar el contenido del documento en “bloques”. Un sitio bien realizado en CSS escala perfectamente y muestra el contenido secuencialmente. Muchos países (entre ellos España. Muchas personas visitan sitios web desde sus palms y teléfonos celulares. Ejemplo: <div id=”caja”></div> Por qué reemplazar las tablas por etiquetas div u otras etiquetas semánticas Al usar tablas para diagramar un sitio web. A cada uno de los bloques corresponderá un tag “DIV”. y muchos motores de búsqueda . Las tablas son muy complejas de comprender dentro del código HTML para nosotros mismos!. al momento de rediseñar un sitio es mucho más difícil de lo necesario.Diagramación Básica Etiqueta div Las etiquetas div. Usando un típico menú de navegación ubicado en un td a la izquierda del contenido. La etiqueta div es específica para la diagramación de nuestros archivos. menú derecho. cada uno de los cuales cumple alguna función específica: encabezado. deberemos cambiar cada tabla de cada una de las páginas del sitio. y debe ser utilizada en lugar de las tablas. Debido a que las tablas se pueden ver en la pantalla de un único modo. para que pueda ser leído en "bloques lógicos" (cada DIV) en una pequeña pantalla. que siempre deberá tener un atributo “id” para que podamos referirnos a él desde un selector de elementos únicos en la hoja de estilos. lo único que necesitamos cambiar y subir por FTP es la hoja de estilos (un solo archivo).. son elementos de bloque. y no tienen espacio suficiente en sus pequeñas pantalla para el ancho forzado de una tabla. en el mismo orden en el cual aparecen el en flujo normal de documento HTML. la fila y el td). Con un sitio XHTML y CSS. zonas de contenidos. una de las principales fuentes de trabajo para los latinoamericanos) ya tienen legislación que obliga a hacer sitios accesibles. mezclamos presentación con contenido. Antes aún de haber puesto ningún contenido dentro de ellas. Por otro lado. si luego queremos cambiar el diseño de un sitio entero. estilos) nuevamente. Las tablas se posicionan peor en los buscadores. puede ser leído por un lector de pantalla en un orden (el de las celdas de la tabla) que puede no ser el lógico. ya tenemos tres niveles de tabulado (la tabla. sino la presentación completa (tablas. Las tablas no ayudan a acceder al contenido del sitio a usuarios con discapacidades. por lo que el ancho de banda necesario (y el tiempo de carga) es mucho mayor de lo necesario. ya que por cada página visitada. Ni hablar con tablas anidadas. Por su condición de elemento de bloque las etiquetas div.UNIDAD 2 .. el usuario debe cargar no solo el "contenido". No es algo muy práctico que digamos. fondos. menú izquierdo. etc. Algo que parezca visualmente ordenado en la pantalla. Ejemplos: width: 150px.. Recordemos su sintaxis #menu { .no irán más allá. que espera a leer el "cierre" de la tabla antes de mostrar nada. o width: 50%.. Ancho y altura. 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. Las tablas demoran más en mostrarse que los DIVs de CSS. En cambio. Esto es muy notorio para usuarios de Explorer. generalmente utilizamos atributos de tamaño. Como toda la página completa puede constar de una única gran tabla. dan más relevancia a lo ubicado cerca del comienzo. Atributos de tamaño Cuando trabajamos con etiquetas div. y si leen todos. } Luego. ya que cada bloque de contenido es único y diferente del resto. que sirven para determinar que porción quiero que ocupe la caja como los que veremos a continuación. el mismo se corresponde con el elemento padre es decir el elemento que . Selectores de id Como ya vimos el capítulo anterior. en el caso del valor porcentual. hasta que no se carga todo el contenido nada aparece en la pantalla. los DIVs son pequeños bloques que van apareciendo rápidamente uno tras otro. los selectores de id. cuyo valor puede ser fijo o variable. ya que solo leen una determinada cantidad de caracteres. Width (ancho) Para establecer el ancho de un elemento utilizamos el atributo width. se utilizan para crear reglas de estilo para elementos únicos. contenedor. Por ejemplo: body { background-color: white } h1 { background-color: #000080 } Para ayudar a evitar conflictos con hojas de estilo del usuario. en el caso de estar hablando de un elemento que no está contenido por otro. es adecuado background-image: none. se comporta exactamente igual que el anterior. pero sirve lógicamente para determinar la altura de un elemento. Los autores también pueden usar la forma rápida de la propiedad background. dicho porcentaje se corresponde entonces con el ancho de la etiqueta body. o height: 300px. siempre que use background-color debería especificar background-image. En la mayoría de casos. Height (alto) El atributo height. permiten modificar las propiedades de los fondos de los elementos así como también incluir imágenes de fondo. Atributos de fondo Los atributos de fondo. Background-color (color de fondo) Sintaxis: background-color: <valor> Valores posibles:<color> | transparent Valor inicial:transparent Se aplica a: Todos los elementos Heredado: No La propiedad background-color establece el color del fondo de un elemento. Background Image (Imagen de fondo) Sintaxis: background-image: <valor> Valores posibles:<url> | none Valor inicial:none Se aplica a: Todos los elementos . height: 50%. que ocupa el 100% del ancho de la pantalla. que está mejor soportada que la propiedad background-color. com/fondo.gif). la imagen solo será organizada en mosaico horizontal.Heredado: No La propiedad background-image establece la imagen de fondo de un elemento. Background-attachment (Fijación de fondo) Sintaxis: background-attachment: <valor> Valores posibles: scroll | fixed Valor inicial:scroll Se aplica a: Todos los elementos Heredado: No . Por ejemplo: body { background: white url(caramelo. El valor repeat-x repetirá la imagen horizontalmente mientras que el valor repeat-y repetirá la imagen verticalmente.gif) } p { background-image: url(http://www. Los autores también pueden usar la forma rápida de la propiedad background. Los autores también pueden usar la forma rápida de la propiedad background.png) } Cuando se define una imagen de fondo (backgroundimage). background-repeat: repeat-x } En el ejemplo de arriba. también debería definirse un background color (color de fondo) similar para aquellos que no cargan las imágenes. Por ejemplo: body { background-image: url(/images/foo. Background-repeat (Repetir fondo) Sintaxis: background-repeat: <valor> Valores posibles:repeat | repeat-x | repeat-y | no-repeat Valor inicial:repeat Se aplica a: Todos los elementos Heredado: No La propiedad background-repeat determina cómo se repite la backgroundimage (imagen de fondo) especificada. que está mejor soportada que la propiedad background-image. que está mejor soportada que la propiedad background-repeat.htmlhelp. Las palabras clave son interpretadas como sigue: . Por ejemplo. Esta propiedad solo puede aplicarse a elementos de nivel bloque y a elementos reemplazados. porcentajes y longitudes no pueden combinarse con palabras clave. la posición vertical será 50%. ya que son posiciones negativas. center. Un valor como 20% 65% especifica que la imagen se colocará 20% a la derecha y 65% abajo del elemento. Aunque se permiten longitudes.) La forma más sencilla de asignar una ubicación de fondo es con palabras clave: l Palabras clave horizontales (left. no se recomiendan debido a su inherente debilidad al tratar con diferentes resoluciones de pantalla. Los porcentajes son relativos al tamaño del elemento. y OBJECT. 10% -2cm está permitido. TEXTAREA. INPUT. Al usar porcentajes o longitudes. los elementos reemplazados HTML incluyen IMG. Si solo se da el valor horizontal. SELECT. Sin embargo.gif). la línea siguiente especifica una imagen de fondo fija: body { background: white url(candybar.La propiedad background-attachment determina si la backgroundimage (imagen de fondo) especificada se desplazará con el contenido o será fija con respecto al lienzo. que está mejor soportada que la propiedad background-attachment. (Un elemento reemplazado es aquel del que sólo se conocen las dimensiones intrínsecas. background-attachment: fixed } Los autores también pueden usar la forma rápida de la propiedad background. Un valor como 5px 10px especifica que la esquina superior izquierda de la imagen se colocará 5 pixels a la derecha y 10 pixels abajo de la esquina superior izquierda del elemento. right) l Palabras clave horizontales verticales (top. bottom) También pueden usarse porcentajes y longitudes para asignar la posición de la imagen de fondo. Por ejemplo. Background-position (Posición del fondo) Sintaxis: background-position: <valor> Valores posibles: [<porcentaje> | <longitud>]{1. center.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. Se permiten combinaciones de longitudes y porcentajes. se especifica primero la posición horizontal y luego la vertical. la imagen es colocada en relación al lienzo y no al elemento. la propiedad background-position será establecida a 0% 0%. Los autores también pueden usar la forma rápida de la propiedad background. en las tres primeras reglas de arriba. 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 Se aplica a: Todos los elementos 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.gif) } #contenidoDeLaClase h1{ background: #7fffd4 } p { background: url(. siempre deberían especificarse juntas las propiedades .jpg) no-repeat bottom right } Un valor no especificado recibirá el valor inicial./fondos/peon. Por ejemplo..htmlhelp.png) #f0f8ff fixed } table { background: #0c0 url(hojas.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. que está mejor soportada que la propiedad background-position. Para ayudar a evitar conflictos con hojas de estilo del usuario.com/foo. para ello comenzaremos con una diagramación simple de una columna como se muestra en la imagen de referencia ¿Qué debemos hacer? -En el cuerpo del archivo HTML insertaremos: <div id="encabezado">Este es el encabezado.</div> Luego en la hoja de estilo debemos crear cada una de las reglas de estilo para los id utilizados Ejemplo: #encabezado { .</div> <div id="cuerpo">Este es el cuerpo. Diagramación de una columna Es hora de comenzar a diagramar nuestra página.background y color.</div> <div id="pie">Este es el pie. } Eso es todo… simple no? Ahora avancemos un poco más para conseguir diagramaciones más complejas con dos y tres columnas. como se muestra en la imagen de referencia . background-color:#ff2200. 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 nuestros contenidos. height:200px.width:700px. Anidamiento de divs Si bien no es la más recomendado. de no ser así. Un elemento con float debe tener definida su anchura. Sus posibles valores son left (para alinear el elemento a la izquierda) y right (para alinearlo a la derecha). Utilización del atributo Float El atributo float sirve para alinear un elemento. es decir con un div . en muchas ocasiones deberemos trabajar con divs anidados. Utilización del atributo Clear El estilo "clear" se utiliza conjuntamente con float. Los elementos con el atributo float.para ello existen dos alternativas posibles que permiten alterar el flujo normal del HTML logrando ubicar un elemento div junto a otro. o bien hacer que el texto de alrededor del mismo se fluja entorno a dicho elemento. a continuación aprenderemos desarrollar estructuras flotantes. una posibilidad es. Utilizamos este estilo cuándo queremos que elementos que tienen cerca un elemento flotante (mediante float) dejen de alinearse junto a él. junto a otro. no forman parte del flujo normal del documento HTML. desarrollar una estructura flotante. no será tratado como tal y la regla no se aplicará. razón por la cual los elementos NO Flotantes que estén por debajo de estos se verán afectados en su ubicación en el espacio. right (el elemento no permite flotantes a su derecha ) o both (el elemento no permite flotantes a ningún lado). Sus posibles valores son left (el elemento no permite flotantes a su izquierda ). y la otra alternativa es trabajar con posición como veremos en la próxima unidad. Se aplica a algunos "hacks" para IE o en combinación con otros selectores. pero lo utilizamos siempre para formatear a 0 los márgenes y los rellenos. se corresponde con el nombre de cualquier tipo de elemento. el selector universal. } Por otro lado. está contenido dentro del div con id contenido. para llegar a las diagramaciones deseadas. padding: 0. . De la siguiente forma eliminamos el margen y el relleno de todos los elementos HTML *{ margin: 0. En la práctica es difícil que un mismo estilo se pueda aplicar a todos los elementos de una página. a continuación un ejemplo de div anidado: <div id=”contenido”> <div id=”logo”></div> </div> En este ejemplo el div logo. Selector universal El selector universal. tema que veremos más adelante en el curso. escrito "*".dentro de otro. atributos que suelen interpretarse por defecto de manera diferente por los navegadores. Es equivalente con cualquier elemento en la estructura del documento. por ende decimos que el div con id contenido es el padre del div con id logo y lógicamente el div de id logo es hijo de contenido. border y margin. Cada caja tiene un área de contenido (ej. En el gráfico es el espacio representado con el color .UNIDAD 3 . Estos tres atributos. cuyas características específicas. El siguiente diagrama muestra cómo se relacionan estas áreas y la terminología usada para referirse a las partes de margin.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 del documento y compuestas de acuerdo al modelo de formato visual. una imagen. texto.. de forma que podemos crear reglas de estilos que combinen distintas propiedades para una caja utilizando todos los lados o solo algunos. etc. border y padding: Representación gráfica de la Caja y sus propiedades. veremos a continuación. el tamaño de cada área es especificado por las propiedades que se definen abajo. existen algunos atributos que son propios para el manejo de las cajas. se comportan de forma similar y permiten manejar por separado cada uno de los lados de la caja. Margin (margen) Es el espacio que hay entre el borde de una caja y otra caja.) y las áreas circundantes opcionales de padding. Atributos de la caja Como vimos en el punto anterior. Los valores admitidos para este atributo son numéricos y pueden estar expresados en distintas unidades y pueden ser positivos o negativos Ejemplos: margin-top: 30px. margin-right: 20px. Ejemplos border-top-color: #rgb. sea transparente o que herede el color del elemento anterior.verde. tanto en porcentajes como en números enteros del 0-255 con el nombre del color. El atributo de borde requiere tres valores. posee cuatro direcciones. color y grosor Los valores admitidos para este atributo son numéricos y pueden estar expresados en distintas unidades y pueden ser 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-color Puede indicarse que el elemento tenga color. Bottom y Left. Top. Borde (Border) Es una línea situada en el límite de la caja. Al igual que el resto de los atributos de la caja. estilo. tanto su forma corta como larga con la cláusula rgb. Right. border-right-width: 2px. margin-bottom: 3em. border-left-width: 2px. border-bottom-width: 2px. la misma puede tomar diferentes anchos y estilos. Al igual que el resto de los atributos de la caja. margin-left: 2em. [ color | transparent | inherit ] Puede indicarse de 3 formas distintas. posee cuatro direcciones. Top. con el código de color hexadecimal. Right. Bottom y Left. 0).border-right. groove El borde se ve como si fue cavado en la página.20%). double El borde son dos líneas sólidas.style: inset. border-bottom. el ancho del borde es cero. border-top-style: ridge.style: outset. dotted El borde es una serie de puntos. border-right.color: #rrggbb. . Opuesto a groove. solid El borde es una línea simple.color: red #000000 #333 rgb(50%. Es el tipo de línea que vamos a utilizar para cada uno de los lados. border-style El estilo del borde se puede elegir entre un listado de 10 opciones.style: solid. 0%). border-bottom. border-left. ridge El borde se ve como si se estaría saliendo para afuera de la página.0. el ancho de cada línea y el espacio entre ellas es igual al valor del ancho de borde. border. Las diferentes opciones de línea son: none Sin borde. 0%. border-left. hidden Igual que none.30%.color: rgb(100%.color: rgb(255. dashed El borde es una serie segmentos de línea corta (guiones). outset El borde da el aspecto de que la caja esta sobresalida de la página. es el espacio representado con el color lila. Right. podemos optimizarlo de las siguientes formas padding: 20px. un valor de padding distinto en cada uno de los lados de la caja. Al igual que el resto de los atributos de la caja. Ejemplos padding-top: 10px. Escritura resumida (declaración de una sola línea) Algunos atributos poseen lo que llamamos escritura resumida. 20px de padding en los lados top y bottom y 10px a los lados right y left. . Aplica en este ejemplo. Relleno (Padding) Es el espacio que hay entre el contenido y el borde de la caja. En el gráfico anterior. padding-bottom: 3em. el orden en que se aplican es padding: top right bottom left. Bottom y Left. Los valores admitidos para este atributo son numéricos y pueden estar expresados en distintas unidades. es decir la declaración de una sola línea. Aplica en este ejemplo. Aplica en este ejemplo. esta forma de 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. 20px de padding en todos los lados padding: 20px 10px. posee cuatro direcciones. Declaración una línea para el padding Utilizando el atributo padding. Top. padding-left: 2em. padding-right: 2em.inset El borde da el aspecto de que la caja está hundida en la página. padding:10px 20px 5px 15px. border-left: ancho estilo color. podemos optimizar el uso del atributo margin de las siguientes maneras: margin: 20px. el orden en que se aplican es margin: top right bottom left. Aplica en este ejemplo. border-right: ancho estilo color. 20px de margin en los lados top y bottom y 10px a los lados right y left. un valor de margin distinto en cada uno de los lados de la caja. Aplica en este ejemplo. que permite ubicar los divs en el lugar exacto de la pantalla que deseemos. 20px de margin en todos los lados margin: 20px 10px. border-bottom: ancho estilo color. border: ancho estilo color. En este caso se aplica a los cuatro bordes de la caja. Aplica en este ejemplo. Atributos de posición Los divs pueden posicionarse en la pantalla de 4 maneras diferentes: . 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. Ejemplo: border: 1px solid #FF2200. margin:10px 20px 5px 15px. Diagramación avanzada con posición Para crear diseños con diagramaciones más complejas deberemos utilizar el atributo Position.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. pero puede ser útil a veces. Si le ponemos position:relative a un elemento. Un elemento posicionado absolutamente está posicionado relativamente a otro elemento. el elemento se mueve 10 píxeles desde su borde superior. Un valor negativo mueve el elemento en la dirección opuesta. lo que normalmente quieren decir es elementos con position:absolute. los elementos posicionados absolutamente son relativos. pero no donde aparecen. Su posición en la ventana estará determinada por dónde ocurren en el documento. que el valor static solo sirve para sobrescribir un valor previo de otro tipo. bottom. no estarán posicionados. Las propiedades top. Siguen ocupando espacio.. left y right.● ● ● ● Posicionamiento Estático Posicionamiento Absoluto Posicionamiento Relativo Posicionamiento Fijo. Esto quiere decir que no sirve de nada poner valores top y bottom. sino donde habrían estado si hubiesen estado posicionados estáticamente. llamado bloque contenedor. aunque no se mueva ni un solo píxel. o left y right. bottom. left y right especifican la distancia del borde correspondiente.. Absolute (absoluto) Cuando la gente se refiere al posicionamiento. Esto suena raro. que es el valor por defecto de todos los elementos. Relative (relativo) Los elementos con position:relative están posicionados relativos a ellos mismos. han leído correctamente. Ahora bien. Si. Para todos los valores menos "static" podemos modificar la posición del elemento por medio de las propiedades top. existe otra utilidad para esta propiedad que es mucho más importante: Un elemento posicionado relativamente cuenta cómo posicionado. Si le ponemos top:10px. es decir "Como caen". el elemento termina estando donde habría estado si le hubiésemos puesto position:static o si no le hubiésemos puesto ninguna propiedad. ¿Pero de qué? Irónicamente. Sin embargo. Esto significa que se mueve hacia abajo. Sin embargo. Por lo tanto. porque los elementos posicionados relativamente siguen en el flujo del documento – en la posición donde estaban originalmente. Y esto es importante entre otras cosas porque un elemento relativo sirve para contener a otros. lo que veremos a continuación. Si damos un valor a cualquier de las cuatro propiedades de los costados. . sin dar valores para los costados. CSS-P o capas. puede ser que alguien quiera dar valores para top y left si quiere mover el elemento vertical y horizontalmente. esto no sirve de mucho para crear columnas. el elemento relativo se mueve en relación a la posición que habría ocupado si hubiese estado posicionado estáticamente. ¿Qué significa esto? El posicionamiento relativo es mayormente útil para mover un elemento algunos píxeles en alguna dirección. Static (estático) Los elementos con position:static. o quedará un hueco en la página. así daría el mismo resultado poner bottom:-10px. El estándar también dice que podría estar relacionado con la ventana de visualización de la página. es una manera de tener un menú que nunca se mueve. pero hay que tener cuidado. Desafortunadamente Internet Explorer no soporta posicionamiento fijo. De otra manera existe el riesgo de que el contenido del elemento posicionado absolutamente quede parcial o totalmente fuera de la pantalla. La posición siempre es referente a la ventana del navegador.. no? ¿Pero si no hay ancestro posicionado? Ahí es donde entra el llamado bloque contenedor inicial.. podemos establecer un nuevo contexto para sus hijos posicionados absolutamente. O. Fixed Dijimos antes que el posicionamiento absoluto es relativo. a menos que este sea el efecto que deseamos. no afectan a los elementos subsiguientes. sin moverlo. pero la mayoría de los usuarios esperan que todo se mueva con la página. Definiendo position:relative para un elemento. En los navegadores que soportan CSS se pueden especificar valores para los cuatro bordes y el navegador se encarga de calcular la altura y anchura. Elementos posicionados absolutamente están completamente eliminados del flujo del documento. Ya que los elementos posicionados absolutamente están fuera del flujo del documento. pero esta propiedad no es tan útil como parece. asi que es casi siempre necesario especificar al menos la anchura de un elemento posicionado absolutamente. hay que estar muy seguros de cuál es el bloque contenedor.El bloque contenedor de un elemento posicionado absolutamente es su ancestro (parent) posicionado más cercano. En resumen El posicionamiento absoluto es útil para tener un diseño con varias columnas. Por lo tanto debemos asegurarnos de que nuestro contenido no termine debajo de un elemento posicionado absolutamente. no afectan a los elementos subsiguientes. Por ancestro posicionado quiero decir un elemento estructuralmente superior cuya propiedad de position es absolute. la ventana del navegador siempre es el bloque contenedor. El posicionamiento fijo es similar al posicionamiento absoluto. Un elemento posicionado absolutamente con top:100px queda colocado tal que su borde superior esta 100 píxeles sobre el borde de su bloque contenedor. fixed o relative. El elemento no está en el flujo del documento y se queda en su lugar aunque el usuario se mueva (scroll) por el documento. Hay otras maneras de imitar el funcionamiento del posicionamiento fijo. Ya hemos visto el poco uso de los frames como para creer que esta propiedad seguirá su mismo destino. Si. obviamente. En la práctica esto significa que podría ser o el elemento BODY o el HTML. Por eso es difícil tener un pie de página que ocupe toda la anchura de la página y que . Un elemento con position:fixed está posicionado absolutamente con respecto a la ventana del navegador. pero tiene sus diferencias. Tristemente esto no ocurre con Internet Explorer. Es perfectamente legal especificar valores negativos para los valores de los bordes. asi que no debería sorprender que el posicionamiento fijo sea absoluto. Asi que aquí está un uso importante para el posicionamiento relativo del que hablamos antes. para ponerlo de otra manera. siempre y cuando se sepa cuál será la más larga. el bloque contenedor inicial del documento (body o html). o si no hay tal elemento. Suena fácil. Esto no significa que no ocupan espacio. El estándar CSS dice que esto lo elige el navegador. El elemento con el mayor z-index es el que queda más arriba. Por ejemplo. explícitamente por medio de width en porcentajes o implícitamente por medio de left y right. debemos trabajar con márgenes automáticos. así el diseño se puede adaptar a todos los tamaños de pantalla.aparezca después de todas las columnas. para ello debemos usar las siguientes declaraciones En el HTML: <div id="caja"></div> En el CSS #caja { margin: auto. Internet Explorer y Opera. ambos. hacen esto mal y usan la anchura del elemento padre como base para sus cálculos. Así como en todos los elementos del diseño web. para que el navegador los calcule dependiendo de la resolución de pantalla. Los navegadores basados en Gecko como Mozilla y Firefox lo hacen correctamente. hacerlo es muy simple. Diagramación centrada Es muy común que deseemos realizar un diseño cuya diagramación esté centrada horizontalmente en la pantalla. height: 600px. el estándar dice que debería ser calculado relativo al bloque contenedor. es imposible. Si se especifica una anchura para un elemento posicionado absolutamente. Con todos los tipos de posicionamiento. es conveniente usar unidades relativas. si se quiere apilar tres elementos donde el del medio tiene un bloque contenedor diferente al de los otros dos. En diseños complicados pueden surgir combinaciones imposibles. ya que cada bloque establece su contexto para el z-index. Esto. Cuando elementos posicionados se superponen. Los navegadores tienen distintos valores por defecto de estas propiedades. incluyendo relativo. el valor de left debería estar especificado en em o en % y no en px. El posicionamiento absoluto se usa tradicionalmente con elementos DIV. Desafortunadamente esto no es tan simple como parece. podemos controlar el orden de apilamiento con la propiedad zindex. al parecer. especialmente si se debe ver igual en todos los navegadores. } . pero es perfectamente válido usarlos con otros elementos. deberían especificar los margin y padding explícitamente. width: 950px. Así que para poner un elemento encima de otro elemento con un bloque contenedor diferente hay que incrementar el z-index del bloque contenedor del primer elemento. Valores de la propiedad z-index: auto: la posición asignada por defecto.Atributo de Z-index La propiedad z-index sirve para especificar el orden de los elementos en el eje z. . Solamente funciona cuando se ha definido en la misma regla la propiedad position. numérico: en este caso el valor es un número entero.}En el ejemplo hay dos capas. Un ejemplo: div#capa1 {position:relative. o dicho de otra forma. Puesto que la segunda (div#capa2) tiene un valor de z-index mayor que la primera (div#capa1) será esa la que quede por encima. que podrá ser positivo o negativo.z-index:1. el valor de su z-index ha de ser mayor. qué elementos van encima de otros. Para que un elemento quede por encima de otro. todo lo grande que se quiera. con los valores absolute o relative.z-index:3.} div#capa2 {position:absolute. utilizamos listas para mostrar elementos en forma ordenada. tenemos dos tipos de listas que veremos a continuación: Listas Ordenadas Las listas ordenadas.UNIDAD 4 . 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> .Barras de navegación Listas En HTML. b. Esta propiedad permite reemplazar las viñetas predeterminadas por otras definidas por nosotros. que simplemente son una imagen. el texto se alineará bajo el primer carácter del elemento de lista. se muestra el texto de cada ítem directamente debajo del delimitador de lista. Esta propiedad permite establecer si el elemento de lista se alinea a partir del segundo ítem justo debajo del primero. que está a la derecha del delimitador: . Los valores posibles de list-style-image son url o none.). square. Finalmente los valores de list-style-position son inside o outside. circle. La sintaxis es: url (ruta/al/archivo). Y su utilidad es especificar el tipo de viñeta u objeto que antecede a cada elemento de una lista. none. list-style-image: url(mi.</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ásico como veremos a continuación. list-style-position. list-style-image. c. upper-alpha.gif)} ol { : lower-alpha} La regla <OL> está establecida para utilizar letras minúsculas para cada elemento de lista (a. . Si el valor está fijado en outside. Los valores posibles de son disc. o si se corre a la izquierda y se ubica debajo de la viñeta. decimal. mientras que la regla <UL> está establecida para utilizar una imagen como viñeta. define reglas de estilo para los elementos de listas ordenadas <ol> y listas desordenadas <ul>: ul { : square. el código indica que el delimitador de elemento de lista “square” debe utilizarse en su lugar. lower-alpha. etc. Si la imagen no se puede cargar. La siguiente hoja de estilo. upper-roman. lower-roman. por ejemplo. Si la propiedad list-style-position está fijada en inside. los atributos de listas se pueden escribir con la declaración de una sola línea de la siguiente forma: ul { list-style: square inside url('arrow. y así lograr una barra de navegación simple.html">SERVICIOS</a></li> <li><a target="_blank" href="casos. 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.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ños variados utilizando colores e imágenes.html">HOME</a></li> <li><a target="_blank" href="portfolio. vistosa y accesible.html">PORTFOLIO</a></li> <li><a target="_blank" href="servicios.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.html">CASOS</a></li> <li><a target="_blank" href="contacto.html">CONTACTO</a></li> . "Que equivalga a aquellos elementos EM que están contenidos en un elemento H1"). Ya que necesitaremos selectores que se correspondan con un elemento que es el descendiente de otro elemento en la estructura del documento (ej. pero podemos encontrarnos con el caso donde también necesitamos que algunos elementos H1. text-align:center. para ello podemos resolverlo utilizando los que llamamos selectores descendientes. margin:5px. width:100px. Ejemplos: Por ejemplo. Un selector de descendiente de la forma "A B" equivale cuando un elemento B en un descendiente arbitrario de algún elemento antepasado A.png). } Selectores descendientes En ocasiones vamos a necesitar aplicar una regla de estilo para una etiqueta determinada por ejemplo H1. :none. Un selector de descendiente se compone de dos o más selectores separados por un espacio en blanco. tengan características diferentes.</ul> En el archivo de estilos veremos li { float:left. background-repeat:no-repeat. height:30px. considere las siguientes reglas: h1 { color: red } . padding: 0px. background-image:url(bg.. Los selectores de descendientes expresan tal relación dentro de un patrón. los pseudo-elementos y :after permite acceder al contenido generado). los lenguajes de documento no ofrecen mecanismos para acceder a la primera letra o a la primera línea del contenido de un elemento. La excepción es ':first-child'. en principio. por consiguiente. pero algunos temas comunes en la edición pueden no ser posibles por medio de la estructura del documento. el estilo se atribuye a un elemento basado en su posición dentro de la estructura del documento.. . Ni los pseudo-elementos ni las pseudo-clases aparecen en el documento fuente o la estructura del documento. atributos que no pueden deducirse de la estructura del documento.0. que puede deducirse de la estructura del documento. Este sencillo modelo es suficiente para muchos casos. Los pseudo-elementos también pueden proporcionar a los diseñadores de hojas de estilo un modo de asignar estilos a un elemento que no existe en el documento fuente (ej. CSS introduce los conceptos de pseudo-elementos y pseudo-clases para permitir aplicar el formato basado en información que está fuera de la estructura del documento. ningún selector CSS simple puede referirse a ella. en HTML 4. en el sentido de que un elemento puede adquirir o perder una pseudo-clase a medida que el usuario interactúa con el documento. Los pseudo-elementos de CSS permiten a los diseñadores de hojas de estilo referirse a esta información inaccesible por otros medios.em { color: red } Aunque la intención de estas reglas es agregar énfasis al texto cambiando su color. el efecto se perderá en un caso como: <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 siempre que un EM aparezca en cualquier lugar dentro de un H1: h1 { color: red } em { color: red } h1 em { color: blue } La tercer regla se corresponderá con em en el siguiente fragmento: <h1> Este <span class="myclass">título es <em>muy</em> importante</span></H1> Pseudo Elementos y Pseudo clases En CSS2. Las pseudo-clases pueden ser dinámicas. Los pseudo-elementos crean abstracciones acerca de la estructura del documento más allá de aquellas especificadas por el lenguaje del documento. ningún elemento se refiere a la primera línea de una párrafo y. Los nombres de los pseudo-elementos y las pseudo-clases no hacen distinción entre mayúsculas y minúsculas. atributos o contenido. Por ejemplo. Por ejemplo. Las pseudo-clases clasifican a los elementos basados en características más allá de su nombre. Las pseudo-clases son permitidas en cualquier lugar dentro de un selector mientras que los pseudo-elementos sólo pueden aparecer después del sujeto del selector. las pseudo-clases link se aplica a los elementos A con el atributo "href". . Algunas aplicaciones del usuario con conformidad que soportan medios interactivos pueden no ser adecuadas para soportar esta pseudo-clase (ej.Algunas pseudo-clases son mutuamente excluyentes. en HTML 4. Por ejemplo. Los dos estados son mutuamente excluyentes. La pseudo-clase :visited se aplica una vez que el vínculo ha sido visitado por el usuario. esta regla: A. En caso de reglas conflictivas. las aplicaciones del usuario pueden elegir devolver un vínculo visitado a la condición de (no visitado) ':link'. El lenguaje del documento determina qué elementos son las anclas de orígen de los hipervínculos. Pseudoclases de vínculos Las aplicaciones del usuario normalmente muestran los vínculos no visitados de un modo diferenciado de aquellos previamente visitados. CSS proporciona las pseudo-clases ':link' y ':visited' para distinguirlos: La pseudo-clase :link se aplica a los vínculos que aún no han sido visitados. puede dar soporte sólo a un subconjunto de las propiedades en estos pseudoelementos..side/">link externo</A> ha sido visitado.0. las siguientes dos declaraciones CSS2 tienen un efecto similar: A:link { color: red } :link { color: red } Ejemplos: Si el siguiente link: <A class="externo" target="_blank" href="http://out. De este modo. el orden de cascada normal determina el resultado. 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).externo:visited { color: blue } provocará que sea azul. una aplicación del usuario visual puede aplicar esta pseudo-clase cuando el cursor (el puntero del ratón) se mueve por encima de una caja generada por el elemento. Nota. Las aplicaciones del usuario de conformidad con HTML pueden ignorar todas las reglas con :first-line o :first-letter en el selector o. lápices ópticos). Después de cierta cantidad de tiempo. Por ejemplo. alternativamente. mientras otras pueden aplicarse simultáneamente al mismo elemento. Las aplicaciones del usuario que no ofrecen soporte a los medios interactivos no tienen que apoyar esta pseudo-clase. Pseudo Clases dinámicas Las aplicaciones del usuario interactivas a veces cambian el procesamiento en respuesta a las acciones del usuario. pero no lo activa. Este ya no es el caso. Estas pseudo-clases no son mutuamente excluyentes. CSS no define qué elementos pueden estar en los estados anteriores o cómo se ingresa y se sale de los estados. Las aplicaciones del usuario no son obligadas a redibujar el documento en uso a causa de las transiciones de las pseudo-clases. de otro modo las reglas de cascada ocultarán la propiedad 'color' de la regla A:hover. Para información acerca de la representación del foco en los contornos. Por ejemplo. También. La pseudo-clase :focus se aplica mientras un elemento tiene el foco (acepta eventos del teclado u otras formas de entrada de texto). 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. debido a que A:active está ubicada después de A:hover.La pseudo-clase :active se aplica mientras un elemento está siendo activado por el usuario. consulte por favor la sección sobre foco dinámico en los contornos. Un elemento puede recibir varias de ellas al mismo tiempo. Nota. pero como esto puede ocasionar que las letras cambien de posición cuando el lector selecciona el vínculo. Mediante el uso de scripts se puede decidir si los elementos reaccionan a los eventos del usuarios o no. ':visited' y ':active' (o ':link' y ':active') y la reglas normales de cascada determinan qué propiedades se aplican Pseudo elementos . 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. la pseudo-clase ':active' era mutuamente excluyente con ':link' y ':visited'. Por ejemplo. una AU puede ignorar la regla de estilo correspondiente. y los distintos dispositivos y aplicaciones del usuario pueden tener diferentes maneras de apuntar o activar los elementos. el color activo (lime) será aplicado cuando el usuario active y señale el elemento A. En CSS1. Un elemento puede ser ambos. el lapso durante el cual el usuario presiona el botón del ratón y lo suelta. un hoja de estilo puede especificar que la propiedad 'font-size' de un vínculo :active debe ser mayor que la de un vínculo inactivo. Se corresponde con un pseudo-elemento que las aplicaciones del usuario con conformidad insertarán al comienzo de cada párrafo. De este modo.</p> Si un pseudo-elemento divide un elemento real. pueden ser "re-escritas" por las aplicaciones del usuario para incluir la secuencia ficticia de marcas para :first-line. 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". incluyendo el ancho de la página. 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. Observe que la medida de la primer línea depende de un número de factores.El pseudo-elemento :first-line El pseudo-elemento :first-line aplica estilos especiales a la primera línea de un párrafo. 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. Las otras líneas serán tratadas como líneas comunes dentro del párrafo. <p><P:first-line> Este es algún párrafo largo en HTML que</P:first-line> será partido en varias líneas.</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. el efecto deseado a menudo se consigue con una secuencia ficticia de marcas que cierra y reabre el elemento. Esta secuencia ficticia de marcas ayuda a mostrar cómo se heredan las propiedades. La primera línea será identificada por una secuencia ficticia de marcas. el selector "P:first-line" no equivale a ningún elemento HTML real. 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. si marcamos el párrafo anterior con un elemento SPAN: . el tamaño de la fuente. Sin embargo. de otro modo es similar a un elemento flotante. propiedades de los márgenes. 'vertical-align'. 'text-transform'. Esta clase de letra inicial es similar a un elemento a nivel de línea cuya propiedad 'float' es 'none'. Estas son las propiedades que se aplican a los pseudo-elementos :first-letter: propiedades de la fuente. 'word-spacing'. El pseudo-elemento :first-line es similar a un elemento a nivel de línea. que son efectos tipográficos de uso frecuente. Sólo las siguientes propiedades se aplican al pseudo-elemento :first-line: propiedades de la fuente. 'text-shadow' y 'clear'. line-height: 12pt } . 'text-decoration'. 'vertical-align' (sólo si 'float' es 'none'). Las otras líneas serán tratadas como líneas comunes dentro del párrafo. 'float'. pero con ciertas restricciones. propiedades del color. propiedades del fondo. 'lineheight'.</P> la aplicación del usuario puede generar las marcas de inicio y cierre apropiadas para SPAN cuando inserta la secuencia ficticia de marcas para :first-line. 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. 'text-transform'. 'lineheight'. propiedades de los bordes.</span> La primer línea será identificada por una secuencia ficticia de marcas. propiedades del color.<p><span class="test"> Este es algún párrafo largo en HTML que será partido en varias líneas. Las otras líneas serán tratadas como líneas comunes dentro del párrafo.</span> La primer línea será identificada por una secuencia ficticia de marcas. propiedades del relleno.</p> El pseudo-elemento :first-line sólo puede ser aplicado en elementos a nivel de bloque. 'text-decoration'. 'letter-spacing'. <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. propiedades del fondo. 'text-shadow' y 'clear'. El pseudo-elemento :first-letter El pseudo-elemento :first-letter puede ser usado para las "capitulares" y "capitulares caídas". </p> Observe que la marca para el pseudo-elemento :first-letter es contigua al contenido (es decir. font-weight: bold. mientras que la marca de inicio del pseudo-elemento :first-line se inserta después de la marca de inicio del . el carácter inicial).p:first-letter { font-size: 200%. font-style: italic.</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. float: left } span { text-transform: uppercase } </style> </head> <body> <p><span>algunas</span> palabras de un artículo en un periódico. elemento al que está asignado. Con el propósito de conseguir el formato de las capitulares caídas tradicionales, las aplicaciones del usuario pueden aproximar los tamaños de la fuente, por ejemplo para emparejar las líneas de base. Además, el contorno del signo puede 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. En alemán, por ejemplo, si la combinación de las letras "ij" aparece al comienzo de una palabra, ambas letras deberían ser 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 de cada elemento P será verde con una tamaño de fuente de '24pt'. El resto de la primer línea formateada será azul mientras 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 este fragmento 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-line son heredadas por :first-letter, pero son anuladas si la misma propiedad es determinada en :first-letter. Los pseudo-elementos y :alter Los pseudo-elementos '' y ':after' pueden ser usados para insertar un contenido generado antes o después del contenido 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 o lí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 "~=" cuando la correspondencia sea con el atributo "class". Así, en HTML, "DIV.valor" y "DIV[class~=valor]" tiene el mismo significado. El valor del atributo debe seguir inmediatamente al ".". Ejemplos: Por ejemplo, podemos asignar 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 lista de valores separados por espacios que incluyen "pastoral" y "marino": p.pastoral.marino{ color: green } Esta regla equivale en el caso de class="pastoral rojo azul marino" pero no se corresponde en class="pastoral rojo". Nota: CSS le otorga tanto poder al atributo "class", que los autores podrían conceptualmente diseñar su propio "lenguaje del documento" basados en elementos con casi ninguna presentación asociada (tales como DIV y SPAN en HTML) y asignando información acerca del estilo a través del atributo "class". Los autores deben evitar esta práctica ya que los elementos estructurales de un lenguaje de documento comúnmente tienen significados aceptados y reconocidos mientras que las clases definidas por el autor no pueden tenerlos. Selectores de contexto Los selectores de contexto son simples cadenas de dos o más selectores simples separados por espacio en blanco. A estos selectores se les pueden asignar propiedades normales y, debido a las reglas del orden de cascada, tendrán precedencia sobre selectores simples. Por ejemplo, el selector de contexto en: p.verde{ background: green } esp.verde. Esta regla dice que el texto con énfasis dentro del 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. En estas situaciones, debe haber reglas para definir la regla de la hoja de estilo que prevalece. Las siguientes caracterí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 importante prevalecerá sobre estilos contradictorios de similar nivel. Asimismo, ya que tanto el autor y el lector pueden especificar reglas importantes, la regla del autor primará sobre la regla del lector en casos de importancia. Una muestra del uso de la sentencia !important: body { background: url(bar.gif) white; background-repeat: repeat-x ! important} Origen de las reglas (del autor frente a las del lector) Como ya se mencionó, tanto los autores como los lectores tienen la capacidad de especificar hojas de estilo. Cuando hay un conflicto entre reglas, las reglas del autor 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 del navegador. Los autores deberían ser cautelosos con el empleo de reglas !important ya que primarán sobre las reglas ! important del lector. Un usuario puede, por ejemplo, necesitar de grandes tamaños de fuentes o colores especiales debido a problemas de visión, y tal usuario querrá declarar que ciertas reglas de estilo sean ! importante, ya que algunos estilos 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 con necesidades 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 contar para calcular la especificidad de un selector. Visible Lo que excede queda visible hidden Lo que exceda se oculta scroll Lo que exceda se muestra.Cuente el número de atributos ID en el selector.red LI. Finalmente. Cuente el número nombres de etiquetas HTML en el selector. .) La lista final de números que corresponden a selectores determinará fácilmente la especificidad. la desventaja es que no es una regla reutilizable. se recomienda no hacer uso excesivo de ella. prima la última regla especificada.red {xxx} /* a=1 b=0 c=0 --> especificidad = 100 */ {xxx} /* a=0 b=1 c=3 --> especificidad = 013 */ {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. Esta propiedad trabaja. se auto genera una barra de scroll horizontal y una vertical. 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. (Nota: puede necesitar convertir los números a una base mayor para terminar con tres dígitos. cuando dos reglas tienen el mismo peso. no obstante es muy útil para el diseño de newsletter. La siguiente es una lista de selectores ordenados por especificidad: #id1 UL ULLI. Estilos en línea Existe otra forma de aplicar estilos en forma directa sobre los elementos mediante el atributo Style como se muestra en el siguiente ejemplo <p "style="{color: #FF2200. si no tiene seteada dimensiones no se va a manifestar visualmente por más que la indiquemos. Atributo de overflow Esta propiedad me permite decidir qué hacer con el contenido de una caja cuando excede su tamaño. escriba los tres números en orden exacto sin espacios ni comas para obtener un número de tres dígitos. donde los números más altos priman sobre los más bajos. actúa cuando la caja tiene seteada dimensiones. Cuente el número de atributos CLASS en el selector. Filtro de opacidad La opacidad se trabaja de dos maneras distintas en los navegadores más comunes. pero ahora vamos a ofrecer explicaciones más completas. Opera o Chrome. podemos encontrar un problema al utilizar el filtro opacity. aparte del propio filtro CSS.com ya habíamos tratado este tema con anterioridad. de esta manera: . Opera. Es importante saber esto. Lo haremos a través del atributo opacity. y por otro lado a todos los demás navegadores. o también colocarle un float:letf. Opacidad en Internet Explorer En Explorer tenemos que indicar el grado de opacidad como un filtro de CSS. Chrome. ponerle un ancho a la capa bastaría. Existen varios filtros disponibles para hacer distintos efectos sobre elementos de la página. para especificar la opacidad o transparencia tendremos que hacerlo con dos atributos distintos. Por un lado tenemos a Internet Explorer. o lo que es lo mismo. Ahora bien. puesto que es el típico bug que si no lo sabes puedes acabar con un dolor de cabeza antes de dar con él.. Firefox. width: 120px. Por ejemplo.5} . claseopacidad {opacity: .claseopacidad{ filter:alpha(opacity=25). Dichos filtros se pueden aplicar con el atributo filter de hojas de estilos.claseopacidad { filter:alpha(opacity=25). Quedaría por ejemplo así: . En DesarrolloWeb. Por ello. Se especifica de la siguiente manera: . Simplemente en algunos casos no funcionará y no veremos la transparencia que hayamos declarado. 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.} Opacidad en Firefox. en Explorer no sé por qué. en concreto el filtro opacity es el que nos interesa para definir transparencias. Esto se soluciona aplicando algún estilo adicional.. es decir. } Con esta declaración de estilos conseguiremos que los elementos de la clase claseopacidad tuvieran un 25% de opaco.auto Lo que exceda se muestra. En estos navegadores se define la transparencia de una manera más simple. un 75% de transparente. . como preferimos decir. o 50% opaca.Con esto conseguiremos que la clase sea 50% transparente. A continuación veremos algunos hacks útiles. y por tanto no la interpretan. pero es posible que deje de funcionar en las próximas. destinadas sólo a este navegador. body { background: #FFFFFF /* Firefox y los demás */ *background: #000000 /* IE7 e inferiores */ _background: #CCCCCC. El hack del guión bajo Para el resto de los navegadores una propiedad con un guión bajo. . Ejemplo: #textbox{ width: 450px. sea igual que en el resto de los navegadores que soportan los estándares.Unidad 6 . pero Internet Explorer las asimila sin problemas. /* Sólo IE6 */ } En el ejemplo que mostramos anteriormente el color de fondo de la página se verá blanco para Firefox. u otro carácter alfanumérico delante es algo que no existe. Este hack funciona para todas las versiones de Internet Explorer que existen hasta la fecha. que podremos utilizar en nuestros archivos CSS para solucionar problemas que nos suceden a diario con nuestros diseños web cuando se muestran con Internet Explorer.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 si queremos que la apariencia de nuestras páginas en Internet Explorer. dejando establecida la que se define última. /* Firefox y los demás */ /* Internet Explorer 6 e inferiores */ } Teniendo en cuenta que los navegadores sobrescriben las propiedades si éstas se definen más de una vez. _width:400px. negro para Internet Explorer 7 y gris para IE 6. Esto es algo que podemos utilizar para definir propiedades en los estilos. mostramos un ejemplo donde se muestran estos dos hacks que hemos descrito anteriormente. El uso de !important Este operador es utilizado en los archivos CSS para que los navegadores respeten la importancia de la propiedad que lo contenga y evite que se sobrescribe con otras que se definan posteriormente. Ejemplo p{ background: green !important. para todos los navegadores (los que respetan estrictamente los estándares) sin usar ningún hack.0. problema que fue solucionado en la versión 7 de este navegador.5 y 6: <!--[if IE]> <link rel="stylesheet" type="text/css" target="_blank" href="hoja-para-todos-los-IE. podemos hacer uso de una sentencia condicional que solo el Explorer entiende. Luego. incluimos las hojas 2 y 3 mediante un condicional que es leído sólo por Explorer 5. Asignación de hojas de estilo por navegador mediante IF Para evitar el uso de hacks. Finalmente. Para eso.css" /> <![endif]--> . creamos una hoja de estilos común. Luego.0]> <link rel="stylesheet" type="text/css" target="_blank" href="ie-5. /* 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 el resto de los navegadores se verá verde. 5. para cada versión sólo cambia esto: <!--[if IE 5. Internet Explorer 6 y las versiones anteriores no interpretan este operador.css" /> <![endif]--> Luego. confiando en que solo ellos leerán esa hoja. /* Navegadores superiores a IE 6 respetarán la importancia inmediatamente */ background: red. creamos una hoja con definiciones "revisadas" que sean válidas para todas las versiones de Explorer. una hoja con definiciones precisas para cada versión de Explorer. 0+5.css" /> <![endif]--> <!--[if IE lt 6]> <link rel="stylesheet" type="text/css" target="_blank" href="ie-5.0.css" /> <![endif]--> Y para el 6: <!--[if IE 6]> <link rel="stylesheet" type="text/css" target="_blank" href="ie-6.5.O bien: <!--[if IE 5.5]> <link rel="stylesheet" type="text/css" target="_blank" href="ie-5.css" /> <![endif]--> <!--[if IE 6]> <link rel="stylesheet" type="text/css" target="_blank" href="ie-6.0.css" /> <![endif]--> Y para que se lean y "pisen" en el orden correcto.5. deberemos colocarlas de mayor a menor especificidad: <link rel="stylesheet" type="text/css" target="_blank" href="comun.css" /> <![endif]--> .css" /> <!--[if IE]> <link rel="stylesheet" type="text/css" target="_blank" href="hoja-para-todos-los-IE.