Hojas de estilo

694 views

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
694
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
5
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • XHTML y CSS
  • XHTML y CSS Valores computados: Los porcentajes deben multiplicarse por un valor de referencia Los valores con unidades relativas (em, ex, px) deben multiplicarse por el tamaño adecuado de la fuente o el pixel. Los valores auto deben transformarse de acuerdo con las fórmulas dadas para cada propiedad. Ciertas palabras claves también deben transformarse de acuerdo a sus definiciones
  • Hojas de estilo

    1. 1. XHTML y CSS Página 1
    2. 2.  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 Página 2
    3. 3.  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 Página 3
    4. 4.  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 atributo style. XHTML y CSS Página 4
    5. 5.  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 Página 5
    6. 6.  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 Página 6
    7. 7.  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. Patrón Significado * Selector universal E Selecciona cualquier elemento E XHTML y CSS Página 7
    8. 8. Selecciona cualquier elemento F descendiente deEF un elemento E Selecciona cualquier elemento F que es hijo de unE>F elemento E Selecciona cualquier elemento E que es primerE:first-child hijo de su padre Selecciona cualquier elemento E que es origen deE:link un vínculo cuyo destino no está visitado (:link) oE:visited ya ha sido visitado (:visited)E:active Selecciona cualquier elemento E durante ciertasE:hover acciones de usuarioE:focus XHTML y CSS Página 8
    9. 9. Selecciona cualquier elemento E si está en elE:lang(c) lenguaje indicado Selecciona cualquier elemento F que es precedidoE+F de un elemento EE[foo] Selecciona cualquier elemento E con atributo foo Selecciona cualquier elemento E con atributo fooE[foo=“uha”] cuyo valor es exactamente el indicado Selecciona cualquier elemento E con atributo fooE[foo~=“uha”] cuyo valor sea una lista de valores separados por espacios, uno de los cuales es el indicado XHTML y CSS Página 9
    10. 10. Selecciona cualquier elemento E cuyo atributoE[foo|=“uha”] foo cuyo valor sea una lista de valores separados por espacios, siendo el primero el indicado Sólo se puede utilizar en documentos HTML yE.uha tiene el mismo significado que E[class~=“uha”] Selecciona el elemento E cuyo atributo id tiene elE#un_id valor indicado XHTML y CSS Página 10
    11. 11.  Pseudo elementos Aplica un estilo especial a la primera línea de un E:first-line elemento de bloque Aplica un estilo especia a la primera letra de un E:first-letter elemento de bloque E:before Normalmente se utiliza para generar contenido E:after antes o después del contenido del elemento XHTML y CSS Página 11
    12. 12.  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 Página 12
    13. 13.  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 Página 13
    14. 14.  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 Página 14
    15. 15.  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 Página 15
    16. 16.  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 atributo style. XHTML y CSS Página 16
    17. 17.  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): i Si la cascada da como resultado un valor lo usa. d De lo contrario, si la propiedad es heredada, usa el valor del elemento padre, generalmente el valor computado. v De otro modo, usa el valor inicial de la propiedad (indicado en la definición de la propiedad). XHTML y CSS Página 17
    18. 18.  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 Página 18
    19. 19.  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 Página 19
    20. 20.  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 Página 20
    21. 21.  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 Página 21
    22. 22.  Orden de la cascada  Forma en que los agentes de usuario asignan un valor para una combinación elemento/propiedad. 1. Se buscan todas las declaraciones que se aplican al elemento y propiedad para el tipo de medio al que está dirigido. 2. 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 Declaraciones Hojas de estilo de Declaraciones normales usuario !important XHTML y CSS Página 22
    23. 23.  Una hoja de estilo importada tiene el mismo origen que la hoja de estilo que la importó.1. 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.2. 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 Página 23
    24. 24.  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 Página 24
    25. 25.  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 Página 25
    26. 26.  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 Página 26
    27. 27.  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 Página 27
    28. 28. top margin (transparente) Caja de border contención padding Contenido heightleft right (texto e imágenes) width bottom XHTML y CSS Página 28
    29. 29.  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 Página 29
    30. 30.  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 Página 30
    31. 31.  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 Página 31
    32. 32.  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 Página 32
    33. 33.  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 Texto sin caja aparente <p>Un párrafo</p> </div> Un párrafo Bloque anónimo XHTML y CSS Página 33
    34. 34.  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 Página 34
    35. 35.  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> Texto enfatizado </p> Caja de lína anónima XHTML y CSS Página 35
    36. 36.  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 Página 36
    37. 37.  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 Página 37
    38. 38.  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 Página 38
    39. 39.  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 decontención Caja 1 Caja 1 (aspecto) Caja 2 Caja 2 (aspecto) Caja 3 Caja 3 (aspecto) XHTML y CSS Página 39
    40. 40.  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 Página 40
    41. 41.  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 Página 41
    42. 42.  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 Página 42
    43. 43.  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 Caja Contexto de Caja 1 Caja 2 formato de línea 3 Caja 4 XHTML y CSS Página 43
    44. 44.  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 Página 44
    45. 45.  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 Página 45
    46. 46.  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 Página 46
    47. 47.  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 Página 47
    48. 48.  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 Página 48
    49. 49.  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 Página 49

    ×