Introdução ao CSS - Desenvolvimento web

543 visualizações

Publicada em

Apresentação sobre CSS que mostra técnicas antigas de desenvolvimento, novas funcionalidade da versão CSS3, lidando com navegadores antigos e sem suporte, exemplos de algumas ferramentas úteis.

Publicada em: Internet
0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
543
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
50
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  •  CSS define como serão exibidos os elementos contidos no código
  • Ajustar a prioridade do conteúdo
  • No exemplo, o (max-width:420px) significa que o CSS informado só será aplicado quando a janela do navegador tiver até 420px.
  • substituição de texto por uma imagem. Colocava-se um texto no HTML e o ocultava com regras CSS
  •  Normalmente os leitores de tela conseguem ler conteúdos escondidos com a declaração display: none
  • Introdução ao CSS - Desenvolvimento web

    1. 1. CSS Treinamento Julho 2014 carlos.oliveira@vitrio.com.br kadunew@gmail.com Carlos Eduardo – Kadu Cascading Style Sheets (folhas de estilo em cascata)
    2. 2. São as informações que a página pretende apresentar. Separando Responsabilidades Essa parte é responsável pela apresentação. Cores, tamanhos, layout... Através dela é possível tomar decisões baseadas na interação com o usuário. Parte dinâmica da interface. JAVA SCRIPT css HTML
    3. 3. Separando Responsabilidades Essa parte é responsável pela apresentação. Cores, tamanhos, layout... css HTML
    4. 4. Antigamente...
    5. 5. Home Clientes Produtos Empresa Contato HTML e Apresentação HTML e Apresentação HTML e Apresentação HTML e Apresentação HTML e Apresentação Não existia uma preocupação com o código, manutenção...
    6. 6. Layout com tabelas
    7. 7. Antigamente FrontPage Dreamweaver
    8. 8. HOJE! “Mundo quase perfeito”
    9. 9. CSSVamos começar “ CSS define como serão exibidos os elementos contidos no código HTML.” Cascading Style Sheets (folhas de estilo em cascata)
    10. 10. Apresentação (CSS) Home Clientes Produtos Empresa Contato HTML HTML HTML HTML HTML Controle da apresentação das páginas por um único arquivo.
    11. 11. Separar Responsabilidades
    12. 12. p { color: #f60; } SELETOR DECLARAÇÃO PROPRIEDADE VALOR REGRA
    13. 13. ID e classes são atributos que usamos para adicionar estilos ao nosso HTML
    14. 14. ID é único, classes não
    15. 15. h1 { font-size: 16px; margin-left:10px; } Alguns exemplos h2, h3 { font-size: 16px; margin-left:10px; } #top h2 { font-size: 16px; margin-left:10px; }
    16. 16. Alguns exemplos
    17. 17. Novidades da versão atual? Bordas Cores Transparência Múltiplos Backgrounds Fontes Layout Alinhamento
    18. 18. Medidas CSS 300px, 20%...
    19. 19. 960px 300px 300px 300px 960px 300px 300px300px px
    20. 20. 100% 30% 30%30% %
    21. 21. Link1 | Link2 | Link3 | Link4 | Link5 01 02 03 04 01 02 03 Media Queries Design condicional. Só será aplicado em determinada situação. Isso permite adaptar o design da página Adaptar Layout Conteúdo
    22. 22. Hummmm..., interessante.. Como isso deve funcionar...?!?! Media Queries Design condicional. Só será aplicado em determinada situação. Isso permite adaptar o design da página Adaptar Layout Conteúdo
    23. 23. Em telas maiores tudo em ordem, tudo funcionando perfeitamente...
    24. 24. É difícil fazer tudo ficar bonito e ajustado a todo tipo de resolução só com porcentagens
    25. 25. No @media criamos uma condição e, dentro dele, as regras de CSS. Essas regras CSS só serão aplicadas caso a condição seja válida. 1024px 400px 320px
    26. 26. No exemplo, (max-width: 420px) significa que o CSS informado só será aplicado quando a janela do navegador tiver até 420px.
    27. 27. @font-face Suponha que o usuário tenha a font instalada, logo ele não precisa baixar a font, assim podemos indicar para que o browser possa utilizar o arquivo da própria máquina do usuário “Local”: fonte que será pesquisado na máquina do usuário, “url” para que a fonte seja baixada, caso o usuário não a tenha no PC
    28. 28. @font-face Existem alguns serviços disponíveis na Internet que facilitam o uso de fontes adicionais http://www.google.com/fonts
    29. 29. Conversor online O Font Squirrel converte suas fontes para os formatos necessários e gera o código pronto para você usar. http://www.fontsquirrel.com/
    30. 30. substituição de texto por uma imagem. Colocava-se um texto no HTML e o ocultava com regras CSS. E como era feito antes?
    31. 31. Elemento HTML... “chirrion” display: none
    32. 32. Ele será carregado mesmo assim. (uma imagem, um texto...) Normalmente os leitores de tela não conseguem ler conteúdos escondidos com a declaração display: none
    33. 33. Ocultar conteúdo Ele será carregado mesmo assim. (uma imagem, um texto...) Normalmente os leitores de tela não conseguem ler conteúdos escondidos com a declaração display: none
    34. 34. Nem tudo é perfeito...
    35. 35. CSS e navegadores sem suporte, antigos... Diferenças entre os padrões de um navegador para outro; Navegadores sem suporte para propriedades CSS; Navegadores Antigos.
    36. 36. ALGUMAS SOLUÇÕES CONTORNANDO A INCOMPATIBILIDADE
    37. 37. Quando não especificamos nenhum estilo para nossos elementos do HTML, o navegador utiliza uma série de estilos padrão, que são diferentes em cada um dos navegadores
    38. 38. Exemplo
    39. 39. Firefox 29.0.1 Estilização padrão de alguns navegadores IE 9 Chrome 35.0 Opera 22.0
    40. 40. A solução é setar um valor básico para todas as características do CSS, sobrescrevendo totalmente os estilos padrão do navegador.
    41. 41. Famoso CSS Reset de Eric Meyer http://meyerweb.com/eri c/tools/css/reset/ Dev.do Yahoo: http://yuilibrary.com/ Normalize.css: http://necolas.github.io/normal ize.css/ Exemplo CSS Reset Mais Exemplos
    42. 42. MELHORIA PROGRESSIVA COMPATIBILIDADE ENTRE NAVEGADORES
    43. 43. declaração de “background; “ Navegadores com suporte entenderão as duas e usarão apenas a última.
    44. 44. Colum-count:2
    45. 45. Ferramentas e CSS
    46. 46. Site com Tabelas de Compatibilidade para suporte de CSS, HTML, JS... http://caniuse.com/
    47. 47. Como testar a compatibilidade do HTML5 e CSS3 no navegador do seu computador ou celular. http://haz.io/
    48. 48. Como comparar o suporte do CSS3 (e HTML5) entre navegadores http://fmbip.com/litmus
    49. 49. “Eu trago tantas funcionalidade e quase ninguém usa...” OS NAVEGADORES TÊM PODERES
    50. 50. OS NAVEGADORES TÊM PODERES
    51. 51. Como "destrinchar " o HTML e o CSS de uma página? Botão direito sobre o elemento da página - opção “Inspecionar elemento”. Selecionar o HTML CSS do HTML Selecionado
    52. 52.  Regras CSS prontinhas. Só copiar e usar  http://css-tricks.com/snippets/
    53. 53. Essa extensão permite desabilitar, visualizar e editar cookies, CSS, HTML, formulários e imagens, validação de páginas e muito mais. http://bit.ly/1vfOmxD
    54. 54. Permite ao desenvolvedor identificar os códigos CSS de elementos específicos de uma página. http://bit.ly/1qId0a6
    55. 55. CSSTreinamento CSS Julho 2014 Perguntas?
    56. 56. Links para estudo • http://tableless.com.br/categoria/o-basico/ • http://www.maujor.com/ • http://www.w3c.br/pub/Cursos/CursoCSS3/cs s-web.pdf • http://www.codecademy.com/pt/tracks/web “Era Wilson”

    ×