Your SlideShare is downloading. ×
  • Like
Curso CSS Avanzado
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply
Published

Transparencias Curso CSS Avanzado impartido por Eider Bilbao para EHU/UPV. Octubre 2009.

Transparencias Curso CSS Avanzado impartido por Eider Bilbao para EHU/UPV. Octubre 2009.

Published in Technology , Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,791
On SlideShare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
249
Comments
0
Likes
6

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. CSS: Hoja de Estilo en Cascada CSS AVANZADO
  • 2. CSS: Hoja de Estilo en Cascada INTRODUCCIÓN (I) ¿Qué son las hojas de estilo? ● Hojas de Estilo o CSS, por Cascading Stylesheet. ● Trata de dar la separación definitiva de la lógica (estructura) y el físico (presentación, cómo mostrar) del documento, es decir, el contenido de las páginas de su apariencia. ¿Cómo funcionan? ● En HTML, las etiquetas (tags) indican al navegador cuáles son los elementos que compondrán la página, y el navegador aplicará a cada elemento su formato correspondiente. ● Por ejemplo: <h3>Título</h3> indica que el texto 'Título' es un encabezado de nivel 3, y el navegador le aplicará su formato predeterminado (que varía un poco dependiendo del agente de usuario o navegador - Internet Explorer, Netscape, Mozilla- o si usamos Windows, Mac o Linux). Ejemplo
  • 3. CSS: Hoja de Estilo en Cascada INTRODUCCIÓN (II) Para cambiar, por ejemplo, la tipografía de los h3 a Arial de 19 puntos, en color azul y alineación central, se debería especificar así para cada h3: <h3 align=”center”> ‍ <font face=”Arial” color=”#0000FF” size=”5”>   Título  </font> </h3> Ejemplo ● Las Hojas de Estilo en cambio usan reglas de estilo que determinan los formatos, que pueden ser genéricos para elementos, tipos de elementos..., pueden ser reutilizados, etc. ● Por ejemplo: h3 {  font-family: Arial, Sans-serif;  font-size: 19pt;  color: #0000FF;  text-align: center;  } Ejemplo
  • 4. CSS: Hoja de Estilo en Cascada VENTAJAS DEL CSS ● Permite enriquecer la apariencia del documento como nunca los ha hecho HTML puesto que ofrece herramientas de composición más potentes que HTML. ● Se puede alterar la presentación de cada elemento sin tocar el código HTML, ahorrando esfuerzo y tiempo de edición. Puede reducir drásticamente el trabajo del diseñador: –Se centralizan los comandos para los efectos visuales en un mismo sitio, y se pueden reutilizar/incluir desde varios sitios. –Se pueden aplicar las definiciones a varios elementos sin tener que reescribirlas en cada uno. ● Se evita tener que recurrir a trucos para conseguir algunos efectos. Por ejemplo, con CSS no es necesario usar imágenes invisibles para hacer una sangría. ● No sólo se puede centralizar toda la información de estilos para una página en un solo sitio, sino que se puede crear una hoja de estilos independiente aplicable a múltiples páginas, de manera que se puede crear un diseño consistente para todo un sitio Web desde un solo lugar. ● Las Hojas de Estilo pueden aplicarse de varias maneras y combinarse formando una cascada de estilos con la información de cada una. ● Ayuda a mantener los tamaños de los documentos tan pequeños como se pueda, reduciendo así los tiempos de carga.
  • 5. CSS: Hoja de Estilo en Cascada “DESVENTAJAS” DEL CSS ● El soporte irregular que tienen los navegadores del CSS. –Algunas propiedades no están implementadas correctamente en algunos navegadores, por lo que no funcionan bien. –Pueden existir diferencias en un mismo navegador según sea para Mac, Windows o Linux. –También hay diferencias en la implementación dependiendo de las distintas versiones de un mismo navegador. ● Esto puede provocar que las páginas se visualicen por el lector de una forma no deseada por el diseñador.
  • 6. CSS: Hoja de Estilo en Cascada ELEMENTOS (I) Son la base de la estructura del documento (p, table, span, a, div...). En térmimos de CSS, cada elemento genera un cuadro que contiene el contendo del elemento. Elementos reemplazados y no-reemplazados ● No todos los elementos se crean de la misma manera, en CSS toma dos formas: elementos reemplazados y no reemplazados. Elementos reemplazados ● Son aquellos en los que el contenido del elemento es reemplazado por alguna otra cosa que no está directamente representado en el contenido del documento, como pueden ser los elementos img, input, etc. Elementos no-reemplazados ● La mayoría de los elementos html son no-reemplazados, que son aquellos cuyo contenido se representa “tal cual” por el navegador en un “cuadro” generado por el mismo elemento. Por ejemplo <span>¡Hola!</span>.
  • 7. CSS: Hoja de Estilo en Cascada ELEMENTOS (II) Elementos según modo de visualización ● Además de los elementos reemplazados y no reemplazados, CSS2.1 utiliza otros dos tipos básicos de elementos: de bloque y en línea. Elementos en bloque ● Generan un cuadro que llena el área de contenido del elemento padre y no puede tener otros elementos a sus lados. Es decir, generan un “salto” antes y después del cuadro del elemento. Por ejemplo los elementos p,div... ● Los elementos de listados son un caso especial de elementos en bloque, puesto que “adjunta” un “marcador” al cuadro del elemento. Excepto por este marcador, son idénticos al resto de elementos en bloque. Elementos en línea ● Generan un cuadro de elemento en una línea de texto y no rompen el flujo de dicha línea. Por ejemplo los elementos strong, em, span... ● Los elementos en línea no generan “saltos” o rupturas antes ni despues del cuadro del elemento. Nota: Aunque las denominaciones de en bloque y en línea tienen mucho en común con los conceptos de elementos de bloque y elementos de línea en XHTML, no se debe olvidar que XHTML los elementos en bloque no pueden descender de elementos en línea. En CSS no existe está restricción, ya que sólo hace referencia al rol de visualización, no modifica el tipo del objeto HTML.
  • 8. CSS: Hoja de Estilo en Cascada REUNIR HTML Y CSS (I) La etiqueta link ● Permite asociar otros documentos con el documento HTML que contiene dicha etiqueta. Estas hojas de estilo que no son parte del documento HTML pero son usadas por él, se denominan hojas de estilo externas. ● Sintaxis: <link rel=”stylesheet” type=”text/css” href=”sheet1.css” media=”all” /> ● Debe estar situado en la cabecera del documento HTML (entre las etiquetas <head> y </head>). ● El formato de la hoja de estilos externa no es más que un listado de reglas de estilo, no se pueden incluir otras marcas de XHTML u otros lenguajes. ● Atributos de la etiqueta: –rel: la relación, en este caso, hoja de estilos (stylesheet) –type: para el caso de CSS siempre será 'text/css'. Describe el tipo de datos que se cargarán usando este enlace. –href: la dirección a la hoja de estilos, que puede ser absoluta o relativa. –media: en este caso 'all', que indica que la hoja de estilos se aplicará en cualquier medio de presentación. Tipos de medio para Web: ● all: todos los medios. ● screen: en pantalla. ● print: en la impresión del documento o en la “vista previa”.
  • 9. CSS: Hoja de Estilo en Cascada REUNIR HTML Y CSS (II) ● Puede haber varias hojas de estilo asociadas al documento, pero, sólo aquellas con el atributo rel con valor “stylesheet” serán usados para la visualización inicial del documento. Hojas de estilo alternativas ● Se declaran asignando al atributo rel el valor “arternate stylesheet”. ● Esto hace que las hojas de estilos declaradas como alternativas, solo sean usadan en el formateo del documento si el agente de usuario las selecciona (sólo si el navegador es capaz de usar hojas de estilo alternativas). ● El atributo title se usa para generar la lista de estilos alternativos. –Si a varias hojas de estilo externas se les da el mismo valor title, se agrupan. –Si no se les asigna el valor title se convierten en persistentes, es decir, se usará siempre. Ejemplo Nota: Las hojas de estilo alternativas son soportadas por la mayoría de los navegadores basados en Gecko, como Mozilla y Netscape 6+, y en Opera 7. En Internet Explorer no se soportan de forma nativa, pero se puede simular usando javascript.
  • 10. CSS: Hoja de Estilo en Cascada REUNIR HTML Y CSS (III) El elemento style ● Es otra manera de incluir estilso, y aparece en el mismo documento. ● La etiqueta style siempre debería tener el atributo type con valor “text/css”. ● Sintaxis: <style type=”text/css”> ‍ ...reglas de estilo... </style> ● También es posibe en este caso utilizar el atributo media, con los mismos posibles valores que para el caso link. ● A los estilos entre las etiquetas <style> y </style> se les denomina hoja de estilos del documento , hoja de estilos incrustas u hoja de estilos embebida . ● Mediante este método se definirán muchos estilos que se aplicarán al documento, pero también es posible que contengan múltiples enlaces a hojas de estilos externas mediante la directiva @import. La directiva @import ● Es similar a link, puesto que se puede usar para cargar en el navegador Web hojas de estilo externas y usar sus estilos.
  • 11. CSS: Hoja de Estilo en Cascada REUNIR HTML Y CSS (IV) ● La mayor diferencia es la sintaxis y el emplazamiento del comando: –El comando se sitúa en el contenedor style (que a su vez está en el contenedor head). –Se debe poner antes de cualquier otra regla CSS, sino no funciona. –Sintaxis: <style type=”text/css”> import url(hojaestilos.css); ‍ ...otras reglas de estilo... </style> ● Como con link, puede haber más de una sentencia @import, pero a diferencia de link todas las hojas de estilo incluidas así serán cargadas y usadas. ● En este caso también se pueden restringir a uno o más medios: <style type=”text/css”> @import url(hojaestilos1.css) all; @import url(hojaestilos2.css) screen; @import url(hojaestilos3.css) screen,print; @import url(http://ejemplo.org/libreria/estilos.css) all; ...otras reglas de estilo... </style> Nota: Internet Explorer para Windows no ignora las directivas @import aunque vengan después de otras reglas. Como el resto de navegadores si lo hacen, es una fuente común de errores. Lo mejor es acostumbrarse al estándar para evitar errores.
  • 12. CSS: Hoja de Estilo en Cascada REUNIR HTML Y CSS (V) Compatibilidad hacia atrás ● Los navegadores antiguos ignoran las etiquetas que no reconocen, pero no su contenido. Por lo que si no reconoce la etiqueta style, la ignorará, pero no su contenido, que se mostrará como texto ordinario. ● Solución: encerrar las declaraciones entre comentarios HTML: <style type=”text/css”> <!-- ...las reglas de estilo... --> </style> Estilos en línea ● Para casos en los que se quiere asignar una serie de estilos a un elemento individual, sin la necesidad de hojas de estilo externas o estilos embebidos. ● Se utiliza el atributo style de los propios elementos HTML: <p style=”reglasDeEstilo”> Esto es un párrafo que tiene unas reglas de estilo directamente aplicadas a él y a nadie más. </p> ● El atributo style se le puede asignar a cualquier elemento HTML excepto a aquellos que están declarados fuera del body. ● No es la manera más recomendable de utilizar los estilos.
  • 13. CSS: Hoja de Estilo en Cascada SINTAXIS DE CSS Estructura de reglas ● Una hoja de estilos está construído por una serie de reglas. ● Cada regla tiene dos partes fundamentales: –Selector: identifica o selecciona un elemento o conjunto de elementos. –Bloque de declaración: Que comienza con '{' y termina con '}'. ● El bloque de declaración está compuesto por una o más declaraciones, que son las que indican al navegador el estilo definido. Siempre acaban con ';'. ● Cada declaración está compuesta por: –Una propiedad CSS, que consiste en alguna palabra clave definida por el lenguaje. –Un valor para dicha propiedad. Existen diferentes valores, y cada propiedad puede aceptar alguno de esos valores. –La propiedad y su correspondiente valor se separan por ':'. Con la regla de la imagen, se especifica que los elementos p (párrafos) del documento se construirán con fuente roja y en negrita (dos pares atributo-valor, es decir, dos declaraciones).
  • 14. CSS: Hoja de Estilo en Cascada SINTAXIS DE CSS ● Se pude definir un mismo bloque de declaraciones para varios selectores, es decir, se pueden agrupar los selectores siempre y cuando compartan el estilo que se va a definir. Se agrupan separando los selectores con comas (','); p, h1, h2 { ‍ font-weight: bold; ‍ color: red; } Comentarios en CSS ● Los comentarios de CSS están rodeados por /* y */: /* Esto es un comentario en CSS */ /* Esto es otro comentario en CSS que además ocupa más de una línea, y todas ellas están comentadas */
  • 15. CSS: Hoja de Estilo en Cascada SELECTORES (I) Identifican a un elemento o conjunto de elementos dentro de la página, para luego poder definir sus propiedades. Selectores de tipos ● Son los que identifican a un tipo de elemento dentro de los que conforman el código HTML. p, h1, h2 { ‍ font-weight: bold; ‍ color: red; } ● Con los selectores de tipo con un simple cambio en la Hoja de Estilo podemos modificar el aspecto de todos los elementos de ese tipo ● Limitación: su utilidad se limita al caso en que todos los elementos de un tipo tengan la misma apariencia en cada una de nuestras páginas. La solución a esto son los selectores que se explican a continuación. Selector Univeral ● Se representa con un asterisco ('*'), y concuerda con cualquier elemento, es como un comodín. * {  color: grey; } Todo elemento del documento HTML tendrá el color de fuente en gris.
  • 16. CSS: Hoja de Estilo en Cascada SELECTORES (II) Selectores de clase ● Para utilizar el selector de clase, hay que asignar valores a los atributos de clase de los elementos que queremos formatear: <p class=”clase1”>Este es un párrafo con una clase asignada.</p> <p>Este es otro párrafo sin clase asignada, <span class=”clase2”> pero  contiene un span</span> que si la tiene.</p> ● Para asociar los estilos con un elemento, el selector es el nombre de la clase precedido por un punto ('.') (el selector universal se puede omitir): .clase1 { *.clase1 { font-weight: bold; font-weight: bold; } } .clase2 { *.clase2 { font-style: italic; font-style: italic; } } ● El selector de clase trabaja directamente referenciando el valor de los atributos class. En este caso, todo elemento que tenga una clase con valor clase1 estará en negrita, el que tenga clase2 en cursiva, y el que tenga ambas en negrita y cursiva. Ejemplo Nota: En versiones anteriores a IE7, Internet Explorer para ambas plataformas tiene problemas manejando selectores de clases múltiples. En estas versiones anteriores, la declaración p.clase1.clase2 aplicará sólo clase2 por venir en último lugar, y p.clase2.clase1, aplicará sólo clase1.
  • 17. CSS: Hoja de Estilo en Cascada SELECTORES (III) Selectores de ID ● Los selectores de ID van precedidos por #: #identificador1 { *#identificador1 { font-weight: bold; font-weight: bold; } } #identificador2 { *#identificador2 { font-style: italic; font-style: italic; } } ● Hacen referencia a los valores de los atributos id (identificadores de elementos). Ejemplo ● En un documento HTML, el id debe ser único, por lo que no pueden combinarse diferentes selectores de ID, dado que son únicos y cada elemento sólo puede tener un ID asignado. ● Tanto los selectores de clase como los de id, son sensibles a mayúsculas y a minúsculas.
  • 18. CSS: Hoja de Estilo en Cascada SELECTORES (IV) Selectores de atributo ● Permiten seleccionar elementos de la página según sus propiedades o el valor asignado a estas propiedades. ● Se pueden seleccionar basándose en la presencia de uno o más atributos. Por presencia de atributo ● Selecciona elemento que tengan un determinado atributo, indiferentemente a de su valor: *[class] { font-weight: bold; } p[id] { color: red; } Por valor exacto ● Selecciona elemento que tengan un determinado atributo y con un valor determinado (exactamente igual): *[class=”clase1”] { font-weight: bold; } p[id=”identificador1”] { color: red; }
  • 19. CSS: Hoja de Estilo en Cascada SELECTORES (V) Por valor parcial ● Para cualquier atributo que acepte una lista de valores separados por espacios, se puede seleccionar elementos basándose en la presencia de alguna de esas palabras (~=): *[class~=”clase1”] { img[title~=”figura”] { font-weight: bold; border: 1px solid gray; } } ● Para seleccionar elementos con un atributo concreto y cuyo valor comience con un patrón (^=): *[class^=”clas”] { img[title^=”fig”] { font-weight: bold; border: 1px solid gray; } } ● Para seleccionar elementos con un atributo concreto y cuyo valor acabe con un patrón ($=): *[class$=”se1”] { img[title$=”ura”] { font-weight: bold; border: 1px solid gray; } } ● Para seleccionar elementos con un atributo concreto y cuyo valor contenga un patrón (*=): *[class*=”ase”] { img[title*=”igur”] { font-weight: bold; border: 1px solid gray; } } ● Para seleccionar elementos con un atributo concreto y cuyo valor sea exactamente igual a un patrón o, comience por dicho patrón seguido de un guión (|=): *[lang|=”en”] { img[title|=”figura”] { font-weight: bold; border: 1px solid gray; } }
  • 20. CSS: Hoja de Estilo en Cascada SELECTORES CONTEXTUALES (I) Se pueden combinar los selectores vistos hasta ahora de maneras concretas para identificar elementos no solo por tipo, id, clase o atributos, sino también pos su posición respecto a otros elementos o relación entre ellos. Para ir viendo los diferentes tipos, supongamos la siguiente estructura DOM de un documento HTML:
  • 21. CSS: Hoja de Estilo en Cascada SELECTORES CONTEXTUALES (II) Selectores descendientes ● Permiten especificar elementos que está contenido dentro de otro elemento, es decir, que son parte de otro elemento. ● El indicador de descendencia es el espacio, de manera que dos selectores separadas por un espacio indica que se quieren seleccionar los elementos del segundo tipo de selector que se encuentra dentro de un elemento del primer tipo de selector. h1 em { Esta definición se traduciría como: “cualquier elemento em que esté contenido  font-size: 14px; } dentro de un h1, tendrá un tamaño de fuente de 14 px.” ● En el ejemplo de la imágen de la estructura HTML, por ejemplo: – El elemento ol es descendiente de todos aquellos que encontramos en el camino siguiendo la línea del árbol hacia arriba: li – ul - li – ul – body – html. (línea roja) –El elemento strong es descendiente de p – body – html (línea verde).
  • 22. CSS: Hoja de Estilo en Cascada SELECTORES CONTEXTUALES (III) Selectores de hijos ● Permiten especificar elementos que son hijos de otro elemento (descendientes directos). ● El indicador de selección de hijos es el '>' (con espacios o no alrededor). h1 > em {  font-size: 14px; Esta definición se traduciría como: “cualquier elemento em que esté sea hijo de un } h1, tendrá un tamaño de fuente de 14 px.” ● En el ejemplo de la imagen de la estructura HTML, por ejemplo: – El elemento ol hijo del li inmediatamente superior, pero no de los restantes ascendientes (ul, li, ul, body, html) –El elemento strong es hijo de p, pero no de body y html.
  • 23. CSS: Hoja de Estilo en Cascada SELECTORES CONTEXTUALES (IV) Selectores de hermanos adyacentes ● El indicador de selección de hermanos adyacentes es el '+' (con espacios o no alrededor). ● Permiten especificar elementos que se encuentran inmediatamente después de otro (adyacente), y que tengan el mismo padre (hermano). p#advertencia + p { Esta definición se traduciría como: “cualquier elemento p que venga  font-size: 14px; } inmediatamente después de un párrafo con ID “advertencia”, y que tengan el mismo padre, tendrá un tamaño de fuente de 14 px.” ● En el ejemplo de la imagen de la estructura HTML, por ejemplo: – El elemento ol no tiene hermanos adyacentes. –El elemento strong es hermano adyacente del elemento em. Nota: Internet Explorer para Windows, hasta IE6 no soporta los selectores de hijos y los de hermanos adyacentes. IE7 soporta ambos.
  • 24. CSS: Hoja de Estilo en Cascada PSEUDO-CLASES (I) Todos los selectores vistos hasta el momento se refieren a elementos que podemos encontrar dentro del código HTML. Las pseudo-clases (y los pseudo-elementos), por el contrario, no pueden deducirse simplemente observando la estructura del documento. Puede decirse que son abstracciones que permiten referirse a elementos que de otro modo resultarían inaccesibles. Las pseudo-clases se pueden dividir en ● Pseudo-clases de enlaces: –:link –:visited ● Pseudo-clases dinámicas: –:focus –:hover –:active ● Pseudo-clase de “primer hijo”: –:first-child ● Pseudo-clase de idioma: –:lang Como se obseva, el indicador de selector de pseudo-clases son los dos puntos (:).
  • 25. CSS: Hoja de Estilo en Cascada PSEUDO-CLASES (II) :link y :visited ● link: Se refiere a cualquier link (a) que apunta a una dirección que no ha sido visitada. ● visited: Se refiere a cualquier link (a) que ya ha sido visitado. a:link { color: blue; } a:visited { color: red; } :focus, :hover y :active ● focus: Se refiere a cualquier elemento que recibe el foco. ● hover: Se refiere a cualquier elemento sobre el cual está el cursor del mouse. ● active: cuando el elemento es activado (por ejemplo, cuando el usuario presiona el botón del mouse). a:link { color: blue; } a:visited { color: red; } a:hover { font­size: 1.5em; } a:active { font­size: 0.9em; } ● El orden de declaración de estas pseudo-clases es importante, se recomienda utilizar el orden: link-visited-focus-hover-active. Nota: Internet Explorer para Windows, hasta IE6 no soporta las pseudo-clases dinámicas (:focus, :hover y :active ) para ningún otro elemento que no fuera un link. IE7 añadió soporte para :hover sobre cualquier elemento, pero no :focus para elementos de formulario.
  • 26. CSS: Hoja de Estilo en Cascada PSEUDO-CLASES (III) :first-child ● Selecciona un elemento cuando es el primer hijo de otro elemento. p:first­child {color: blue} /* selecciona los párrafos que son el primer  hijo de otro cualquier elemento */ Nota: Internet Explorer para Windows, hasta IE6 no soporta las :first-child. IE7 añadió el soporte. :lang ● En HTML es posible especificar el idioma que se usa en un elemento mediante el atributo lang: <p lang:"es">Un párrafo al que se le ha especificado que está en  castellano</p> ● Mediante :lang se pueden seleccionar elementos en base a su idioma. p:lang(es) { color: red; }
  • 27. CSS: Hoja de Estilo en Cascada PSEUDO-ELEMENTOS (I) Primer carácter ● :first-letter da formato al primer carácter, y sólo a ese carácter, de un elemento de bloque. p:first­letter { font­size: 200%; } Primera línea ● :first-line da formato a la primera línea del texto de un elemento. p:first­line { text­decoration: underline; } Restricciones para :first-letter y :first-line ● Sólo se pueden aplicar a elementos de bloque, tales como cabeceras, párrafos... No a los elementos en línea como enlaces... ● Limitaciones en las propiedades que se pueden usar en la declaración de estilos: –Para:first-letter: propiedades de la fuente, propiedades del color, propiedades del fondo, text-decoration, vertical-align (sólo si float es none), text-transform, line-height, propiedades de los márgenes, propiedades del relleno, propiedades de los bordes, float, text-shadow y clear. –Para :first-line: propiedades de la fuente, propiedades del color, propiedades del fondo, word-spacing, letter-spacing, text-decoration, vertical-align, text- transform, line-height, text-shadow y clear.
  • 28. CSS: Hoja de Estilo en Cascada PSEUDO-ELEMENTOS (II) Insertar antes y después ● Con los pseudo-elementos :before (antes) y :after (después) se puede insertar un contenido antes o después de un elemento determinado y definir el estilo del contenido insertado. ● La propiedad content, junto con estos pseudo-elementos, especifican lo que se inserta. /* La siguiente definición insertará dos corchetes de cierre con fuente  plateada antes de cada cabecera de segundo nivel*/ h2:before { content: “]]”; color: silver; } /*La siguiente definición insertará el texto “Fín” al acabar el cuerpo del  documento HTML*/ body:after {  content: “Fín”; }
  • 29. CSS: Hoja de Estilo en Cascada ESPECIFICACIÓN (I) Supongamos que tenemos las siguientes declaraciones que se incluyen en un documento HTML: h2.morado {color: purple;} /* viene de una hoja de estilos externa*/ h2 {color:silver;} /* viene de otra hoja de estilos externa*/ Si en nuestro documento tuvieramos una cabecera de segundo niver con la clase asignada a 'morado', cómo se formatearía la cabecera, ¿en morado o el plateado? La solución es la especificación de cada selector. ● Para cada regla, el agente de usuario (navegador) evalua la especificación del selector y lo adjunta a cada declaración de la regla. ● La especificación de un selector está determinada por los componentes del mismo selector, y se expresa en cuatro partes así: 0,0,0,0. ● La actual especificación de un selector se determina de la siguiente manera: –Para cada valor de atributo ID dado en el selector, añadir 0,1,0,0 –Para cada valor del atributo class dado en el selector, añadir 0,0,1,0 –Para cada elemento y pseudo-elemento dado en el selector, añadir 0,0,0,1 –El selector universal (*) tiene una especificación de 0,0,0,0 –Los elementos de combinación no contribuyen a la especificación (que es diferente a tener 0,0,0,0).
  • 30. CSS: Hoja de Estilo en Cascada ESPECIFICACIÓN (II) ● La especificación se aplicará por separado a cada declaración y a cada selector de la definición de la regla. ● A partir de CSS2.1, el primer cero está reservado para los estilos en línea, que gana sobre cualquier otra especificación de declaración, por lo que su valor será 1,0,0,0. En CSS2, la especificación para un estilo en línea era 0,1,0,0, es decir, igual que los selectores de ID. Importancia ● Hay ocasiones en las que una declaración es tan importante que supera el resto. CSS los llama declaraciones importantes y se marcan poniendo !important justo antes del punto y coma final de la declaración. p.oscuro { color: #333 !important; background: white; } ● Las declaraciones marcadas así no tienen una especificación especial, pero se consideran aparte de las demás, junto con las marcadas como !important.
  • 31. CSS: Hoja de Estilo en Cascada ESPECIFICACIÓN (III) Propuesta de ejercicio: ● Calcula la especificación de las siguientes declaraciones: h1 {color: red;} /* 0,0,0,1 */ body h1 {color: green;} /* 0,0,0,2 */ h2.grape {color: purple;} /* 0,0,1,1 */ h2 {color:silver;} /* 0,0,0,1 */ html>body table tr[id=”totals”] td ul > li { color: maroon; } /* 0,0,1,7 */ li#answer {color: navy;} /* 0,1,0,1 */ div p {color: black; } /* 0,0,0,2 */ * {color: gray; } /* 0,0,0,0 */ body * strong { color: yellow; } /* 0,0,0,2 */ p em { color: purple; } /* 0,0,0,2 */ .grape { color: purple; } /* 0,0,1,0 */ *.bright { color: orange; } /* 0,0,1,0 */ p.bright em.dark { color: dark; } /* 0,0,2,2 */ #id212 { color: blue; } /* 0,1,0,0 */ div#sidebar *[href] {color: red; } /* 0,1,0,1 */
  • 32. CSS: Hoja de Estilo en Cascada HERENCIA (I) ● Es el mecanismo por el que los estilos no sólo se aplican al elemento al que se le declaran, sino también a sus descencientes. Cada página HTML está compuesta por una serie de elementos estructurados de tal forma que cada elemento está contenido por otro elemento, que a su vez puede estar contenido por otro. ● En esta estructura existe un elemento raíz que es el que actúa de contenedor de todos los demás elemento, es el elemento <HTML>. ● Así, cada elemento hereda las propiedades de su contenedor (elemento padre). Es decir, que si especificamos body { color: red; }, todo elemento de la página heredará esta característica y no será necesario volver a especificarlo. ● Aquí es necesario hacer algunas precisiones: –No todas las propiedades son hereditables y para cada propiedad se define si ésta se hereda o no. –Elvalor inherit puede aplicarse a cualquier propiedad de los elementos. Este valor puede usarse para reforzar explícitamente la herencia de una propiedad o para lograr que un elemento herede de su padre una propiedad que de otro modo no sería heredada. –Cuando se asigna una propiedad a un elemento, el valor especificado reemplaza al valor heredado. –Los elementos heredan los valores computados del padre, no los valores especificados (en el siguiente punto esto se explica más detalladamente). ● Los valores heredados no tiene especificación alguna, ni siquiera 0,0,0,0. Por esto se debe tener cuidado con lo que cuidado con la utilización del selector universal (*). Ejemplo
  • 33. CSS: Hoja de Estilo en Cascada LA CASCADA (I) La cascada es el método por el cual se resuelven los conflictos de aplicación de estilos cuando hay más de una declaración posible para un elemento y todas tienen la misma especificación. Supongamos por ejemplo: h1 { color: red; } h1 { color: blue; } Las reglas de la cascada son: ● Encontrar todas las reglas que contengan un selector que coincidan con un elemento dado. ● Ordenar por peso explícito todas las declaraciones aplicadas al elemento. Los pesos de mayor a menor son: –Las declaraciones del usuario marcadas como !important. –Las declaraciones del autor marcadas como !important. –Las declaraciones normales del autor. –Las declaraciones normales del usuario. –Las declaraciones del agente de usuario (navegador). ● Ordenar por la especificación todos los estilos aplicables al elemento. Los elementos con mayor especificación tiene más peso que los demás.
  • 34. CSS: Hoja de Estilo en Cascada LA CASCADA (II) ● Ordenar por orden de declaración los estilos aplicables al elemento: –Los estilos declarados más tarde (o más abajo, según cómo se quiera ver), tienen más peso. –Lasdeclaraciones que aparecen en las hojas de estilo importadas se suponen anteriores al resto de declaraciones de la hoja de estilos que las importa. ● Es posible que en un documento aparezcan formateadores que no son CSS, tales como font. En estos casos, se les asigna una especificación de 0 y se supone aparecen al comienzo de la hoja de estilos del autor. Por lo que estos estilos serán sobreescritos por cualquier declaración del diseñador o lector, pero no por los del agente de usuario.
  • 35. CSS: Hoja de Estilo en Cascada VALORES Y UNIDADES EN CSS (I) Números ● Hay dos tipos de números en CSS: enteros y reales. ● Dependiendo del rango de valores que acepte la propiedad, pueden ser negativos y positivos. ● Ejemplos de posibles valores válidos: 15.5, -270.0004, 5, 0.5, etc. Porcentajes ● Un número real seguido del signo del porcentaje (%). ● Siempre son relativos a otro valor, que puede ser: el valor de otra propiedad del mismo elemento, el valor heredado del padre, el valor heredado de un antecesor... ● Las mismas propiedades que aceptan valores porcentuales definen las restricciones del rango de valores permitido. Colores Existen diferentes maneras para dar valores a las propiedades referentes a colores. Nombres de colores ● La especificación CSS define 17 nombres de colores (16 de HTML 4.01 más el naranja): –aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple,red, silver, teal, white, yellow.
  • 36. CSS: Hoja de Estilo en Cascada VALORES Y UNIDADES EN CSS (II) Colores por RGB Colores funcionales: ● La sintaxis genérica para este tipo de valores es rgb(color), donde color se expresa con un trio de porcentajes o enteros, rojo-verde-azul respectivamente. ● Si se utilizan enteros, el rango de valores de cada uno es 0-255. Si se utilizan porcentajes, el rango es de 0-100. /* Blanco: máximo en todos*/ rgb(100%,100%,100%) | rgb(255,255,255)  /* Negro: mínimo en todos*/ rgb(0%,0%,0%) | rgb(0,0,0)  /* Rojo: sólo el primer valor al máximo, los demás al mínimo*/ rgb(100%,0%,0%) | rgb(255,0,0)  /* Marrón: el primer valor a la mitad, los demás al mínimo*/ rgb(50%,0%,0%) | rgb(128,0,0)  Colores hexadecimales: ● El valor del color se expresa en valor hexadecimal de 6 dígitos, un par de dígitos referidos a cada color, y se precede por el símbolo #. ● El rango de valores para cada color será 00-FF, por lo que para el conjunto será 000000-FFFFFF. h1 { color: #FF0000} /* establecer los H1 a rojo*/ h2 { color: #903BC0} /* establecer los H2 a morado oscuro*/ h3 { color: #000000} /* establecer los H3 a negro*/
  • 37. CSS: Hoja de Estilo en Cascada VALORES Y UNIDADES EN CSS (III) Equivalencia de valores de color Color Porcentaje Número Hexadecimal Hex.corto red rgb(100%,0%,0%) rgb(255,0,0) #FF0000 #F00 orange rgb(100%,40%,0%) rgb(255,102,0) #FF6600 #F60 yellow rgb(100%,1000%,0%) rgb(255,255,0) #FFFF00 #FF0 green rgb(0%,50%,0%) rgb(0,128,0) #008000 blue rgb(0%,0%,100%) rgb(0,0,255) #0000FF #00F aqua rgb(0%,100%,100%) rgb(0,255,255) #00FFFF #0FF black rgb(0%,0%,0%) rgb(0,0,0) #00000 #000 fuchsia rgb(100%,0%,100%) rgb(255,0,255) #FF00FF #F0F gray rgb(50%,50%,50%) rgb(128,128,128) #808080 lime rgb(0%,100%,0%) rgb(0,255,0) #00FF00 #0F0 maroon rgb(50%,0%,0%) rgb(128,0,0) #800000 navy rgb(0%,0%,50%) rgb(0,0,128) #000080 olive rgb(50%,50%,0%) rgb(128,128,0) #808000 purple rgb(50%,0%,50%) rgb(1280,128) #800080 silver rgb(75%,75%,75%) rgb(192,192,192) #C0C0C0 teal rgb(0%,50%,50%) rgb(0,128,128) #008080 white rgb(100%,100%,100%) rgb(255,255,255) #FFFFFF #FFF
  • 38. CSS: Hoja de Estilo en Cascada VALORES Y UNIDADES EN CSS (IV) Valores de longitud ● Se pueden expresar tanto en número positivos como en negativos seguidos por una etiqueta (aunque algunas propiedades sólo aceptan valores positivos). ● Las etiquetas son abreviaturas de dos letras que representan la medida de longitud. ● Estas medidas de longitud se dividen en dos tipos: absolutas y relativas. Unidades de longitud absolutas ● Pulgadas (in), Cada pulgada equivale a 2.54 cm ● Centímetros (cm) ● Milímetros (mm) ● Puntos (pt), cada punto es un 1/72 de una pulgada (0.035 de un centímetro). ● Picas (pc), otro término tipográfico, equivale a 12 puntos (1/6 de una pulgada). ● Pixeles (px): cada punto de color en la pantalla, y no tiene equivalencia con otras unidades puesto que el tamaño de cada pixel depende de la resolución de pantalla, ... /* Todas estas definiciones son equivalentes */ p { font­size: 1in; } p { font­size: 2.54cm; } p { font­size: 25.4mm; } p { font­size: 72pt; } p { font­size: 6pc; }
  • 39. CSS: Hoja de Estilo en Cascada VALORES Y UNIDADES EN CSS (V) Unidades de longitud relativas Son relativas a la medida de otras cosas. ● em: se llama así por que se refiere al tamaño de una M mayúscula de una fuente dada, pero en la práctica es igual al tamaño de fuente de la fuente actual. p { font­size: 0.9em; } /*Indica que el tamaño de fuente del párrafo   será el 0.9 del tamaño heredado*/ div { width: 20em; } /*Indica que la anchura del div será de 20 veces   una M mayúscula del tamaño heredado. */ ● ex: se llama así por que se refiere al tamaño de una x minúscula de la fuente a utilizar. ● %: porcentaje de otro valor. p { font­size: 120%; } /*Indica que el tamaño de fuente del párrafo    será el 120% mayor de tamaño heredado*/ div { width: 50%; } /*Indica que la anchura del div será de la mitad de  su contenedor. */ URLs ● Los valores de las propiedades que aceptan urls, pueden ser: –URL absolutas: Que van a funcionar independientemente de dónde se encuentre la definición, dado que define el valor absoluto del destino. –URL relativas: Especifican una ubicación del destino en relación a la ubicación del documento que les llama.
  • 40. CSS: Hoja de Estilo en Cascada VALORES Y UNIDADES EN CSS (VI) Palabras Clave ● Cuando el valor de una propiedad viene dada por una palabra de algún tipo. ● Un ejemplo muy común es la palabra clave none, el cual es distinto de 0 (cero). Por ejemplo, para eliminar el subrayado de un link en un documento HTML: a:link, a:visited { text­decoration: none; } ● Si una propiedad acepta palabras clave, entonces, del listado de palabras clave habrá algunas sólo para el ámbito de dicha propiedad, o dicho de otro modo, cada propiedad tiene un listado de palabras clave que admite como valor. ● Cada palabra clave, dependiendo de la propiedad a la que se le haya asignado, puede indicar diferentes cosas. Inherit ● Esta palabra clave la pueden utilizar todas las propiedades de CSS. ● Hace que el valor de una propiedad sea igual a la de su padre. Es decir, fuerza la herencia. ● En la mayoría de los casos no hace falta especificarlo ya que es por defecto, pero con algunas propiedades, si este es el comportamiento deseado, si que hay que ponerlo (como con los bordes, por ejemplo).
  • 41. CSS: Hoja de Estilo en Cascada FUENTES (I) Familias de Fuentes ● Lo que consideramos como una fuente, en realidad puede estar compuesta por muchas variaciones para definir la negrita, la cursiva, etc. ● Por ejemplo, la fuente Times en realidad es una combinación de muchas variantes: TimesRegular, TimesBold, timesItalic, TimesOblique, TimesBoldItalic, TimesBoldOblique, etc. Cada una de estas variantes de Times es un tipo de fuente (font face) y Times es una combinación de todas ellas, es decir, Times es una familia de fuentes, no un solo tipo de fuente. ● CSS define 5 familias genéricas: –Serif (Times, Georgia, New Century Schoolbook...). –Sans-serif (Helvetica, Geneva, Verdana, Arial, Universe...). –Monospace (Courier, Courier New, Andale Mono...). –Cursivas (Zapf Chancery, Author, Comic Sans...). –Fantasia (Western, Woodblock, Klingon...). Utilizando familias de fuentes genéricas ● Si se quiere que en un documento se utilice una fuente Sans-serif, pero ninguna en particular, se pude declarar lo siguiente: body { font­family: sans­serif; } 
  • 42. CSS: Hoja de Estilo en Cascada FUENTES (II) Especificando una familias de fuentes ● Pero si se tienen preferencias más específicas, se puede declarar así: body { font­family: Georgia; }  ● Esta regla asume que el navegador tiene disponible la fuente Georgia. Si no la tiene, el navegador no podrá satisfacer la regla, y utilizará la fuente por defecto del navegador. ● Esto se puede intentar evitar, combinando las fuentes específicas con las genéricas, de forma que el documento resultante, aunque no tenga exactamente la fuente deseada, tenga una que se le parezca: body { font­family: Georgia, serif; }  ● Más aún se puede indicar una lista de fuentes a ir descartando: ● body { font­family: Georgia, Times, New Century Schoolbook, serif; }  Peso de las Fuentes ● Con la propiedad font-weight se puede controlar el peso de la fuente a utilizar. ● Los posibles valores son: normal (valor por defecto), bold, bolder, lighter, 100, 200, 300, 400 (equivalente a normal), 500, 600, 700, 800, 900 e inherit.
  • 43. CSS: Hoja de Estilo en Cascada FUENTES (III) Tamaño de las Fuentes ● Con la propiedad font-size se puede controlar el tamaño de la fuente a utilizar. ● Los posibles valores son: –Valores absolutos: ● xx-small, x-small, small, medium, large, x-large, xx-large, <longitud>. ● De acuerdo a la especificación de CSS, la diferencia entre uno y otro valor es de 1.5 hacia arriba en tamaño y 0.66 hacia abajo. –Valores relativos: smaller, larger, <longitud>,<porcentaje>. –Valor heredado: inherit. body { font­family: sans­serif; }  p { font­size: small; } /* La fuente será 0.66 veces el tamaño por defecto de la fuente*/ p { font­size: 14px; } /* La fuente será de 14px */ p { font­size: 90%; } /* La fuente será 90% veces el tamaño heredado de la fuente*/ p { font­size: 1.2em; } /* La fuente será 1.2 veces el tamaño heredado de una M mayúscula de la fuente*/ p { font­size: larger; } /* La fuente será 1.5 veces el tamaño heredado de la fuente */
  • 44. CSS: Hoja de Estilo en Cascada FUENTES (IV) Estilos y variantes Fuentes con estilo ● Con la propiedad font-style se puede seleccionar entre texto normal, cursiva y oblicuo. ● Los posibles valores son: italic, oblique, normal, inherit. ● La diferencia entre oblicuo y cursiva es que: mientras cursiva es básicamente un tipo de fuente diferente, en las que se les han aplicado pequeños cambios a los caracteres para ajustarse a los cambios de apariencia (por ejemplo en los serif), el texto en oblicuo no es más que una inclinación de los caracteres desde su versión normal. ● En realidad, en la gran mayoría de los casos, como no suele existir una de las variantes, las dos se visualizan igual. Ejemplo Variaciones de fuentes ● Además de estilos, las fuentes pueden tener pequeñas variaciones. La propiedad para esto es font-variant. ● Los valores son: –small-caps: Hace que todo el texto esté en mayúsculas, pero las letras iniciales de cada palabra son más grandes que el resto. –normal: texto ordinario (valor por defecto). –inherit: forzar la herencia.
  • 45. CSS: Hoja de Estilo en Cascada FUENTES (V) La propiedad font ● Todas las propiedades sobre fuentes que hemos visto hasta ahora se pueden definir en una sola propiedad: font. ● El valor sería: [<font­style> || <font­variant> || <font­weight>]? <font­size>[/<line­ height>]? <font­family> ● Los tres primeros valores (estilo, variante y peso) se pueden colocar en cualquier orden: estilo- variante-peso, estilo-peso-variante, peso-estilo-variante, peso-variante-estilo, variante-estilo-peso o variante-peso-estilo. También se puede omitir cualquiera de ellas. ● El tamaño, la altura (si se define) y la familia en cambio, deben ir en esa posición. Añadiendo altura de línea ● En la propiedad font, se puede añadir también la altura de línea, aunque en realidad es una propiedad del texto, no de la fuente . ● Se pone como una adición del tamaño de fuente, separándolo por una barra '/': body { font­size: 12px; } h2 { font: bold italic 200%/1.2 Verdana, Helvetica, Arial, sans­serif;} /* Esto hace que la fuente de las cabeceras H2 sean en negrita,  cursiva, con un tamaño del 200% del heredado (24px respecto al  body), y la altura de línea de 28.8 (1.2 de 24px)*/
  • 46. CSS: Hoja de Estilo en Cascada TEXTO (I) Sangría ● Poder añadir sangrías a las primeras líneas de un párrafo es una de los efectos de formato más demandados. Gracias a CSS esto se puede hacer con una simple propiedad: text-indent. ● Posibles valores: <longitud> | <porcentaje> | inherit ● Los valores computados: –Para longitudes, el valor absoluto indicado. –Para porcentajes respecto a la anchura del contenedor. ● El valor sería: p { text­indent: 3em; } /* el párrafo tendrá una sangría de 3em a la  izquierda de la primera línea de texto. */ ● Esta propiedad sólo es aplicable a los elementos en bloque, no a los elementos inline ni a los elementos reemplazados. ● Puede tomar valores negativos. Alineación horizontal ● Hace referencia a cómo se alinean las líneas de texto de un elemento. ● La propiedad es : text-align. ● Posibles valores: left | center | right | justify | inherit ● Se aplica a los elementos en bloque.
  • 47. CSS: Hoja de Estilo en Cascada TEXTO (II) Alineación vertical Altura de líneas ● La propiedad line-height controla la distancia entre las líneas de base de las líneas de texto, y determina la cantidad por la cual la altura de cada cuadro de elemento aumenta o disminuye. ● En realidad controla la separación entre líneas, es decir, la separación entre líneas de base del texto. ● Posibles valores: <longitud>|<porcentaje>|<número>|normal|inherit ● Valores computados: –Para longitudes, el valor absoluto indicado. –Para porcentajes respecto al tamaño de fuente de elemento. ● Puede tener valores negativos. Alineación ● La propiedad vertical-align se aplica sólo a elementos inline, celdas de tablas y elementos reemplazados (imágenes, input de formularios...). ● No es una propiedad hereditaria por defecto. ● Posibles valores: baseline|sub|super|top|text­top|middle|bottom|texto­ bottom|<porcentaje>|<longitud>|inherit Ejemplo
  • 48. CSS: Hoja de Estilo en Cascada TEXTO (III) ● vertical-align: baseline; –Fuerza a que la línea de base del elemento se alinee con la línea de base del elemento padre. –Si el elemento no tiene línea de base (imágenes, input de formulario...), se alinea el límite inferior del elemento con la línea de base del padre. ● vertical-align: sub; (subíndice) –Causa que un elemento sea un subíndice. –Su línea de base se baja respecto a la línea de base del padre. –El tamaño de letra no se modifica. ● vertical-align: super; (superíndice) –Causa que un elemento sea un superíndice. –Su línea de base se eleva respecto a la línea de base del padre. –El tamaño de letra no se modifica. ● vertical-align: bottom; –Alinea el límite inferior del área de contenido de un elemento con con el límite inferior de la línea de cuadro. ● vertical-align: top; –Lo contrario que bottom. Causa que un elemento sea un subíndice. –Su línea de base se baja respecto a la línea de base del padre. –El tamaño de letra no se modifica.
  • 49. CSS: Hoja de Estilo en Cascada TEXTO (IV) Espaciado de palabras y de caracteres Espaciado de palabras ● La propiedad word-spacing acepta valores positivos y negativos, y dicho valor se le suma al valor por defecto del inter-espaciado de palablas. ● Posibles valores: <longitud>|normal|inherit Espaciado de caracteres La propiedad letter-spacing modifica el espacio entre letras, y también acepta valores positivos y negativos. ● Posibles valores: <longitud>|normal|inherit Espaciado y alineación ● El valor de word-spacing puede estar influenciado por el valor de la propiedad text-align. Si un elemento está justificado, el espaciado entre palabras se modificará automáticamente para que la línea de texto ocupe toda la anchura, puediendo no coincidir con el espaciado declarado por el diseñador. ● El espaciado entre caracteres solo se puede modificar si está declarado como normal, sino, aunque se justifique el texto, no se cambiará.
  • 50. CSS: Hoja de Estilo en Cascada TEXTO (V) Transformación del texto ● Para transformar la capitalización del texto se utiliza la propiedad text-transform. ● Posibles valores: uppercase|lowecase|capitalize|none|inherit ● El valor por defecto es none (ninguno) . ● uppercase y lowecase transforman el texto a mayúsculas o a minúsculas respectivamente. ● capitalize transforma a mayúsculas sólo la primera letra de cada palabra. ● inherit fuerza la herencia. Decorando el texto ● Para transformar la capitalización del texto se utiliza la propiedad text-decoration. ● Valores: none|underline|overline|line­through|blink|inherit ● Que siginifican: ninguno, subrayado, superrayado (ánalogo a subrayado), tachado, parpadeo, heredado. Ejemplo
  • 51. CSS: Hoja de Estilo en Cascada TEXTO (VI) Manejando el espacio ● La propiedad white-space afecta cómo manejará el agente de usuario o navegador lso espacios, los saltos de línea y tabulaciones. ● Posibles valores: normal|nowrap|pre|inherit ● El valor por defecto es normal, es decir, colapsar cualquier secuencia de espacios a un único espacio y transformar los retornos de carro en espacios ● pre: mostrar tal cual, con los espacios extra y los retornos de carro como saltos de línea (como la etiqueta pre en HTML). ● nowrap: previene el texto de un elemento de ser “partido”, excepto si lo marca un <br> (similar al campo nowrap de las celdas de tabla en HTML). mostrar tal cual, con los espacios extra y los retornos de carro como saltos de línea (como la etiqueta pre en HTML). Ejemplo. Dirección del texto ● No todos los idiomas se escriben de izquierda a derecha y de arriba a abajo. ● Para esto existe la propiedad direction. ● Valores: ltr|rtl|inherit ● Que significan: de izquierda a derecha (por defecto), de derecha a izquierda y heredado.
  • 52. CSS: Hoja de Estilo en Cascada MODELO DE CAJAS DE CSS (I) Desde el punto de vista de las hojas de estilo, todo lo que se muestra por HTML se pude entender como si estuviera contenido en una caja o cuadro. El modelo de cajas básico de CSS sería ● El centro del modelo de cajas de CSS es el contenido en sí, entendiendo el contenido como cualquier cosa contenida en el área de la caja. ● La anchura visible de la caja está determinada por: anchura del contenido + paddings laterales + bordes laterales. Los márgenes determinan la distancia de cada lado entre la caja visible y los elementos adyacentes.
  • 53. CSS: Hoja de Estilo en Cascada MODELO DE CAJAS DE CSS (II) ● De forma similar, la altura visible del cuadro está determinado por: altura del contenido + margenes sup. e inf. + bordes sup. e inf. El margen en este caso también indica la distancia con los objetos superiores e inferiores. ● El valor de cada uno de estos tres elementos (margen, borde y padding) se puede establecer mediante propiedades CSS. ● La suma de todas la propiedades horizontales (margin-left, border-left, padding-left, width, padding-roght, border-right, margin-right) tiene que resultar la anchura del contenedor. Sino es así, el propio navegador se suele encargar de modificar los valores para que encaje... ● Par ver esto en más profundidad vamos a partir de un modelo básico, sin márgenes, bordes, ni padding: p {  margin: 0; padding: 0; border: 0; background­color: #c0c0c0; /* Para ver mejor los efectos */ } Ejemplo
  • 54. CSS: Hoja de Estilo en Cascada MODELO DE CAJAS DE CSS (III) La propiedad width ● Establece la anchura del contenido del elemento. ● Sus valores son unidades positivas, o auto. –auto indica que la anchura se calcula automáticamente en función del resto de parámetros horizontales para cubrir la anchura del elemento contenedor. –Las unidades, por ejemplo, pueden ser: 5px, 100px, 50%, 15em, etc. ● Probemos a asignar anchuras en el ejemplo anterior. La propiedad height ● El valor por defecto de esta propiedad viene determinada por su contenido, los cuadros se forman tan altos como para visualizar todo su contenido. ● Sus valores son unidades positivas, o auto. –auto indica que la altura se calcula automáticamente en función de la altura de sus contenidos (comportamiento por defecto). –Las unidades, por ejemplo, pueden ser: 5px, 100px, 50%, 15em, etc. En estos casos, si la altura asignada es menor que el contenido a mostrar, el comportamiento resultante puede ser inesperado. ● Puede aparecer una barra de scroll. ● Puede omitirse la declaración de altura ● Etc.
  • 55. CSS: Hoja de Estilo en Cascada MODELO DE CAJAS DE CSS (IV) Las propiedades de padding ● Hay cuatro propiedades que definen el padding: padding­left, padding­right,  padding­top y padding­bottom.  ● Se pueden declarar de una en una, o todas a la vez con la propiedad padding, que puede tomar distintos números de valores: –1 valor: Los 4 paddings tendrán el valor indicado. –2 valores: El primer valor se refiere a los padding superior e inferior y los otros dos al izquierdo y derecho. –3 valores: el primero será para el padding superior, el segundo para los laterales (el mismo para el izquierdo y el derecho) y el último para el inferior. –4 valores: Un valor para cada uno en el orden top-right-bottom-left ● Probemos a cambiar los valores de padding en el ejemplo anterior.
  • 56. CSS: Hoja de Estilo en Cascada MODELO DE CAJAS DE CSS (V) Las propiedades de margin ● También hay cuatro propiedades que definen el margin: margin­left,margin­right,  margin­top y margin­bottom.  ● Se pueden declarar de una en una, o todas a la vez con la propiedad margin, que puede tomar distintos números de valores: –1 valor: Los 4 márgenes tendrán el valor indicado. –2 valores: El primer valor se refiere a los márgenes superior e inferior y los otros dos al izquierdo y derecho. –3 valores: el primero será para el margen superior, el segundo para los laterales (el mismo para el izquierdo y el derecho) y el último para el inferior. –4 valores: Un valor para cada uno en el orden top-right-bottom-left ● En el caso de margin, se puede asignar a las propiedades el valor auto, ● Probemos a cambiar ahora los valores de los márgenes en el ejemplo anterior. También combinemos con cambios en los padding.
  • 57. CSS: Hoja de Estilo en Cascada MODELO DE CAJAS DE CSS (VI) Las propiedades de border ● Son más complejas que las otras, dado que no sólo afectan al espacio entre objetos, sino también al formato de dicho espacio. ● Los bordes tienen tres propiedades: –Anchura (border­style o border­top­style, border­right­style, border­ bottom­style y border­left­style) ● Grosor de la línea, y puede ser un valor positivo absoluto o relativo. –Color (border­color o border­top­color, border­right­color, border­ bottom­color y border­left­color) ● El color del borde, indicado en cualquiera de las notaciones de colores ya mencionados. –Estilo (border­style o border­top­style, border­right­style, border­ bottom­style y border­left­style) ● Puede tener el valor de cualquiera de las siguientes palabras claves: double, groove,  inset, none, outset, ridge, solid, dashed, dotted, hidden.
  • 58. CSS: Hoja de Estilo en Cascada MODELO DE CAJAS DE CSS (VII) Las propiedades de display ● Determina cómo va a mostrar el navegador un elemento: si lo va a mostrar como un elemento en bloque, en línea, elemento de lista, etc. ● Sólo hacer referencia a la visualización, no a la naturaleza del elemento. Por mucho que visualicemos un párrafo como “el línea”, desde el punto de vista HTML seguirá siendo un elemento en bloque y mantendrá sus normas (que no puede estar contenido en un elemento inline, por ejemplo). ● Aunque esta propiedad admite hasta 17 valores, los más utilizados son sólo 4, que son los que vamos a ver: –block: lo visualiza como un elemento en bloque –inline: lo muestra como un elemento el línea –list-item: como un elemento de listado –none: no se muestra (se “esconde”) y el espacio que ocuparía el elemento se colapsa.
  • 59. CSS: Hoja de Estilo en Cascada MODELO DE CAJAS DE CSS (VIII) Posicionando en CSS La propiedad position ● Permite definir exactamente dónde se va a colocar el cuadro del elemento, en relación a dónde deberían aparecer en realidad (o en relación al elemento padre, a otro elemento o incluso a la ventana del navegador en sí). ● Valores posibles: static|relative|absolute|fixed|inherit. –static: El cuadro del elemento se genera de forma normal, como viene definido por la naturaleza del elemento. –relative: La posición de la caja se ajusta en relación a su posición normal dentro de la página. Cuando una caja X se posiciona relativamente la caja siguiente se sitúa como si X no se hubiera desplazado. –absolute: Las cajas son quitadas del flujo normal de la página y su posición se especifica con las propiedades 'left', 'right', 'top', y 'bottom' (especifican los desplazamientos con respecto al bloque de contención de la caja). Los elementos posicionados absolutamente no tienen influencia sobre la posición de las cajas siguientes. El bloque de contención para una caja posicionada es establecido por el antepasado posicionado más cercano o, si no existe, por el bloque de contención inicial (la esquina superior izquierda de la página, en el modelo visual). ● fixed: El cuadro del elemento se comporta como si hubiera sido declarado absoluto, pero en la caja posicionada de modo fijo el bloque de contención es establecido por el acceso visual (la pantalla del monitor) y el elemento no se mueve cuando se realiza un desplazamiento (cuando se hace un scroll en la página mantienen su posición en la pantalla).
  • 60. CSS: Hoja de Estilo en Cascada MODELO DE CAJAS DE CSS (IX) Desplazamientos top, right, bottom y left ● Los posibles valores para cada propiedad son: <longitud>|<porcentaje>|auto| inherit. ● Propiedad top: Especifica la distancia que se desplaza el elemento por debajo del borde superior del bloque de contención de la caja. ● Propiedad right: Especifica la distancia que se desplaza el elemento hacia la izquierda del borde derecho del bloque de contención de la caja. ● Propiedad bottom: Especifica la distancia que se desplaza el elemento sobre de borde inferior del bloque de contención de la caja. ● Propiedad left: Especifica la distancia que se desplaza el elemento hacia la derecha del borde izquierdo del bloque de contención de la caja.
  • 61. CSS: Hoja de Estilo en Cascada MODELO DE CAJAS DE CSS (X) Elementos flotantes La propiedad float ● Un flotante es una caja que es desplazada a la izquierda o a la derecha en la línea actual. Esta propiedad especifica si una caja debe flotar a la izquierda, derecha o no debe flotar en absoluto. ● Los valores de esta propiedad tienen los siguientes significados: –left: El elemento genera una caja de bloque que flota a la izquierda. El contenido fluye sobre el costado derecho de la caja, comenzando en la parte superior. –right: Igual que 'left', pero el contenido fluye sobre el costado izquierdo de la caja, comenzando en la parte superior. –none: La caja no es flotante.
  • 62. CSS: Hoja de Estilo en Cascada MODELO DE CAJAS DE CSS (XI) La propiedad clear ● Indica cuál de los lados de la caja de un elemento no puede quedar adyacente a una caja flotante anterior. Esta propiedad sólo puede especificarse para elementos a nivel de bloque (incluyendo también a los elementos flotantes). ● Los valores de esta propiedad tienen los siguientes significados: –left: El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la izquierda que aparezca antes en el documento fuente. –right: El margen superior de la caja generada se aumenta lo suficiente para que su borde superior quede debajo del borde inferior de cualquier caja flotante a la derecha que aparezca antes en el documento fuente. –both: La caja generada se mueve debajo de todas las cajas flotantes que aparecen antes en el documento fuente. –none: No existe ninguna restricción a la posición de la caja con respecto a los flotantes.
  • 63. CSS: Hoja de Estilo en Cascada BACKGROUND (I) ● El área de fondo de un elemento consiste en el espacio entre los bordes externos del elementos, es decir, el área visible. ● Es decir, para dar formato al background, se le da formato al fondo de la anchura del elemento más al padding. ● Los bordes son el extremo externo del fondo. Color de fondo ● La propiedad background-color es muy similar a cualquier otro color, y colorea el fondo del elemento del color indicado. ● Valores posibles: <color>|transparent|inherit. ● Los márgenes de elemento no forman parte del fondo, de hecho, son transparentes, por lo que si el elemento contenedor tuviera un color de fondo, los márgenes mostrarían ese color dando las sensación de que dichos márgenes tiene algún color asignado. Imágenes de fondo ● Es posible asignar como fondo de un elemento una imagen mediante la propiedad background-image. ● Valores posibles: <uri>|none|inherit. ● El valor por defecto es none. ● Por defecto no se heredan. ● Si se quiere establecer una imagen de fondo, se debe dar una ruta a la imagen deseada (absoluta o relativa).
  • 64. CSS: Hoja de Estilo en Cascada BACKGROUND (II) Repetición con dirección ● Indica que la imagen de fondo se va a repetir como se indica en el valor de la propiedad background-repeat. ● Valores posibles: –repeat: Hace que la imagen de fondo se repita tanto en horizontal como en vertical (como las baldosas en una pared) –repeat-x: Hace que la imagen de fondo se repita sólo en horizontal. –repeat-y: Hace que la imagen de fondo se repita sólo en vertical. –no-repeat: Hace que la imagen de fondo no se repita. –Inherit: Forzar herencia. Posicionando la imagen de fondo ● Para indicar en qué posición se colocará la imagen de fondo, está la propiedad background- position. ● Valores posibles: –<porcentajes>: Un par de porcentajes ('0% 0%', por ejemplo), indicando la distancia desde los bordes izquierdo y superior respectivamente. –<longitudes>: Un par de valores ('1px 1px', por ejemplo), indicando la distancia desde los bordes izquierdo y superior respectivamente. –'top left' y 'left top': Igual a '0% 0%'. –'top', 'top center' y 'center top': Igual a '50% 0%'.
  • 65. CSS: Hoja de Estilo en Cascada BACKGROUND (III) –'top right' y 'right top': Igual a '100% 0%'. –'left', 'left center' y 'center left': Igual a '0% 50%'. –'center' y 'center center': Igual a '50% 50%'. –'right', 'right center' y 'center right': Igual a '100% 50%'. –'bottom left' y 'left bottom': Igual a '0% 100%'. –'bottom', 'bottom center' y 'center bottom': Igual a '50% 100%'. –'bottom right' y 'right bottom': Igual a '100% 1000%'. Adjunto ● La propiedad background-attachment indica que si se especifica una imagen de fondo, si permanece fija con respecto a la pantalla o se desplaza junto con el documento . ● Valores posibles: fixed (permanece fija)|scroll (se deplaza)|inherit (forzar herencia).
  • 66. CSS: Hoja de Estilo en Cascada BACKGROUND (IV) Todo en uno ● La propiedad background es una propiedad resumida para fijar la propiedades individuales del fondo en un solo paso. Si se especifican solamente algunas de las propiedades individuales, para las ausentes se usa su valor inicial. ● Valores posibles: [background-color]||[background-image]||[background-repeat]|| [background-position]|inherit ● Por ejemplo: body { background: red; } div { background: url(“img.gif”) #ffffff 50% repeat fixed; }
  • 67. CSS: Hoja de Estilo en Cascada LISTADOS (I) ● En CSS los elementos de una lista no son más que cuadros en bloque, pero con una parte extra (“añadido”) que en realidad no participa en el código en sí: el marcador. ● En una lista ordenadas (ol), el “añadido” es una serie creciente de números o letras. El listas no ordenadas (ul), el añadido es una “imagen” o “figura”. ● De algún modo, casi todo lo que no es texto en narrativa se puede considerar una lista: el censo de un municipio, un árbol genealógico, un menú del día, el sistema solar... ● Los listados de pueden anidar, de forma que se pueden crear listados de listados, pudiendo crear así estructuras complejas. ● Las maneras en las que se puede modificar la apariencia de un listado o elemento de un listado (además de las vistas hasta ahora para fuentes, textos, elementos en bloque, etc) son bastante limitadas.
  • 68. CSS: Hoja de Estilo en Cascada LISTADOS (II) Tipos de lista ● Para modificar el marcador de los listados, la propiedad es list-style-type. ● Los posibles valores para esta propiedad son: disc, circle, square, decimal,  decimal­leading­zero, upper­alpha, upper­latin, lower­alpha, lower­ latin, upper­roman, lower­roman, lower­greek, armenian, georgian,  none. ● Si el agente de usuario no reconoce el valor asignado para el tipo de lista, es posible que lo trate como un decimal. ● Esta propiedad, al igual que el resto de propiedades relacionadas con los elementos de listado, sólo puede ser aplicada a elementos que tengan un display de list-item, pero CSS distingue entre elementos de listas ordenadas y no ordenadas. ● Si se quisiera suprimir la visualización de los marcadores, bastaría con asignarles el valor none: p { list­style­type: none; } pero esta declaración no interrumpe la cuenta en las listas ordenadas. ● En principio, es una propiedad que se hereda, por lo si se quiere tener diferentes marcadores para listados anidados, habría que declararlo. Ejemplo
  • 69. CSS: Hoja de Estilo en Cascada LISTADOS (III) Imágenes en marcadores de lista ● Para los casos en los que se desea que el marcador de los listados sea una imagen, existe la propiedad es list-style-image. ● Los posibles valores para esta propiedad son: <url>|none|inherit. ● Se debe tener cuidado con la imagen que se utiliza, dado que si es demasiado grande para el elemento de listado al que acompaña, el resultado puede ser desastroso... ● En los casos en los que se ha especificado una imagen como marcador, suele ser una buena práctica proveer un respaldo para cuando la carga de la imagen falla, por ejemplo. Esto se puede hacer definiendo un valor para la propiedad list-style-type. ● En los casos de listas anidadas, también suele ser una buena práctica asignar el valor none (que es el valor por defecto) al list-style-image si no se desea utilizar, dado que por defecto se hereda. Ejemplo
  • 70. CSS: Hoja de Estilo en Cascada LISTADOS (IV) Posición en marcadores de lista ● La propiedad list-style-position indica si el marcador aparece fuera o dentro del contenido del elemento de lista. ● Los posibles valores para esta propiedad son: inside|outside|inherit. ● Con el valor outside (por defecto) hace que el marcador aparezca como normalmente lo hace en la Web, con el valor inside el marcador se “empuja” dentro del contenido del elemento de lista. Ejemplo Todo en uno ● Se pueden agrupar todas las propiedades de listas vistas hasta ahora en una sola, la propiedad list-style. ● Valores: [<list­style­type>]||[<list­style­image>]||[<list­style­ position>]|inherit ● Es la secuencia de los valores de las otras propiedades vistas, en cualquier orden. No es necesario que todas tengan valor, por ejemplo: ul { list: disc url(imgs/img.gif) outside; } ul { list: outside; } ul { list: disc outside url(imgs/img.gif); } ul { list: inside square; }
  • 71. CSS: Hoja de Estilo en Cascada LISTADOS (V) Diseño de listas ● La distancia entre el marcador y el contenido del elemento de lista no viene definido por CSS. Cada agente de usuario los diseña a su manera. ● Los marcadores definidos como outside no afectan a la visualización de otros elementos. Pero cuando el marcador se define como inside actúa como un elemento en línea al comienzo del elemento del listado. ● Los marcadores en su posición normal (outside) no sólo se encuentran fuera de del elemento del lista, sino también área de contenido del listado en sí. La mayoría de navegadores añaden una sangría a los elementos de lista de manera que se muevan un poco a la derecha. Lo hacen utilizando las propiedades padding o margin, algo así: ul, ol { margin­left: 40px; } /* Usada por Internet Explorer y Opera */ ul, lo { padding­left: 40px; } /* Navegadores basados en Gecko */ ● Por lo que si el autor desea cambiar esa sangría, es conveniente que manipule tanto el margin como el padding, para que funcione correctamente en todos los navegadores. ul { margin­left: 0; padding­left: 1em; } ul { margin­left: 1em; padding­left: 0; }
  • 72. CSS: Hoja de Estilo en Cascada FUENTES DE INFORMACIÓN Y ENLACES ● CSS, The Definitive Guide de Eric A. Meyer (O'Reilly, 3ª edición, 2006) ● HTML Utopia: Designing without tables (using CSS) de Dan Shafer (Sitepoint, 2004). ● Recursos en la web de hojas de estilo en cascada: –http://www.sidar.org/recur/desdi/mcss/index.php –http://www.w3.org/Style/LieBos2e/enter/ –http://www.w3.org/MarkUp/Guide/Style –http://es.html.net/tutorials/css/ –http://www.w3.org/Style/Examples/011/firstcss.es.html –http://www.tejedoresdelweb.com/w/CSS
  • 73. CSS: Hoja de Estilo en Cascada Licencia Copyleft Copyright
  • 74. CSS: Hoja de Estilo en Cascada Licencia Copyleft ● Este documento está protegido bajo la licencia Reconocimiento-SinObraDerivada 2.1 España de Creative Common (http://creativecommons.org/licenses/by- nd/2.1/es/) Copyright © 2009 Eider Bilbao <eider@irontec.com> Irontec <contacto@irontec.com> Se permite la copia, modificación, distribución, uso comercial y realización de la obra, siempre y cuando se reconozca la autoría de la misma, a no sea ser que se obtenga permiso expreso del autor. El autor no permite distribuir obras derivadas a esta. Esta nota no es la licencia completa de la obra, sino una traducción de la nota orientativa de la licencia original completa (jurídicamente válida).