Este documento fornece um resumo de um treinamento sobre CSS (Cascading Style Sheets). Ele discute conceitos como separação de responsabilidades entre HTML, CSS e JavaScript, tipos de seletores, unidades de medida e propriedades CSS. O documento também aborda tópicos como media queries, fontes personalizadas e compatibilidade entre navegadores.

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. 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. Separando Responsabilidades
Essa parte é responsável pela apresentação.
Cores, tamanhos, layout...
css
HTML

4. Antigamente...

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. Layout com
tabelas

7. Antigamente
FrontPage Dreamweaver

8. HOJE!
“Mundo quase
perfeito”

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)

11. Apresentação
(CSS)
Home Clientes Produtos Empresa Contato
HTML HTML HTML HTML HTML
Controle da apresentação das páginas por
um único arquivo.

12. Separar Responsabilidades

13. p {
color: #f60;
}
SELETOR
DECLARAÇÃO
PROPRIEDADE
VALOR
REGRA

14. ID e classes são atributos que usamos para adicionar estilos
ao nosso HTML

15. ID é único, classes não

16. 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;
}

17. Alguns exemplos

18. Novidades da versão atual?
Bordas
Cores
Transparência
Múltiplos
Backgrounds
Fontes
Layout
Alinhamento

20. Medidas CSS
300px, 20%...

21. 960px
300px 300px 300px
960px
300px 300px300px
px

22. 100%
30% 30%30%
%

23. 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

24. 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

25. Em telas maiores tudo em ordem, tudo funcionando
perfeitamente...

26. É difícil fazer tudo ficar
bonito e ajustado a todo tipo de resolução só com
porcentagens

27. 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

28. No exemplo, (max-width: 420px)
significa que o CSS informado só
será aplicado quando a janela do
navegador tiver até 420px.

29. @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

30. @font-face
Existem alguns serviços
disponíveis na Internet que
facilitam o uso de fontes
adicionais
http://www.google.com/fonts

31. 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/

32. substituição de texto por
uma imagem. Colocava-se
um texto no HTML e o
ocultava com regras CSS.
E como era feito antes?

33. Elemento
HTML...
“chirrion”
display: none

34. 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

35. 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

36. Nem tudo é perfeito...

37. 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.

38. ALGUMAS
SOLUÇÕES
CONTORNANDO A INCOMPATIBILIDADE

39. 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

40. Exemplo

41. Firefox 29.0.1
Estilização padrão de alguns navegadores
IE 9
Chrome 35.0
Opera 22.0

42. A solução é setar um valor básico
para todas as características do
CSS, sobrescrevendo totalmente
os estilos padrão do navegador.

43. 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

44. MELHORIA PROGRESSIVA
COMPATIBILIDADE
ENTRE NAVEGADORES

45. declaração de “background; “ Navegadores com suporte
entenderão as duas e usarão apenas a última.

46. Colum-count:2

47. Ferramentas e
CSS

48. Site com Tabelas de Compatibilidade para suporte de CSS,
HTML, JS...
http://caniuse.com/

49. Como testar a compatibilidade do HTML5 e CSS3 no
navegador do seu computador ou celular.
http://haz.io/

50. Como comparar o suporte do CSS3 (e HTML5) entre
navegadores
http://fmbip.com/litmus

51. “Eu trago tantas
funcionalidade e
quase ninguém
usa...”
OS
NAVEGADORES
TÊM PODERES

52. OS
NAVEGADORES
TÊM PODERES

53. 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

54.  Regras CSS prontinhas. Só copiar e usar 
http://css-tricks.com/snippets/

55. 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

56. Permite ao desenvolvedor identificar os códigos CSS de
elementos específicos de uma página.
http://bit.ly/1qId0a6

57. CSSTreinamento CSS
Julho 2014
Perguntas?

58. 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”