1. Pacote Web
Desenvolvendo com Padrões Web
Módulo 2 - CSS
Guilherme Cavalcanti
contato@guilhermecavalcanti.com
@guiocavalcanti
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. 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
5. CSS
• Linguagem visual
– Estilo, formatação
• Como o HTML, não é linguagem de
programação
• Fácil
http://pastebin.com/rtc3qgHs
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
8. Como adicionar o CSS ao HTML
• Inline
http://pastebin.com/KVnAbGde
• Interno
http://pastebin.com/CwZ60YQS
• Externo
http://pastebin.com/2k9qkyMx
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. 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. Propriedades de texto
• color
– Efeito: Altera cor do texto
– Valores
• Hexadecimal
• RGB
• Por extenso (16 cores)
http://pastebin.com/f1dxDHWy
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. Propriedades de texto
• text-align
– Alinhamento do texto
– Valores
• left
• right
• center
• Justify (cuidado!)
http://pastebin.com/Y5a32wD8
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. Propriedade de texto
• line-height
– Espaçamento entre as linhas
– Valor
• Em pixel (px)
• Porcentagem (%)
• em
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. 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. Fontes
• font-size
– Tamanho
– Valores
• Em pixel (px)
• Em em
• Em porcentagem (%)
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)
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. Propriedade de Borda
• Melhor usar a propriedade em shorthand
http://pastebin.com/iwnc4cke
• Ou somente
http://pastebin.com/7ZtBdhjx
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. 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. Propriedades de Listas
• Shorthand do list-style
– Ordem: type, position, image
http://pastebin.com/c1Y9c3tG
32. Margin e Padding
• Controla o tamanho da margem externa
(margin) e interna (padding)
• Ambas são muito utilizadas e parecidas
33. Margin e Padding
• Podem ser especificadas individualmente
http://pastebin.com/TiUCSCSp
http://pastebin.com/tL10jf4G
34. Margin e Padding shorthand
• Sentido horário
http://pastebin.com/F39DfnJ2
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. Margin e centralização de blocos
• O margin pode ser
usado para centralizar
blocos
– Valor auto
38. Display
• Utilizado para modificar o modo de exibição
dos objetos
– Objetos Inline
– Objetos de Bloco
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. 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. Display
• display
– Altera o modo de exibição dos objetos
• inline
• block
• none
http://pastebin.com/WmPYSwyZ
42. Menu horizontal
http://pastebin.com/8aJ7BkS7
http://pastebin.com/rps76x4Y
http://pastebin.com/nHNVBe43
43. float: texto e imagens
http://pastebin.com/fwFZjurs
http://pastebin.com/MyMSTuHq
44. float: texto e imagens centralizados
http://pastebin.com/ZNwQTHN2
45. float: texto e imagens centralizados
http://pastebin.com/DpEnHMxG
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;
