Diseno de Aplicaciones Web

Juan Morales del Olmo

17 de Febrero de 2015

CSS (Cascading Style Sheets)

Pasado

I Al principio no haba CSS

I Todo dentro de HTML

I Noticias

I Separacion de conceptos, crearon CSS para describir como laweb se iba a ver.

Pasado

I Al principio no haba CSS

I Todo dentro de HTMLI Noticias

I Separacion de conceptos, crearon CSS para describir como laweb se iba a ver.

Pasado

I Al principio no haba CSS

I Todo dentro de HTMLI Noticias

I Separacion de conceptos, crearon CSS para describir como laweb se iba a ver.

Estandar en progreso

I No esta terminado/cerrado

I Siguen definiendo partes de CSS 3

I La implementacion es variable entre navegadores(inconsistencias, prefijos, . . . )

I Usar Can I use:http://caniuse.com/#feat=transforms3d

Estandar en progreso

I No esta terminado/cerrado

I Siguen definiendo partes de CSS 3

I La implementacion es variable entre navegadores(inconsistencias, prefijos, . . . )

I Usar Can I use:http://caniuse.com/#feat=transforms3d

Estandar en progreso

I No esta terminado/cerrado

I Siguen definiendo partes de CSS 3

I La implementacion es variable entre navegadores(inconsistencias, prefijos, . . . )

I Usar Can I use:http://caniuse.com/#feat=transforms3d

Sintaxis

I Son un conjunto de reglas

I Describen como representar las etiquetas del HTML

selector: {

property: value;

}

Sintaxis

I Son un conjunto de reglas

I Describen como representar las etiquetas del HTML

selector: {

property: value;

}

Donde se ponen las reglas CSS ?

I En un archivo con extension .css

I

I Recomendado

I En el del html entre

I Desaconsejado

I Como atributos de las etiquetas html

I Desaconsejado

Donde se ponen las reglas CSS ?

I En un archivo con extension .css

I I Recomendado

I En el del html entre

I Desaconsejado

I Como atributos de las etiquetas html

I Desaconsejado

Donde se ponen las reglas CSS ?

I En un archivo con extension .css

I I Recomendado

I En el del html entre

I Desaconsejado

I Como atributos de las etiquetas html

I Desaconsejado

Donde se ponen las reglas CSS ?

I En un archivo con extension .css

I I Recomendado

I En el del html entre

I Desaconsejado

I Como atributos de las etiquetas html

I Desaconsejado

Donde se ponen las reglas CSS ?

I En un archivo con extension .css

I I Recomendado

I En el del html entre

I Desaconsejado

I Como atributos de las etiquetas html

I Desaconsejado

Donde se ponen las reglas CSS ?

I En un archivo con extension .css

I I Recomendado

I En el del html entre

I Desaconsejado

I Como atributos de las etiquetas html

I Desaconsejado

Selectores Importantes

I Basicos

I Tipo: p

I Los nombres de las etiquetas HTML

I Clase: .classname

I

I ID: #idname

I

Selectores Importantes

I Basicos

I Tipo: p

I Los nombres de las etiquetas HTML

I Clase: .classname

I

I ID: #idname

I

Selectores Importantes

I Basicos

I Tipo: p

I Los nombres de las etiquetas HTML

I Clase: .classname

I

I ID: #idname

I

Selectores Importantes

I Basicos

I Tipo: p

I Los nombres de las etiquetas HTML

I Clase: .classname

I

I ID: #idname

I

Selectores Importantes

I Basicos

I Tipo: p

I Los nombres de las etiquetas HTML

I Clase: .classname

I

I ID: #idname

I

Selectores Importantes

I Basicos

I Tipo: p

I Los nombres de las etiquetas HTML

I Clase: .classname

I

I ID: #idname

I

Selectores Importantes

I Basicos

I Tipo: p

I Los nombres de las etiquetas HTML

I Clase: .classname

I

I ID: #idname

I

Selectores Importantes

I Combinaciones

I Hijos inmediatos: A > B

I Todos los B cuyo padre sea A

I Descendientes: A B

I Todos los B con algun ancestro A

I Alternativos: A, B

I Tanto los A como los B

Selectores Importantes

I Combinaciones

I Hijos inmediatos: A > B

I Todos los B cuyo padre sea A

I Descendientes: A B

I Todos los B con algun ancestro A

I Alternativos: A, B

I Tanto los A como los B

Selectores Importantes

I Combinaciones

I Hijos inmediatos: A > B

I Todos los B cuyo padre sea A

I Descendientes: A B

I Todos los B con algun ancestro A

I Alternativos: A, B

I Tanto los A como los B

Selectores Importantes

I Combinaciones

I Hijos inmediatos: A > B

I Todos los B cuyo padre sea A

I Descendientes: A B

I Todos los B con algun ancestro A

I Alternativos: A, B

I Tanto los A como los B

Selectores Importantes

I Combinaciones

I Hijos inmediatos: A > B

I Todos los B cuyo padre sea A

I Descendientes: A B

I Todos los B con algun ancestro A

I Alternativos: A, B

I Tanto los A como los B

Selectores Importantes

I Combinaciones

I Hijos inmediatos: A > B

I Todos los B cuyo padre sea A

I Descendientes: A B

I Todos los B con algun ancestro A

I Alternativos: A, B

I Tanto los A como los B

Selectores Importantes

I Combinaciones

I Hijos inmediatos: A > B

I Todos los B cuyo padre sea A

I Descendientes: A B

I Todos los B con algun ancestro A

I Alternativos: A, B

I Tanto los A como los B

Selectores Importantes

I Pseudo-clases

I :hoverI :visitedI :first-child, :nth-child(2n+1)

Selectores Importantes

I Pseudo-clases

I :hover

I :visitedI :first-child, :nth-child(2n+1)

Selectores Importantes

I Pseudo-clases

I :hoverI :visited

I :first-child, :nth-child(2n+1)

Selectores Importantes

I Pseudo-clases

I :hoverI :visitedI :first-child, :nth-child(2n+1)

Modelo de Cajas

Medidas

I px: pxeles

I em: la medida del ancho de una M. Bueno para zooms.I %: Porcentaje sobre lo disponible

I Otros: cm, mm, in, pt, pc, ex

I Usar: px, em y %

I Explicacion de W3C

Medidas

I px: pxelesI em: la medida del ancho de una M. Bueno para zooms.

I %: Porcentaje sobre lo disponible

I Otros: cm, mm, in, pt, pc, ex

I Usar: px, em y %

I Explicacion de W3C

Medidas

I px: pxelesI em: la medida del ancho de una M. Bueno para zooms.I %: Porcentaje sobre lo disponible

I Otros: cm, mm, in, pt, pc, ex

I Usar: px, em y %

I Explicacion de W3C

Medidas

I px: pxelesI em: la medida del ancho de una M. Bueno para zooms.I %: Porcentaje sobre lo disponible

I Otros: cm, mm, in, pt, pc, ex

I Usar: px, em y %

I Explicacion de W3C

Medidas

I px: pxelesI em: la medida del ancho de una M. Bueno para zooms.I %: Porcentaje sobre lo disponible

I Otros: cm, mm, in, pt, pc, ex

I Usar: px, em y %

I Explicacion de W3C

Medidas

I px: pxelesI em: la medida del ancho de una M. Bueno para zooms.I %: Porcentaje sobre lo disponible

I Otros: cm, mm, in, pt, pc, ex

I Usar: px, em y %

I Explicacion de W3C

Herencia

I Se aplican en cascada, sobrescribiendo reglas parcialmente

1. Estilo por defecto del Navegador

1.2 Estilos en orden de definicion

1.2.3 Atributo de elemento style=""

I La mayora de propiedades se heredan de padres a hijosp { color: green; } el perro es verde tambien

I Otras propiedades como border no se heredanI Hay modificadores como !important o inherit

Herencia

I Se aplican en cascada, sobrescribiendo reglas parcialmente

1. Estilo por defecto del Navegador

1.2 Estilos en orden de definicion

1.2.3 Atributo de elemento style=""

I La mayora de propiedades se heredan de padres a hijosp { color: green; } el perro es verde tambien

I Otras propiedades como border no se heredanI Hay modificadores como !important o inherit

Herencia

I Se aplican en cascada, sobrescribiendo reglas parcialmente

1. Estilo por defecto del Navegador

1.2 Estilos en orden de definicion

1.2.3 Atributo de elemento style=""

I La mayora de propiedades se heredan de padres a hijosp { color: green; } el perro es verde tambien

I Otras propiedades como border no se heredan

I Hay modificadores como !important o inherit

Herencia

I Se aplican en cascada, sobrescribiendo reglas parcialmente

1. Estilo por defecto del Navegador

1.2 Estilos en orden de definicion

1.2.3 Atributo de elemento style=""

I La mayora de propiedades se heredan de padres a hijosp { color: green; } el perro es verde tambien

I Otras propiedades como border no se heredanI Hay modificadores como !important o inherit

Inspector de elementos

I Lanzar con F12I Originalmente Firebug

I Comprobar modelo de caja

I Comprobar valores calculadosI Comprobar estilos sobrescritos

Inspector de elementos

I Lanzar con F12I Originalmente Firebug

I Comprobar modelo de cajaI Comprobar valores calculados

I Comprobar estilos sobrescritos

Inspector de elementos

I Lanzar con F12I Originalmente Firebug

I Comprobar modelo de cajaI Comprobar valores calculadosI Comprobar estilos sobrescritos

Propiedades CSS mas usadas

Propiedades CSS mas usadas

Referencias de propiedades: MDN, css-tricks

I display

I none, inline, block, inline-block

I position

I static, relative, absolute, fixed

I top, right, bottom, left

I solo con position != static

I float

I none, left, right

Propiedades CSS mas usadas

Referencias de propiedades: MDN, css-tricks

I display

I none, inline, block, inline-block

I position

I static, relative, absolute, fixed

I top, right, bottom, left

I solo con position != static

I float

I none, left, right

Propiedades CSS mas usadas

Referencias de propiedades: MDN, css-tricks

I display

I none, inline, block, inline-block

I position

I static, relative, absolute, fixed

I top, right, bottom, left

I solo con position != static

I float

I none, left, right

Propiedades CSS mas usadas

Referencias de propiedades: MDN, css-tricks

I display

I none, inline, block, inline-block

I position

I static, relative, absolute, fixed

I top, right, bottom, left

I solo con position != static

I float

I none, left, right

Propiedades CSS mas usadas

Referencias de propiedades: MDN, css-tricks

I display

I none, inline, block, inline-block

I position

I static, relative, absolute, fixed

I top, right, bottom, left

I solo con position != static

I float

I none, left, right

Propiedades CSS mas usadas

Referencias de propiedades: MDN, css-tricks

I display

I none, inline, block, inline-block

I position

I static, relative, absolute, fixed

I top, right, bottom, left

I solo con position != static

I float

I none, left, right

Propiedades CSS mas usadas

Referencias de propiedades: MDN, css-tricks

I display

I none, inline, block, inline-block

I position

I static, relative, absolute, fixed

I top, right, bottom, left

I solo con position != static

I float

I none, left, right

Propiedades CSS mas usadas

Referencias de propiedades: MDN, css-tricks

I display

I none, inline, block, inline-block

I position

I static, relative, absolute, fixed

I top, right, bottom, left

I solo con position != static

I float

I none, left, right

I color

I red, #rgb, #rrggbb (HEX), rgba(255,255,255,1)

I text-align

I left, right, center

I vertical-align

I bottom, middle, super (solo para inlines y table cells)

I line-height

I normalmente en em

I color

I red, #rgb, #rrggbb (HEX), rgba(255,255,255,1)

I text-align

I left, right, center

I vertical-align

I bottom, middle, super (solo para inlines y table cells)

I line-height

I normalmente en em

I color

I red, #rgb, #rrggbb (HEX), rgba(255,255,255,1)

I text-align

I left, right, center

I vertical-align

I bottom, middle, super (solo para inlines y table cells)

I line-height

I normalmente en em

I color

I red, #rgb, #rrggbb (HEX), rgba(255,255,255,1)

I text-align

I left, right, center

I vertical-align

I bottom, middle, super (solo para inlines y table cells)

I line-height

I normalmente en em

I color

I red, #rgb, #rrggbb (HEX), rgba(255,255,255,1)

I text-align

I left, right, center

I vertical-align

I bottom, middle, super (solo para inlines y table cells)

I line-height

I normalmente en em

I color

I red, #rgb, #rrggbb (HEX), rgba(255,255,255,1)

I text-align

I left, right, center

I vertical-align

I bottom, middle, super (solo para inlines y table cells)

I line-height

I normalmente en em

I color

I red, #rgb, #rrggbb (HEX), rgba(255,255,255,1)

I text-align

I left, right, center

I vertical-align

I bottom, middle, super (solo para inlines y table cells)

I line-height

I normalmente en em

I color

I red, #rgb, #rrggbb (HEX), rgba(255,255,255,1)

I text-align

I left, right, center

I vertical-align

I bottom, middle, super (solo para inlines y table cells)

I line-height

I normalmente en em

I font-family

I Open Sans

I font-size

I 10, 11, 12, 14px, . . .

I font-style

I normal, italic

I text-decoration

I underline, line-through, overline, blink

I font-family

I Open Sans

I font-size

I 10, 11, 12, 14px, . . .

I font-style

I normal, italic

I text-decoration

I underline, line-through, overline, blink

I font-family

I Open Sans

I font-size

I 10, 11, 12, 14px, . . .

I font-style

I normal, italic

I text-decoration

I underline, line-through, overline, blink

I font-family

I Open Sans

I font-size

I 10, 11, 12, 14px, . . .

I font-style

I normal, italic

I text-decoration

I underline, line-through, overline, blink

I font-family

I Open Sans

I font-size

I 10, 11, 12, 14px, . . .

I font-style

I normal, italic

I text-decoration

I underline, line-through, overline, blink

I font-family

I Open Sans

I font-size

I 10, 11, 12, 14px, . . .

I font-style

I normal, italic

I text-decoration

I underline, line-through, overline, blink

I font-family

I Open Sans

I font-size

I 10, 11, 12, 14px, . . .

I font-style

I normal, italic

I text-decoration

I underline, line-through, overline, blink

I font-family

I Open Sans

I font-size

I 10, 11, 12, 14px, . . .

I font-style

I normal, italic

I text-decoration

I underline, line-through, overline, blink

I width, height

I variantes max-heigth, min-width, . . .

I border (-top, -right, -bottom, -left, -color, -style, -radius)

I 1px solid black

I margin ( -top, -right, -bottom, -left)

I padding ( -top, -right, -bottom, -left)

I width, height

I variantes max-heigth, min-width, . . .

I border (-top, -right, -bottom, -left, -color, -style, -radius)

I 1px solid black

I margin ( -top, -right, -bottom, -left)

I padding ( -top, -right, -bottom, -left)

I width, height

I variantes max-heigth, min-width, . . .

I border (-top, -right, -bottom, -left, -color, -style, -radius)

I 1px solid black

I margin ( -top, -right, -bottom, -left)

I padding ( -top, -right, -bottom, -left)

I width, height

I variantes max-heigth, min-width, . . .

I border (-top, -right, -bottom, -left, -color, -style, -radius)

I 1px solid black

I margin ( -top, -right, -bottom, -left)

I padding ( -top, -right, -bottom, -left)

I width, height

I variantes max-heigth, min-width, . . .

I border (-top, -right, -bottom, -left, -color, -style, -radius)

I 1px solid black

I margin ( -top, -right, -bottom, -left)

I padding ( -top, -right, -bottom, -left)

I width, height

I variantes max-heigth, min-width, . . .

I border (-top, -right, -bottom, -left, -color, -style, -radius)

I 1px solid black

I margin ( -top, -right, -bottom, -left)

I padding ( -top, -right, -bottom, -left)

I background (-color, -image, -repeat, -position)

I background: url(topbanner.png) #00D repeat-y fixed;

I overflow

I visible, hidden, scroll, auto

I visibility

I Como display: none pero ocupa espacio

I opacity

I Decimales de 0 a 1

I background (-color, -image, -repeat, -position)

I background: url(topbanner.png) #00D repeat-y fixed;

I overflow

I visible, hidden, scroll, auto

I visibility

I Como display: none pero ocupa espacio

I opacity

I Decimales de 0 a 1

I background (-color, -image, -repeat, -position)

I background: url(topbanner.png) #00D repeat-y fixed;

I overflow

I visible, hidden, scroll, auto

I visibility

I Como display: none pero ocupa espacio

I opacity

I Decimales de 0 a 1

I background (-color, -image, -repeat, -position)

I background: url(topbanner.png) #00D repeat-y fixed;

I overflow

I visible, hidden, scroll, auto

I visibility

I Como display: none pero ocupa espacio

I opacity

I Decimales de 0 a 1

I background (-color, -image, -repeat, -position)

I background: url(topbanner.png) #00D repeat-y fixed;

I overflow

I visible, hidden, scroll, auto

I visibility

I Como display: none pero ocupa espacio

I opacity

I Decimales de 0 a 1

I background (-color, -image, -repeat, -position)

I background: url(topbanner.png) #00D repeat-y fixed;

I overflow

I visible, hidden, scroll, auto

I visibility

I Como display: none pero ocupa espacio

I opacity

I Decimales de 0 a 1

I background (-color, -image, -repeat, -position)

I background: url(topbanner.png) #00D repeat-y fixed;

I overflow

I visible, hidden, scroll, auto

I visibility

I Como display: none pero ocupa espacio

I opacity

I Decimales de 0 a 1

I background (-color, -image, -repeat, -position)

I background: url(topbanner.png) #00D repeat-y fixed;

I overflow

I visible, hidden, scroll, auto

I visibility

I Como display: none pero ocupa espacio

I opacity

I Decimales de 0 a 1

CSS (Cascading Style Sheets)Propiedades CSS ms usadas