Professional Documents
Culture Documents
Desarrollo de Aplicaciones Web Departamento Informtica y Sistemas Universidad de Murcia Curso 2012 1!
Introducci"n
Motivacin#
Separar el formato del contenido y estructura de una p$ina %eb& Con'unto de propiedades de formato ms re$las de definici"n y aplicaci"n&
Hoja de estilo#
Estndar# CSS- )o'as de .stilos en Cascada& /ersi"n bien soportada por los nave$adores# CSS 2.1
Curso 2013/14
1e$la de .stilo
Regla de estilo# componente de una ,o'a de estilo& Una re$la est formada por#
Selector# indica las eti0uetas a las 0ue se aplica& Declaracin# con'unto de pares propiedad valor&
.'&# p {color: white; background-color: black;} Importante# un error de sinta2is ,ace 0ue la re$la sea i$norada&
Curso 2013/14
*ipos de selectores
p strong {color: blue; } Clase# span.rojo {color: red;} Id# div#introduccion {font-size: 14pt;}
Curso 2013/14
Aplica un estilo a todas las declaraciones de uno o varios tipos de eti0uetas& .'emplo#
p, h1 {color: green;}
Curso 2013/14
Curso 2013/14
.lemento 0ue contiene a otro elemento- con independencia del nivel de profundidad .'emplos#
6.stablece el color de te2to ro'o a todas las declaraciones stron$ dentro de cual0uier blo0ue div7 div strong {color: red; } 6.stablece el color de te2to ro'o a todas las declaraciones stron$ dentro de cual0uier prrafo del blo0ue div identificado como 9introduccion: 7 div introduccion p strong {color: red; }
Desarrollo de Aplicaciones Web 7
Curso 2013/14
lin&# no visitado visited# visitado foc"s# cuando tiene el foco de control 'over# cuando el rat"n est sobre el enlace active# el momento en el 0ue se pulsa a:link {color:red;}
.'&#
Un v<nculo puede estar en varios estados (ara !"e no se an"len las propiedades entre s%) 'a* !"e declararlas en el orden anterior+ lin&) visited) etc.
Desarrollo de Aplicaciones Web 8
Curso 2013/14
Selectores = >tros
(se"doelementos#
8rimera l<nea#
8rimera letra#
Conte2to elemento 4clase o ID5 4pseudoclase o pseudoelemento5 .'# div introduccion span"ro#o {color: red;} .'# div introduccion p:first-letter {color: green;}
Curso 2013/14
Declaracin e$terna# en un fic,ero independiente con e2tensi"n .css Mejor sol"cin para compartir el estilo en todo "n sitio -e,. .inc"lar la 'oja de estilos en la p$ina# .n la ca,ecera del documento
<link rel=/stylesheet/ type=/text css/ href=/!/ >
Curso 2013/14
.'&# $p style&@color:red;@) *$(p) A> es necesario especificar el selector& .s impl%cito& *ampoco se utili?an llaves B C Si ,ubiera 0ue utili?ar comillas en la declaraci"n- deben ser sencillas# 9 9& .'& nombres de fuentes&
Desarrollo de Aplicaciones Web 11
Curso 2013/14
Aplica estilos por defecto para a0uellas propiedades para las 0ue el pro$ramador no ,a definido nin$;n formato&
Definida por el usuario del nave$ador& 1eempla?a a los estilos del pro$ramador y nave$ador&
Curso 2013/14
12
+as eti0uetas dentro de una p$ina %eb se or$ani?an como un rbol& Concepto clave para aplicar propiedades y selectores de estilo en funci"n del conte$to& Al$unas propiedades se ,eredan 4EE5&
.'&#
$div) $p) * $strong) * $(strong) $(p) $(div)
Curso 2013/14
13
)erencia
+a ,erencia de propiedades de estilo permite 0ue una propiedad lle$ue a la declaraci"n de una eti0ueta cuando no se ,a definido e2pl<citamente para ella& .sta caracter<stica se basa en el principio de 'erencia#
Una propiedad de estilo no definida para un elemento es ,eredada del elemento padre 0ue lo contiene&
+a mayor parte de las propiedades de estilo se ,eredan- pero no todas& Facilita 0ue los fic,eros con estilos sean ms compactos& Ejemplo# definir el color de la fuente en la eti0ueta GbodyH ,ace 0ue se ,erede en todo el documento&
Desarrollo de Aplicaciones Web 14
Curso 2013/14
)erencia
Curso 2013/14
15
Cascada
Curso 2013/14
16
Cascada
.'emplo#
Sea una declaraci"n GdivH con id 6introduccion7 1e$la 1# div { color: red; } 1e$la 2# div introduccion { color: blue; } .l blo0ue div tendr como color de te2to el a?ul- ya 0ue la re$la 2 es ms espec<fica 0ue la 1& +a re$la marcada como 4important& .'emplo# div introduccion { color: black; +i,portant} Si no ,ay re$las +i,portant- la 5ltima regla !"e se procesa# las re$las se procesan en el orden de declaraci"n&
Curso 2013/14
17
/alores de propiedades
Medidas relativas#
em# relativo al tamaIo de la letra 6M7& .'&# 2em 8orcenta'es& .'& 100J
6R0# url-fichero"#pg.
.alores en"merados.
Curso 2013/14
18
Formato de fuentes
Se pueden indicar varias fuentes separadas por una coma y espacio& Se aplica la primera disponible& 8"entes gen9ricas# monospace- serif- sans-serif- cursivefantasy .'&# p
{font-fa,il%: /erdana, 0rial, sans-serif;}
Curso 2013/14
19
Formato de fuentes
"old# ne$rita intermedia /alores relativos# "older, lighter /alor numKrico 4m;ltiplo de 1005# entre 100 y L00 /alor nor#al para te2to normal&
.alor * "nidad# 12pt, 1"2e, Relativo al padre# 1&Mem- 1M0J- larger- s,aller&
Curso 2013/14
20
Formato de te2to
Interlineado# line-height
/alor proporcional al tamaIo de la fuente& .'&# 1&M /alor porcentual# 1M0J e0uivale a 1&M
>rden de declaraci"n# font-style, font-weight, font-size/line-height, font-family .'# font: italic bold 13pt(1245 0rial
Curso 2013/14
21
Color
/alor enumerado# red, blue, white- N rrggbb en ,e2adecimal- sin comillas rgb-r, g, b.- del 0 al 2MM rgb-r5, g5, b5.
.'emplos#
Curso 2013/14
22
Fondo
Curso 2013/14
23
Formato de prrafo
Espaciado#
.ntre pala,ras# $ord-spacing .ntre letras# letter-spacing .2presado como valor absoluto o relativo& .'&# p { word-spacing: 4"2e,; }
.spacio en blanco al comien?o de la primera l<nea de un prrafo& .2presado como valor absoluto o relativo& Sangra francesa# valor ne$ativo& .'&# p { te't-indent: 1"2e,; }
Desarrollo de Aplicaciones Web 24
Curso 2013/14
Formato de prrafo
fuente
Curso 2013/14
25
Curso 2013/14
26
+istas
+istas no ordenadas# {disc, circle, s1uare} +istas ordenadas# {deci,al, upper-alpha, lower-alpha,
upper-ro,an, lower-ro,an}
Puitar marcador# none& Ima$en de la viIeta en listas no ordenadas# url-i,agen"#pg. /alor none para eliminarla Se recomienda utili?ar im$enes pe0ueIas& 1eempla?a la propiedad list-st%le-t%pe
{inside, outside&
Curso 2013/14
27
.entajas#
+as p$inas %eb son menos comple'as- comparado con el uso de tablas& Aplicar la misma presentaci"n a todo el sitio %eb& +os documentos )*M+ son ms le$ibles y compactos&
Inconvenientes#
8roblema con nave$adores anti$uos& Aave$adores actuales- a veces no interpretan correctamente las propiedades&
Curso 2013/14
28
Modelo de Ca'a
73D3S los elementos de una p$ina %eb se encuentran en una ca'a invisible& Caja# rea de contenidorelleno 4padding5- borde y mar$en& Con propiedades de estilo podemos controlar todas las propiedades de la ca'a&
Curso 2013/14
29
3ordes
;nc'"ra# "order-$idth
thick}
Color# "order-color
8ara establecer el color del borde& 8or defecto- tiene el color del te2to del elemento&
.'&# border-top-width:
thin
Curso 2013/14
30
1elleno y mr$enes
Relleno# padding
Mrgenes# #argin
Entre dos cajas) los mrgenes verticales se s"perponen& Se usa el valor mayor 4EE5 Aplicaci"n a un solo lado# ,argin-top, ,argin-botto,- N
Curso 2013/14
31
Sucede cuando el contenido supera la anc,ura y la altura establecida& visi"le# para 0ue siempre se vea el contenido hidden# si no cabe- se oculta el contenido sobrante& scroll# aIadir siempre barras de despla?amiento& auto# aIadir barras de despla?amiento si es necesario&
Desarrollo de Aplicaciones Web 32
Curso 2013/14
Dos tipos ca'as 4tipos de eti0uetas5# de ,lo!"e y en l%nea& Cambiar el tipo de eti0ueta# display
Curso 2013/14
33
Flu'o de presentaci"n
8or defecto- la visuali?aci"n de una p$ina si$ue el orden de definici"n de las eti0uetas 4esttico5 Modificaciones#
Sacar una ca'a del orden natural y posicionarla respecto al elemento padre 4a,sol"to5 o al nave$ador 4fijo5& Despla?arla respecto a la posici"n 0ue deber<a ocupar en el orden natural 4relativo5
+os despla?amientos ocasionan solapamientos de ca'as& .n caso de solaparse- se puede especificar el orden de solapamiento&
Desarrollo de Aplicaciones Web 34
Curso 2013/14
8osicionamiento absoluto
8ropiedad# position:a"solute
Saca la ca'a fuera del flu'o natural de presentaci"n& Si no se indica la posici"n- aparece en su posici"n natural- pero con solapamientos con el resto de ca'as 0ue se visuali?an sin tenerla en cuenta& 8ara establecer la posici"n respecto a los bordes del padre#
.'emplo#
}
Curso 2013/14 Desarrollo de Aplicaciones Web 35
8osicionamiento fi'o
8ropiedad position:fixed
8arecido al absoluto& .l posicionamiento es respecto a la ventana del nave$ador& Ao est bien soportado por todos los nave$adores&
.'emplo#
navigation { position:fixed' top: 14p'; left: 25; }
Curso 2013/14
36
8osicionamiento relativo
8ropiedad position:relative
Despla?amiento respecto a su posici"n natural& .l resto de elementos no se ve afectados& *ambiKn puede $enerar solapamientos&
Curso 2013/14
37
8osicionamiento !D
8ropiedad# %-index
1esuelve los problemas de solapamiento estableciendo un orden en las ca'as& *oma un valor entero& Mayor valor- ms arriba&
Si no establecemos esta propiedad- las ca'as se apilan en el orden de declaraci"n& .'emplo# bg { z-inde': 1} content {z-inde': 2} navigation {z-inde': !}
Curso 2013/14
38
.lementos flotantes
8ropiedad# float
Se aplica para a0uellas ca'as cuyo anc,o es menor 0ue el de la ca'a padre 0ue la contiene& .l resto de ca'as flotan alrededor&
Curso 2013/14
39
Alineaci"n vertical
8ropiedad# vertical-align
+as ca'as pueden alinearse respecto a la l<nea en la 0ue se encuentran& ,iddle# centrado en la l<nea sub# como sub<ndice super# como super<ndice top# alineado con la parte ms alta de la l<nea de la l%nea& N
Curso 2013/14
40
Espaciado#
+a propiedad padding sustituye al atributo cellpadding +a propiedad "order-spacing e0uivale a cellspacing fi'ed& Anc,o de celdas determinado por la primera fila&
.is"ali>acin# ta"le-layout:
Curso 2013/14