Hojas de Estilo CSS

1. Hojas de EstiloCSS XHTML y CSS

2. Introducción (1) • Hojas de estilo • Las hojas de estilo (o CSS, por Cascading StyleSheets) son un mecanismo que permiten aplicar formato a los documentos escritos en HTML y XML separando el contenido de éstos de su apariencia. • Facilitan la presentación del documento en distintos dispositivos. • Permiten un mayor control sobre el aspecto final del documento. XHTML y CSS

3. Introducción (2) • Reglas generales • CSS se expresa mediante reglas en un fichero de texto plano. • Cada regla consta de dos partes: • Un selector (p.e., el elemento al que se aplica). • Una lista de estilos formada por pares propiedad-valor. Sintaxis: Selector { propiedad-1 : valor-1; … ; propiedad-k : valor-k } XHTML y CSS

4. Introducción (3) • Métodos para especificar estilos en HTML • Utilizando documentos independientes de hojas de estilo y relacionando éste con el documento HTML mediante un elemento link. • Utilizando estilos incrustados en el documento HTML mediante el elemento de cabecera style. • Utilizando estilos en línea que se aplican a elemento específicos mediante el atributostyle. XHTML y CSS

5. Modelo de procesamiento (1) • Modelo de procesamiento • Un agente de usuario procesa un documento HTML+CSS mediante los pasos siguientes: • Analiza el documento fuente y crea una estructura del documento (un árbol). • Identifica el tipo de medio al que está dirigido. • Recupera todas las hojas de estilo asociadas con el documento que se especifican para el tipo de medio al que está dirigido. XHTML y CSS

6. Modelo de procesamiento (2) • Toma nota de cada elemento de la estructura del documento, asignando un valor individual a cada propiedad que es aplicable al tipo de medio al que está dirigido. • Los valores de las propiedades se asignan según la cascada y herencia que se verá más adelante. • Se genera una estructura formateada que puede contener más o menos información que el árbol del documento. • Transfiere la estructura formateada al medio destino. XHTML y CSS

7. Selectores (1) • Utilizando CSS2 se pueden seleccionar elementos basándose en un patrón. El navegador busca ese patrón y después aplica las reglas especificadas para él. XHTML y CSS

8. Selectores (2) XHTML y CSS

9. Selectores (3) XHTML y CSS

10. Selectores (4) XHTML y CSS

11. Selectores (5) • Pseudo elementos XHTML y CSS

12. Valores (1) • Tipo de valores de las propiedades • Longitud • Absoluta Pulgadas; in(2.54 cm) Centímetros; cm Milímetros; mm Puntos; pt(1/72 in) Picas; pc(12pt) • Relativa Eme; em (tamaño font) Equis; ex (altura font) Pixel; px • Porcentajes • Son valores relativos a otros valores, por ejemplo una longitud (puede ir precedido de + o -). XHTML y CSS

13. Valores (2) • URI (Uniform Resource Identifier) • Proporciona la dirección de un recurso Web • Contadores • Se denotan mediante un identificador y permiten numerar de forma automática las secciones de un documento. • Colores • Se denota mediante una palabra clave o mediante una especificación RGB numérica. red rgb(255, 0, 0) #ff0000 rgb(100%, 0%, 0%) • Strings XHTML y CSS

14. Herencia • Herencia • Algunos valores de propiedades son heredados por los elementos hijos de un elemento en el árbol del documento. Cada propiedad define cuando es heredada o no. • Así, las propiedades de estilo por defecto para el documento pueden definirse para la raíz del árbol del documento. Los elementos html o body pueden servir para esto. XHTML y CSS

15. Cascada • Cascada • Las hojas de estilo pueden tener tres orígenes diferentes: • Autor. Mediante alguno de los tres métodos ya indicados. • Usuario. Por ejemplo, el agente de usuario puede proporcionar una interfaz para que el usuario seleccione una hoja de estilos. • Agente de usuario. Que aplica una hoja de estilos por defecto a todos los documentos. Peso XHTML y CSS

16. Especificación de estilos • Métodos para especificar estilos en HTML • Utilizando documentos independientes de hojas de estilo y relacionando éste con el documento HTML mediante un elemento link. • Utilizando estilos incrustados en el documento HTML mediante el elemento de cabecera style. • Utilizando estilos en línea que se aplican a elemento específicos mediante el atributostyle. XHTML y CSS

17. Asignación de valores (1) • Valores especificados, computados y reales • Valores especificados • Los agentes de usuario deben asigna un valor especificado para una propiedad basada en los siguientes mecanismos (por orden de preferencia): • Si la cascada da como resultado un valor lo usa. • De lo contrario, si la propiedad es heredada, usa el valor del elemento padre, generalmente el valor computado. • De otro modo, usa el valor inicial de la propiedad (indicado en la definición de la propiedad). XHTML y CSS

18. Asignación de valores (2) • Valores computados • Los valores especificados pueden ser absolutos o relativos. Para los primeros este es también el valor computado. • Los valores especificados relativos deben transformarse en valores computados. • Valores reales • El valor real es el valor computado después de cualquier aproximación que le haya sido aplicada. • A priori, los valores computados están listos para ser usados pero una aplicación de usuario puede no estar en condiciones de utilizarlos. XHTML y CSS

19. Asignación de valores (3) • Herencia • Algunos valores de propiedades son heredados por los elementos hijos de un elemento en el árbol del documento. Cada propiedad define cuando es heredada o no. • Así, las propiedades de estilo por defecto para el documento pueden definirse para la raíz del árbol del documento. Los elementos html o body pueden servir para esto. XHTML y CSS

20. Asignación de valores (4) • El valor inherit • Cada propiedad también puede especificar el valor inherit lo que indica que la propiedad toma el mismo valor computado que la propiedad del padre del elemento. • Regla @import • Permite importar hojas de estilo desde otras hojas de estilo. XHTML y CSS

21. Asignación de valores (5) • Cascada • Las hojas de estilo pueden tener tres orígenes diferentes: • Autor. Mediante alguno de los tres métodos ya indicados. • Usuario. Por ejemplo, el agente de usuario puede proporcionar una interfaz para que el usuario seleccione una hoja de estilos. • Agente de usuario. Que aplica una hoja de estilos por defecto a todos los documentos. Peso XHTML y CSS

22. Asignación de valores (6) • Orden de la cascada • Forma en que los agentes de usuario asignan un valor para una combinación elemento/propiedad. • Se buscan todas las declaraciones que se aplican al elemento y propiedad para el tipo de medio al que está dirigido. • El primer orden de las declaraciones se establece por el peso y origen de las declaraciones Hoja de estilo por defecto Hoja de estilo por defecto Hojas de estilo de usuario Hojas de estilo de autor Hojas de estilo de autor Hojas de estilo de usuario Declaracionesnormales Declaraciones!important XHTML y CSS

23. Asignación de valores (7) • Una hoja de estilo importada tiene el mismo origen que la hoja de estilo que la importó. • El segundo orden de las declaraciones se establece según la especificidad del selector, los más específicos tienen mayor prioridad que los más generales. • Finalmente, dispuestas las reglas por el orden especificado: si dos reglas tienen el mismo peso, origen y especificidad, la última especificada gana. • Las reglas importadas se consideran que están antes que cualquier regla de la hoja de estilos que las importa. Hoja de estilo XHTML y CSS

24. Asignación de valores (8) • Cálculo de la especificidad de un selector • Se cuenta el número de atributos ID en el selector (= a) • Se cuenta el número de otros atributos y pseudo-clases en el selector (= b) • Se cuenta el número de elementos en el selector (= c) • El número abc es el selector. • En lo que se refiere a los estilos especificados en los elementos mediante el atributo style, que carecen de selectores, la especificidad es 100. Además, a efectos del cuarto paso de la cascada, están reglas se consideran después de todas las demás (tienen mayor prioridad). XHTML y CSS

25. Asignación de Valores (9) • Ejemplo * {} /* a=0 b=0 c=0 -> especificidad = 0 */ li {} /* a=0 b=0 c=1 -> especificidad = 1 */ ul li {} /* a=0 b=0 c=2 -> especificidad = 2 */ ul ol + li {} /* a=0 b=0 c=3 -> especificidad = 3 */ h1 + *[rel=“up”]{} /* a=0 b=1 c=1 -> especificidad = 11 */ ul ol li.red {} /* a=0 b=1 c=3 -> especificidad = 13 */ li.red.level {} /* a=0 b=2 c=1 -> especificidad = 21 */ #x34y {} /* a=1 b=0 c=0 -> especificidad = 100 */ XHTML y CSS

26. Tipos de medios • Especificación del tipo de medio • Indicando el medio de destino dentro del lenguaje del documento (p.e. mediante el atributo media en el elemento link). • Utilizando la regla @media en la hoja de estilo @media screen, print { /* Hoja de estilo para pantalla e impresora */ } XHTML y CSS

27. Modelo de caja (1) • Definición • El modelo de caja de CSS describe las cajas rectangulares que son generadas por los elementos en la estructura del documento y compuestas de acuerdo al modelo de formato visual. • Cada caja tiene un área de contenido (texto, imagen , etc.) y áreas circundantes opcionales de padding, border y margin. XHTML y CSS

28. Modelo de caja (2) top margin (transparente) Caja decontención border padding Contenido(texto e imágenes) height left right width bottom XHTML y CSS

29. Modelo de formato visual (1) • El modelo de formato visual • Describe cómo las aplicaciones del usuario procesan la estructura del documento para los medios visuales. • Cada elemento en la estructura del documento genera cero o más cajas de acuerdo al modelo de caja. La composición de estas cajas se gobierna por: • Dimensiones de la caja y tipo • Esquema de posicionamiento (flujo normal, flotante y absoluto) • Relación entre los elementos de una estructura del documento • Información externa (tamaño del acceso visual, etc.) XHTML y CSS

30. Modelo de formato visual (2) • Bloque de contención • Define los límites de una caja rectangular respecto de la cual se calculan posiciones y tamaños de caja. • Cada caja tiene una posición dada con respecto a su bloque de contención, la puede desbordar. • El ancho del bloque de contención inicial puede especificarse mediante la propiedad width del elemento raíz. Si el valor de esta propiedad es auto la aplicación del usuario fija el ancho inicial. XHTML y CSS

31. Modelo de formato visual (3) • La altura del bloque de contención inicial puede especificarse mediante la propiedad height del elemento raíz. Si el valor de esta propiedad es auto la altura del bloque de contención aumentará para acomodar el contenido del documento. • El bloque de contención inicial no se puede posicionar ni puede flotar. Las aplicaciones de usuario ignoran las propiedades position y float del elemento raíz. XHTML y CSS

32. Modelo de formato visual (4) • Control de generación de cajas • Elementos a nivel de bloque • Generan una caja de bloque principal que sólo contiene cajas de bloque. • La caja de bloque principal establece el bloque de contención para las cajas descendientes y el contenido generado. Además, es la caja involucrada en cada esquema de posicionamiento (las cajas de bloque principales participan de un contexto de formato de bloque). • Algunos elementos a nivel de bloque generan cajas adicionales fuera de la caja principal (elementos li, …) XHTML y CSS

33. Modelo de formato visual (5) • Cajas de bloque anónimas • Permiten simplificar el formato. Si un elemento de bloque contiene texto y otros elementos de bloque, el texto se considera que está contenido en un bloque anónimo. <div> Texto sin caja aparente <p>Un párrafo</p> </div> Texto sin caja aparente Un párrafo Bloque anónimo XHTML y CSS

34. Modelo de formato visual (6) • Elementos a nivel de línea • No forman nuevos bloques de contenido, el contenido es distribuido en líneas (texto, imágenes en línea, …). • Las cajas de línea pueden participar de varios contextos • Dentro de una caja de bloque, las cajas de línea participan de un contexto de formato de línea. • Una caja de línea del tipo compact se da en una posición en el margen de una caja de bloque. • Las cajas del tipo marcador también se dan en posiciones fuera de una caja de bloque. XHTML y CSS

35. Modelo de formato visual (7) • Cajas de línea anónimas • Permiten simplificar el formato, en cajas que contienen texto y elementos en línea. <p> Texto <em>enfatizado</em> </p> Texto enfatizado Caja de lína anónima XHTML y CSS

36. Modelo de formato visual (8) • La propiedad display • Establece como se genera la caja de bloque principal. • Alguno de los valores que puede tomar la propiedad y su significado, son: • block: Provoca que un elemento genere una caja o bloque principal. • inline: Provoca que un elemento genere una o más cajas de línea (es el valor inicial). • list-item: genera una caja de bloque principal y una caja de línea list-item. • none: Este valor provoca que un elemento no genere ninguna caja en la estructura del formato. Los elementos descendientes tampoco generan cajas; este comportamiento no puede alterarse poniendo la propiedad display a los descendientes. XHTML y CSS

37. Modelo de formato visual (9) • Esquemas de posicionamiento • Se usan para calcular la posición de una caja • En CSS2, una caja puede situarse según tres esquemas de posicionamiento: • Flujo normal: • Formato de bloque de cajas de bloque • Formato de línea de cajas de línea • Posicionamiento relativo de cajas de bloque o de línea • Cajas compact y run-in XHTML y CSS

38. Modelo de formato visual (10) • Flotantes • En el modelo flotante, un caja se sitúa primero según el flujo normal, luego se saca del flujo y se mueve a la izquierda o a la derecha tanto como sea posible. • Posicionamiento absoluto • En el modelo de posicionamiento absoluto, una caja sale completamente del flujo normal (no tiene ningún impacto sobre los hermanos siguientes) y se le asigna una posición con respecto al bloque de contención. • Las propiedades position y float determinan qué algoritmo de posicionamiento CSS2 se usa para calcular la posición de una caja. XHTML y CSS

39. Modelo de formato visual (11) • Esquema de posicionamiento • Determinado por la propiedad position • static. La caja se sitúa de acuerdo al flujo normal. Las propiedades de desplazamiento de caja no se usan. Bloque de contención Caja 1 Caja 1 (aspecto) Caja 2 Caja 2 (aspecto) Caja 3 Caja 3 (aspecto) XHTML y CSS

40. Modelo de formato visual (12) • relative. La caja se sitúa de acuerdo al flujo normal y luego se desplaza de modo relativo a su posición normal. La posición de la caja siguiente se sitúa ignorando el desplazamiento. Caja 1 Caja 1 Caja 2 Caja 2 Caja 3 Caja 3 top: 10 px; left: 30px; XHTML y CSS

41. Modelo de formato visual (13) • absolute. La caja se posiciona de acuerdo a los valores de las propiedades left, right, top y bottom, éstos especifican los desplazamientos con respecto al bloque de contención de la caja. Las cajas posicionadas absolutamente se quitan del flujo normal, esto significa que no tienen ningún impacto sobre la composición de los hermanos siguientes. Caja 1 Caja 1 Caja 2 Caja 2 Caja 3 Caja 3 top: 50 px; left: 30px; XHTML y CSS

42. Modelo de formato visual (14) • Flujo Normal • Las cajas dentro del flujo normal pertenecen al contexto del formato, que puede ser de bloque o de línea, pero no a ambos simultáneamente. Las cajas de bloque participan de un contexto de formato de bloque. Las cajas de línea participan en un contexto de formato de línea. Caja 1 Contexto de formato de bloque Caja 2 Caja 3 XHTML y CSS

43. Modelo de formato visual (15) • Contexto de formato de línea • En un contexto de formato de línea, las cajas se colocan horizontalmente, una después de otra, comenzando desde lo alto de un bloque de contención. Los márgenes horizontales, bordes y relleno se respetan entre estas cajas. • Propiedad vertical-align caja de línea Contexto de formato de línea Caja 1 Caja Caja 2 Caja 4 3 XHTML y CSS

44. Modelo de formato visual (16) • Flotantes • Un flotante es una caja que es desplazada a la izquierda o a la derecha en la línea actual. La característica más interesante de una caja flotante es que el contenido puede fluir por su costado (o estar impedido de hacerlo mediante la propiedad clear). • El contenido fluye por el costado derecho de una caja flotante situada a la izquierda y por el lado izquierdo de una caja flotante situada a la derecha. XHTML y CSS

45. Modelo de formato visual (17) • Las cajas flotantes deben tener un ancho explícito asignado mediante la propiedad width. • Una caja flotante se convierte en una caja de bloque que se desplaza hacia la izquierda o derecha hasta que su borde externo toca el borde del bloque de contención o el borde externo de otro flotante. • La parte superior de la caja flotante se alinea con la parte superior de la caja de línea actual (o la parte inferior de la caja de bloque precedente si no existe ninguna caja de línea). Si no hay suficiente espacio horizontal en la línea actual para el flotante, es desplazado hacia abajo, línea por línea, hasta una línea que tenga espacio para él. XHTML y CSS

46. Modelo de formato visual (18) • Propiedad float • Esta propiedad especifica si una caja debe flotar a la izquierda, derecha o no debe flotar en absoluto. Puede especificarse para los elementos que generan cajas que no están posicionadas absolutamente. • Propiedad clear • Esta propiedad indica cuál de los lados de la(s) caja(s) de un elemento no puede quedar adyacente a una caja flotante anterior. XHTML y CSS

47. Modelo de formato visual (19) • Posicionamiento fijo • El posicionamiento fijo es una subcategoría del posicionamiento absoluto. La única diferencia es que para una caja posicionada de modo fijo, el bloque de contención es establecido por el acceso visual. Para los medios continuos, las cajas fijas no se mueven cuando el documento es desplazado. XHTML y CSS

48. Modelo de formato visual (20) • Presentación por capas • En CSS2, cada caja tiene una posición en tres dimensiones. Además de su posición horizontal y vertical, las cajas se ubican a lo largo de un eje z y son procesadas una encima de otra. • Propiedad z-index • Especifica el nivel de pila de la caja en el contexto de pila actual. XHTML y CSS

49. Tipos de Propiedades • Propiedades de color y fondo • Propiedades de fuente • Propiedades de texto • Propiedades de caja • Propiedades de posicionamiento • Efectos visuales • Propiedades de tabla XHTML y CSS