Introdução ao CSS - Desenvolvimento web

CSS
Treinamento
Julho 2014
carlos.oliveira@vitrio.com.br
kadunew@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.
JAVA
SCRIPT
css
HTML

Separando Responsabilidades
Essa parte é responsável pela apresentação.
Cores, tamanhos, layout...
css
HTML

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

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.

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

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

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

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

960px
300px 300px 300px
960px
300px 300px300px
px

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

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

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

É difícil fazer tudo ficar
bonito 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 que
a 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

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.

ALGUMAS
SOLUÇÕ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

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

MELHORIA PROGRESSIVA
COMPATIBILIDADE
ENTRE NAVEGADORES

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

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
NAVEGADORES
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/cs
s-web.pdf
• http://www.codecademy.com/pt/tracks/web
“Era Wilson”

Introdução ao CSS - Desenvolvimento web

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a Introdução ao CSS - Desenvolvimento web

Mais de Carlos Eduardo Kadu

Introdução ao CSS - Desenvolvimento web

Notas do Editor