Hojas de estilo CSS

2,731 views

Published on

Apuntes para la asignatura de Aplicaciones Web de 2º Grado Medio Sistemas Microinformáticos

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,731
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
88
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Hojas de estilo CSS

  1. 1. Grado Medio InformáticaAsignatura: Aplicaciones Web
  2. 2. ¿Qué es?• Es un lenguaje de hojas de estilos creado para controlar el aspecto de los documentos HTML.• Permite separar definición de los contenidos, de la definición del aspecto.• De esta forma se reduce la complejidad del mantenimiento.• El w3c es el organismo encargado de desarrollar la especificación o norma oficial para diseñar sitios web con CSS.• Actualmente la versión más utilizada de este lenguaje es el CSS3. Ramón Ríos Sieiro 2
  3. 3. Como asociar una hoja de estilos a un documento HTML:1. CSS en linea: Añadiendo el atributo style sobre el elemento al que se le quiere aplicar el estilo: – El problema de esto es que si tuviéramos 20 etiquetas <p> tendríamos que poner el estilo 20 veces. – Por lo tanto no se suele utilizar esta forma de enlazar estilos, sólo en situaciones muy puntuales o si usamos algún editor que añada código automáticamente. Ramón Ríos Sieiro 3
  4. 4. Como asociar una hoja de estilos a un documento HTML:2. CSS interno: Añadiendo una etiqueta <style> en la cabecera del documento y utilizando la siguiente sintaxis: selector { propiedad1: valor; propiedad2: valor; propiedad3: valor: }• Donde selector hace referencia al elemento HTML al que se quiere aplicar el estilo. Ramón Ríos Sieiro 4
  5. 5. Como asociar una hoja de estilos a un documento HTML:3. CSS externo: Se escriben los estilos en un archivo externo con extensión .css y se enlaza al documento HTML desde la cabecera:• La etiqueta <link> tiene normalmente cuatro atributos:  rel: Indica el tipo de relación que tiene el recurso.  type: Indica el tipo de recurso enlazado.  href: URL del archivo que contiene los CSS.  media: Indica el medio en el que se van a aplicar los estilos.• Esta es la manera más utilizada de asociar estilos, ya que permite una mayor reutilización y un mantenimiento más sencillo. Ramón Ríos Sieiro 5
  6. 6. Glosario básico de CSS:• La terminología básica de CSS incluye los siguientes términos:• Regla: Cada uno de los estilos que componen una hoja CSS. Está compuesta por un selector y una declaración.• Selector: Indica el o los elementos a los que se le aplica la regla CSS.• Declaración: Especifica los estilos que se aplican. Está compuesta por una o más parejas propiedad : valor.• Propiedad: Indica la característica que se va a modificar.• Valor: Indica el nuevo valor. Ramón Ríos Sieiro 6
  7. 7. Introducción.• Una regla de CSS está formada por una parte llamada "selector" y otra parte llamada "declaración.• La declaración indica "qué hay que hacer" y el selector indica "a quién hay que hacérselo”.• Una misma regla puede aplicarse sobre varios selectores y un mismo selector se puede utilizar en varias reglas. Ramón Ríos Sieiro 8
  8. 8. Selectores básicos:• Selector universal * : – Se utiliza para seleccionar todos los elementos de la página. – No se utiliza habitualmente, ya que es difícil que un mismo estilo se pueda aplicar a todos los elementos de una página.• Selector de tipo o etiqueta: – Selecciona todos los elementos de la página cuya etiqueta HTML coincide con el valor del selector Ramón Ríos Sieiro 9
  9. 9. Selectores básicos(II): – Si se quiere aplicar los mismos estilos a dos etiquetas diferentes, se pueden encadenar los selectores separados por una coma (,). – En ocasiones puede haber muchas propiedades comunes pero alguna que queramos especificar para cada etiqueta, en este caso: Ramón Ríos Sieiro 10
  10. 10. Selectores básicos(III):• Selector descendente: – Selecciona los elementos que se encuentran dentro de otros elementos, sin importar el nivel de profundidad en el que se encuentren: – Si tuviéramos el siguiente documento HTML: – El estilo se aplicaría tanto sobre “texto1” como sobre “texto2” – El selector descendente puede estar compuesto de n partes: • p a span em { …} – Se aplicaría a las etiquetas <em> que se encontrasen dentro de las etiquetas <span> que se encuentren dentro de etiquetas tipo <a> que se encuentren dentro de etiquetas tipo <p> Ramón Ríos Sieiro 11
  11. 11. Selectores básicos(IV): – No debe confundirse el selector descendente con la combinación de selectores: – Si se emplea el selector descendente combinado con el selector universal, se puede restringir el alcance de un selector descendente. – El siguiente ejemplo, muestra los dos enlaces de color rojo: – Sin embargo, en el siguiente ejemplo solamente el segundo enlace se muestra de color rojo: Ramón Ríos Sieiro 12
  12. 12. Selectores básicos(V):• Selector de clase: – Hasta ahora sabemos aplicar el mismo estilo a todas las apariciones de una determinada etiqueta. – En ocasiones puede interesarnos aplicar diferentes estilos a diferentes elementos de una etiqueta. – Cuando queremos aplicar un mismo estilo a varios elementos,utilizaremos el selector de clase. – Para ello definiremos un estilo de la siguiente forma: .nombreclase{ … } – A continuación en aquellos elementos sobre los que queramos aplicar dicho estilo les asociamos el nombre de la clase: <elemento class=”nombreclase”> Ramón Ríos Sieiro 13
  13. 13. Selectores básicos(V): Selector de clase (II) – En ocasiones, es necesario restringir el alcance del selector de clase. Si se considera el ejemplo : – ¿Cómo es posible aplicar estilos solamente al párrafo cuyo atributo class sea igual a destacado? – Combinando el selector de tipo y el selector de clase, se obtiene un selector mucho más específico: – El selector p.destacado se interpreta como "aquellos elementos de tipo <p> que dispongan de un atributo class con valor destacado". Ramón Ríos Sieiro 14
  14. 14. Selectores básicos(VI): Selector de clase (III) – De lo anterior se deduce que el atributo .destacado es equivalente a *.destacado, por lo que se obvia el símbolo * al escribir un selector de clase normal. – No debe confundirse el selector de clase con los selectores anteriores: • Todos los elementos de tipo "p" con atributo class="aviso” : p.aviso{…} • Todos los elementos que pertenezcan a la clase “aviso” que estén dentro de una etiqueta de tipo p : p .aviso{…} • Todos los elementos "p" de la página y todos los elementos con atributo class="aviso" de la página: p, .aviso { ...} Ramón Ríos Sieiro 15
  15. 15. Selectores básicos(VII): Selector de clase múltiple – Es posible aplicar los estilos de varias clases CSS sobre un mismo elemento. – La sintaxis es similar, pero los diferentes valores del atributo class se separan con espacios en blanco: – Es posible utilizar un selector más avanzado para este caso, el selector de clase múltiple: – Se interpreta como "aquellos elementos de la página que dispongan de un atributo class con al menos los valores error y destacado". Ramón Ríos Sieiro 16
  16. 16. Combinación de selectores básicos.• El anterior selector solamente selecciona aquellos elementos con un class="especial“ que se encuentren dentro de cualquier elemento con un class="aviso".• Ahora, el selector solamente selecciona aquellos elementos de tipo <span> con un atributo class="especial" que estén dentro de cualquier elemento de tipo <div> que tenga un atributo class="aviso". Ramón Ríos Sieiro 17
  17. 17. Selectores básicos(VI):• Selectores de Id: – Asocia un identificador a un elemento. – Podremos referirnos a dicho elemento en una hoja de estilos o desde javascript. – La sintaxis sería la siguiente: <p id = “parrafo1”> Esto es el párrafo1” </p> – Si ahora queremos definir un estilo para este elemento en concreto: #parrafo1 { … } – Cada identificador solo puede ser asignado a un elemento. Ramón Ríos Sieiro 18
  18. 18. Selectores Avanzados.• Selector de hijos: – Se utiliza para seleccionar un elemento que es hijo directo de otro elemento y se indica mediante el "signo de mayor que" (>): – En el ejemplo anterior, el selector p > span se interpreta como "cualquier elemento <span> que sea hijo directo de un elemento <p>", por lo que el primer elemento <span> cumple la condición del selector. Sin embargo, el segundo elemento <span> no la cumple porque es descendiente pero no es hijo directo de un elemento <p>. – El siguiente ejemplo muestra las diferencias entre el selector descendente y el selector de hijos: Ramón Ríos Sieiro 19
  19. 19. Selectores Avanzados(II).• Selector adyacente. – El selector adyacente utiliza el signo + y su sintaxis es: – Selecciona todos los elementos de tipo elemento2 que cumplan las dos siguientes condiciones:  elemento1 y elemento2 deben ser hermanos, por lo que su elemento padre debe ser el mismo.  elemento2 debe aparecer inmediatamente después de elemento1 en el código HTML de la página. – En el ejemplo los estilos del selector h1 + h2 se aplican al primer elemento <h2> de la página, pero no al segundo <h2> Ramón Ríos Sieiro 20
  20. 20. Selectores Avanzados(II).• Selector de atributos: – Permiten seleccionar elementos HTML en función de sus atributos y/o valores de esos atributos. – Los tres tipos de selectores de atributos son: • [nombre_atributo], selecciona los elementos que tienen establecido el atributo llamado nombre_atributo, independientemente de su valor. • [nombre_atributo=valor], selecciona los elementos que tienen establecido un atributo llamado nombre_atributo con un valor igual a valor. • [nombre_atributo~=valor], selecciona los elementos que tienen establecido un atributo llamado nombre_atributo y al menos uno de los valores del atributo es valor. Ramón Ríos Sieiro 21
  21. 21. Colisiones de estilos• Cuanto más específico sea un selector, más importancia tiene su regla asociada.• A igual especificidad, se considera la última regla indicada. – El selector * es el menos específico, ya que se refiere a "todos los elementos de la página". – El selector p es poco específico porque se refiere a "todos los párrafos de la página". – Por último, el selector p#especial sólo hace referencia a "el párrafo de la página cuyo atributo id sea igual a especial". Como el selector p#especial es el más específico, su declaración es la que se tiene en cuenta y por tanto el párrafo se muestra de color verde. Ramón Ríos Sieiro 22
  22. 22. Definiciones.• Ambos conceptos están relacionados, pero son diferentes. HERENCIA. • Está relacionada con cómo los elementos del etiquetado de HTML heredan propiedades de sus elementos padres (los que los contienen) y los transmiten a sus hijos. CASCADA • Tiene que ver con las declaraciones de CSS que se aplican a un documento y cómo las reglas contradictorias se anulan o no entre ellas. Ramón Ríos Sieiro 24
  23. 23. HERENCIA. Ramón Ríos Sieiro 25
  24. 24. HERENCIA: Un ejemplo.• Tenemos el siguiente HTML:• La regla CSS que hemos especificado se aplica únicamente al elemento html. No hemos especificado ninguna regla para los títulos o los párrafos, pero ahora todo el texto se muestra en Verdana al 75% del tamaño por defecto. ¿Por qué? Por la herencia.• Pero ¿75% de qué?• El valor que se hereda no es el valor especificado, es decir, el valor que escribimos en la hoja de estilo, sino algo que se llama el valor computado. Ramón Ríos Sieiro 26
  25. 25. Forzar la herencia:• Mediante la palabra clave inherit (heredar) puede forzarse la herencia incluso para propiedades que no se heredan normalmente.• La regla siguiente hace que todos los párrafos hereden todas las propiedades de fondo de sus padres: p { background: inherit; } Ramón Ríos Sieiro 27
  26. 26. CASCADA.• Es el mecanismo que controla el resultado final cuando se aplican varias declaraciones CSS contrapuestas al mismo elemento.• Hay tres conceptos principales que controlan el orden en el que se aplican las declaraciones de CSS: Si dos declaraciones tienen la misma importancia, la especificidad de las reglas decidirá cuál se debe aplicar. Si Orden las reglas tienen la misma en las especificidad, el orden de las fuentes fuentes controla el resultado. Importancia Especificidad Ramón Ríos Sieiro 28
  27. 27. CASCADA: Importancia.• La importancia de una declaración de CSS depende de dónde se ha especificado.• Las declaraciones contrapuestas se aplicarán en el orden siguiente: las nuevas anularán a las más antiguas. 1. Hoja de estilos de agente de usuario: Es la hoja de estilo integrada del navegador. 2. Declaraciones normales en hojas de estilo de autor. 3. Declaraciones normales en hojas de estilo de usuario:: es una hoja de estilo que ha especificado el usuario. 4. Declaraciones importantes en hojas de estilo de autor: son las declaraciones que van seguidas de una directiva !important. 5. Declaraciones importantes en hojas de estilo de usuario. Ramón Ríos Sieiro 29
  28. 28. CASCADA: Especificidad.• Si dos o más declaraciones entran en conflicto por un elemento determinado y todas las declaraciones tienen la misma importancia, la de la regla con el selector más específico será la que "gane".• La especificidad tiene cuatro componentes; por ejemplo a, b, c y d. El componente "a" es el más distintivo y el "d", el que menos. – El componente "a" es bastante sencillo: es 1 para una declaración en un atributo style; si no, es 0. – El componente "b" es el número de selectores de id en el selector (los que empiezan con #). – El componente "c" es el número de selectores de atributo, incluidos los selectores de clase y pseudoclases. – El componente "d" es el número de tipo de elementos y pseudoelementos del selector. Ramón Ríos Sieiro 30
  29. 29. CASCADA: Especificidad - Un ejemplo.• Fijémonos en cómo funciona esto en la práctica. 1. Empezad añadiendo otro párrafo al documento HTML. <body> <h1>Título</h1> <p>Un párrafo de texto.</p> <p>Un segundo párrafo de texto.</p> </body> 2. Añadid una regla a la hoja de estilo para hacer que el texto de los párrafos sea de un color diferente. p { color: cyan; } 3. Guardad los dos ficheros y recargad el documento en vuestro navegador. Se deberían ver dos párrafos de color cian. 4. Estableced una id en el primer párrafo para que podáis apuntar hacia él fácilmente con un selector CSS. <p id="special" >Un párrafo de texto.</p> <p>Un segundo párrafo de texto.</p> </body> Ramón Ríos Sieiro 31
  30. 30. CASCADA: Especificidad - Un ejemplo.5. Añadid una regla para el párrafo especial a la hoja de estilo. #special { background-color: red; color: yellow; }6. Guardad los dos ficheros y recargad el documento en el navegador para ver el resultado, que es bastante colorido.• Ambas reglas incluyen una declaración de la propiedad de color, lo que significa que hay un conflicto.• Ambas reglas tienen la misma importancia, se trata de declaraciones normales en la hoja de estilos de autor, de manera que hay que fijarse en la especificidad de los dos selectores• El selector de la primera regla es p, que tiene una especificidad de 0,0,0,1 según las reglas anteriormente mencionadas, ya que incluye un único tipo de elemento. El selector de la segunda regla es #special, que tiene una especificidad de 0,1,0,0 porque está formado por un selector de id. 0,1,0,0 y es mucho más específico que 0,0,0,1, de manera que la declaración color:yellow gana y se obtiene el texto amarillo sobre fondo rojo. Ramón Ríos Sieiro 32
  31. 31. CASCADA: Orden de las fuentes.• Si dos declaraciones afectan al mismo elemento, tienen la misma importancia y la misma especificidad, la señal distintiva final es el orden en las fuentes. La declaración que se ve más adelante en las hojas de estilo "ganará" a las anteriores. Ramón Ríos Sieiro 33
  32. 32. Unidades y medidas.
  33. 33. Absolutas y Relativas• Las unidades en CSS se dividen en dos grandes grupos: – Relativas: Definen su valor en relación a otra medida. – Absolutas: Establecen de forma completa el valor de una medida. Ramón Ríos Sieiro 35
  34. 34. • em: Tamaño de la M del tipo de letra actual que se esté utilizando. Por ejemplo:• La referencia siempre es el elemento padre, en este caso sería la etiqueta <body>: Ramón Ríos Sieiro 36
  35. 35. • px: Pixeles, se consideran relativas, ya que el aspecto de los elementos dependerá de la resolución del dispositivo en el que se visualiza el documento HTML.• Las distintas unidades se pueden mezclar entre los diferentes elementos de una misma página, como en el siguiente ejemplo:• El tamaño de las etiquetas <h1> será de 20 px. Ya que las etiquetas <h1> heredan un tamaño de 10 px y se le está doblando al ponerla a 2em. Ramón Ríos Sieiro 37
  36. 36. • Porcentajes: Es equivalente a em.• Se suelen utilizar para establecer anchos y altos de algunos elementos.• Siempre hacen referencia al valor del elemento padre:• La anchura del <div class”principal”> será de 480 px.• El documento "Recomendaciones sobre técnicas CSS para la mejora de la accesibilidad de los contenidos HTML" (http://www.w3.org/TR/WCAG10- CSS-TECHS/) elaborado por el organismo W3C, recomienda el uso de la unidad em para indicar el tamaño del texto y para todas las medidas que sean posibles. Ramón Ríos Sieiro 38
  37. 37. • Definen las medidas de forma completa, ya que sus valores reales no se calculan a partir de otro valor de referencia, sino que son directamente los valores indicados.• Posibles unidades: Ramón Ríos Sieiro 39
  38. 38. El modelo de cajas.
  39. 39. El modelo de cajas. • Cada elemento en CSS es interpretado como una caja que consta de contenido,margen interno, borde y margen externo: Relleno: Espacio libre entre elContenido HTMl contenido y eldel elemento: borde.letras de unpárrafo,imágenes… Borde: Linea que Margen: Es el espacio entre la caja y encierra el relleno y el las posibles cajas vecinas. contenido Ramón Ríos Sieiro 41
  40. 40. El modelo de cajas.• El relleno y el margen son transparentes por lo que en el espacio ocupado entre ellos se muestra el color de fondo o la imagen de fondo establecida.• Contenido: : Cuando se establece la altura y la anchura de un elemento con CSS se está estableciendo para el área de contenido. Para hallar la anchura y altura total del elemento debemos añadirle las del borde, margen interno y externo. – Anchura y altura: Width y Height • No admiten valores negativos. • Los valores en porcentaje se calculan con respecto al elemento padre. • Si no se asigna ningún valor, el valor por defecto es auto, que indica que ha de ser el navegador el que calcule la anchura en base al contenido. Ramón Ríos Sieiro 42
  41. 41. El modelo de cajas.• Relleno: Padding.• Cada una de las propiedades establece la separación entre el lateral de los contenidos y el borde lateral de la caja: Ramón Ríos Sieiro 43
  42. 42. El modelo de cajas.• El relleno tiene una propiedad shorthand que permite definir los cuatro rellenos de una forma directa: Ramón Ríos Sieiro 44
  43. 43. El modelo de cajas.• Margen:Margin.• Elementos de bloque como los <p> no se verán afectados por los margenes top y botton, mientras que los enlaces por ejemplo si lo harán. Ramón Ríos Sieiro 45
  44. 44. El modelo de cajas.• La propiedad que permite definir de forma simultanea los cuatro márgenes se denomina margin.• Al igual que sucedía con la propiedad shorthand del padding: – Si solo se indica un valor, todos los márgenes tienen ese valor. – Si se indican dos valores, el primero se asigna al margen superior e inferior y el segundo se asigna a los márgenes izquierdo y derecho. – Si se indican tres valores, el primero se asigna al margen superior, el tercero se asigna al margen inferior y el segundo valor se asigna los márgenes izquierdo y derecho. – Si se indican los cuatro valores, el orden de asignación es: margen superior, margen derecho, margen inferior y margen izquierdo. Ramón Ríos Sieiro 46
  45. 45. El modelo de cajas.• Diferencia entre margin y padding: Ramón Ríos Sieiro 47
  46. 46. El modelo de cajas.• Bordes: Border.• Es lo que separa el relleno del margen.• Para los bordes vamos a poder especificar: – Anchura. – Color. – Estilo.• Anchura: La anchura de los bordes se puede indicar mediante una medida (absoluta o relativa y en cualquier unidad de medida de las definidas) o mediante las palabras clave thin (borde delgado), medium (borde normal) y thick (borde ancho). Ramón Ríos Sieiro 48
  47. 47. El modelo de cajas.• La anchura de los bordes se controla con las cuatro propiedades siguientes:• Si se quiere establecer la misma anchura a todos los bordes, CSS permite la utilización de un atajo mediante una propiedad de tipo "shorthand", que permiten indicar varias propiedades de forma resumida: Ramón Ríos Sieiro 49
  48. 48. El modelo de cajas.• Color: Se puede establecer con las cuatro propiedades:• O a través de la propiedad shorthand: Ramón Ríos Sieiro 50
  49. 49. El modelo de cajas.• Estilo: El estilo de los bordes sólo se puede indicar mediante alguna de las palabras reservadas definidas por CSS. Como el valor por defecto de esta propiedad es none, los elementos no muestran ningún borde visible a menos que se establezca explícitamente un estilo de borde.• Propiedad shorthand correspondiente: Ramón Ríos Sieiro 51
  50. 50. El modelo de cajas.• Tanto la anchura, como el color, como el estilo se pueden definir en una sola propiedad shorthand para los bordes. Ramón Ríos Sieiro 52
  51. 51. El modelo de cajas.• Fondos: Background.• El fondo puede ser un color simple o una imagen.• El fondo solamente se visualiza en el área ocupada por el contenido y su relleno, ya que el color de los bordes se controla directamente desde los bordes y las zonas de los márgenes siempre son transparentes.• CSS define cinco propiedades para establecer el fondo de cada elemento: – background-color, – background-image – background-repeat – background-attachment – background-position) – y otra propiedad de tipo "shorthand" (background). Ramón Ríos Sieiro 53
  52. 52. POSICIONAMIENTO Y VISUALIZACIÓN.
  53. 53. Posicionamiento.• El estándar de CSS define cinco modelos diferentes para posicionar una caja: – Posicionamiento normal o estático: se trata del posicionamiento que utilizan los navegadores si no se indica lo contrario. – Posicionamiento relativo: – Posicionamiento absoluto: – Posicionamiento fijo: – Posicionamiento flotante: Ramón Ríos Sieiro 55
  54. 54. Posicionamiento Normal:• Sólo se tiene en cuenta si el elemento es de bloque o en línea.• POSICIONAMIENTO DE ELEMENTOS BLOCK – Se mostrarán una debajo de otra y las distancias se controlarán mediante los márgenes verticales.• ELEMENTO PADRE O CONTENEDOR – Si un elemento se encuentra dentro de otro, el elemento padre se llama "elemento contenedor" y determina tanto la posición como el tamaño de todas sus cajas interiores. – Si un elemento no se encuentra dentro de un elemento contenedor, entonces su elemento contenedor es el elemento <body> de la página. Normalmente, la anchura de los elementos de bloque está limitada a la anchura de su elemento contenedor, aunque en algunos casos sus contenidos pueden desbordar el espacio disponible. Ramón Ríos Sieiro 56
  55. 55. Posicionamiento Normal:• POSICIONAMIENTO DE ELEMENTOS INLINE – Las cajas de tipo inline se muestran una tras otra de forma horizontal comenzando desde la posición más a la izquierda de su elemento contenedor. La distancia entre las cajas se controla mediante los márgenes laterales. – Si las cajas en línea ocupan más espacio del disponible en su propia línea, el resto de cajas se muestran en las líneas inferiores. – Si las cajas en línea ocupan un espacio menor que su propia línea, se puede controlar la distribución de las cajas mediante la propiedad text-align para centrarlas, alinearlas a la derecha o justificarlas.• Este tipo de posicionamiento define el flujo normal de una página. Ramón Ríos Sieiro 57
  56. 56. Posicionamiento Relativo.• Permite desplazar una caja respecto de su posición original establecida mediante el posicionamiento normal. El desplazamiento de la caja se controla con las propiedades top, right, bottom y left.• El desplazamiento de una caja no afecta al resto de cajas adyacentes, que se muestran en la misma posición que si la caja desplazada no se hubiera movido de su posición original. Ramón Ríos Sieiro 58
  57. 57. Posicionamiento absoluto:• La posición de una caja se establece de forma absoluta respecto de su elemento contenedor y el resto de elementos de la página ignoran la nueva posición del elemento.• El resto de elementos de la página la ignoran y ocupan el lugar original ocupado por la caja posicionada.• Por otra parte, el desplazamiento de una caja posicionada de forma absoluta se indica mediante las propiedades top, right, bottom y left. A diferencia de posicionamiento relativo, en este caso la referencia de los valores de esas propiedades es el origen de coordenadas de su primer elemento contenedor posicionado. Ramón Ríos Sieiro 59
  58. 58. Posicionamiento absoluto:• Determinar el origen de coordenadas a partir del cual se desplaza una caja posicionada de forma absoluta es un proceso complejo que se compone de los siguientes pasos: 1. Se buscan todos los elementos contenedores de la caja hasta llegar al elemento <body> de la página. 2. Se recorren todos los elementos contenedores empezando por el más cercano a la caja y llegando hasta el <body>. 3. De todos ellos, el navegador se queda con el primer elemento contenedor que esté posicionado de cualquier forma diferente a position: static 4. La esquina superior izquierda de ese elemento contenedor posicionado es el origen de coordenadas. 5. Una vez obtenido el origen de coordenadas, se interpretan los valores de las propiedades top, right, bottom y left respecto a ese origen y se desplaza la caja hasta su nueva posición. Ramón Ríos Sieiro 60
  59. 59. Posicionamiento absoluto:• Ejemplo: Tenemos el siguiente • Ahora posicionaremos la imagen: documento HTML. 50px 50px • La imagen posicionada de forma absoluta no toma como origen de coordenadas la esquina superior izquierda de su elemento contenedor <div>, sino que su referencia es la esquina superior izquierda de la página: Ramón Ríos Sieiro 61
  60. 60. Posicionamiento absoluto:• A continuación, se posiciona de forma relativa el elemento <div> que contiene la imagen . La única propiedad añadida al <div> es position: relative por lo que el elemento contenedor se posiciona pero no se desplaza respecto de su posición original:• En este caso, el origen de coordenadas para determinar la nueva posición de la imagen corresponde a la esquina superior izquierda del elemento <div>. Ramón Ríos Sieiro 62
  61. 61. Posicionamiento fijo.• Cuando una caja se posiciona de forma fija, la forma de obtener el origen de coordenadas para interpretar su desplazamiento es idéntica al posicionamiento absoluto. De hecho, si el usuario no mueve la página HTML en la ventana del navegador, no existe ninguna diferencia entre estos dos modelos de posicionamiento.• La principal característica de una caja posicionada de forma fija es que su posición es inamovible dentro de la ventana del navegador. El posicionamiento fijo hace que las cajas no modifiquen su posición ni aunque el usuario suba o baje la página en la ventana de su navegador. Ramón Ríos Sieiro 63
  62. 62. Posicionamiento flotante.• Una caja flotante tratará de situarse lo más a la izquierda o lo más a la derecha posible.• La caja flotante deja de pertenecer al flujo normal de la página, esto implica que las demás tratarán de ocupar si lugar. Ramón Ríos Sieiro 64
  63. 63. Posicionamiento flotante.• Las cajas flotantes tienen en cuenta el espacio ocupado por otras cajas flotantes, pero no el espacio de cajas no flotantes (solapamiento):• En caso de que una caja flotante no encuentre espacio para situarse lo buscará en la línea inferior: Ramón Ríos Sieiro 65
  64. 64. Posicionamiento flotante.• La propiedad CSS que permite posicionar de forma flotante una caja se denomina float:• El valor none permite anular el posicionamiento flotante de forma que el elemento se muestre en su posición original. Ramón Ríos Sieiro 66
  65. 65. Posicionamiento flotante.• Los elementos que se encuentran alrededor de una caja flotante adaptan sus contenidos para que fluyan alrededor del elemento posicionado:• La propiedad clear permite modificar el comportamiento por defecto del posicionamiento flotante para forzar a un elemento a mostrarse debajo de cualquier caja flotante. Ramón Ríos Sieiro 67
  66. 66. Posicionamiento flotante.• Ejemplo práctico: Estructura con 3 columnas. Ramón Ríos Sieiro 68
  67. 67. Visualización.• CSS define 4 propiedades para controlar la visualización de los elementos: – display – visibility – overflow – Z-index• Con estas 4 propiedades podemos hacer visibles o invisibles las cajas y por lo tanto controlar los solapamientos, crear efectos avanzados etc… Ramón Ríos Sieiro 69
  68. 68. Visualización. Display y visibility.• La propiedad display permite ocultar completamente un elemento haciendo que desaparezca de la página. Como el elemento oculto no se muestra, el resto de elementos de la página se mueven para ocupar su lugar.• Por otra parte, la propiedad visibility permite hacer invisible un elemento, lo que significa que el navegador crea la caja del elemento pero no la muestra. En este caso, el resto de elementos de la página no modifican su posición, ya que aunque la caja no se ve, sigue ocupando sitio. Ramón Ríos Sieiro 70
  69. 69. Visualización.• Las posibilidades de la propiedad display son mucho más avanzadas que simplemente ocultar elementos. En realidad, la propiedad display modifica la forma en la que se visualiza un elemento.• Como se puede observar con display podremos forzar que un elemento de bloque se muestre como un elemento de línea y viceversa. Ramón Ríos Sieiro 71
  70. 70. Visualización.• Ejemplo: Ramón Ríos Sieiro 72
  71. 71. Visualización. Overflow.• CSS define la propiedad overflow para controlar la forma en la que se visualizan los contenidos que sobresalen de sus elementos.• Los valores de la propiedad overflow tienen el siguiente significado:  visible: el contenido no se corta y se muestra sobresaliendo la zona reservada para visualizar el elemento. Este es el comportamiento por defecto.  hidden: el contenido sobrante se oculta y sólo se visualiza la parte del contenido que cabe dentro de la zona reservada para el elemento.  scroll : solamente se visualiza el contenido que cabe dentro de la zona reservada para el elemento, pero también se muestran barras de scroll que permiten visualizar el resto del contenido.  auto: el comportamiento depende del navegador, aunque normalmente es el mismo que la propiedad scroll. Ramón Ríos Sieiro 73
  72. 72. Visualización. • Z-index• Cuanto más alto sea el valor numérico, más cerca del usuario se muestra la caja. Un elemento con z-index: 10 se muestra por encima de los elementos con z-index: 8.• La propiedad z-index sólo tiene efecto en los elementos posicionados, por lo que es obligatorio que la propiedad z-index vaya acompañada de la propiedad position Ramón Ríos Sieiro 74
  73. 73. CSS PARA TEXTO
  74. 74. • Como el valor de la propiedad color se hereda, normalmente se establece la propiedad color en el elemento body para establecer el color de letra de todos los elementos de la página: body { color: #777; }• La única excepción de este comportamiento son los enlaces que se crean con la etiqueta <a>. Aunque el color de la letra se hereda de los elementos padre a los elementos hijo, con los enlaces no sucede lo mismo, por lo que es necesario indicar su color de forma explícita: body, a { color: #777; } Ramón Ríos Sieiro 76
  75. 75. • Font- Family: Permite especificar el tipo de letra (fuente) que queremos utiliza.• Se pueden definir varias fuentes. Si una de ellas no está instalada se usará la siguiente.• Como no es posible asegurar que el usuario tenga alguna fuente de las definidas, CSS también permite indicar nombres genéricos de fuentes,que indican el aspecto del texto. Valor genérico Fuente con aspecto similar serif Times New Roman, Times, Georgia sans - serif Arial, Helvética, Verdana cursive Comic Sans fantasy Impact monospace Courier New• Cuando la propiedad font-family toma un valor igual a sans-serif, el diseñador no indica al navegador que debe utilizar la fuente Arial, sino que debe utilizar "la fuente que más se parezca a Arial de todas las que tiene instaladas el usuario". Ramón Ríos Sieiro 77
  76. 76. • font-Size: Permite especificar el tamaño de la fuente, de 3 formas: – Tamaño absoluto: • Especificando una medida en varias unidades: px , cm. • Utilizando los valores: xx-small, x-small, small, medium, large, x- large. – Tamaño relativo: Toman como referencia el tamaño de letra del elemento padre. • Mediante un porcentaje. • Mediante la unidad em. • Utilizando los valores:larger, smaller. Ramón Ríos Sieiro 78
  77. 77. • font – weight:• Los valores que normalmente se utilizan son normal (el valor por defecto) y bold para los textos en negrita. El valor normal equivale al valor numérico 400 y el valor bold al valor numérico 700. Ramón Ríos Sieiro 79
  78. 78. • font- style: Normalmente la propiedad font-style se emplea para mostrar un texto en cursiva mediante el valor italic. shorthand : font• CSS proporciona una propiedad tipo "shorthand" denominada font y que permite indicar de forma directa algunas o todas las propiedades de la tipografía.• Los dos únicos valores que se deben incluir obligatoriamente al utilizar la propiedad font son el tamaño y el tipo de letra.• El orden en el que se deben indicar las propiedades del texto es el siguiente: – En primer lugar y de forma opcional se indican el font-style, font-variant y font-weight en cualquier orden. – A continuación, se indica obligatoriamente el valor de font-size seguido opcionalmente por el valor de line-height (INTERLINEADO) separado por una barra inclinada (/): – Por último, se indica obligatoriamente el tipo de letra a utilizar. Ramón Ríos Sieiro 80
  79. 79. • text – align : define la alineación del texto.• La propiedad text-align no sólo alinea el texto que contiene un elemento, sino que también alinea todos sus contenidos (si son elementos de línea) , como por ejemplo las imágenes. Ramón Ríos Sieiro 81
  80. 80. • En realidad, esta propiedad establece la alineación de los contenidos (texto, imágenes) que se encuentran dentro de un elemento de bloque.• La única imagen que se muestra centrada es la que se encuentra dentro del <div>, ya que la propiedad text-align no alinea un elemento sino sus contenidos: Ramón Ríos Sieiro 82
  81. 81. • line-height: permite controlar la altura ocupada por cada línea de texto, es decir el interlineado.• Siempre que el número vaya sin unidades, se interpreta como múltiplo del tamaño de la letra: Estas 3 definiciones son equivalentes. Ramón Ríos Sieiro 83
  82. 82. • text-decoration:• text-transform: Ramón Ríos Sieiro 84
  83. 83. • vertical – align: Permite controlar la alineación vertical de varios elementos en una misma línea. Ramón Ríos Sieiro 85
  84. 84. Ramón Ríos Sieiro 86
  85. 85. • Los pseudoelementos para el texto nos permiten referirnos a una parte concreta del texto: primera letra, primer párrafo …• Para referirnos a un pseudoelemento utilizamos los : después de la etiqueta.  firs letter: Permite referirnos a la primera letra:  first line: Hacemos referencia a la primera línea:• Con los pseudo elementos se pueden conseguir efectos interesantes sobre el texto: Ramón Ríos Sieiro 87
  86. 86. • Tamaño,color y decoración. – Los estilos básicos para los enlaces se realizan modificando el texto del mismo con las propiedades vistas anteriormente: Ramón Ríos Sieiro 89
  87. 87. • Pseudoclases:  CSS también permite aplicar diferentes estilos a un mismo enlace en función de su estado.  Para ello hace uso de las llamadas pseudoclases, en concreto para los enlaces utiliza las 4 siguientes:  link: Enlace a un sitio que aún no ha sido visitado.  hover: El puntero está situado sobre el enlace.  visited: El enlace ha sido activado.  active: El enlace está sindo pinchado por el usuario.  Para hacer referencia a una pseudoclase utilizamos los : después de la referencia a la etiqueta a sin dejar ningún espacio en blanco por delante: a:hover { text-decoration: none; }  Por defecto los navegadores muestran los enlaces no visitados de color azul y subrayados y los enlaces visitados de color morado. Ramón Ríos Sieiro 90
  88. 88. • Enlaces con imágenes a la izquierda del texto: Ramón Ríos Sieiro 91
  89. 89. • Enlaces con forma de botón: Ramón Ríos Sieiro 92
  90. 90. • Por defecto las listas ordenadas se muestran con numeración decimal.• Las listas desordenadas con circulo negro.• Con list-style-type podemos controlar esta apariencia:• Si queremos quitar todo tipo de numeración o símbolo ponemos esta propiedad a none. Ramón Ríos Sieiro 94
  91. 91. • Para añadir imágenes a la lista:• La propiedad shorthand que permite establecer estilo, posición o imagen es list-style: Ramón Ríos Sieiro 95
  92. 92. • Menú vertical sencillo: – 1. Definir anchura del menú. Ramón Ríos Sieiro 96
  93. 93. - 2. Eliminar las viñetas automáticas y todos los márgenes y espaciados aplicados por defecto: - 3. Añadir un borde al menú de navegación y establecer el color de fondo y losbordes de cada elemento del menú: Ramón Ríos Sieiro 97
  94. 94. – 4. Aplicar estilos a los enlaces: • Mostrarlos como un elemento de bloque para que ocupen todo el espacio de cada <li> del menú: • Añadir un espacio de relleno y modificar los colores y la decoración por defecto: Ramón Ríos Sieiro 98
  95. 95. 1. Eliminar la anchura y el borde del elemento • Menú horizontal sencillo: <ul> y aplicar las propiedades float y clear: – Partiendo del CSS del menú vertical anterior: 2. Modificar la propiedad float de los elementos <li> del menú: 3. Modificar el padding y los bordes de los enlaces que forman el menú: Ramón Ríos Sieiro 99http://alvit.de/css-showcase/css-navigation-techniques-showcase.php
  96. 96. Tablas.
  97. 97. Tablas.• Podemos especificar para las tablas (table) y para sus celdas(th,td) diversas propiedades, como width, height, background o Font, todas ellas ya conocidas. Si quisiéramos fusionar los bordes de las celdas adyacentes: Ramón Ríos Sieiro 101
  98. 98. FORMULARIOS.
  99. 99. FORMULARIOS.• Alinear y formatear etiquetas: – Los elementos <input> y <label> de los formularios son elementos en línea, por lo que el aspecto que muestran los formularios por defecto, es similar al de la siguiente imagen: – Vamos a aplicar los estilos necesarios para mostrar los label y los input alineados como en la siguiente imagen: Ramón Ríos Sieiro 103
  100. 100. FORMULARIOS.• En primer lugar, se muestran los elementos <label> como elementos de bloque, para que añadan una separación para cada campo del formulario. Además, se añade un margen superior para no mostrar juntas todas las filas del formulario:• El botón del formulario también se muestra como un elemento de bloque y se le añade un margen para darle el aspecto final deseado: Ramón Ríos Sieiro 104
  101. 101. FORMULARIOS.• Si quisiéramos alinear las label a la izquierda de los input:• Es necesario añadir un nuevo elemento (por ejemplo un <div>) que encierre a cada uno de los campos del formulario (<label> y <input>). El esquema de la solución propuesta es el siguiente: Ramón Ríos Sieiro 105
  102. 102. FORMULARIOS.• Resaltar el campo seleccionado: – CSS define la pseudo-clase :focus, que permite aplicar estilos especiales al elemento que en ese momento tiene el foco o atención del usuario. Ramón Ríos Sieiro 106
  103. 103. Bibliografía y Webs:• Libros: – CSS3. Anaya Multimedia. Miguel Ángel Acera. – Introducción a CSS (http://www.librosweb.es/css/)• Webs útiles: – http://www.w3schools.com/css/default.asp – http://www.desarrolloweb.com/manuales/manual-css-hojas-de-estilo.html – http://www.alvit.de/handbook/ – http://www.cssmatic.com/ – http://lesliefranke.com/files/reference/csscheatsheet.html Ramón Ríos Sieiro 107

×