Hojas de Estilos - CSS

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#

A partir de la versi"n ( de )*M+& Diferentes tipos de ,o'as de estilo#

Estndar# CSS- )o'as de .stilos en Cascada& /ersi"n bien soportada por los nave$adores# CSS 2.1

Son ms potentes y c"modas 0ue el formato en )*M+&

Curso 2013/14

Desarrollo de Aplicaciones Web

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

Desarrollo de Aplicaciones Web

*ipos de selectores

3asado en el elemento eti!"eta##

p {color: white;} p, h1 {color: white;}

3asado en el conte$to del elemento#

p strong {color: blue; } Clase# span.rojo {color: red;} Id# div#introduccion {font-size: 14pt;}

3asado en la clase o identificador del elemento#

3asado en una pse"doclase 4estado5 de un elemento#

a:hover {color: pink;}

Desarrollo de Aplicaciones Web 4

Curso 2013/14

Selecci"n basada en el elemento

Aplica un estilo a todas las declaraciones de uno o varios tipos de eti0uetas& .'emplo#

6Aplica color de te2to verde a todos lo prrafos7& p {color: green;}

Se pueden indicar varias eti0uetas separadas por comas#

p, h1 {color: green;}

Curso 2013/14

Desarrollo de Aplicaciones Web

Selecci"n por clase o ID

3asado en la clase o identificador de cual0uier eti0ueta#

Clase# span.rojo {color: red;} Identificador# div#introduccion {font-size: 24pt;}

Se pueden aplicar a toda "na clase- con independencia de la eti0ueta#

.rojo {color: red;}

8ara identificadores- la eti0ueta puede omitirse#

#introduccion {font-size: 24pt;}

Curso 2013/14

Desarrollo de Aplicaciones Web

Selecci"n basada en el conte2to

.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

Selecci"n se$;n el estado 4pseudoclase5

Aplicable a v%nc"los# <a> .stados#

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#

p:first-line {color:red;} p:first-letter {font-size:!2pt;}

8rimera letra#

("eden com,inarse varios tipos de selectores#

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

Desarrollo de Aplicaciones Web

Declaraci"n de estilos e2terna

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=/!/ >

Se pueden enla?ar varias ,o'as de estilo en una misma p$ina %eb&

Desarrollo de Aplicaciones Web 10

Curso 2013/14

Declaraci"n de estilos interna y local

Interna# en la ca,ecera del documento

$style t%pe&@te't(css@) * $(st%le)

0ocal+ en cual0uier eti0ueta utili?ando atributo st*le&

.'&# $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

*ipos de )o'as de .stilo

)o'as de estilo del programador1dise2ador#

+as 0ue definimos al editar una p$ina %eb&

)o'a de estilo del navegador#

Aplica estilos por defecto para a0uellas propiedades para las 0ue el pro$ramador no ,a definido nin$;n formato&

)o'a de estilos del "s"ario#

Definida por el usuario del nave$ador& 1eempla?a a los estilos del pro$ramador y nave$ador&

Curso 2013/14

Desarrollo de Aplicaciones Web

12

Derar0u<a de un documento )*M+

+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

Desarrollo de Aplicaciones Web

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

Desarrollo de Aplicaciones Web

15

Cascada

A una declaraci"n concreta de una eti0ueta pueden lle$ar estilos contradictorios&

.'emplo# color ro'o y verde a la ve? para un prrafo&

.l conflicto es resuelto en funci"n de la especificidad de las re$las 0ue $eneran el conflicto&

3rden de prioridad de las reglas+

id H clase H elemento H ,eredadas

Desarrollo de Aplicaciones Web

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&

Si persiste el conflicto- tiene prioridad#

Curso 2013/14

Desarrollo de Aplicaciones Web

17

/alores de propiedades

Medidas# valor y unidad- sin espacio&

.'& 1(pt- 2cm-12p2- etc&

Medidas relativas#

em# relativo al tamaIo de la letra 6M7& .'&# 2em 8orcenta'es& .'& 100J

6R0# url-fichero"#pg.

U1+ relativas- respecto a la ,o'a de estilo&

.alores en"merados.

.'&# "order-style: none, dotted, dashed, *

Curso 2013/14

Desarrollo de Aplicaciones Web

18

Formato de fuentes

7ipo de f"ente# font-fa#ily

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;}

8"ente en c"rsiva# font-style

obli1ue 4oblicuo5- italic 4cursiva5 y nor,al

Curso 2013/14

Desarrollo de Aplicaciones Web

19

Formato de fuentes

Fuente en negrita# font-$eight

"old# ne$rita intermedia /alores relativos# "older, lighter /alor numKrico 4m;ltiplo de 1005# entre 100 y L00 /alor nor#al para te2to normal&

7ama2o de la fuente# font-si%e

.alor * "nidad# 12pt, 1"2e, Relativo al padre# 1&Mem- 1M0J- larger- s,aller&

Curso 2013/14

Desarrollo de Aplicaciones Web

20

Formato de te2to

Interlineado# line-height

/alor proporcional al tamaIo de la fuente& .'&# 1&M /alor porcentual# 1M0J e0uivale a 1&M

7odas las propiedades de te2to 'untas# font

>rden de declaraci"n# font-style, font-weight, font-size/line-height, font-family .'# font: italic bold 13pt(1245 0rial

Curso 2013/14

Desarrollo de Aplicaciones Web

21

Color

Color del te2to# 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#

p { color: red; } p { color: 44!!66; } p { color: rgb-2!!, 244, !2.; }

Curso 2013/14

Desarrollo de Aplicaciones Web

22

Fondo

Color de fondo+ ,ac&gro"nd:color

*oma un valor de color o transparent&

Imagen de fondo+ ,ac&gro"nd:image

Se indica la url de la ima$en# .'& url-i,agen"#pg.

Repeticin de la imagen de fondo+ ,ac&gro"nd:repeat

repeat, repeat-', repeat-%, no-repeat

Sit"acin de la imagen c"ando no se repite+ ,ac&gro"nd:position

.'emplos# -botto,, left. aba'o y a la i?0uierda, -right,

top. a la derec,a y arriba, -245, 245. al M0J en los dos e'es

Curso 2013/14

Desarrollo de Aplicaciones Web

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,; }

Sangr%a de primera l%nea# text-indent

.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

Espacio en ,lanco# $hite-space

pre# se comporta como la eti0ueta GpreH- sin modificar

fuente

no$rap# evita 0ue el nave$ador parta un fra$mento de te2to&

;lineacin de te$to# text-align

{left, right, center, #ustif%}

Curso 2013/14

Desarrollo de Aplicaciones Web

25

Formato especial de te2to

.fecto versales# font-variant

Muestra las min;sculas como may;sculas pe0ueIas& {s#all-caps, nor,al}

Decorar el te$to# text-decoration

{underline, overline, line-through, none}

Otil para 0uitarlo del formato predefinido& .'& v<nculos&

Cam,io formato te$to# text-transfor#

{capitalize, uppercase, lowercase, none}

Curso 2013/14

Desarrollo de Aplicaciones Web

26

+istas

.i2etas * n5meros# list-style-type

+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&

Utili?ar imgenes# list-style-i#age

(osicin del marcador# list-style-position

Curso 2013/14

Desarrollo de Aplicaciones Web

27

8resentaci"n con CSS

.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

Desarrollo de Aplicaciones Web

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

Desarrollo de Aplicaciones Web

29

3ordes

7ipo de borde# "order-style

{none, dotted, dashed, solid, double, groove, ridge, inset, outset}

;nc'"ra# "order-$idth

.'&# p { border-width: 2p'; } /alores predefinidos# {thin, ,ediu,,

thick}

Color# "order-color

8ara establecer el color del borde& 8or defecto- tiene el color del te2to del elemento&

Aplicar propiedades a "n solo lado#

border-top, border-left, border-right, border-botto,

.'&# border-top-width:

thin

Curso 2013/14

Desarrollo de Aplicaciones Web

30

1elleno y mr$enes

Relleno# padding

.'&# p { padding: 2p'; }

Aplicaci"n a un solo lado# padding-top, etc" .'&# p {,argin: 145; }, div {,argin: !4p'; } /alor a"to# para e0uilibrar los mr$enes

Mrgenes# #argin

<til para centrar

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

Desarrollo de Aplicaciones Web

31

Anc,ura- altura y desbordamiento

;nc'"ra * alt"ra# $idth y height

Anc,o del rea de contenido&

/alor de medida 4p2- pt- etc&5 o relativo& .'&# p { width: 245; }, div { width: 744p'; }

Des,ordamiento del contenido# overflo$

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

*ipos de ca'as y visibilidad

Dos tipos ca'as 4tipos de eti0uetas5# de ,lo!"e y en l%nea& Cambiar el tipo de eti0ueta# display

{none, block, inline} /alor none# ,ace desaparecer la ca'a&

=3 conf"ndir con la propiedad visi"ility

hidden: oculta la ca'a- pero !"eda el espacio 44#&

.'emplo# convertir v<nculos 4elemento en l<nea5 en blo0ues

navigation a {displa%: block}

Curso 2013/14

Desarrollo de Aplicaciones Web

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#

top, right, "otto#, left

Importante# para 0ue funcione correctamente el padre debe posicionarse& bg {

position: a"solute' top: 224p'; left: 25;

.'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

Desarrollo de Aplicaciones Web

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&

.'&# sacar los encabe?ados a la i?0uierda

h2, h! { position: relative' left: -22p' }

Curso 2013/14

Desarrollo de Aplicaciones Web

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

Desarrollo de Aplicaciones Web

38

.lementos flotantes

8ropiedad# float

Comportamiento similar al atri,"to align de imgenes * ta,las.

.alores# {left, right}

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&

(ara evitar !"e floten# clear

Similar al atri,"to clear de br.

.alores+ {left, right, both, none}

Curso 2013/14

Desarrollo de Aplicaciones Web

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

Desarrollo de Aplicaciones Web

40

*ablas con propiedades de estilo

;lineacin de las celdas#

)ori?ontal# te't-align /ertical# vertical-align

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:

/isuali?ar celdas vac%as# e#pty-cells {show, hide}

Desarrollo de Aplicaciones Web 41

Curso 2013/14