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

&DINIS CORREIA 2011

cbn

5HTMLCSS

CSS PROPRIEDADES DE LAYOUT1

BACKGROUNDS2LISTAS34

CSS

2LISTAS3

⇪

TABELAS4

CSS ⇪

TABELAS4

na sessão anterior...

LINKS

link, visited, hover, focus, active

PROPRIEDADES DE LAYOUT

PROPRIEDADES DE LAYOUT

marginpaddingborderwidthheight

MARGIN

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

}

CSS

p  {  margin:  10px;  

}

CSS

top

right

bottom

left <p>

top

right

bottom

left

1

2

3

4 <p>

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

CSS

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

CSS

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

CSS

20px

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

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

CSS

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

CSS

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

CSS

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

CSS

20px

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

CSS

BORDER

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

}

CSS

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

p  {  border:  1px  solid  #000;

}

CSS

CSSp  {  

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

}

CSSp  {  

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

}

CSSp  {  

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

}

CSSp  {  

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

}

CSSp  {  

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

}

border-­‐style:  dashed;

border-­‐style:  dotted;

border-­‐style:  double;

border-­‐style:  inset;

border-­‐style:  groove;

border-­‐style:  outset;

border-­‐style:  ridge;

border-­‐style:  solid;

PADDING

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

}

CSS

p  {  padding:  10px;

}

CSS

p  {  padding:  10px;  }

CSS

z

p  {  padding:  10px;  }

CSS

z

10px

DIMENSÕESwidth    height

! Os elementos inline ignoram width  e  height...

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

!

p  {  width:  160px;  }

CSS

p  {  width:  160px;  }

CSS

Definir alturas só quando estritamente necessário.!

p  {  width:  160px;height:  auto;  

}

CSS

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

}

CSS

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

}

CSS

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

}

CSS

DIMENSÕESoverflow

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

CSS

CSS

p  {  overflow:  visible;  }

CSS

p  {  overflow:  hidden;  }

CSS

p  {  overflow:  auto;  }

CSS

p  {  overflow:  auto;  }

UNIDADES

px

em%

ABSOLUTAS

RELATIVAS

width:  800px;

width:  20em;

width:  40%;

CSS

p  {  width:  120px;  }

CSS

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

}

CSS

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

}

20px  x  3  =  60px

BOX MODEL

Conteúdo de um elemento

Conteúdo de um elemento

PADDING

BORDER

MARGIN

Conteúdo de um elemento

PADDING

BORDER

MARGIN

WIDTHH

EIG

HT

BOX

CSS

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

}

?

CSS

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

}

150px

DISPLAY

http://bit.ly/html_elements

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

CSS

CSS

p  {  display:  inline;

}

BACKGROUND

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

}

CSS

body  {  background-­‐color:  #ccc;

}

CSS

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

}

CSS

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

}

CSS

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

}

CSS

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

}

CSS

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

}

CSS

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

}

CSS

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

}

CSS

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

}

CSS

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

}

CSS

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

}

CSS

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

}

CSS

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

}

CSS

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

}

CSS

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

}

CSS

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

}

CSS

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

CSS

-color

-image

-attachment

-repeat -position

LISTAS

list-­‐style-­‐type

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;

list-­‐style-­‐image?

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

}ul  li  {

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

}

CSS

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

}

CSS

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

}

CSS

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

}ul  li  {

margin-­‐left:  20px;}

CSS