Se ha denunciado esta presentación.

Más Contenido Relacionado

Libros relacionados

Gratis con una prueba de 14 días de Scribd

Ver todo

Audiolibros relacionados

Gratis con una prueba de 14 días de Scribd

Ver todo

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

Notas





















































  • ×