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