• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML&CSS 5 - Intermediate CSS (2/2)
 

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

on

  • 1,188 views

Slides for my in-house HTML & CSS trainning at SAPO.

Slides for my in-house HTML & CSS trainning at SAPO.

Intermediate CSS: layout properties (margin, padding, border, width and height), backgrounds and lists.

Statistics

Views

Total Views
1,188
Views on SlideShare
1,184
Embed Views
4

Actions

Likes
0
Downloads
46
Comments
0

2 Embeds 4

http://staging2.inceptum.eu 2
http://drive-html-viewer.pansy.at 2

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HTML&CSS 5 - Intermediate CSS (2/2) HTML&CSS 5 - Intermediate CSS (2/2) Presentation Transcript

    • HTML 5& CSSDINIS CORREIA 2011 cbn
    • CSS 1 PROPRIEDADES DE LAYOUT 2 BACKGROUNDS 3LISTAS
    • 2 3 LISTASCSS 4 TABELAS ⇪
    • 4 TABELASCSS ⇪na sessão anterior...
    • LINKS
    • link, visited, hover, focus, active
    • PROPRIEDADES DE LAYOUT
    • PROPRIEDADES DE LAYOUT margin padding border width height
    • MARGIN
    • CSS p  {   margin-­‐top:  10px; margin-­‐right:  10px; margin-­‐bottom:  10px; margin-­‐left:  10px;   }
    • CSS p  {   margin:  10px;   }
    • topleft <p> right bottom
    • 1 top4 left <p> right 2 bottom 3
    • CSS p  {  margin-­‐bottom:  10px;  }
    • CSS p  {  margin-­‐bottom:  20px;  }
    • CSS p  {  margin-­‐bottom:  20px;  } 20px
    • Todos os elementos inline - com! excepção do img - ignoram a propiedade margin.
    • CSS p  {  margin-­‐top:  -­‐14px;  }
    • CSS p  {  margin-­‐top:  -­‐14px;  }
    • CSS p  {  margin:  10px  0  20px  0;  }
    • CSS p  {  margin:  10px  0  20px  0;  } 20px
    • CSS p  {  margin:  10px  0  20px  0;  }
    • BORDER
    • CSS 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 p  {   border-­‐width:  1px; border-­‐style:  solid; border-­‐color:  #ff0000; }
    • CSS p  {   border-­‐width:  5px; border-­‐style:  solid; border-­‐color:  #ff0000; }
    • CSS p  {   border-­‐width:  1px; border-­‐style:  solid; border-­‐color:  #ff0000; }
    • CSS p  {   border-­‐width:  1px; border-­‐style:  solid; border-­‐color:  #ff0000; }
    • CSS p  {   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
    • CSS p  {   padding-­‐top:  10px; padding-­‐right:  10px;   padding-­‐bottom:  10px; padding-­‐left:  10px; }
    • CSS p  {   padding:  10px; }
    • CSS p  {  padding:  10px;  } z
    • CSS p  {  padding:  10px;  } z 10px
    • DIMENSÕESwidth    height
    • ! Os elementos inline ignoram width  e  height...
    • ! Os elementos inline ignoram width  e  height... exepto as imagens.
    • CSS p  {  width:  160px;  }
    • CSS p  {  width:  160px;  }
    • ! Definir alturas só quando estritamente necessário.
    • CSS 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; }
    • DIMENSÕES overflow
    • CSS p  {  overflow:  visible;  } p  {  overflow:  hidden;  } p  {  overflow:  auto;  } p  {  overflow:  scroll;  }
    • CSS p  {  overflow:  visible;  }
    • CSS p  {  overflow:  hidden;  }
    • CSS p  {  overflow:  auto;  }
    • CSS p  {  overflow:  auto;  }
    • UNIDADES
    • ABSOLUTAS px width:  800px;RELATIVAS em 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 deum elemento
    • MARGIN BORDER PADDING Conteúdo de um elemento
    • MARGIN BORDER PADDING WIDTH Conteúdo de HEIGHT um elemento 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
    • CSS p  {  display:  block;  } p  {  display:  inline;  } p  {  display:  none;  }
    • CSS p  {   display:  inline; }
    • BACKGROUND
    • CSS 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  } -color -attachment -image -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
    • CSS 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; }