html&css 5 - intermediate css (2/2)

95
& DINIS CORREIA 2011 cbn 5 H T M L C S S

Upload: dinis-correia

Post on 21-Dec-2014

1.174 views

Category:

Technology


12 download

DESCRIPTION

Slides for my in-house HTML & CSS trainning at SAPO. Intermediate CSS: layout properties (margin, padding, border, width and height), backgrounds and lists.

TRANSCRIPT

Page 1: HTML&CSS 5 - Intermediate CSS (2/2)

&DINIS CORREIA 2011

cbn

5HTMLCSS

Page 2: HTML&CSS 5 - Intermediate CSS (2/2)

CSS PROPRIEDADES DE LAYOUT1

BACKGROUNDS2LISTAS34

Page 3: HTML&CSS 5 - Intermediate CSS (2/2)

CSS

2LISTAS3

TABELAS4

Page 4: HTML&CSS 5 - Intermediate CSS (2/2)

CSS ⇪

TABELAS4

na sessão anterior...

Page 5: HTML&CSS 5 - Intermediate CSS (2/2)

LINKS

Page 6: HTML&CSS 5 - Intermediate CSS (2/2)

link, visited, hover, focus, active

Page 7: HTML&CSS 5 - Intermediate CSS (2/2)

PROPRIEDADES DE LAYOUT

Page 8: HTML&CSS 5 - Intermediate CSS (2/2)

PROPRIEDADES DE LAYOUT

marginpaddingborderwidthheight

Page 9: HTML&CSS 5 - Intermediate CSS (2/2)

MARGIN

Page 10: HTML&CSS 5 - Intermediate CSS (2/2)

p  {  margin-­‐top:  10px;margin-­‐right:  10px;margin-­‐bottom:  10px;margin-­‐left:  10px;  

}

CSS

Page 11: HTML&CSS 5 - Intermediate CSS (2/2)

p  {  margin:  10px;  

}

CSS

Page 12: HTML&CSS 5 - Intermediate CSS (2/2)

top

right

bottom

left <p>

Page 13: HTML&CSS 5 - Intermediate CSS (2/2)

top

right

bottom

left

1

2

3

4 <p>

Page 14: HTML&CSS 5 - Intermediate CSS (2/2)

p  {  margin-­‐bottom:  10px;  }

CSS

Page 15: HTML&CSS 5 - Intermediate CSS (2/2)

p  {  margin-­‐bottom:  20px;  }

CSS

Page 16: HTML&CSS 5 - Intermediate CSS (2/2)

p  {  margin-­‐bottom:  20px;  }

CSS

20px

Page 17: HTML&CSS 5 - Intermediate CSS (2/2)

Todos os elementos inline - com excepção do img - ignoram a propiedade margin.!

Page 18: HTML&CSS 5 - Intermediate CSS (2/2)

p  {  margin-­‐top:  -­‐14px;  }

CSS

Page 19: HTML&CSS 5 - Intermediate CSS (2/2)

p  {  margin-­‐top:  -­‐14px;  }

CSS

Page 20: HTML&CSS 5 - Intermediate CSS (2/2)

p  {  margin:  10px  0  20px  0;  }

CSS

Page 21: HTML&CSS 5 - Intermediate CSS (2/2)

p  {  margin:  10px  0  20px  0;  }

CSS

20px

Page 22: HTML&CSS 5 - Intermediate CSS (2/2)

p  {  margin:  10px  0  20px  0;  }

CSS

Page 23: HTML&CSS 5 - Intermediate CSS (2/2)

BORDER

Page 24: HTML&CSS 5 - Intermediate CSS (2/2)

p  {  border-­‐width:  1px;border-­‐style:  solid;border-­‐color:  #ff0000;

}

CSS

Page 25: HTML&CSS 5 - Intermediate CSS (2/2)

p  {  border-­‐top-­‐width:  1px;border-­‐top-­‐style:  solid;border-­‐top-­‐color:  #ff0000;border-­‐right-­‐width:  1px;border-­‐right-­‐style:  dotted;border-­‐right-­‐color:  #000;...

}

CSS

Page 26: HTML&CSS 5 - Intermediate CSS (2/2)

p  {  border:  1px  solid  #000;

}

CSS

Page 27: HTML&CSS 5 - Intermediate CSS (2/2)

CSSp  {  

border-­‐width:  1px;border-­‐style:  solid;border-­‐color:  #ff0000;

}

Page 28: HTML&CSS 5 - Intermediate CSS (2/2)

CSSp  {  

border-­‐width:  5px;border-­‐style:  solid;border-­‐color:  #ff0000;

}

Page 29: HTML&CSS 5 - Intermediate CSS (2/2)

CSSp  {  

border-­‐width:  1px;border-­‐style:  solid;border-­‐color:  #ff0000;

}

Page 30: HTML&CSS 5 - Intermediate CSS (2/2)

CSSp  {  

border-­‐width:  1px;border-­‐style:  solid;border-­‐color:  #ff0000;

}

Page 31: HTML&CSS 5 - Intermediate CSS (2/2)

CSSp  {  

border-­‐width:  1px;border-­‐style:  dashed;border-­‐color:  #ff0000;

}

Page 32: HTML&CSS 5 - Intermediate CSS (2/2)

border-­‐style:  dashed;

border-­‐style:  dotted;

border-­‐style:  double;

border-­‐style:  inset;

border-­‐style:  groove;

border-­‐style:  outset;

border-­‐style:  ridge;

border-­‐style:  solid;

Page 33: HTML&CSS 5 - Intermediate CSS (2/2)

PADDING

Page 34: HTML&CSS 5 - Intermediate CSS (2/2)

p  {  padding-­‐top:  10px;padding-­‐right:  10px;  padding-­‐bottom:  10px;padding-­‐left:  10px;

}

CSS

Page 35: HTML&CSS 5 - Intermediate CSS (2/2)

p  {  padding:  10px;

}

CSS

Page 36: HTML&CSS 5 - Intermediate CSS (2/2)

p  {  padding:  10px;  }

CSS

z

Page 37: HTML&CSS 5 - Intermediate CSS (2/2)

p  {  padding:  10px;  }

CSS

z

10px

Page 38: HTML&CSS 5 - Intermediate CSS (2/2)

DIMENSÕESwidth    height

Page 39: HTML&CSS 5 - Intermediate CSS (2/2)

! Os elementos inline ignoram width  e  height...

Page 40: HTML&CSS 5 - Intermediate CSS (2/2)

Os elementos inline ignoram width  e  height... exepto as imagens.

!

Page 41: HTML&CSS 5 - Intermediate CSS (2/2)

p  {  width:  160px;  }

CSS

Page 42: HTML&CSS 5 - Intermediate CSS (2/2)

p  {  width:  160px;  }

CSS

Page 43: HTML&CSS 5 - Intermediate CSS (2/2)

Definir alturas só quando estritamente necessário.!

Page 44: HTML&CSS 5 - Intermediate CSS (2/2)

p  {  width:  160px;height:  auto;  

}

CSS

Page 45: HTML&CSS 5 - Intermediate CSS (2/2)

p  {  width:  160px;height:  20px;  

}

CSS

Page 46: HTML&CSS 5 - Intermediate CSS (2/2)

div  {  min-­‐width:  200px;min-­‐height:  500px;

}

CSS

Page 47: HTML&CSS 5 - Intermediate CSS (2/2)

div  {  min-­‐width:  200px;min-­‐height:  500px;max-­‐width:  980px;max-­‐height:  800px;

}

CSS

Page 48: HTML&CSS 5 - Intermediate CSS (2/2)

DIMENSÕESoverflow

Page 49: HTML&CSS 5 - Intermediate CSS (2/2)

p  {  overflow:  visible;  }p  {  overflow:  hidden;  }p  {  overflow:  auto;  }p  {  overflow:  scroll;  }

CSS

Page 50: HTML&CSS 5 - Intermediate CSS (2/2)

CSS

p  {  overflow:  visible;  }

Page 51: HTML&CSS 5 - Intermediate CSS (2/2)

CSS

p  {  overflow:  hidden;  }

Page 52: HTML&CSS 5 - Intermediate CSS (2/2)

CSS

p  {  overflow:  auto;  }

Page 53: HTML&CSS 5 - Intermediate CSS (2/2)

CSS

p  {  overflow:  auto;  }

Page 54: HTML&CSS 5 - Intermediate CSS (2/2)

UNIDADES

Page 55: HTML&CSS 5 - Intermediate CSS (2/2)

px

em%

ABSOLUTAS

RELATIVAS

width:  800px;

width:  20em;

width:  40%;

Page 56: HTML&CSS 5 - Intermediate CSS (2/2)

CSS

p  {  width:  120px;  }

Page 57: HTML&CSS 5 - Intermediate CSS (2/2)

CSS

p  {  font-­‐size:  20px;width:  3em;

}

Page 58: HTML&CSS 5 - Intermediate CSS (2/2)

CSS

p  {  font-­‐size:  20px;width:  3em;

}

20px  x  3  =  60px

Page 59: HTML&CSS 5 - Intermediate CSS (2/2)

BOX MODEL

Page 60: HTML&CSS 5 - Intermediate CSS (2/2)

Conteúdo de um elemento

Page 61: HTML&CSS 5 - Intermediate CSS (2/2)

Conteúdo de um elemento

PADDING

BORDER

MARGIN

Page 62: HTML&CSS 5 - Intermediate CSS (2/2)

Conteúdo de um elemento

PADDING

BORDER

MARGIN

WIDTHH

EIG

HT

BOX

Page 63: HTML&CSS 5 - Intermediate CSS (2/2)

CSS

p  {  width:  120px;border:  2px  dotted  #000;padding:  3px;margin:  10px;

}

?

Page 64: HTML&CSS 5 - Intermediate CSS (2/2)

CSS

p  {  width:  120px;border:  2px  dotted  #000;padding:  3px;margin:  10px;

}

150px

Page 65: HTML&CSS 5 - Intermediate CSS (2/2)

DISPLAY

Page 66: HTML&CSS 5 - Intermediate CSS (2/2)

http://bit.ly/html_elements

Page 67: HTML&CSS 5 - Intermediate CSS (2/2)

p  {  display:  block;  }p  {  display:  inline;  }p  {  display:  none;  }

CSS

Page 68: HTML&CSS 5 - Intermediate CSS (2/2)

CSS

p  {  display:  inline;

}

Page 69: HTML&CSS 5 - Intermediate CSS (2/2)

BACKGROUND

Page 70: HTML&CSS 5 - Intermediate CSS (2/2)

body  {  background-­‐color:  #ccc;background-­‐image:  url(image.gif);background-­‐attachment:  scroll;background-­‐repeat:  no-­‐repeat;background-­‐position:  0  0;

}

CSS

Page 71: HTML&CSS 5 - Intermediate CSS (2/2)

body  {  background-­‐color:  #ccc;

}

CSS

Page 72: HTML&CSS 5 - Intermediate CSS (2/2)

body  {  background-­‐color:  #ccc;background-­‐image:  url(paper_green.jpg);

}

CSS

Page 73: HTML&CSS 5 - Intermediate CSS (2/2)

body  {  background-­‐color:  #ccc;background-­‐image:  url(paper_green.jpg);background-­‐repeat:  no-­‐repeat;

}

CSS

Page 74: HTML&CSS 5 - Intermediate CSS (2/2)

body  {  background-­‐color:  #ccc;background-­‐image:  url(paper_green.jpg);background-­‐repeat:  repeat-­‐y;

}

CSS

Page 75: HTML&CSS 5 - Intermediate CSS (2/2)

body  {  background-­‐color:  #ccc;background-­‐image:  url(paper_green.jpg);background-­‐repeat:  repeat-­‐x;

}

CSS

Page 76: HTML&CSS 5 - Intermediate CSS (2/2)

body  {  background-­‐color:  #ccc;background-­‐image:  url(paper_green.jpg);background-­‐repeat:  repeat-­‐x;background-­‐attachament:  scroll;

}

CSS

Page 77: HTML&CSS 5 - Intermediate CSS (2/2)

body  {  background-­‐color:  #ccc;background-­‐image:  url(paper_green.jpg);background-­‐repeat:  repeat-­‐x;background-­‐attachament:  scroll;

}

CSS

Page 78: HTML&CSS 5 - Intermediate CSS (2/2)

body  {  background-­‐color:  #ccc;background-­‐image:  url(paper_green.jpg);background-­‐repeat:  repeat-­‐x;background-­‐attachament:  fixed;

}

CSS

Page 79: HTML&CSS 5 - Intermediate CSS (2/2)

body  {  background-­‐color:  #ccc;background-­‐image:  url(paper_green.jpg);background-­‐repeat:  no-­‐repeat;background-­‐attachament:  fixed;background-­‐position:  0  0;

}

CSS

Page 80: HTML&CSS 5 - Intermediate CSS (2/2)

body  {  background-­‐color:  #ccc;background-­‐image:  url(paper_green.jpg);background-­‐repeat:  no-­‐repeat;background-­‐attachament:  fixed;background-­‐position:  0  40px;

}

CSS

Page 81: HTML&CSS 5 - Intermediate CSS (2/2)

body  {  background-­‐color:  #ccc;background-­‐image:  url(paper_green.jpg);background-­‐repeat:  no-­‐repeat;background-­‐attachament:  fixed;background-­‐position:  40px  0;

}

CSS

Page 82: HTML&CSS 5 - Intermediate CSS (2/2)

body  {  background-­‐color:  #ccc;background-­‐image:  url(paper_green.jpg);background-­‐repeat:  no-­‐repeat;background-­‐attachament:  fixed;background-­‐position:  left  top;

}

CSS

Page 83: HTML&CSS 5 - Intermediate CSS (2/2)

body  {  background-­‐color:  #ccc;background-­‐image:  url(paper_green.jpg);background-­‐repeat:  no-­‐repeat;background-­‐attachament:  fixed;background-­‐position:  right  top;

}

CSS

Page 84: HTML&CSS 5 - Intermediate CSS (2/2)

body  {  background-­‐color:  #ccc;background-­‐image:  url(paper_green.jpg);background-­‐repeat:  no-­‐repeat;background-­‐attachament:  fixed;background-­‐position:  center  top;

}

CSS

Page 85: HTML&CSS 5 - Intermediate CSS (2/2)

body  {  background-­‐color:  #ccc;background-­‐image:  url(paper_green.jpg);background-­‐repeat:  no-­‐repeat;background-­‐attachament:  fixed;background-­‐position:  20%  0;

}

CSS

Page 86: HTML&CSS 5 - Intermediate CSS (2/2)

body  {  background-­‐color:  #ccc;background-­‐image:  url(paper_green.jpg);background-­‐repeat:  no-­‐repeat;background-­‐attachament:  fixed;background-­‐position:  50%  0;

}

CSS

Page 87: HTML&CSS 5 - Intermediate CSS (2/2)

body  {  background:  #ccc  url(fundo.gif)  no-­‐repeat  scroll  left  top  }

CSS

-color

-image

-attachment

-repeat -position

Page 88: HTML&CSS 5 - Intermediate CSS (2/2)

LISTAS

Page 89: HTML&CSS 5 - Intermediate CSS (2/2)

list-­‐style-­‐type

Page 90: HTML&CSS 5 - Intermediate CSS (2/2)

list-­‐style-­‐type:  disc;

list-­‐style-­‐type:  square;

list-­‐style-­‐type:  circle;

list-­‐style-­‐type:  none;

list-­‐style-­‐type:  decimal;

list-­‐style-­‐type:  decimal-­‐leading-­‐zero;

list-­‐style-­‐type:  lower-­‐alpha;

list-­‐style-­‐type:  upper-­‐alpha;

list-­‐style-­‐type:  upper-­‐roman;

list-­‐style-­‐type:  lower-­‐roman;

Page 91: HTML&CSS 5 - Intermediate CSS (2/2)

list-­‐style-­‐image?

Page 92: HTML&CSS 5 - Intermediate CSS (2/2)

ul  {  list-­‐style-­‐type:  none;

}ul  li  {

padding:  0  0  0  20px;background:  url(bullet.gif)  no-­‐repeat  0  2px;

}

CSS

Page 93: HTML&CSS 5 - Intermediate CSS (2/2)

ul  {  list-­‐style-­‐type:  disc;

}

CSS

Page 94: HTML&CSS 5 - Intermediate CSS (2/2)

ul  {  list-­‐style-­‐type:  disc;margin:  0;padding:  0;

}

CSS

Page 95: HTML&CSS 5 - Intermediate CSS (2/2)

ul  {  list-­‐style-­‐type:  disc;margin:  0;padding:  0;

}ul  li  {

margin-­‐left:  20px;}

CSS