Css e html básico
Transferir como KEY, PDF4 gostaram1,913 visualizações
Este documento discute conceitos básicos de CSS e HTML, incluindo: 1) XHTML é usado para estrutura e conteúdo, enquanto CSS é usado para estilo e apresentação visual. 2) CSS permite definir estilos para páginas HTML de maneiras flexíveis através de seletores e declarações. 3) O modelo de caixa controla como elementos são dispostos na página e como interagem entre si e com outros elementos.
Css e html básico
- 1. CSS e HTML Básico a.k.a. Tin@Open Party 2008.12.27 Tin is a consultant in thoughtworks studio
- 2. XHTML e CSS XHTML => conteúdo (estrutura) CSS => apresentação (visual)
- 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. Exemplo Html
- 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>
- 7. 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
- 8. Seletor CSS- Declaração Seletor Bloco de declaração Declaração Declaração H1 { color: red; background: yellow; } Propriedade Valor Propriedade Valor
- 9. Seletor CSS- Declaração Elemento h1 { font-weight: bold;} li a { text-decoration: none; } Class .warn { color: red } .full-width { width: 100% }
- 10. 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; }
- 11. Seletor CSS- Declaração Seletor Universal * { padding: 0; margin: 0; }
- 12. 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
- 13. 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
- 14. 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
- 15. 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;
- 16. Box model
- 17. Box model margin: top right bottom left;
- 18. Box model margin: top right bottom left; border
- 19. Box model margin: top right bottom left; border padding
- 20. Box model margin: top right bottom left; border padding width Content Area height
- 21. Box model Background margin: top right bottom left; border padding width Content Area height
- 22. 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)
- 23. 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%)
- 24. 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
- 25. Formato do Block box margin: top right bottom left; border padding width Content Area height
- 26. 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
- 27. 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
- 28. Fluxo normal de layout
- 29. 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)
- 30. float: left; 1
- 31. float: left; 1
- 32. float: left; 1 2
- 33. float: left; 1 2
- 34. float: left; 1 2 3
- 35. float: left; 1 2 3
- 36. float: left; 1 2 3 4
- 37. float: left; 1 2 3 4
- 38. float: left; 1 2 3 4
- 39. clear: left; 1
- 40. clear: left; 1
- 41. clear: left; 1 2
- 42. clear: left; 1 2
- 43. clear: left; 1 2 clear: left
- 44. clear: left; 1 2 clear: left 3
- 45. clear: left; 1 2 clear: left 3
- 47. Position: relative position: relative; left: -5px; top: -10px;
- 49. Position: absolute Position: absolute; left: 0; top: 0;
- 50. Position: absolute Position: absolute; left: 0; top: 0;
- 51. Position: absolute Position: absolute; left: 0; top: 0;
- 52. Position: absolute z-index controla a ordem das camadas
- 53. 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
- 55. NUNCA USE CSS INLINE