Introdução ao CSS - Desenvolvimento web

CSSTreinamento

Julho 2014

carlos.oliveira@vitrio.com.brkadunew@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”