Programacion cliente hojas_deestilo_

1,145 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
1,145
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
56
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Programacion cliente hojas_deestilo_

  1. 1. Tecnología Web g Tema 2: Programación en el lado cliente Hojas de estilo (CSS) Autor: Sara Lana, Carlos González DIATEL-EUITTM/UPM CSS: Introducción CSS (Cascading Style Shteets) es un lenguaje creado para describir el formato de presentación de documentos HTML Y XHTML. Proporciona una total independencia entre contenidos y presentación. presentación Su definición y uso son posteriores a 1995 Admitido como recomendación por el W3C. Versiones: CSS 1 (1995), CSS 2.1 (1998). (1995) 2 1 (1998) No todos los motores de los navegadores soportan la totalidad de la especificación. Tecnología Web Tema 2: Hojas de estilo Transparencia 2
  2. 2. CSS: Introducción Permiten superar los trucos normalmente empleados para diseñar páginas Web, tales como: p g , Uso de tablas Imágenes transparentes g p Conversión de texto en imágenes. Utilización de elemento y atributos de p presentación: font, , background, color, face, align, width,…) Las CSS permiten especificar estilos para: Tipos de letra. Fondos. Texto. Bordes. Listas. Tecnología Web Tema 2: Hojas de estilo Transparencia 3 Mecanismos de inclusión de estilos CSS: Introducción Existen diferentes mecanismos para incluir CSS: Inclusión directa en los elementos del documento utilizando el atributo style. Inclusión en el mismo documento utilización la etiqueta style. q y Enlace a un documento externo (.css) utilizando la etiqueta link link. Enlace a un documento externo (.css) la regla de estilo @import. Tecnología Web Tema 2: Hojas de estilo Transparencia 4
  3. 3. Alcance de los estilos CSS: Introducción El alcance de los estilos definidos mediante CSS depende del mecanismo de inclusión utilizado: Inclusión mediante atributo style: el alcance es el propio elemento al que pertenece el atributo. Inclusión mediante etiquetas style/link o reglas de estilo @import: el alcance depende de la propia definición de cada regla: Bloque de estilos globalmente aplicables a un mismo tipo de elemento. Clase de estilo aplicable a distintos elementos mediante la utilización del atributo class. Tecnología Web Tema 2: Hojas de estilo Transparencia 5 Inclusión de estilos: atributo style CSS: Atributo style La CSS se incluye como atributo asociado al elemento que caracteriza. caracteriza El alcance del estilo es el propio elemento. Desde el punto de vista de mantenimiento y peso de la página no proporciona ninguna ventaja sobre la utilización de atributos de presentación. Su uso debe estar limitado a situaciones puntuales. <etiqueta style="estilo: valor">… q y </etiqueta> Tecnología Web Tema 2: Hojas de estilo Transparencia 6
  4. 4. Página sin estilos propios definidos CSS: Ejemplo atributo style <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es"> p g g g <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Tema 2: Página sin estilos propios</title> </head> <body> <h1 align="center">Nuevos avances en física</h1> <h2>Transformando el oro en plomo.</h2> <p> En un alarde de originalidad un equipo de la Universidad de Fresnedillo ha patentado una té i para l t t t d técnica la transmutación d oro en plomo. P t ió de l Para más d t ll á detalles consultar la <a href="tesis.htm">Tesis de transmutación.</a></p> <h2>Máquina de la inactividad perpetua.</h2> perpetua </h2> <p >En contra del tradicional intento de construir la máquina del movimiento perpetuo, el profesor Perpetuo de la Serna ha desarrollado una máquina totalmente inactiva Para recibir una muestra gratuita por sólo 99 9 Euros inactiva. 99,9 rellene nuestro <a href="perpetuo.html">formulario de pedido</a>.</p> </body> </html> Tecnología Web Tema 2: Hojas de estilo Transparencia 7 Página sin estilos propios definidos CSS: Ejemplo atributo style Tecnología Web Tema 2: Hojas de estilo Transparencia 8
  5. 5. Atributo style en una etiqueta CSS: Ejemplo atributo style <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es"> p g g g <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <meta http-equiv="Content-Style-Type" content="text/css" /> p q y yp <title>Tema 2: Utilización de atributo ‘style’</title> </head> <body> <h1 style="text-align: center;" >Nuevos avances en física</h1> <h2>Transformando el oro en plomo.</h2> <p style="color: #9050FF; font-family: Arial; font-size: 1.2em;"> En un alarde de originalidad un equipo de la Universidad de Fresnedillo ha patentado una técnica para la transmutación de oro en plomo. Para más detalles consultar la <a href="tesis.htm">Tesis de transmutación.</a></p> --------------------------- </body> </html> Tecnología Web Tema 2: Hojas de estilo Transparencia 9 Atributo style en una etiqueta CSS: Ejemplos de Etiqueta style Tecnología Web Tema 2: Hojas de estilo Transparencia 10
  6. 6. Definición de Reglas (ruleset) CSS: Definición de Reglas ruleset:: selector [’,’ S* selector ]* S* ’{’ declaration? [’;’ S* declaration? ]* ’}’ selector:: simple_selector [’,’ S* selector ]* declaration:: d l ti property_name ’:’ value #titulo, .titulo, span.destacado, div * .destacado { font-weight : bold ; font-size : 1.2em ; color : #2255AA ; } Tecnología Web Tema 2: Hojas de estilo Transparencia 11 Inclusión de estilos: etiqueta style CSS: Etiqueta style Como elemento hijo de head: <style type=“text/css”> y yp / /* definiciones de reglas (ruleset) */ </style> <style type=“text/css”> /* <![CDATA[ */ #titulo, .titulo, span.destacado, div * .destacado { font-weight : bold ; font-size : 1.2em ; color : #2255AA ; } /* ]] */ </style> Tecnología Web Tema 2: Hojas de estilo Transparencia 12
  7. 7. Página con Bloque de estilos. CSS: Ejemplos de Etiqueta style <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es"> p g g g <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <title>Tema 2: Utilización de bloque style</title> <style type="text/css"> / /*<![CDATA[*/ [ [ / h1{ text-align: center; } p { color: #9050FF; font-family: Arial; font-size: 1.2em; } / ]]> / /*]]>*/ </style> </head> <body> --------------------------- </body> </html> Tecnología Web Tema 2: Hojas de estilo Transparencia 13 Página sin estilos propios definidos CSS: Ejemplo atributo style Tecnología Web Tema 2: Hojas de estilo Transparencia 14
  8. 8. Utilización de hojas de estilo externas CSS: Enlaces e importaciones No es necesario que los estilos estén en el mismo documento que los utiliza. utiliza Se pueden utilizar definiciones de estilos en archivos externos dos formas: Mediante enlaces a ficheros de estilos externos externos. Mediante importaciones de ficheros de estilo. La principal diferencia entre uno y otro es que el segundo método permite combinar las importaciones de estilos con declaraciones globales en la página. Tecnología Web Tema 2: Hojas de estilo Transparencia 15 Utilización de hojas de estilo externas CSS: Enlaces e importaciones Como enlace: Tipo relación con el recurso <link rel rel= "stylesheet" stylesheet Tipo de recurso enlazado type= "text/css" URL del archivo css g href= "estiloglobal.css" media= "print" Medio o dispositivo al que va destinado: screen, print, speech, … > Se pueden enlazar varias hojas de estilo. Como importación: <style type= "text/css"> @import url("estiloglobal.css"); @i l(" il l b l ") @import url("estiloimpresion.css") print; </style> Se pueden importar varias hojas de estilo Tecnología Web Tema 2: Hojas de estilo Transparencia 16
  9. 9. Clases de hoja de estilo CSS: Enlaces e importaciones Se usa el atributo rel para especificar el rol de cada hoja: Persistente: el agente de usuario debe aplicarla siempre. <link type="text/css" rel="stylesheet" /> Preferente: seleccionada como hoja por defecto por el diseñador. <link t li k type="text/css" rel="stylesheet“ " / " l " l h “ title="<nombre_hoja>" /> Alternativa: proporcionada como complementaria. El usuario la podrá seleccionar a través de las herramientas del UA. <link type="text/css" rel="alternate stylesheet" title="<nombre_hoja>" /> Consultar: p p y http://html.conclase.net/w3c/html401-es/present/styles.html#h-14.3.1 Tecnología Web Tema 2: Hojas de estilo Transparencia 17 Clases de hoja de estilo CSS: Enlaces e importaciones <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <link rel="stylesheet" href="global0.css" type="text/css" /> rel stylesheet href global0.css type text/css <link rel="alternate stylesheet" href="global1.css" type="text/css" title="Estilo type "text/css" title "Estilo 1 (global1)" /> <link rel="alternate stylesheet" href="global2.css" type="text/css" title="Estilo 2 (global2)" /> <title> Tema 2: Hojas de Estilos (Persistente, preferente y alternativa) </title> </head> <body> --------------------------- </body> </html> Tecnología Web Tema 2: Hojas de estilo Transparencia 18
  10. 10. Clases de hoja de estilo CSS: Enlaces e importaciones Tecnología Web Tema 2: Hojas de estilo Transparencia 19 Clases de hoja de estilo CSS: Enlaces e importaciones global0 body{ font-family: Arial, "Helvetica", sans-serif; font-size: .8em; width: 800px; color: #134d86; } h1{ text-align: center; g ; } p{ margin: 0.1em; } Tecnología Web Tema 2: Hojas de estilo Transparencia 20
  11. 11. Clases de hoja de estilo CSS: Enlaces e importaciones global1 h1{ p{ background: #134d86; border: dotted 1px #134d86; color: #FFFFFF; padding: 0.2em; } margin: 0; h2{ background: #eeeeee; ; text-decoration: underline; font-size: 1.2em; o t s e e ; } } Tecnología Web Tema 2: Hojas de estilo Transparencia 21 Clases de hoja de estilo CSS: Enlaces e importaciones global2 a:link, a:hover, a:visited{ a:hover{ border-bottom: d b d b dotted 1px #eeeeee; d color: #eeeeee; font-family: Tahoma; background: #134d86; color: #134d86; } background: #cccccc; body{ p padding: 0.2em; g ; p ; width: 450px; text-decoration: underline; } } Tecnología Web Tema 2: Hojas de estilo Transparencia 22
  12. 12. Anidamiento de hoja de estilo CSS: prioridad de las declaraciones Clasificación de hojas de estilo atendiendo a quién las define: Hojas definidas por el Agente de Usuario (UA): es la primera que se aplica, define el estilo inicial por defecto para todos los elementos. p Hojas definidas por el Usuario: posibilitan la adaptación de las hojas por defecto a las necesidades del usuario. La forma de definición dependen del UA utilizado. Hojas definidas por el diseñador: mediante alguno j p g de los mecanismos estudiados. Tecnología Web Tema 2: Hojas de estilo Transparencia 23 Anidamiento de hoja de estilo CSS: prioridad de las declaraciones Tecnología Web Tema 2: Hojas de estilo Transparencia 24
  13. 13. Anidamiento de hoja de estilo CSS: prioridad de las declaraciones Tecnología Web Tema 2: Hojas de estilo Transparencia 25 Anidamiento de hoja de estilo CSS: prioridad de las declaraciones Importancia de las reglas atendiendo al creador: CSS CSS CSS CSS CSS Agente Diseñador Usuario Usuario Diseñador Usuario !important !important Importancia de las reglas atendiendo a su especificidad: A mayor especificidad del selector, mayor importancia selector de la regla asociada. A igual especificidad del selector, mayor importancia la última regla definida. g Tecnología Web Tema 2: Hojas de estilo Transparencia 26
  14. 14. Anidamiento de hoja de estilo CSS: Jerarquía de procesamiento modelo Orden de prioridades si hay varias definiciones que entran en conflicto Etiqueta link Tiene prioridad el último fichero enlazado Regla @import Tiene prioridad el último fichero importado Etiqueta style Tiene prioridad sobre los ficheros importados o enlazados Atributo style Substituye a cualquier estilo anterior Esta estructura jerárquica es la que da el nombre de ‘en cascada’ a las hojas de estilo. Tecnología Web Tema 2: Hojas de estilo Transparencia 27 CSS: Jerarquía de Ejemplo de anidamiento de hoja de estilo procesamiento <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es"> p g g g <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <link rel="stylesheet" href="global0.css" type="text/css" /> <style type="text/css"> type text/css > /*<![CDATA[*/ p { color: rgb(80,125,140); font-family: Arial; y ; font-size: 1.2em; } p a { color: #CC0000; } ]] /*]]>*/ </style> <title>Tema 2: Jerarquía de reglas</title> </head> Tecnología Web Tema 2: Hojas de estilo Transparencia 28
  15. 15. CSS: Jerarquía de Ejemplo de anidamiento de hoja de estilo procesamiento <body> <h1>Nuevos avances en física</h1> <h2>Transformando el oro en plomo.</h2> <p> -------------- </p> <h2>Máquina de la inactividad perpetua.</h2> <p style="background: #EEE; font-size: 1.2em; border: dashed 1px #9050FF; padding: 2px; "> -------- </p> </body> /b d </html> Tecnología Web Tema 2: Hojas de estilo Transparencia 29 Selectores CSS: Selectores Los selectores permiten definir diferentes estilos globalmente aplicables a un mismo tipo de elemento (bloque de estilo) o aplicable a distintos elementos mediante la utilización del atributo class (clase de estilo). estilo) Selectores básicos: Selector universal (*) Selector de etiqueta (h1) Selector de clase (.contenido) Selector descendente (di span, a .destacado) S l t d d t (div d t d ) Selector de id (#menuIzq) Tecnología Web Tema 2: Hojas de estilo Transparencia 30
  16. 16. Selectores CSS: Selectores Selectores avanzados: Selector de hijo (div destacado > span) (div.destacado Selector de atributo (acronym[title]) Selector de adyacencia (label.acceso + select[type input]) select[type=input]) Pseudo-selectores: Selector de pseudo-elemento (p:first-letter) Selector de pseudo-clase (a:hover) p ( ) Consultar: p g http://www.w3c.es/Divulgacion/GuiasReferencia/CSS21/ Tecnología Web Tema 2: Hojas de estilo Transparencia 31 Selectores Universal y de etiqueta CSS: Selectores. Selector Universal (*): referencia a todos los elementos de la página página. Selector de Etiqueta (e): referencia los elementos cuyo valor de etiqueta coincide con el del selector. *{ border: 0; text-align: left ; } h1,h2,h3{ h1 h2 h3{ font-weight: bold ; font-decoration: underline ; } Tecnología Web Tema 2: Hojas de estilo Transparencia 32
  17. 17. Ejemplo Selectores CSS: Selectores. Selector de clase(.<nombre_clase>): referencia a cualquier elemento de la página cuyo atributo class contenga el nombre del selector. .lOscura{ color: #00C;} .lGrande{ font-size : 0.9em ; } .lPequenia{ font-size : 0.5em ;} <span class="lOscura">letra oscura</span> <span class="lAzul lGrande">letra oscura class= lAzul lGrande >letra grande</span> <span class="lAzul lPequenia">letra oscura pequeña</span> Tecnología Web Tema 2: Hojas de estilo Transparencia 33 Pseudo-Selectores CSS: Selectores. Los pseudo-elementos y las pseudo-clases permiten aplicar propiedades a información que no forma parte del árbol del documento. Pseudo-clases :first-child Referencia al primer hijo de un elemento. :link Aplicable a enlaces que todavía no han sido visitados. :visited Aplicable a enlaces que han sido visitados. :hover, :active, :focus Aplicable ante ciertas interacciones de los usuarios. Pseudo-elementos :first-line Referencia la primera línea de un párrafo. :first-letter Referencia la primera letra de un texto Tecnología Web Tema 2: Hojas de estilo Transparencia 34
  18. 18. Propiedades de texto CSS: propiedades Propiedades aplicables a elementos de texto text-transform text transform uppercase, lowercase, uppercase lowercase capitalize text-align left, right, center, justify text-ident XX unidades, % letter-spacing XX unidades, % line-height normal, XX unidades, % text-decoration underline, overline, line-through, blink En las CSS se admiten dos tipos de medida: absolutas (in, cm, mm, pt pc,) relati as (p em, ex). mm pt, pc ) y relativas (px, em e ) p absoluto{ letter spacing: 25px;} p.absoluto{ letter-spacing: p.relativo{letter-spacing: 1.2em;} Tecnología Web Tema 2: Hojas de estilo Transparencia 35 Tipos de letra, colores y fondos CSS: propiedades Propiedades aplicables a los tipos de letra font family font-family verdana, arial, helvetica, sans-serif, etc sans serif, font-style normal, italic, oblique font weight font-weight lighter, normal, lighter normal bold font-size XX unidades, % Propiedades aplicables a los colores y fondos color (aqua, blue, white, red, green, black, ...), valor RGB background-color transparent, nombreColor, transparent nombreColor valor RGB background-image url( “fichero” ) rgb(255,0,0) rgb(0,0,255) rgb(0,255,0) #FF0000 #0000FF #00FF00 b( ) rgb(255,125,125) b( ) rgb(78,117,163) b( ) rgb(125,146,99) #FF7D7D #4E75A3 #7D9163 Tecnología Web Tema 2: Hojas de estilo Transparencia 36
  19. 19. Márgenes y rellenos CSS: propiedades Propiedades aplicables a los márgenes y relleno margin-top XX unidades, % margin-bottom XX unidades, % margin-left XX unidades, % margin-top XX unidades, % padding-top XX unidades, % padding-bottom XX unidades, % padding-left XX unidades, % padd g g t padding-right XX unidades, % u dades, El relleno (padding) determina la distancia entre el borde y el contenido. contenido Tecnología Web Tema 2: Hojas de estilo Transparencia 37 Bordes CSS: propiedades Propiedades aplicables a los bordes border-top-width thin, medium, thick, XX unidades border-bottom-width thin, medium, thick, thin medium thick XX unidades border-left-width thin, medium, thick, XX unidades border-right-width thin, medium, thick, XX unidades border-width g Engloba las cuatro anteriores none, dottet, dashed, solid, double, groove, ridge, inset, border-style outset border-color nombreColor, valor RGB Tecnología Web Tema 2: Hojas de estilo Transparencia 38
  20. 20. Visibilidad CSS: propiedades Propiedades de visibilidad visibility hidden, visible, collapse, inherit display inline, block, none, list-item, run-in, inline-block, inherit,… clip p rect( x1, y1, x2, y2 , auto, inherit ( ,y , ,y , overflow auto, scroll, hidden,, visible, inherit width XX unidades height XX unidades vertical-align e tical align baseline, sub, super, t b li b top, t t t text-top, middle iddl visibility define si el elemento se ve o no al cargar la página. i ibilit e página display define si el elemento ocupa o no lugar en el flujo HTML. clip define el área de recorte del elemento. Solo se verá la parte definida por rect elemento overflow indica si el tratamiento a aplicar ante desbordamientos del contenido de un elemento. Tecnología Web Tema 2: Hojas de estilo Transparencia 39 Ejemplo CSS body { .titulo { font-family: Arial, "Helvetica", sans-serif; text-align: left; font-size: .8em; 8em; font-weight: bold; width: 650px; font-size: 1.2em; color: #134d86; margin-top: 1.5em; margin: 20px; } width: 100%; id h 00% border: solid 1px #134d86; *{ background: rgb(250,240,220); margin: 0; } padding: 0; } h1.titulo { a:link, a:hover, a:visited { , , text-align: text align: center; font-family: Tahoma; font-size: 1.5em; color: #134d86; margin-bottom: 1.5em; } background: #cccccc; text-decoration: underline; } p.titulo + p { padding: 2px; } a:hover { l color: #eeeeee; p.titulo + p:first-letter { background: #134d86; } font-size: 180%; } Tecnología Web Tema 2: Hojas de estilo Transparencia 40
  21. 21. Ejemplo CSS p.fondoOscuro { border: solid 1px rgb(230 230 255); rgb(230,230,255); border-left: 0; border-right: 0; background: #134d86; } p.fondoOscuro a:link, a:visited { color:#134d86; background: rgb(250,240,220); } p.fondoOscuro a:hover { color: rgb(250,240,220); background: #134066; border: dotted 1px rgb(250,240,220); } p g ( , , ); .lClara{ color: rgb(250,240,220); } Tecnología Web Tema 2: Hojas de estilo Transparencia 41 Ejemplo CSS <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <link rel="stylesheet" href=“selectores.css" type="text/css" /> y yp / / <title>Tema 2: Selectores</title> </head> y <body> <h1 class="titulo">Nuevos avances en física</h1> <p class="titulo">Transformando el oro en plomo.</p> p p p <p class="fondoOscuro lClara"> ---------- Para más detalles consultar la <a href="tesis.htm">Tesis de transmutación.</a> </p> <p class="titulo">Máquina de la inactividad perpetua.</p> <p>--------- Para recibir una muestra gratuita por sólo 99,9 Euros rellene nuestro <a h f " href="perpetuo.html">formulario de pedido.</a> h l" f l i d did / </p> </body> </html> </ht l> Tecnología Web Tema 2: Hojas de estilo Transparencia 42
  22. 22. Ejemplo CSS Tecnología Web Tema 2: Hojas de estilo Transparencia 43 Tendencias CSS: Maquetación de Sitios Web Orígenes: Uso intensivo de elemento table Maquetación de sitios web mediante tablas haciendo uso de border=0, utilización del elemento div para implementación de capas. Tendencia Actual: independencia entre diseño y estilo. Utilización del elemento div como fundamento para el diseño/maquetación web. di ñ / t ió b Utilización del elemento table para la presentación de datos tabulados. Tecnología Web Tema 2: Hojas de estilo Transparencia 44
  23. 23. Utilización de Div CSS: Maquetación de Sitios Web Utilización de atributo id para diferenciar los principales elementos de maquetación (cabecera menú contenidos (cabecera, menú, contenidos, pie). Existencia de un contenedor principal en el que se ubican todos los elementos. elementos Utilización de las propiedades de posicionamiento (position, clear y float) y tamaño (width y height). Tecnología Web Tema 2: Hojas de estilo Transparencia 45 Ejemplo de utilización de Div CSS: Maquetación de Sitios Web Tecnología Web Tema 2: Hojas de estilo Transparencia 46
  24. 24. Ejemplo de utilización de Div CSS: Maquetación de Sitios Web /* estilos basicos */ #menuIzq{ div{ float: left; border: dotted 1px #134d86; width: 15%; margin: 4px; min-height: 250px; background: rgb(220,230,255); } text-align: center; #contenido{ } float: right; min-height: 250px; g p ; /* bl bloques */ width: 81%; #contenedor{ width: 650px; } background: #FFB; #pie{ } clear: both; } #cabecera{ height: 90px; } Tecnología Web Tema 2: Hojas de estilo Transparencia 47 Ejemplo de utilización de Div CSS: Maquetación de Sitios Web <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es"> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <link rel="stylesheet" href=“div.css" type="text/css" /> y yp / / <title>Tema 2: Diseño mediante divs</title> </head> <body> <div id="contenedor"> <div id="cabecera">Cabecera</div> <div id="menuIzq">Menu</div> <div id="contenido">Contenido</div> <div id="pie">Pie</div> </div> </body> </html> Tecnología Web Tema 2: Hojas de estilo Transparencia 48
  25. 25. Posicionamiento CSS: Maquetación de Sitios Web El objetivo es tener mayor control sobre la colocación de elementos contenedores de una página (div y span) span). Propiedades implicadas en el posicionamiento: position: Aplicable a todas las etiquetas. Aunque lo habitual es usarla con DIV ó SPAN. Valores posibles: static, absolute, relative left indica la distancia por la izquierda. izquierda top indica la distancia por la arriba. width indica anchura. Tecnología Web Tema 2: Hojas de estilo Transparencia 49 Posicionamiento CSS: Maquetación de Sitios Web static Se sigue el flujo normal de HTML sin fijarse en las coordenadas. absolute Las coordenadas definen un posición absoluta respecto al comienzo de la página o del elemento que á lo contiene. relative Las coordenadas definen un posición relativa respecto al elemento HTML anterior. Tecnología Web Tema 2: Hojas de estilo Transparencia 50
  26. 26. Posicionamiento CSS: Maquetación de Sitios Web Cuando varios elementos se superponen es necesario controlar cuales están encima de los otros. Para ello se otros usa la propiedad z-index. El elemento que tenga el valor de z-index más alto se visualizará encima de los demás. <div style=“position:absolute; top:20px; left:20px; width:250px; height:100px; z-index:0”> <img src=“debajo.gif”> </div> <div style=“position:absolute; top:40px; left:50px; width:100px; height:300px; z-index:1”> z index:1 > <img src=“encima.gif”> </div> Tecnología Web Tema 2: Hojas de estilo Transparencia 51

×