Desevolvimento Web Client-side - CSS

967 views
894 views

Published on

Published in: Technology, Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
967
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Desevolvimento Web Client-side - CSS

  1. 1. Pacote Web Desenvolvendo com Padrões Web Módulo 2 - CSS Guilherme Cavalcanti contato@guilhermecavalcanti.com @guiocavalcanti
  2. 2. Este trabalho está licenciado sob uma Licença Creative Commons Atribuição 2.5 Brasil. Para ver uma cópia desta licença, visite http://creativecommons.org/licenses/by/2.5/br/
  3. 3. HTML em 1994 • Quando o HTML foi criado, a intenção não era de forma alguma, formatar informação. • Foram incluídos atributos e tags de para controlar algumas aparências para o documento. – A linguagem se tornou complexa e difícil de manter
  4. 4. Camadas client-side Comportamento JavaScript Formatação CSS Informação HTML
  5. 5. CSS • Linguagem visual – Estilo, formatação • Como o HTML, não é linguagem de programação • Fácil http://pastebin.com/rtc3qgHs
  6. 6. Sintaxe • Seletor – Elemento HTML ao qual o estilo vai ser aplicado – Exemplo: p, h1, input, form • Propriedade – “Tipo” do estilo que será aplicado ao elemento – Exemplo: text-align, font-family, background • Valor – Exemplo: left, Arial, black
  7. 7. Sintaxe • Exemplo http://pastebin.com/yA52XQd0
  8. 8. Como adicionar o CSS ao HTML • Inline http://pastebin.com/KVnAbGde • Interno http://pastebin.com/CwZ60YQS • Externo http://pastebin.com/2k9qkyMx
  9. 9. IDs e classes • Atributos do HTML • Identificam uma tag unicamente ou um conjunto de tags http://pastebin.com/VZNrmcmp http://pastebin.com/kz5kX41E
  10. 10. Diferenças ID class • Identifica unicamente uma • Identifica um conjunto de tag tags • Não pode ser repetido no • Pode e deve ser repetido mesmo HTML • Usar quando o estilo for aplicado somente a uma tag
  11. 11. Propriedades de texto • color – Efeito: Altera cor do texto – Valores • Hexadecimal • RGB • Por extenso (16 cores) http://pastebin.com/f1dxDHWy
  12. 12. Propriedades de texto • text-decoration – Efeitos no texto (sublinhado, riscado, etc) – Valores VALOR DESCRIÇÃO RESULTADO Lorem ipsum dolor sit Underline Faz o texto ficar sublinhado. amet. Lorem ipsum dolor sit Overline O texto ganha um sublinhado na parte superior. amet. O sublinhado fica em cima das palavras do Lorem ipsum dolor sit line-through texto. amet. Este valor faz o texto piscar. Os browser não são Lorem ipsum dolor sit blink obrigados a suportar este valor. amet.
  13. 13. Propriedades de texto • text-align – Alinhamento do texto – Valores • left • right • center • Justify (cuidado!) http://pastebin.com/Y5a32wD8
  14. 14. Propriedade de texto • text-transform – Várias formas de transformar o texto em caixa alta VALOR DESCRIÇÃO RESULTADO Transforma o primeiro caracter de cada palavra capitalize Lorem Ipsum Dolor Sit Amet. em maiúscula. Transforma todas as letras de todas as palavras uppercase LOREM IPSUM DOLOR SIT AMET. em maiúsculas. Transforma todas as letras de todas as palavras lowercase lorem ipsum dolor sit amet. em minúsculas. none Cancela algum valor que tenha sido herdado. Lorem ipsum dolor sit amet.
  15. 15. Propriedade de texto • line-height – Espaçamento entre as linhas – Valor • Em pixel (px) • Porcentagem (%) • em
  16. 16. Fontes • font-family – Define fonte ou família de fontes • Fonte: Arial, Times New Roman, Lucida Grande • Família de font: Sans-serif, serif, monospace – Se o nome da fonte possuir mais de uma palavra, usar “aspas” • font-family: “Trebuchet MS”;
  17. 17. Fontes • font-style – Estilo da font • Itálico, obiquoa, norma • font-weight – Peso ou intensidade da fonte • Negrito – Valores • Na prática: normal e bold
  18. 18. Fontes • font-size – Tamanho – Valores • Em pixel (px) • Em em • Em porcentagem (%)
  19. 19. Fontes • Resumindo http://pastebin.com/hn7P0EqA
  20. 20. Background • background-color – Cor de fundo – Valores • Hexadecimal • RGB • Por extensi (16 cores) • background-image – Imagem de fundo – Valor • url(“endereco-da-imagem”)
  21. 21. Background • background-repeat – Decide como e se a imagem de fundo vai ser repetida – Valores y • repeat-x • repeat-y • no-repeat x
  22. 22. Background: exemplos http://pastebin.com/TxhL8mme http://pastebin.com/vmxVTXMQ
  23. 23. Background: exemplos http://pastebin.com/FavzsxfD
  24. 24. Background • background-attachment – O fundo deve se mover junto com a página ou não – Valores • scorll – acompanha a página • fixed – não acompanha a página (padrão)
  25. 25. Background • background-position – Posição da imagem de fundo – Valores • xy y • left top • center center x • bottom center
  26. 26. Background: shorthand • Economizar linhas – background: white http://pastebin.com/zRUT6G2y
  27. 27. Propriedades de Borda • Muda a cor, tipo e espessura das bordas dos blocos (tags) • É possível controlar cada lado individualmente http://pastebin.com/aU90bjww
  28. 28. Propriedade de Borda • Melhor usar a propriedade em shorthand http://pastebin.com/iwnc4cke • Ou somente http://pastebin.com/7ZtBdhjx
  29. 29. Propriedades de Listas • list-style-image – Escolhe uma imagem para ser o bullet da lista – Especificar list-style-type para os casos da imagem não estar disponível http://pastebin.com/NSPLkxaG
  30. 30. Propriedades de Listas • list-style-type – Diz o tipo de marcador – circle, disc, square... • list-style-position http://pastebin.com/4rj0BA6A – Posicionamento do marcador – inside – dentro do li – outside – fora do li http://pastebin.com/DzqQBg0V
  31. 31. Propriedades de Listas • Shorthand do list-style – Ordem: type, position, image http://pastebin.com/c1Y9c3tG
  32. 32. Margin e Padding • Controla o tamanho da margem externa (margin) e interna (padding) • Ambas são muito utilizadas e parecidas
  33. 33. Margin e Padding • Podem ser especificadas individualmente http://pastebin.com/TiUCSCSp http://pastebin.com/tL10jf4G
  34. 34. Margin e Padding shorthand • Sentido horário http://pastebin.com/F39DfnJ2
  35. 35. Margin e Padding shorthand • Especificado em pares opostos – Primeiro valor (10px) • Top e bottom – Segundo valor (5px) • Left e right http://pastebin.com/uXuXZ2FU
  36. 36. Margin e centralização de blocos • O margin pode ser usado para centralizar blocos – Valor auto
  37. 37. Margin e centralização de blocos http://pastebin.com/agpe9tBW
  38. 38. Display • Utilizado para modificar o modo de exibição dos objetos – Objetos Inline – Objetos de Bloco
  39. 39. Display Objetos de linha (inline) Objetos de Bloco • Não acarretam quebra de • Acarretam quebra de linha linha • Utilizados para “guardar” • Geralmente usados para outros objetos texto • Pode conter outros objetos • Nenhum objeto de linha de linha ou de bloco pode conter um objeto de • form, p, div, ol, ul, h1..6 bloco • em, strong, a, span, small
  40. 40. Display Objetos de linha Objetos de bloco Somente texto ou objetos de Qualquer objeto (texto, objetos de linha e Contém linha objetos de bloco) Exemplo em, strong, span form, p, div, ol, ul, h1..6 http://pastebin.com/jmFEAsa1
  41. 41. Display • display – Altera o modo de exibição dos objetos • inline • block • none http://pastebin.com/WmPYSwyZ
  42. 42. Menu horizontal http://pastebin.com/8aJ7BkS7 http://pastebin.com/rps76x4Y http://pastebin.com/nHNVBe43
  43. 43. float: texto e imagens http://pastebin.com/fwFZjurs http://pastebin.com/MyMSTuHq
  44. 44. float: texto e imagens centralizados http://pastebin.com/ZNwQTHN2
  45. 45. float: texto e imagens centralizados http://pastebin.com/DpEnHMxG
  46. 46. clear: controlando floats • clear: left; – Para de flutuar a direita dos blocos com float: left • clear: right; – Para de flutuar a esquerda dos blocos com float: right; • clear: both; – Para de sofrer influência de blocos com float: left e right;
  47. 47. Layout de 3 colunas

×