Download - Introdução ao CSS - Desenvolvimento web
CSSTreinamento
Julho 2014
[email protected]@gmail.com
Carlos Eduardo – Kadu
Cascading Style Sheets(folhas de estilo em cascata)
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.
JAVASCRIPT
css
HTML
Separando Responsabilidades
Essa parte é responsável pela apresentação. Cores, tamanhos, layout...
css
HTML
Antigamente...
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...
Layout com tabelas
Antigamente
FrontPage Dreamweaver
HOJE!
“Mundo quase perfeito”
CSSVamos começar
“ CSS define como serão exibidos os elementos contidos no código
HTML.”
Cascading Style Sheets(folhas de estilo em cascata)
Apresentação (CSS)
Home Clientes Produtos Empresa Contato
HTML HTML HTML HTML HTML
Controle da apresentação das páginas por um único arquivo.
Separar Responsabilidades
p { color: #f60;}
SELETOR
DECLARAÇÃO
PROPRIEDADE
VALOR
REGRA
ID e classes são atributos que usamos para adicionar estilos ao nosso HTML
ID é único, classes não
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;}
Alguns exemplos
Novidades da versão atual?
Bordas
Cores
Transparência
MúltiplosBackgrounds
Fontes
Layout
Alinhamento
Medidas CSS300px, 20%...
960px
300px 300px 300px
960px
300px 300px300px px
100%
30% 30%30% %
Link1 | Link2 | Link3 | Link4 | Link5
01 02 03
04
01
02
03
Media QueriesDesign condicional. Só será aplicado em
determinada situação. Isso permiteadaptar o design da página
Adaptar Layout Conteúdo
Hummmm..., interessante.. Como isso
deve funcionar...?!?!
Media QueriesDesign condicional. Só será aplicado em
determinada situação. Isso permiteadaptar o design da página
Adaptar Layout Conteúdo
Em telas maiores tudo em ordem, tudo funcionando perfeitamente...
É difícil fazer tudo ficarbonito e ajustado a todo tipo de resolução só com
porcentagens
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
No exemplo, (max-width: 420px) significa que o CSS informado só será aplicado quando a janela do
navegador tiver até 420px.
@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 quea fonte seja
baixada, caso o usuário não a tenha no PC
@font-face
Existem alguns serviços disponíveis na Internet que facilitam o uso de fontes adicionais
http://www.google.com/fonts
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/
substituição de texto por uma imagem. Colocava-se
um texto no HTML e o ocultava com regras CSS.
E como era feito antes?
Elemento HTML...
“chirrion”
display: none
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
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
Nem tudo é perfeito...
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.
ALGUMASSOLUÇÕES
CONTORNANDO A INCOMPATIBILIDADE
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
Exemplo
Firefox 29.0.1
Estilização padrão de alguns navegadores
IE 9
Chrome 35.0
Opera 22.0
A solução é setar um valor básico para todas as características do
CSS, sobrescrevendo totalmente os estilos padrão do navegador.
Famoso CSS Reset de Eric Meyer
http://meyerweb.com/eric/tools/css/reset/
Dev.do Yahoo:http://yuilibrary.com/
Normalize.css: http://necolas.github.io/normalize.css/
Exemplo CSS Reset
Mais Exemplos
MELHORIA PROGRESSIVA
COMPATIBILIDADEENTRE NAVEGADORES
declaração de “background; “ Navegadores com suporte entenderão as duas e usarão apenas a última.
Colum-count:2
Ferramentas e CSS
Site com Tabelas de Compatibilidade para suporte de CSS, HTML, JS...
http://caniuse.com/
Como testar a compatibilidade do HTML5 e CSS3 no navegador do seu computador ou celular.
http://haz.io/
Como comparar o suporte do CSS3 (e HTML5) entre navegadores
http://fmbip.com/litmus
“Eu trago tantas funcionalidade e quase ninguém
usa...” OS NAVEGADOR
ES TÊM PODERES
OS NAVEGADOR
ES TÊM PODERES
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
Regras CSS prontinhas. Só copiar e usar http://css-tricks.com/snippets/
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
Permite ao desenvolvedor identificar os códigos CSS de elementos específicos de uma página.
http://bit.ly/1qId0a6
CSSTreinamento CSS
Julho 2014
Perguntas?
Links para estudo
• http://tableless.com.br/categoria/o-basico/• http://www.maujor.com/• http://
www.w3c.br/pub/Cursos/CursoCSS3/css-web.pdf
• http://www.codecademy.com/pt/tracks/web
“Era Wilson”