Css PDF

Diseno de Aplicaciones Web
Juan Morales del Olmo
17 de Febrero de 2015
CSS (Cascading Style Sheets)
Pasado
Al principio no haba CSS

I
Todo dentro de HTML
Pasado

I
I
Todo dentro de HTML

<H3 COLOR=BLUE><CENTER> Noticias
</CENTER></H3>
Pasado

I
I
Todo dentro de HTML

<H3 COLOR=BLUE><CENTER> Noticias
</CENTER></H3>
Separacion de conceptos, crearon CSS para describir como la

web se iba a ver.
Estandar en progreso
No esta terminado/cerrado
Siguen definiendo partes de CSS 3
La implementacion es variable entre navegadores

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

(inconsistencias, prefijos, . . . )
Usar Can I use:

http://caniuse.com/#feat=transforms3d
Sintaxis
Son un conjunto de reglas
Sintaxis
Son un conjunto de reglas
Describen como representar las etiquetas del HTML

selector: {
property: value;
}
Donde se ponen las reglas CSS ?
En un archivo con extensi

on .css
I
<link rel="stylesheet" href="pathTo/style.css"/>

on .css
I
I

Recomendado

on .css
I
I

Recomendado
En el <head> del html entre <style></style>

on .css
I
I

Recomendado

I
Desaconsejado

on .css
I
I

I

Recomendado
Desaconsejado
Como atributos de las etiquetas html <p

style="color:red;"></p>

on .css
I
I

I

Recomendado
Desaconsejado
Como atributos de las etiquetas html <p

style="color:red;"></p>
I
Desaconsejado
Selectores Importantes
Basicos
Basicos
I
Tipo: p
Basicos
I
Tipo: p
I
Los nombres de las etiquetas HTML
Basicos
I
Tipo: p
I
Clase: .classname
Basicos
I
Tipo: p
I
Clase: .classname
I
<div class="noticia-importante">
Basicos
I
Tipo: p
I
Clase: .classname
I
ID: #idname
Basicos
I
Tipo: p
I
Clase: .classname
I
ID: #idname
I
<span id="principal">
Combinaciones
Combinaciones
I
Hijos inmediatos: A > B
Combinaciones
I

I
Todos los B cuyo padre sea A
Combinaciones
I

I
Descendientes: A B
Combinaciones
I

I
Descendientes: A B
I
Todos los B con alg

un ancestro A
Combinaciones
I

I
Descendientes: A B
I
Todos los B con alg

un ancestro A
Alternativos: A, B
Combinaciones
I

I
Descendientes: A B
I
Todos los B con alg

un ancestro A
Alternativos: A, B
I
Tanto los A como los B
Pseudo-clases
Pseudo-clases
I
:hover
Pseudo-clases
I
I
:hover
:visited
Pseudo-clases
I
I
I
:hover
:visited
:first-child, :nth-child(2n+1)
Modelo de Cajas
Medidas
px: pxeles
Medidas
I
I
px: pxeles
em: la medida del ancho de una M. Bueno para zooms.
Medidas
I
I
I
px: pxeles
%: Porcentaje sobre lo disponible
Medidas
px: pxeles
Otros: cm, mm, in, pt, pc, ex
I
I
Medidas
px: pxeles
Usar: px, em y %
I
I
Medidas
px: pxeles
Usar: px, em y %
Explicacion de W3C
I
I
Herencia
I
Se aplican en cascada, sobrescribiendo reglas parcialmente
Herencia
I
1. Estilo por defecto del Navegador

1.2 Estilos <style> en orden de definici
on
1.2.3 Atributo de elemento style=""
Herencia
I

on
La mayora de propiedades se heredan de padres a hijos

p { color: green; }
<p> el perro es <strong> verde tambi
en
</strong> <p>
Otras propiedades como border no se heredan
Herencia
I

on
La mayora de propiedades se heredan de padres a hijos

p { color: green; }
<p> el perro es <strong> verde tambi
en
</strong> <p>
Otras propiedades como border no se heredan

Hay modificadores como !important o inherit
Inspector de elementos
Lanzar con F12

Originalmente Firebug
Comprobar modelo de caja
I
I
I
I
Lanzar con F12

Comprobar valores calculados
I
I
I
I
I
Lanzar con F12

Comprobar valores calculados
Comprobar estilos sobrescritos
Propiedades CSS mas usadas

Referencias de propiedades: MDN, css-tricks
I
display

I
display
I
none, inline, block, inline-block

I
display
I
position

I
display
I
position
I
static, relative, absolute, fixed

I
display
I
position
I
top, right, bottom, left

I
display
I
position
I

I
s
olo con position != static

I
display
I
position
I

I
float
s

I
display
I
position
I

I
s
float
I
none, left, right
color
color
I
red, #rgb, #rrggbb (HEX), rgba(255,255,255,1)
color
I
text-align
color
I
text-align
I
left, right, center
color
I
text-align
I
left, right, center
vertical-align
color
I
text-align
I
left, right, center
vertical-align
I
bottom, middle, super (s

olo para inlines y table cells)
color
I
text-align
I
left, right, center
vertical-align
I

line-height
color
I
text-align
I
left, right, center
vertical-align
I

line-height
I
normalmente en em
font-family
font-family
I
Open Sans
font-family
I
Open Sans
font-size
font-family
I
Open Sans
font-size
I
10, 11, 12, 14px, . . .
font-family
I
font-size
I
Open Sans
10, 11, 12, 14px, . . .
font-style
font-family
I
font-size
I
Open Sans
10, 11, 12, 14px, . . .
font-style
I
normal, italic
font-family
I
font-size
I
10, 11, 12, 14px, . . .
font-style
I
Open Sans
normal, italic
text-decoration
font-family
I
font-size
I
10, 11, 12, 14px, . . .
font-style
I
Open Sans
normal, italic
text-decoration
I
underline, line-through, overline, blink
width, height
width, height
I
variantes max-heigth, min-width, . . .
width, height
I
border (-top, -right, -bottom, -left, -color, -style, -radius)
width, height
I

I
1px solid black
width, height
I

I
1px solid black
margin ( -top, -right, -bottom, -left)
width, height
I

I
1px solid black
margin ( -top, -right, -bottom, -left)
padding ( -top, -right, -bottom, -left)
background (-color, -image, -repeat, -position)

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

I
overflow

I
overflow
I
visible, hidden, scroll, auto

I
overflow
I
visibility

I
overflow
I
visibility
I
Como display: none pero ocupa espacio

I
overflow
I
visibility
I
opacity

I
overflow
I
visibility
I
opacity
I
Decimales de 0 a 1

Css PDF

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Css PDF

Uploaded by

Copyright:

Available Formats

Diseno de Aplicaciones Web

Juan Morales del Olmo

CSS (Cascading Style Sheets)

Al principio no haba CSS

Todo dentro de HTML

Al principio no haba CSS

Todo dentro de HTML

Al principio no haba CSS

Todo dentro de HTML

Separacion de conceptos, crearon CSS para describir como la

Siguen definiendo partes de CSS 3

Siguen definiendo partes de CSS 3

La implementacion es variable entre navegadores

Siguen definiendo partes de CSS 3

La implementacion es variable entre navegadores

Usar Can I use:

Son un conjunto de reglas

Son un conjunto de reglas

Describen como representar las etiquetas del HTML

Donde se ponen las reglas CSS ?

En un archivo con extensi

<link rel="stylesheet" href="pathTo/style.css"/>

Donde se ponen las reglas CSS ?

En un archivo con extensi

<link rel="stylesheet" href="pathTo/style.css"/>

Donde se ponen las reglas CSS ?

En un archivo con extensi

<link rel="stylesheet" href="pathTo/style.css"/>

En el <head> del html entre <style></style>

Donde se ponen las reglas CSS ?

En un archivo con extensi

<link rel="stylesheet" href="pathTo/style.css"/>

En el <head> del html entre <style></style>

Donde se ponen las reglas CSS ?

En un archivo con extensi

En el <head> del html entre <style></style>

<link rel="stylesheet" href="pathTo/style.css"/>

Como atributos de las etiquetas html <p

Donde se ponen las reglas CSS ?

En un archivo con extensi

En el <head> del html entre <style></style>

<link rel="stylesheet" href="pathTo/style.css"/>

Como atributos de las etiquetas html <p

Los nombres de las etiquetas HTML

Los nombres de las etiquetas HTML

Los nombres de las etiquetas HTML

Los nombres de las etiquetas HTML

Los nombres de las etiquetas HTML

Hijos inmediatos: A > B

Hijos inmediatos: A > B

Todos los B cuyo padre sea A

Hijos inmediatos: A > B

Todos los B cuyo padre sea A

Hijos inmediatos: A > B

Todos los B cuyo padre sea A

Todos los B con alg

Hijos inmediatos: A > B

Todos los B cuyo padre sea A

Todos los B con alg

Hijos inmediatos: A > B

Todos los B cuyo padre sea A

Todos los B con alg

Tanto los A como los B