Css

1,319 views

Published on

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

Css

  1. 1. Diseño y Programación de Pá i W bPáginas Web 1.2. Hojas de Estilo CSSj Juan Ruiz de Miras (demiras@ujaen.es) Departamento de InformáticaDepartamento de Informática Universidad de Jaén
  2. 2. Contenidos 1. Introducción 2 Sintaxis de las hojas de estilo2. Sintaxis de las hojas de estilo 3. Uso de hojas de estilo 4. Especificación de reglas CSS 5 Cascada y herencia5. Cascada y herencia 6. Propiedades CSS Juan Ruiz de Miras 2
  3. 3. 1 Introducción1. Introducción  Evolución HTML:  HTML (1994): fácil, estructurado y muy pocas etiquetas  Navegadores ganan en visualización gráfica y HTML 4 (1997) Navegadores ganan en visualización gráfica y HTML 4 (1997) añade muchas etiquetas de formato (<font>, ...) y deja de ser un lenguaje orientado a la estructura  Objetivo de las hojas de estilo:  Separar el contenido de las páginas web de su apariencia contenidos se especifican en ficheros HTML contenidos: se especifican en ficheros HTML  formato: se especifica en ficheros CSS  CSS 1 (1996, 1999): fuentes, márgenes, colores, ...( , ) , g , ,  CSS 2 (1998, 2005): posición absoluta, numeración automática, ...  CSS 3 (en desarrollo): interacción usuario, ... Juan Ruiz de Miras 3  http://www.w3.org/Style/CSS/
  4. 4. 1 Introducción1. Introducción  Principales ventajas y características:  Permite edición más fácil y rápida: <h1 align="center">Apartado 1</h1> Texto del primer apartado <h1 align="center">Apartado 2</h1><h1 align= center >Apartado 2</h1> Texto del segundo apartado  Mayor posibilidad de formato que HTMLy p q  Reutilización de estilos  Aplicación y combinación en cascada  Reduce el tamaño del código a enviar  Inconvenientes: T t i t d i l l di ti t d Juan Ruiz de Miras 4  Tratamiento desigual por los distintos navegadores
  5. 5. Contenidos 1. Introducción 2 Sintaxis de las hojas de estilo2. Sintaxis de las hojas de estilo 3. Uso de hojas de estilo 4. Especificación de reglas CSS 5 Cascada y herencia5. Cascada y herencia 6. Propiedades CSS Juan Ruiz de Miras 5
  6. 6. 2 Sintaxis de las hojas de estilo2. Sintaxis de las hojas de estilo  Los estilos se especifican utilizando reglas  Cada regla consta de:  selector: identifica los elementos de la página web a los que se les aplicará el estilo  declaraciones: especifican el estilo a aplicar cada declaración declaraciones: especifican el estilo a aplicar, cada declaración consiste en un par:  propiedad CSS a aplicar  valor para la propiedad  Ejemplo: h1 {text-align: center;} propiedad CSS valor declaracionesselector Juan Ruiz de Miras 6 regla
  7. 7. Contenidos 1. Introducción 2 Sintaxis de las hojas de estilo2. Sintaxis de las hojas de estilo 3. Uso de hojas de estilo 4. Especificación de reglas CSS 5 Cascada y herencia5. Cascada y herencia 6. Propiedades CSS Juan Ruiz de Miras 7
  8. 8. 3 Uso de hojas de estilo3. Uso de hojas de estilo  En línea  Incrustación  Vinculación  Varias hojas de estilo Juan Ruiz de Miras 8
  9. 9. 3 1 En línea3.1 En línea  Se utiliza la propiedad STYLE de una etiqueta de HTML  El valor de la propiedad STYLE es la especificación del estilo a aplicar (declaraciones de la regla)aplicar (declaraciones de la regla)  Ejemplo: <h1 style="text-align:center">Apartado 1</h1>  Características:  No es la forma más práctica de aplicar estilos  Da más posibilidades de formato que utilizando sólo HTML  Tiene preferencia sobre el formato aplicado con HTML <h1 align="right" style="text-align:center"><h1 align= right style= text align:center > Apartado 1 </h1> Juan Ruiz de Miras 9
  10. 10. 3 2 Incrustación3.2. Incrustación  Se utiliza la etiqueta <STYLE> en la cabecera de la página web  Entre <style type="text/css"> y </style> se especifican las reglas Ej l Ejemplo: <html> <head> <style type="text/css"> h1 {text-align:center;} </style> </head> <body> <h1>Apartado 1</h1> Texto del primer apartado </body> </html> Juan Ruiz de Miras 10
  11. 11. 3 2 Incrustación3.2. Incrustación  La hoja de estilos sólo afecta a la página donde se ha incrustado  Interesante si en el web hay unas pocas páginas con un formato distinto al restodistinto al resto  Para evitar problemas en navegadores que no soportan CSS (IE antes de la versión 3 y Netscape antes de la versión 4) se pueden poner las reglas entre comentarios html: <head> <style type="text/css"> <!-- h1 {text-align:center;} --> </style> </head> Juan Ruiz de Miras 11
  12. 12. 3.3 Vinculación  Separa realmente los contenidos (fichero .html) de su formato (fichero .css)  El fichero de texto .css contiene las reglas de estilo  En la cabecera del fichero .html se establece la vinculación con la hoja de estilos del fichero .css utilizando la etiqueta: <link rel="stylesheet" href="fichero.css" type="text/css">  Es la forma más flexible de aplicar las hojas de estilo:  Permite cambiar el estilo sin tocar el código htmlg  La misma hoja de estilo puede ser compartida por varias páginas Juan Ruiz de Miras 12
  13. 13. 3.3 Vinculación  Fichero "estilo.css": h1 {text-align: center;} h2 {text indent: 20pt;}h2 {text-indent: 20pt;}  Fichero html: <html> <head> <link rel="stylesheet" href="estilo.css" type="text/css"> </head> <body> <h1>Apartado 1</h1> Texto del primer apartadop p <h2>SubApartado 1.1</h1> Texto del subapartado </body> Juan Ruiz de Miras 13 /body </html>
  14. 14. 3.4 Varias hojas de estilo  Combinar vinculación, incrustación y estilos en línea:  vinculación: para los estilos comunes a todo el web i t ió li i á i incrustación: para personalizar varias páginas  estilos en línea: para detalles concretos Juan Ruiz de Miras 14
  15. 15. 3.4 Varias hojas de estilo  Vincular varias hojas en función del destino  se utiliza la propiedad MEDIA de la etiqueta LINK, posibles valores: screen: visualización en el monitor valor por defecto screen: visualización en el monitor, valor por defecto  print: cuando la página se imprime  projection: proyección  braille: dispositivos braille  speech: dispositivos de habla  all: para todos los dispositivos  Muy útil para diferenciar vista en pantalla y vista impresora: <head> <link rel="stylesheet" href="pantalla.css" type="text/css" media="screen"> <link rel="stylesheet" href="impresora css" Juan Ruiz de Miras 15 <link rel= stylesheet href= impresora.css type="text/css" media="print"> </head>
  16. 16. 3.4 Varias hojas de estilo  Vincular varias hojas y la selección la hace el usuario  se utiliza la propiedad NAME de la etiqueta LINK para dar nombre a las se utiliza la propiedad NAME de la etiqueta LINK para dar nombre a las hojas de estilo que se cargan por defecto pero que se pueden desactivar  se da el valor "alternate stylesheet" a la propiedad REL para especificar hojas de estilo alternativas que el usuario podrá activar (también hay quehojas de estilo alternativas que el usuario podrá activar (también hay que especificar la propiedad NAME) pero que no se cargan por defecto NO tá t d l d t l d b í NO está soportado por los navegadores actuales: debería aparecer un menú donde se permitiera activar/desactivar las distintas hojas de estilo:  IE permite cargar una hoja de estilo propia del usuario  Herramientas  Opciones de Internet  Accesibilidad  Hoja de estilos del Usuario  Mozilla permite visualizar la página eliminando todas las hojas de estilos  Ver  Estilo de Página  Sin Estilo Juan Ruiz de Miras 16
  17. 17. 3.4 Varias hojas de estilo  Vincular varias hojas y la selección la hace el usuario <head> <link rel="stylesheet" href="hoja1.css"> <link rel="stylesheet" href="hoja2.css" name="Por defecto"> <link rel="alternate stylesheet" href="hoja3.css" name="Alternativa"> </head>  hoja1.css se aplicará siempre y no es posible desactivarla  hoja2 css se aplicará inicialmente y es posible desactivarla hoja2.css se aplicará inicialmente y es posible desactivarla  hoja3.css no se aplicará inicialmente pero es posible activarla Juan Ruiz de Miras 17
  18. 18. Contenidos 1. Introducción 2 Sintaxis de las hojas de estilo2. Sintaxis de las hojas de estilo 3. Uso de hojas de estilo 4. Especificación de reglas CSS 5 Cascada y herencia5. Cascada y herencia 6. Propiedades CSS Juan Ruiz de Miras 18
  19. 19. Especificación de reglas CSSEspecificación de reglas CSS  Agrupación de selectores y declaraciones  Especificación de selectores  Selectores de clase  Selectores "ID" S l t d t t Selectores de contexto  Selectores de propiedades  Seudo-clases Seudo clases  Seudo-elementos Juan Ruiz de Miras 19
  20. 20. 4.1. Agrupación de selectores y declaraciones4.1. Agrupación de selectores y declaraciones  Agrupación de selectores  Los selectores que comparten las mismas declaraciones se d j t l i l dpueden poner juntos en la misma regla, separados por comas: H1 H2 {color:blue;} equivale a:H1, H2 {color:blue;} equivale a: H1 {color:blue;} H2 {color:blue;} Juan Ruiz de Miras 20
  21. 21. 4.1. Agrupación de selectores y declaraciones4.1. Agrupación de selectores y declaraciones  Agrupación de declaraciones  Las declaraciones que afectan al mismo selector se pueden j t l i l d tponer juntas en la misma regla, separadas por puntos y comas: H1 {color:blue; text-align:center;} equivale a:H1 {color:blue; text align:center;} equivale a: H1 {color:blue;} H1 {text-align:center;} Juan Ruiz de Miras 21
  22. 22. 4 2 Especificación de selectores4.2. Especificación de selectores  Especificación de selectores es variada y muy flexible  Permite sacar el máximo partido a las hojas de estilo  Los editores CSS no suelen aprovechar al máximo estas capacidades  Selector universal: * * {font-family:arial}  Selectores de tipo  Corresponden a las etiquetas HTML  Cambiando la hoja de estilo cambia el aspecto de la etiqueta html en todos los sitios donde aparezca y en todas las páginas vinculadas Juan Ruiz de Miras 22 todos los sitios donde aparezca y en todas las páginas vinculadas  Problema: cambiar el estilo en distintos sitios para la misma etiqueta
  23. 23. 4 2 1 Selectores de clase4.2.1. Selectores de clase  Selectores de clase:  Permiten crear clases de estilos para aplicar a cualquier elemento o ti l i ió d l t tcomo particularización de elementos concretos  Especificación:  Particularizar elemento: Particularizar elemento:  elemento.id_clase  Ejemplo: h1.centrado {text-align:center;} Clase genérica: Clase genérica:  .id_clase  Ejemplo: .resaltado {color:red;} Juan Ruiz de Miras 23
  24. 24. 4 2 1 Selectores de clase4.2.1. Selectores de clase  Selectores de clase:  Utilización:  <etiqueta class="id_clase1 id_clase2 …">  Ejemplo: h1.centrado {text-align:center;}{ g ;} .resaltar {color:red;} <h1 class="centrado">Apartado 1</h1><h1 class= centrado >Apartado 1</h1> Texto del apartado 1 <p class="resaltar">Párrafo importante</p> á /<p class="centrado">Párrafo centrado</p>  Implica modificar el código html, pero Juan Ruiz de Miras 24 p g , p  Proporciona flexibilidad para crear estilos particularizados
  25. 25. 4 2 2 Selectores “ID”4.2.2. Selectores ID  Selectores "ID":  La propiedad "ID" de una etiqueta HTML permite identificar ese elemento de manera única dentro de la páginamanera única dentro de la página  El selector "ID" permite definir un estilo para aplicar a ese único elemento de la página Los navegadores NO controlan que el identificador sea único en la página Los navegadores NO controlan que el identificador sea único en la página  Especificación:  elemento#identificador  Ejemplo: p#primero {text-align:center;}  Utilización: Utilización:  <etiqueta id="identificador">  Ejemplo: <p id="primero">El primer párrafo</p> Juan Ruiz de Miras 25
  26. 26. 4 2 3 Selectores de contexto4.2.3. Selectores de contexto  Selectores de contexto:  Permiten diferenciar estilos para un elemento en función de su it ió t t l tsituación respecto a otros elementos  Tipos de situación entre elementos: <table> <ul> <li> ... </li> </ul> </t bl ></table> <p> ... </p>  Descendientes: <ul> desciende de <table>, <li> de <table> Hij hij d d Hijos: <ul> es hijo de <table>, <li> de <ul>  Hermanos adyacentes: <p> es hermano de <table> <table> NO es hermano de <p> Juan Ruiz de Miras 26 table NO es hermano de p
  27. 27. 4 2 3 Selectores de contexto4.2.3. Selectores de contexto  Selectores de contexto  Especificación:  Descendientes:  elementos separados por espacios en blanco  Ejemplo: table ul li {color:red;}j  Hijos:  padre ">" hijo  Ejemplo: table > ul {color:red;} Ejemplo: table > ul {color:red;}  Hermanos:  elemento + elemento No funciona en I. Explorer Sí funciona en Mozilla  Ejemplo: table + p {color:red;} Sí funciona en Mozilla Juan Ruiz de Miras 27
  28. 28. 4 2 4 Selectores de propiedades4.2.4. Selectores de propiedades  Selectores de propiedades: (No funciona en I. Explorer)  Permiten especificar estilos a elementos de la página en función de i d d d l t i dsus propiedades o de valores que tengan asignadas  Posibles especificaciones:  elemento[propiedad] { } elemento[propiedad] { ... }  se ha definido la propiedad del elemento  elemento[propiedad="valor"] { ... }  se ha asignado ese valor a la propiedad del elemento  elemento[propiedad~="valor"] { ... }  la propiedad del elemento tiene incluido ese valor separado por espaciosp p p p p  elemento[propiedad|="valor"] { .. }  la propiedad del elemento tiene incluido ese valor separado por guiones l t [ ][ ] { } Juan Ruiz de Miras 28  elemento[...][...]... { ... }  es posible especificar varias propiedades
  29. 29. 4 2 4 Selectores de propiedades4.2.4. Selectores de propiedades  Selectores de propiedades: p[align] {color:red;} p[align="center"] {color:blue;} img[alt~="logo"] {border:solid red}g g img[alt|="logo"] {border:solid blue} <p align "center"> párrafo centrado </p><p align="center"> párrafo centrado </p> <p align="right"> párrafo a la derecha </p> <p> párrafo normal </p> <img src="dep.gif" alt="logo del departamento"> <img src="uno.gif" alt="logo-1"><br> Juan Ruiz de Miras 29 <img src uno.gif alt logo 1 ><br>
  30. 30. 4 2 5 Seudo-clases4.2.5. Seudo clases  Seudo-clases  Permiten especificar estados de elementos de la página web que no fl j l ódi HTMLse reflejan en el código HTML  Especificación:  selector:seudo-clase { ... }{ }  seudo-clases:  link: enlace no visitado  visited: enlace visitado  hover: cuando el cursor pasa por encima del elemento  active: cuando se activa el elemento (ej: mientras se pulsa el ratón) No en todos elementos I. Expl.  active: cuando se activa el elemento (ej: mientras se pulsa el ratón)  focus: cuando el elemento recibe el foco  first-child: identifica al primer hijo en una relación padre - hijoNo en I. Expl. Sí en Moz. Juan Ruiz de Miras 30  lang(id_lenguaje): cuando el lenguaje del elemento es id_lenguaje p Sí en Moz.
  31. 31. 4 2 5 Seudo-clases4.2.5. Seudo clases  Seudo-clases a:link {color:red;} a:visited {color:yellow;}{ y ;} a:hover {color:green;} a:active {color:blue;} input:focus {border:2px solid;} input:hover {color:red;} ul > li:first-child {color:red;} p:lang(en) {color:red;} <a href="fichero.html" target="_blank">Enlace</a><br> <input></input><br> <ul> <li>primer hijo</li> <li>segundo hijo</li> </ul> Juan Ruiz de Miras 31 <p lang="es">en español</p> <p lang="en">en inglés</p>
  32. 32. 4 2 6 Seudo-elementos4.2.6. Seudo elementos  Seudo-elementos  Permiten especificar estilos a ciertas partes relevantes de elementos d l á i bde la página web  Especificación:  selector:seudo-elemento { ... }{ }  seudo-elementos:  first-line: identifica la primera línea  first-letter: identifica la primera letra  before {content:"contenido"; ...}: inserta contenido, con sus propios estilos, antes del elemento especificado No en I. Expl. Sí M p p , p  after {content:"contenido"; ...}: inserta contenido, con sus propios estilos, después del elemento especificado Sí en Moz. Juan Ruiz de Miras 32
  33. 33. 4 2 6 Seudo-elementos4.2.6. Seudo elementos  Seudo-elementos h1:first-letter {font-size:200%;} p:first-line {color:red;}p:first-line {color:red;} cite:before {content:"Cita: ";text-decoration:italic;} <h1>una cabecera</h1><h1>una cabecera</h1> <p>La primera línea en rojo<br> ti d í l l d f t </ >a partir de aquí en el color por defecto</p> <cite>Esto es una cita</cite> Juan Ruiz de Miras 33
  34. 34. Contenidos 1. Introducción 2 Sintaxis de las hojas de estilo2. Sintaxis de las hojas de estilo 3. Uso de hojas de estilo 4. Especificación de reglas CSS 5 Cascada y herencia5. Cascada y herencia 6. Propiedades CSS Juan Ruiz de Miras 34
  35. 35. 5 Cascada y Herencia5. Cascada y Herencia  Una misma página web puede utilizar varias hojas de estilo  Útil, por ejemplo, para tener estilos comunes a varias páginas y otros til li d d di d d l á iestilos personalizados dependiendo de la página  Combinar vinculación, incrustación y estilos en línea  Vincular varias hojas Vincular varias hojas  Importación de hojas de estilo:  @import "fichero.css"; ó @import url("url_fichero.css");  la importación se hace desde una hoja de estilo y antes de cualquier regla  Los estilos de cada hoja antes de aplicarse a la página se Los estilos de cada hoja, antes de aplicarse a la página, se combinan en un proceso denominado Cascada:  este proceso resuelve los conflictos que aparecen cuando varias Juan Ruiz de Miras 35 p q p reglas afectan al mismo elemento
  36. 36. 5 Cascada y Herencia5. Cascada y Herencia  Orden de cascada (de mayor a menor preferencia): 1. Procedencia de la hoja de estilos: 1. Hoja de estilo del autor de la página web 2. Hoja de estilo del usuario  los navegadores permiten cargar hojas de estilo propias del usuario los navegadores permiten cargar hojas de estilo propias del usuario  IE: Herramientas  Opciones de internet  General  Accesibilidad  Mozilla: Herramientas  Opciones  Contenido  Tipos y colores R l !i t t Reglas !important:  prevalecen sobre las reglas del autor al mismo nivel  selector { prop:valor !important;} 3. Estilos por defecto del navegador 2. Especificidad O d Juan Ruiz de Miras 36 3. Orden
  37. 37. 5 Cascada y Herencia5. Cascada y Herencia  Orden de cascada (de mayor a menor preferencia): 1. Procedencia de la hoja de estilos: 2. Especificidad:  Cálculo de especificidad: A número de atributos ID (#) en el selectorA. número de atributos ID (#) en el selector B. número de especificación de clases (.) en el selector C. número de etiquetas en el selector • la especificidad la da el número ABC • en caso de conflicto prevalece la regla con mayor especificidad 3. Orden  En caso de conflicto y a igualdad de especificidad, prevalece la última regla especificada Juan Ruiz de Miras 37 última regla especificada  vinculación anterior a incrustación anterior a estilos en línea
  38. 38. 5 Cascada y Herencia5. Cascada y Herencia  Ejemplos Orden de cascada: li {color:red}  A=0 B=0 C=1: 001 li.primero {color:blue}  A=0 B=1 C=1: 011 ul li.primero {color:green}  A=0 B=1 C=2: 012 # i { l ll }  1 0 0 100#primero {color:yellow}  A=1 B=0 C=0: 100 #primero {color:magenta}  A=1 B=0 C=0: 100 <ul> <li class="primero" id="primero">primero</li> <li class="primero">segundo</li> <li>tercero</li> / Juan Ruiz de Miras 38 </ul>
  39. 39. 5 Cascada y Herencia5. Cascada y Herencia  Herencia:  Un elemento de una página hereda el estilo del padre (elemento l ti )que lo contiene)  html {color:red;}, esta regla afecta a todos los elementos  No todas las propiedades son heredables No todas las propiedades son heredables  márgenes, bordes, ...  Al asignar un estilo a un elemento se sustituye el que Al asignar un estilo a un elemento se sustituye el que hubiera heredado Juan Ruiz de Miras 39
  40. 40. Contenidos 1. Introducción 2 Sintaxis de las hojas de estilo2. Sintaxis de las hojas de estilo 3. Uso de hojas de estilo 4. Especificación de reglas CSS 5 Cascada y herencia5. Cascada y herencia 6. Propiedades CSS Juan Ruiz de Miras 40
  41. 41. 6 Propiedades CSS6. Propiedades CSS  Clasificación visual de los elementos HTML  Etiquetas SPAN y DIV  Unidades  Principales propiedades CSS Juan Ruiz de Miras 41
  42. 42. 6.1. Clasificación visual de los elementos HTML6.1. Clasificación visual de los elementos HTML  Elementos de bloque Elementos de bloque  Visualmente se tratan como un bloque separado de los elementos adyacentes F lt d lí l i i i l fi l d l l t Fuerzan un salto de línea al inicio y al final del elemento  Ejemplos: <p>, <h1>, ...  Elementos en línea  Visualmente no se tratan como bloque y por tanto sus contenidos se sitúan a nivel de línea  No fuerzan salto de línea No fuerzan salto de línea  Ejemplos: <a>, <em>, ...  Elementos de lista  Elementos de bloque que contienen un elemento en línea asociado a una viñeta o a un carácter de orden  Fuerzan salto de línea al inicio y final del elemento Juan Ruiz de Miras 42 y  Ejemplo: <li>
  43. 43. 6.1. Clasificación visual de los elementos HTML6.1. Clasificación visual de los elementos HTML  Cambio del tipo de visualización:  Propiedad CSS DISPLAY  No se hereda  Valores posibles: block, inline, list-item y none  Ejemplo: Ejemplo: .bloque {display:block;} .enlinea {display:inline;} .lista {display:list-item;}.lista {display:list item;} .ninguno {display:none;} Antes del párrafo... <p class="enlinea">párrafo en línea</p> <ul> <p class="lista">párrafo lista</p> </ul> <p class="ninguno">párrafo sin visualización</p> < l "bl "> l f t bl </ > Juan Ruiz de Miras 43 <a class="bloque">enlace formato bloque</a> Después de enlace bloque...
  44. 44. 6 2 Etiquetas SPAN y DIV6.2. Etiquetas SPAN y DIV  Las etiquetas <SPAN> y <DIV> permiten aplicar estilos a partes de la página independientemente de las etiquetas HTMLHTML  Las propiedades que admiten estas etiquetas son STYLE, CLASS e IDCLASS e ID  <SPAN> es un elemento en línea <DIV> l t d bl <DIV> es un elemento de bloque  Puede contener cualquier otro elemento HTML  Característica fundamental que permite definir divisiones lógicas o Característica fundamental que permite definir divisiones lógicas o capas (layers) en la página HTML y formatearlas con hojas de estilos Juan Ruiz de Miras 44
  45. 45. 6 2 Etiquetas SPAN y DIV6.2. Etiquetas SPAN y DIV .resaltar {color:red;} div#menu {width:120px; background-color:green} di # {di l bl k }div#menu a {display:block;} <h1>Esto es una <span class="resaltar"> cabecera </span></h1>p p <div id="menu"> < >I i i </ ><a>Inicio</a> <a>Opción 1</a> <a>Opción 2</a> </div> Juan Ruiz de Miras 45
  46. 46. 6 3 Unidades6.3. Unidades  Longitud:  Especificación:  número unidad  todo seguido, sin espacios en blanco  Absolutas: Absolutas:  in (pulgadas), cm, mm, pt (puntos), pc (picas)  Relativas:  em (altura fuente), ex (altura letra x), px (pixel)  Ejemplo:  <span style "font size:2em"> <span style="font-size:2em"> Juan Ruiz de Miras 46
  47. 47. 6 3 Unidades6.3. Unidades  Porcentaje:  Especificación:  número %  todo seguido, sin espacios en blanco  Ejemplo: Ejemplo:  <div style="width:50%;background-color:red">  Colores:  palabra clave: red, blue, green, grey, ...  #rrggbb: rr, gg y bb en hexadecimal  rgb(x,x,x): x entre 0 y 255  rgb(x%,x%,x%): x entre 0 y 100  Ejemplo: Juan Ruiz de Miras 47  Ejemplo:  #00cc00, rgb(0,204,0) y rgb(0%,80%,0%) es el mismo color
  48. 48. 6 4 Principales propiedades CSS6.4. Principales propiedades CSS  Formato de texto  Fuente  Listas  Borde, margen y relleno  Colores y fondo  Posición y dimensionesy  Descripción detallada de las propiedades CSS:p p p  http://www.w3.org/TR/CSS21/propidx.html  http://www.htmlhelp.com/es/reference/css/properties.html Juan Ruiz de Miras 48
  49. 49. 6 4 1 Formato de texto6.4.1. Formato de texto  Formato de texto:  Alineación horizontal: text-align  se aplica a elementos de bloque  valores posibles: left, right, center, justify  Alineación vertical: vertical-align Alineación vertical: vertical align  se aplica a elementos en línea  valores posibles: baseline, top, middle, bottom o porcentaje  útil para texto en tablas o alinear imágenes: texto <img src="ugr.gif" style="vertical-align:top;">  Sangría: text-indent Sangría: text-indent  se aplica a elementos de bloque  valores posibles: medida o porcentaje Juan Ruiz de Miras 49 p p j  establece sangría de la primera línea (para todas, utilizar margin)
  50. 50. 6 4 1 Formato de texto6.4.1. Formato de texto  Formato de texto:  Decoración del texto: text-decoration  valores posibles: none, underline (subrayado), overline (suprarayado), line-through (tachado), blink (parpadeo)  ejemplo:j p <a href="f.html" style="text-decoration:none"> Enlace sin subrayar </a>/  Trasnformación del texto: text-transform  valores posibles: none, capitalize (primera letra en mayúsculas), ( ú l ) l ( i ú l )uppercase (mayúsculas), lowercase (minúsculas)  ejemplo: <span style="text-transform:capitalize"> Juan Ruiz de Miras 50 cada primera letra en mayúsculas </span>
  51. 51. 6 4 2 Fuente6.4.2. Fuente  Fuente:  Familia de fuente: font-family  valores posibles: nombres de fuentes o de familias genéricas separadas por comas  familias genéricas: serif, sans-serif, cursive, fantasy,g y monospace  útil poner alguna fuente genérica por si las específicas no están instaladasinstaladas  ejemplo: <p style="font-family:arial,fantasy;"> Si hay Arial, si no familia fantasy </p> Juan Ruiz de Miras 51
  52. 52. 6 4 2 Fuente6.4.2. Fuente  Fuente:  Fuentes descargables:  problemas si fuentes seleccionadas no están disponibles en el cliente  es posible descargar la fuente junto con la página web  requiere que el servidor web reconozca los ficheros PFR: requiere que el servidor web reconozca los ficheros .PFR:  formato propietario de Netscape  mapa de bits con los caracteres que se utilizan  tamaño reducido IE l d t t t l A ti X IE lo detecta como un control ActiveX  sólo se puede ver si la página está en un servidor <link rel="fontdef" src="url_fichero.PFR"> <p style="font-family:nombre fuente;">Ejemplo fuente</p> Juan Ruiz de Miras 52 _
  53. 53. 6 4 2 Fuente6.4.2. Fuente  Fuente:  Tamaño de la fuente: font-size  valores posibles:  valor absoluto: xx-small, x-small, small, medium, large, x-large, xx-large  valor relativo (respecto del padre): larger, smaller  longitud o porcentaje (respecto al elemento padre)  ejemplo: ejemplo: <body> <h1 style="font-size:2em;"> Texto de tamaño 2 veces el de la fuente de <body>Texto de tamaño 2 veces el de la fuente de <body> </h1> </body> Juan Ruiz de Miras 53
  54. 54. 6 4 2 Fuente6.4.2. Fuente  Fuente:  Peso de la fuente: font-weight  valores posibles:  Relativos (respecto del padre): normal, bolder, lighter  absolutos: bold, 100, 200, ..., 900  Estilo de la fuente: font-style l ibl valores posibles: normal, italic, oblique  ejemplo: <p style="font:bold italic;">p y Texto en negrita y cursiva </p> Juan Ruiz de Miras 54
  55. 55. 6 4 3 Listas6.4.3. Listas  Listas:  Tipo de lista: list-style-type  valores posibles: disc, circle, square, decimal, lower- roman, upper-roman, lower-alpha, upper-alpha, none  Imagen de la lista: list-style-image  valores posibles: none, url(url_imagen)  Posición de la lista: list-style-position  valores posibles: outside (sangría francesa) inside valores posibles: outside (sangría francesa), inside  ejemplo: ol {list-style:upper-roman inside;} Juan Ruiz de Miras 55 ol ol {list-style:lower-alpha outside} ul {list-style:url(“ugr.gif”)}
  56. 56. 6 4 4 Borde margen y relleno6.4.4. Borde, margen y relleno  Borde, margen y relleno:  El aspecto visual de CSS se basa en un modelo de cajas  Este modelo permite aplicar todas las propiedades CSS a cualquier elemento de la página (bloque o en línea): imagen de fondo, relleno, posición en la pantalla, ... top p p , Margen (margin) Borde (border) top ( ) Relleno (padding) Contenidoleft rightContenido g Juan Ruiz de Miras 56bottom
  57. 57. 6 4 4 Borde margen y relleno6.4.4. Borde, margen y relleno  Borde, margen y relleno:  Distinguiendo entre top, left, right o bottom:  border-right, padding-left, ...  padding-left:10px;  border-top-color:blue;  Tratamiento uniforme: border, margin o padding  Mismo valor: b d t l lid top  border-style:solid;  Valores distintos:  1 a 4 valores posibles Margen (margin) Borde (border) Relleno (padding) p  1: top, bottom, left y right  2: (top, bottom), (left, right)  3: (top), (left, right), (bottom) Contenidoleft right Juan Ruiz de Miras 57 3: (top), (left, right), (bottom)  4: (top), (right), (bottom), (left) bottom
  58. 58. 6 4 4 Borde margen y relleno6.4.4. Borde, margen y relleno  Borde, margen y relleno:  Características configurables:  grosor: medida o porcentaje  padding: 1%;  color: sólo para borde (margen es transparente y relleno tiene el color: sólo para borde (margen es transparente y relleno tiene el color del fondo del contenido)  border-color: red; border bottom color bl e Margen (margin) top  border-bottom-color:blue;  estilo: sólo para borde  none, solid, dotted, inset, outset, ... Margen (margin) Borde (border) Relleno (padding) Contenidoleft right  border-style: inset dotted;  border-top-style: none; Contenidoleft right Juan Ruiz de Miras 58 bottom
  59. 59. 6 4 5 Colores y fondo6.4.5. Colores y fondo  Colores y fondo:  A diferencia de HTML, en CSS todos los elementos pueden tener l d i l l i d f dcolor de primer plano y color e imagen de fondo  Para la imagen de fondo se puede especificar su posición y cómo debe repetirsep  Color de primer plano:  propiedad color: #resaltar {color:red;} <span id="resaltar">texto importante</span> Juan Ruiz de Miras 59
  60. 60. 6 4 5 Colores y fondo6.4.5. Colores y fondo  Colores y fondo:  Propiedades del fondo (background):  color: background-color  valor de color o transparent  imagen de fondo: background-image imagen de fondo: background image  none o url("imagen")  repetición de la imagen: background-repeat  repeat: tipo mosaico  repeat-x, repeat-y o no-repeat Juan Ruiz de Miras 60
  61. 61. 6 4 5 Colores y fondo6.4.5. Colores y fondo  Colores y fondo:  Propiedades del fondo (background):  posición de la imagen: background-position  uno (horizontal) o dos (horizontal vertical) valores de porcentaje o de medida, respecto de la esquina izquierda-superior  0% 0%: esquina izquierda-superior de la imagen alineada con la esquina izquierda-superior de la caja  30px 20pxp p  [{top, center, bottom}] [{left, center, right}]  bottom  50% 100%  right  100% 50%right  100% 50%  left center  0% 50%  desplazamiento de la imagen: background-attachment Juan Ruiz de Miras 61  desplazamiento respecto al documento  fixed o scroll
  62. 62. 6 4 5 Colores y fondo6.4.5. Colores y fondo  Colores y fondo:  Propiedades del fondo (background): #i#imagen { padding:50%; background-color:yellow; background-image:url("ugr.gif"); background-repeat: no-repeat; background-position: center center; background-attachment: fixed; } <div id="imagen"> Imagen de fondo </div> Juan Ruiz de Miras 62
  63. 63. 6 4 6 Posición y dimensiones6.4.6. Posición y dimensiones  Posición y dimensiones:  Estas propiedades CSS permiten formatear la página web al estilo d l d t ióde los programas de maquetación  Posicionamiento de los elementos:  Se establece el tipo y los valores de posicionamiento Se establece el tipo y los valores de posicionamiento  Tipo de posicionamiento: position  static: la de HTML, no es posible posicionar el elemento l ti l l t i i t i ió l l relative: el elemento se posiciona respecto a su posición normal en la página, el elemento siguiente se sitúa respecto a la posición original (sin posicionar) del elemento anterior b l t l l t i i lib t l á i l l t absolute: el elemento se posiciona libremente en la página, el elemento se ignora para posicionar el elemento siguiente  fixed: igual que absolute salvo que al hacer scroll no se mueve junto con el contenido de la página (Internet Explorer considera fixed igual que static) Juan Ruiz de Miras 63 contenido de la página. (Internet Explorer considera fixed igual que static)
  64. 64. 6 4 6 Posición y dimensiones6.4.6. Posición y dimensiones  Posición y dimensiones:  Posicionamiento de los elementos:  Valores de posicionamiento: top, left, right, bottom  Se especifican en medida o porcentaje  Valores respecto a los márgenes superior izquierdo derecho o Valores respecto a los márgenes superior, izquierdo, derecho o inferior de:  la caja que contiene al elemento: si posición es absolute o fixed la posición original (sin posicionar) de la caja del propio elemento: si la posición original (sin posicionar) de la caja del propio elemento: si posición es relative  top y left tienen prioridad sobre right y bottom Juan Ruiz de Miras 64
  65. 65. 6 4 6 Posición y dimensiones6.4.6. Posición y dimensiones  Posición y dimensiones:  Posicionamiento de los elementos: # i i b l t {#posicion_absoluta { position: absolute; bottom: 100px; right: 100px; } #posicion_relativa { position: relative; top: 75px; left: 75px; }left: 75px; } <div> Caja normal </div> <div id="posicion_absoluta"> Caja posición Absoluta </div> <div id="posicion_relativa""> Caja posición Relativa </div> Juan Ruiz de Miras 65
  66. 66. 6 4 6 Posición y dimensiones6.4.6. Posición y dimensiones  Posición y dimensiones:  Dimensiones: width, height  Se especifica en medida o porcentaje  Se aplican a los elementos de bloque #posicion absoluta {_ position: absolute; bottom: 100px; right: 100px; background-color:green; width:50%; height:100px; } <div id="posicion_absoluta"> Caja posición Absoluta </div> Juan Ruiz de Miras 66
  67. 67. 6 4 6 Posición y dimensiones6.4.6. Posición y dimensiones  Posición y dimensiones:  Capas: propiedad z-index:nº_entero  Los elementos posicionados con position pueden solaparse  Por defecto, el navegador los muestra según aparecen en el código  z-index permite especificar la profundidad en el solapamiento z index permite especificar la profundidad en el solapamiento  a mayor z-index más arriba en el solapamiento  esta propiedad se hereda:  elemento A: z-index vale 3  elemento B: z-index vale 2  elemento C: hijo de A y z-index vale 1j y  elemento D: hijo de A y z-index 0  A sobre B C y D sobre B C sobre D Juan Ruiz de Miras 67 A sobre B, C y D sobre B, C sobre D
  68. 68. 6 4 6 Posición y dimensiones6.4.6. Posición y dimensiones  Posición y dimensiones:  Capas: # j A { iti b l t t 100 l ft 100 idth 120 h i ht 100#caja_A { position: absolute; top: 100px; left: 100px; width:120px; height:100px; background-color:green; z-index:3; } #caja_B { position: absolute; top: 75px; left: 75px; width:100; height:100px; background-color:red; z-index:2; } #caja_C { position: absolute; top: 0px; left: 50px; width:50; height:50px; background-color:blue; z-index:1; } #caja_D { position: absolute; top: 50px; left: 50px; width:50; height:50px; background-color:yellow; z-index:0; } <div id="caja_A"> Caja A <div id="caja_C">Caja C</div> <div id="caja_D">Caja D</div> Juan Ruiz de Miras 68 </div> <div id="caja_B"> Caja B </div>

×