Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
CSS e HTML
Básico


                     a.k.a. Tin@Open Party 2008.12.27
             Tin is a consultant in thoughtworks...
XHTML e CSS


XHTML => conteúdo (estrutura)
CSS => apresentação (visual)
XHTML e CSS
Recomendações:
 HTML semântico
 Nomes de class/id com significado
 (red-text alert-text)
 Minimize a estrutura ...
Exemplo Html
CSS Básico
Cascading Style Sheets (CSS) é uma coleção de
instruções para a aparência de uma página HTML
Podemos ter vários...
CSS Básico
Cascading Style Sheets (CSS) é uma coleção de
instruções para a aparência de uma página HTML
Podemos ter vários...
Seletor CSS- Declaração
Seletor              Bloco de declaração

             Declaração         Declaração

  H1        ...
Seletor CSS- Declaração
Elemento
  h1 { font-weight: bold;}
  li a { text-decoration: none; }
Class
  .warn { color: red }...
Seletor CSS- Declaração
ID
     #sidebar { float: right; width: 27em; }
Pseudo class
     a:link { color: blue; }
     li:h...
Seletor CSS- Declaração


Seletor Universal
  * { padding: 0; margin: 0; }
Especificidade CSS
 Quatro níveis de especificidade
   nível 1(1000): inline style, <div style=”color: red”>
   nível 2(0100...
Especificidade CSS
Regra                    Peso       Peso total
Style=””               1, 0, 0, 0     1000
#wrapped #cont...
CSS: Herança e cascata

Herança: algumas propriedades quando aplicadas
nos elementos pais influenciam nos filhos. Ex: color,...
CSS: Herança e cascata
Cascata: é o estabelecimento de uma prioridade para
aplicação da regra de estilo ao elemento.
  Ord...
Box model
Box model
     margin: top right bottom left;
Box model
     margin: top right bottom left;
                border
Box model
     margin: top right bottom left;
                border
               padding
Box model
     margin: top right bottom left;
                border
               padding
        width

            Con...
Box model                        Background
     margin: top right bottom left;
                border
               padd...
IE box model




               This file is licensed under the
               Creative Commons
               Attribution ...
Para não dar pau no IE


Não use padding e margin no mesmo elemento
Has-layout=true (zoom: 1,não valida no W3C)
Não use wi...
Tipos de exibição - Block Level

 Block-Level é um elemento com display: block
 Gera um box que preenche a área do element...
Formato do Block box

        margin: top right bottom left;
                   border
                  padding
         ...
Formato do Block box
        The containing block
                                                                      bo...
Tipo de exibição - Inline Level

 Inline-level é um elemento com display: inline
 Gera um box que não quebra a linha (como...
Fluxo normal de layout
Outros tipos de exibição

Inline-block: não quebra a linha, mas você pode
especificar width, height, margin.
display: none ...
float: left;




          1
float: left;

1
float: left;

1



              2
float: left;

1
     2
float: left;

1
     2

              3
float: left;

1
     2

      3
float: left;

1
     2

      3       4
float: left;

1
     2

      3       4
float: left;

1
     2

      3       4
clear: left;




          1
clear: left;

1
clear: left;

1



               2
clear: left;

1
     2
clear: left;

              1
                   2

clear: left
clear: left;

              1
                   2

clear: left

                             3
clear: left;

              1
                   2

clear: left   3
Position: relative
Position: relative


 position: relative; left: -5px; top: -10px;
Position: absolute
Position: absolute
      Position: absolute; left: 0; top: 0;
Position: absolute
      Position: absolute; left: 0; top: 0;
Position: absolute

    Position: absolute; left: 0; top: 0;
Position: absolute




   z-index controla a ordem das camadas
Dicas
Evite CSS inline
Não se repita (crie padrões)
Colocar ID pra cada seção do site
Conditional comments
Usar position a...
One more thing...
NUNCA USE CSS INLINE
Css e html básico
Upcoming SlideShare
Loading in …5
×

Css e html básico

3,850 views

Published on

Published in: Design, Technology, Education
  • Be the first to comment

Css e html básico

  1. 1. CSS e HTML Básico a.k.a. Tin@Open Party 2008.12.27 Tin is a consultant in thoughtworks studio
  2. 2. XHTML e CSS XHTML => conteúdo (estrutura) CSS => apresentação (visual)
  3. 3. XHTML e CSS Recomendações: HTML semântico Nomes de class/id com significado (red-text alert-text) Minimize a estrutura HTML e as regras CSS
  4. 4. Exemplo Html
  5. 5. CSS Básico Cascading Style Sheets (CSS) é uma coleção de instruções para a aparência de uma página HTML Podemos ter vários arquivos CSS em uma página CSS específico para diferentes dispositivos <link rel="stylesheet" type="text/css" media="screen" href="reset.css" /> <style type="text/css"> body { font-size: 13px; } </style>
  6. 6. CSS Básico Cascading Style Sheets (CSS) é uma coleção de instruções para a aparência de uma página HTML Podemos ter vários arquivos CSS em uma página CSS específico para diferentes dispositivos <link rel="stylesheet" type="text/css" media="screen" href="reset.css" /> <style type="text/css"> body { font-size: 13px; } </style> Seletor CSS
  7. 7. Seletor CSS- Declaração Seletor Bloco de declaração Declaração Declaração H1 { color: red; background: yellow; } Propriedade Valor Propriedade Valor
  8. 8. Seletor CSS- Declaração Elemento h1 { font-weight: bold;} li a { text-decoration: none; } Class .warn { color: red } .full-width { width: 100% }
  9. 9. Seletor CSS- Declaração ID #sidebar { float: right; width: 27em; } Pseudo class a:link { color: blue; } li:hover { background-color: grey; } input:focus { background-color: yellow; }
  10. 10. Seletor CSS- Declaração Seletor Universal * { padding: 0; margin: 0; }
  11. 11. Especificidade CSS Quatro níveis de especificidade nível 1(1000): inline style, <div style=”color: red”> nível 2(0100): ID nível 3(0010): class, pseudo class, attribute selector nível 4(0001): element selector, universal selector Nível especial: !important (exceção IE6) A última declaração ganha
  12. 12. Especificidade CSS Regra Peso Peso total Style=”” 1, 0, 0, 0 1000 #wrapped #content {} 0, 2, 0, 0 200 #content .date {} 0, 1, 1, 0 110 div#content {} 0, 1, 0, 1 101 #content {} 0, 1, 0, 0 100 p.comment .date {} 0, 0, 2, 1 21 p.comment {} 0,0, 1, 1 11 div p {} 0, 0, 0, 2 2 p {} 0, 0, 0, 1 1
  13. 13. CSS: Herança e cascata Herança: algumas propriedades quando aplicadas nos elementos pais influenciam nos filhos. Ex: color, font-size (font*) Propriedades sem herança: padding, margin, border, background
  14. 14. CSS: Herança e cascata Cascata: é o estabelecimento de uma prioridade para aplicação da regra de estilo ao elemento. Ordem de importância folha de estilo padrão do navegador do usuário e do usuário; estilo incorporado (definido na seção head do documento); estilo inline (dentro de um elemento HTML); declarações com !important;
  15. 15. Box model
  16. 16. Box model margin: top right bottom left;
  17. 17. Box model margin: top right bottom left; border
  18. 18. Box model margin: top right bottom left; border padding
  19. 19. Box model margin: top right bottom left; border padding width Content Area height
  20. 20. Box model Background margin: top right bottom left; border padding width Content Area height
  21. 21. IE box model This file is licensed under the Creative Commons Attribution ShareAlike 3.0 Unported (http://en.wikipedia.org/wiki/ Image:W3C_and_Internet_Explorer_box _models.png)
  22. 22. Para não dar pau no IE Não use padding e margin no mesmo elemento Has-layout=true (zoom: 1,não valida no W3C) Não use width: 100% e padding no mesmo elemento (use 95%)
  23. 23. Tipos de exibição - Block Level Block-Level é um elemento com display: block Gera um box que preenche a área do elemento pai Não aceita elementos ao seu lado Quebra a linha antes ou depois dele min-width/max-width Div é elemento block por padrão
  24. 24. Formato do Block box margin: top right bottom left; border padding width Content Area height
  25. 25. Formato do Block box The containing block border padding auto margin width Content Area height negative margin border padding width Content Area height border padding fixed margin width Content Area height Fixed width
  26. 26. Tipo de exibição - Inline Level Inline-level é um elemento com display: inline Gera um box que não quebra a linha (como um texto) O tamanho é determinado pelo seu conteúdo Elementos inline podem conter somente elementos inline Não aceita margem line-height e vertical-align
  27. 27. Fluxo normal de layout
  28. 28. Outros tipos de exibição Inline-block: não quebra a linha, mas você pode especificar width, height, margin. display: none (esconde o conteúdo, remove do fluxo do layout) sobre visibility: hidden (esconde o conteúdo mas não remove do fluxo)
  29. 29. float: left; 1
  30. 30. float: left; 1
  31. 31. float: left; 1 2
  32. 32. float: left; 1 2
  33. 33. float: left; 1 2 3
  34. 34. float: left; 1 2 3
  35. 35. float: left; 1 2 3 4
  36. 36. float: left; 1 2 3 4
  37. 37. float: left; 1 2 3 4
  38. 38. clear: left; 1
  39. 39. clear: left; 1
  40. 40. clear: left; 1 2
  41. 41. clear: left; 1 2
  42. 42. clear: left; 1 2 clear: left
  43. 43. clear: left; 1 2 clear: left 3
  44. 44. clear: left; 1 2 clear: left 3
  45. 45. Position: relative
  46. 46. Position: relative position: relative; left: -5px; top: -10px;
  47. 47. Position: absolute
  48. 48. Position: absolute Position: absolute; left: 0; top: 0;
  49. 49. Position: absolute Position: absolute; left: 0; top: 0;
  50. 50. Position: absolute Position: absolute; left: 0; top: 0;
  51. 51. Position: absolute z-index controla a ordem das camadas
  52. 52. Dicas Evite CSS inline Não se repita (crie padrões) Colocar ID pra cada seção do site Conditional comments Usar position absolute para ítens que não dependem dos outros Declaração CSS mínima Validar
  53. 53. One more thing...
  54. 54. NUNCA USE CSS INLINE

×