Introdução ao CSS - Desenvolvimento web
-
Upload
carlos-eduardo-kadu -
Category
Internet
-
view
238 -
download
6
description
Transcript of Introdução ao CSS - Desenvolvimento web
![Page 1: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/1.jpg)
CSSTreinamento
Julho 2014
[email protected]@gmail.com
Carlos Eduardo – Kadu
Cascading Style Sheets(folhas de estilo em cascata)
![Page 2: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/2.jpg)
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
![Page 3: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/3.jpg)
Separando Responsabilidades
Essa parte é responsável pela apresentação. Cores, tamanhos, layout...
css
HTML
![Page 4: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/4.jpg)
Antigamente...
![Page 5: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/5.jpg)
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...
![Page 6: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/6.jpg)
Layout com tabelas
![Page 7: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/7.jpg)
Antigamente
FrontPage Dreamweaver
![Page 8: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/8.jpg)
HOJE!
“Mundo quase perfeito”
![Page 9: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/9.jpg)
CSSVamos começar
“ CSS define como serão exibidos os elementos contidos no código
HTML.”
Cascading Style Sheets(folhas de estilo em cascata)
![Page 10: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/10.jpg)
![Page 11: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/11.jpg)
Apresentação (CSS)
Home Clientes Produtos Empresa Contato
HTML HTML HTML HTML HTML
Controle da apresentação das páginas por um único arquivo.
![Page 12: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/12.jpg)
Separar Responsabilidades
![Page 13: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/13.jpg)
p { color: #f60;}
SELETOR
DECLARAÇÃO
PROPRIEDADE
VALOR
REGRA
![Page 14: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/14.jpg)
ID e classes são atributos que usamos para adicionar estilos ao nosso HTML
![Page 15: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/15.jpg)
ID é único, classes não
![Page 16: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/16.jpg)
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;}
![Page 17: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/17.jpg)
Alguns exemplos
![Page 18: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/18.jpg)
Novidades da versão atual?
Bordas
Cores
Transparência
MúltiplosBackgrounds
Fontes
Layout
Alinhamento
![Page 19: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/19.jpg)
![Page 20: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/20.jpg)
Medidas CSS300px, 20%...
![Page 21: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/21.jpg)
960px
300px 300px 300px
960px
300px 300px300px px
![Page 22: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/22.jpg)
100%
30% 30%30% %
![Page 23: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/23.jpg)
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
![Page 24: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/24.jpg)
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
![Page 25: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/25.jpg)
Em telas maiores tudo em ordem, tudo funcionando perfeitamente...
![Page 26: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/26.jpg)
É difícil fazer tudo ficarbonito e ajustado a todo tipo de resolução só com
porcentagens
![Page 27: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/27.jpg)
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
![Page 28: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/28.jpg)
No exemplo, (max-width: 420px) significa que o CSS informado só será aplicado quando a janela do
navegador tiver até 420px.
![Page 29: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/29.jpg)
@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
![Page 30: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/30.jpg)
@font-face
Existem alguns serviços disponíveis na Internet que facilitam o uso de fontes adicionais
http://www.google.com/fonts
![Page 31: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/31.jpg)
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/
![Page 32: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/32.jpg)
substituição de texto por uma imagem. Colocava-se
um texto no HTML e o ocultava com regras CSS.
E como era feito antes?
![Page 33: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/33.jpg)
Elemento HTML...
“chirrion”
display: none
![Page 34: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/34.jpg)
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
![Page 35: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/35.jpg)
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
![Page 36: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/36.jpg)
Nem tudo é perfeito...
![Page 37: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/37.jpg)
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.
![Page 38: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/38.jpg)
ALGUMASSOLUÇÕES
CONTORNANDO A INCOMPATIBILIDADE
![Page 39: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/39.jpg)
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
![Page 40: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/40.jpg)
Exemplo
![Page 41: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/41.jpg)
Firefox 29.0.1
Estilização padrão de alguns navegadores
IE 9
Chrome 35.0
Opera 22.0
![Page 42: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/42.jpg)
A solução é setar um valor básico para todas as características do
CSS, sobrescrevendo totalmente os estilos padrão do navegador.
![Page 43: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/43.jpg)
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
![Page 44: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/44.jpg)
MELHORIA PROGRESSIVA
COMPATIBILIDADEENTRE NAVEGADORES
![Page 45: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/45.jpg)
declaração de “background; “ Navegadores com suporte entenderão as duas e usarão apenas a última.
![Page 46: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/46.jpg)
Colum-count:2
![Page 47: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/47.jpg)
Ferramentas e CSS
![Page 48: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/48.jpg)
Site com Tabelas de Compatibilidade para suporte de CSS, HTML, JS...
http://caniuse.com/
![Page 49: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/49.jpg)
Como testar a compatibilidade do HTML5 e CSS3 no navegador do seu computador ou celular.
http://haz.io/
![Page 50: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/50.jpg)
Como comparar o suporte do CSS3 (e HTML5) entre navegadores
http://fmbip.com/litmus
![Page 51: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/51.jpg)
“Eu trago tantas funcionalidade e quase ninguém
usa...” OS NAVEGADOR
ES TÊM PODERES
![Page 52: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/52.jpg)
OS NAVEGADOR
ES TÊM PODERES
![Page 53: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/53.jpg)
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
![Page 54: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/54.jpg)
Regras CSS prontinhas. Só copiar e usar http://css-tricks.com/snippets/
![Page 55: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/55.jpg)
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
![Page 56: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/56.jpg)
Permite ao desenvolvedor identificar os códigos CSS de elementos específicos de uma página.
http://bit.ly/1qId0a6
![Page 57: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/57.jpg)
CSSTreinamento CSS
Julho 2014
Perguntas?
![Page 58: Introdução ao CSS - Desenvolvimento web](https://reader036.fdocuments.net/reader036/viewer/2022081502/5590b08e1a28abf5058b45e5/html5/thumbnails/58.jpg)
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”