Diseño de Aplicaciones Web
Anuncio
Diseño de Aplicaciones Web
Juan Morales del Olmo
17 de Febrero de 2015
CSS (Cascading Style Sheets)
Pasado
I
Al principio no habı́a CSS
I
Todo dentro de HTML
Pasado
I
Al principio no habı́a CSS
I
I
Todo dentro de HTML
<H3 COLOR=BLUE><CENTER> Noticias
</CENTER></H3>
Pasado
I
Al principio no habı́a CSS
I
I
I
Todo dentro de HTML
<H3 COLOR=BLUE><CENTER> Noticias
</CENTER></H3>
Separación de conceptos, crearon CSS para describir cómo la
web se iba a ver.
Estándar en progreso
I
No está terminado/cerrado
I
Siguen definiendo partes de CSS 3
Estándar en progreso
I
No está terminado/cerrado
I
Siguen definiendo partes de CSS 3
I
La implementación es variable entre navegadores
(inconsistencias, prefijos, . . . )
Estándar en progreso
I
No está terminado/cerrado
I
Siguen definiendo partes de CSS 3
I
La implementación es variable entre navegadores
(inconsistencias, prefijos, . . . )
I
Usar Can I use:
http://caniuse.com/#feat=transforms3d
Sintaxis
I
Son un conjunto de reglas
Sintaxis
I
Son un conjunto de reglas
I
Describen cómo representar las etiquetas del HTML
selector: {
property: value;
}
¿ Dónde se ponen las reglas CSS ?
I
En un archivo con extensión .css
I
<link rel="stylesheet" href="pathTo/style.css"/>
¿ Dónde se ponen las reglas CSS ?
I
En un archivo con extensión .css
I
I
<link rel="stylesheet" href="pathTo/style.css"/>
Recomendado
¿ Dónde se ponen las reglas CSS ?
I
En un archivo con extensión .css
I
I
I
<link rel="stylesheet" href="pathTo/style.css"/>
Recomendado
En el <head> del html entre <style></style>
¿ Dónde se ponen las reglas CSS ?
I
En un archivo con extensión .css
I
I
I
<link rel="stylesheet" href="pathTo/style.css"/>
Recomendado
En el <head> del html entre <style></style>
I
Desaconsejado
¿ Dónde se ponen las reglas CSS ?
I
En un archivo con extensión .css
I
I
I
En el <head> del html entre <style></style>
I
I
<link rel="stylesheet" href="pathTo/style.css"/>
Recomendado
Desaconsejado
Como atributos de las etiquetas html <p
style="color:red;"></p>
¿ Dónde se ponen las reglas CSS ?
I
En un archivo con extensión .css
I
I
I
En el <head> del html entre <style></style>
I
I
<link rel="stylesheet" href="pathTo/style.css"/>
Recomendado
Desaconsejado
Como atributos de las etiquetas html <p
style="color:red;"></p>
I
Desaconsejado
Selectores Importantes
I
Básicos
Selectores Importantes
I
Básicos
I
Tipo: p
Selectores Importantes
I
Básicos
I
Tipo: p
I
Los nombres de las etiquetas HTML
Selectores Importantes
I
Básicos
I
Tipo: p
I
I
Los nombres de las etiquetas HTML
Clase: .classname
Selectores Importantes
I
Básicos
I
Tipo: p
I
I
Los nombres de las etiquetas HTML
Clase: .classname
I
<div class="noticia-importante">
Selectores Importantes
I
Básicos
I
Tipo: p
I
I
Clase: .classname
I
I
Los nombres de las etiquetas HTML
<div class="noticia-importante">
ID: #idname
Selectores Importantes
I
Básicos
I
Tipo: p
I
I
Clase: .classname
I
I
Los nombres de las etiquetas HTML
<div class="noticia-importante">
ID: #idname
I
<span id="principal">
Selectores Importantes
I
Combinaciones
Selectores Importantes
I
Combinaciones
I
Hijos inmediatos: A > B
Selectores Importantes
I
Combinaciones
I
Hijos inmediatos: A > B
I
Todos los B cuyo padre sea A
Selectores Importantes
I
Combinaciones
I
Hijos inmediatos: A > B
I
I
Todos los B cuyo padre sea A
Descendientes: A B
Selectores Importantes
I
Combinaciones
I
Hijos inmediatos: A > B
I
I
Todos los B cuyo padre sea A
Descendientes: A B
I
Todos los B con algún ancestro A
Selectores Importantes
I
Combinaciones
I
Hijos inmediatos: A > B
I
I
Descendientes: A B
I
I
Todos los B cuyo padre sea A
Todos los B con algún ancestro A
Alternativos: A, B
Selectores Importantes
I
Combinaciones
I
Hijos inmediatos: A > B
I
I
Descendientes: A B
I
I
Todos los B cuyo padre sea A
Todos los B con algún ancestro A
Alternativos: A, B
I
Tanto los A como los B
Selectores Importantes
I
Pseudo-clases
Selectores Importantes
I
Pseudo-clases
I
:hover
Selectores Importantes
I
Pseudo-clases
I
I
:hover
:visited
Selectores Importantes
I
Pseudo-clases
I
I
I
:hover
:visited
:first-child, :nth-child(2n+1)
Modelo de Cajas
Medidas
I
px: pı́xeles
Medidas
I
I
px: pı́xeles
em: la medida del ancho de una M. Bueno para zooms.
Medidas
I
I
I
px: pı́xeles
em: la medida del ancho de una M. Bueno para zooms.
%: Porcentaje sobre lo disponible
Medidas
I
px: pı́xeles
em: la medida del ancho de una M. Bueno para zooms.
%: Porcentaje sobre lo disponible
I
Otros: cm, mm, in, pt, pc, ex
I
I
Medidas
I
px: pı́xeles
em: la medida del ancho de una M. Bueno para zooms.
%: Porcentaje sobre lo disponible
I
Otros: cm, mm, in, pt, pc, ex
I
Usar: px, em y %
I
I
Medidas
I
px: pı́xeles
em: la medida del ancho de una M. Bueno para zooms.
%: Porcentaje sobre lo disponible
I
Otros: cm, mm, in, pt, pc, ex
I
Usar: px, em y %
I
Explicación de W3C
I
I
Herencia
I
Se aplican en cascada, sobrescribiendo reglas parcialmente
Herencia
I
Se aplican en cascada, sobrescribiendo reglas parcialmente
1. Estilo por defecto del Navegador
1.2 Estilos <style> en orden de definición
1.2.3 Atributo de elemento style=""
Herencia
I
Se aplican en cascada, sobrescribiendo reglas parcialmente
1. Estilo por defecto del Navegador
1.2 Estilos <style> en orden de definición
1.2.3 Atributo de elemento style=""
I
La mayorı́a de propiedades se heredan de padres a hijos
p { color: green; }
<p> el perro es <strong> verde también
</strong> <p>
I
Otras propiedades como border no se heredan
Herencia
I
Se aplican en cascada, sobrescribiendo reglas parcialmente
1. Estilo por defecto del Navegador
1.2 Estilos <style> en orden de definición
1.2.3 Atributo de elemento style=""
I
La mayorı́a de propiedades se heredan de padres a hijos
p { color: green; }
<p> el perro es <strong> verde también
</strong> <p>
I
Otras propiedades como border no se heredan
Hay modificadores como !important o inherit
I
Inspector de elementos
I
Lanzar con F12
Originalmente Firebug
I
Comprobar modelo de caja
I
Inspector de elementos
I
I
I
I
Lanzar con F12
Originalmente Firebug
Comprobar modelo de caja
Comprobar valores calculados
Inspector de elementos
I
I
I
I
I
Lanzar con F12
Originalmente Firebug
Comprobar modelo de caja
Comprobar valores calculados
Comprobar estilos sobrescritos
Propiedades CSS más usadas
Propiedades CSS más usadas
Referencias de propiedades: MDN, css-tricks
I
display
Propiedades CSS más usadas
Referencias de propiedades: MDN, css-tricks
I
display
I
none, inline, block, inline-block
Propiedades CSS más usadas
Referencias de propiedades: MDN, css-tricks
I
display
I
I
none, inline, block, inline-block
position
Propiedades CSS más usadas
Referencias de propiedades: MDN, css-tricks
I
display
I
I
none, inline, block, inline-block
position
I
static, relative, absolute, fixed
Propiedades CSS más usadas
Referencias de propiedades: MDN, css-tricks
I
display
I
I
position
I
I
none, inline, block, inline-block
static, relative, absolute, fixed
top, right, bottom, left
Propiedades CSS más usadas
Referencias de propiedades: MDN, css-tricks
I
display
I
I
position
I
I
none, inline, block, inline-block
static, relative, absolute, fixed
top, right, bottom, left
I
sólo con position != static
Propiedades CSS más usadas
Referencias de propiedades: MDN, css-tricks
I
display
I
I
position
I
I
static, relative, absolute, fixed
top, right, bottom, left
I
I
none, inline, block, inline-block
float
sólo con position != static
Propiedades CSS más usadas
Referencias de propiedades: MDN, css-tricks
I
display
I
I
position
I
I
static, relative, absolute, fixed
top, right, bottom, left
I
I
none, inline, block, inline-block
sólo con position != static
float
I
none, left, right
I
color
I
color
I
red, #rgb, #rrggbb (HEX), rgba(255,255,255,1)
I
color
I
I
red, #rgb, #rrggbb (HEX), rgba(255,255,255,1)
text-align
I
color
I
I
red, #rgb, #rrggbb (HEX), rgba(255,255,255,1)
text-align
I
left, right, center
I
color
I
I
text-align
I
I
red, #rgb, #rrggbb (HEX), rgba(255,255,255,1)
left, right, center
vertical-align
I
color
I
I
text-align
I
I
red, #rgb, #rrggbb (HEX), rgba(255,255,255,1)
left, right, center
vertical-align
I
bottom, middle, super (sólo para inlines y table cells)
I
color
I
I
text-align
I
I
left, right, center
vertical-align
I
I
red, #rgb, #rrggbb (HEX), rgba(255,255,255,1)
bottom, middle, super (sólo para inlines y table cells)
line-height
I
color
I
I
text-align
I
I
left, right, center
vertical-align
I
I
red, #rgb, #rrggbb (HEX), rgba(255,255,255,1)
bottom, middle, super (sólo para inlines y table cells)
line-height
I
normalmente en em
I
font-family
I
font-family
I
“Open Sans”
I
font-family
I
I
“Open Sans”
font-size
I
font-family
I
I
“Open Sans”
font-size
I
10, 11, 12, 14px, . . .
I
font-family
I
I
font-size
I
I
“Open Sans”
10, 11, 12, 14px, . . .
font-style
I
font-family
I
I
font-size
I
I
“Open Sans”
10, 11, 12, 14px, . . .
font-style
I
normal, italic
I
font-family
I
I
font-size
I
I
10, 11, 12, 14px, . . .
font-style
I
I
“Open Sans”
normal, italic
text-decoration
I
font-family
I
I
font-size
I
I
10, 11, 12, 14px, . . .
font-style
I
I
“Open Sans”
normal, italic
text-decoration
I
underline, line-through, overline, blink
I
width, height
I
width, height
I
variantes max-heigth, min-width, . . .
I
width, height
I
I
variantes max-heigth, min-width, . . .
border (-top, -right, -bottom, -left, -color, -style, -radius)
I
width, height
I
I
variantes max-heigth, min-width, . . .
border (-top, -right, -bottom, -left, -color, -style, -radius)
I
1px solid black
I
width, height
I
I
border (-top, -right, -bottom, -left, -color, -style, -radius)
I
I
variantes max-heigth, min-width, . . .
1px solid black
margin ( -top, -right, -bottom, -left)
I
width, height
I
I
variantes max-heigth, min-width, . . .
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 (-color, -image, -repeat, -position)
I
background: url(“topbanner.png”) #00D repeat-y fixed;
I
background (-color, -image, -repeat, -position)
I
I
background: url(“topbanner.png”) #00D repeat-y fixed;
overflow
I
background (-color, -image, -repeat, -position)
I
I
background: url(“topbanner.png”) #00D repeat-y fixed;
overflow
I
visible, hidden, scroll, auto
I
background (-color, -image, -repeat, -position)
I
I
overflow
I
I
background: url(“topbanner.png”) #00D repeat-y fixed;
visible, hidden, scroll, auto
visibility
I
background (-color, -image, -repeat, -position)
I
I
overflow
I
I
background: url(“topbanner.png”) #00D repeat-y fixed;
visible, hidden, scroll, auto
visibility
I
Como display: none pero ocupa espacio
I
background (-color, -image, -repeat, -position)
I
I
overflow
I
I
visible, hidden, scroll, auto
visibility
I
I
background: url(“topbanner.png”) #00D repeat-y fixed;
Como display: none pero ocupa espacio
opacity
I
background (-color, -image, -repeat, -position)
I
I
overflow
I
I
visible, hidden, scroll, auto
visibility
I
I
background: url(“topbanner.png”) #00D repeat-y fixed;
Como display: none pero ocupa espacio
opacity
I
Decimales de 0 a 1
