css basico

Prévia do material em texto

INTRODUÇÃO DO 
CSS NO WEBDESIGN
RENATO MELO - 2015
Antigamente: Site 
com emaranhado 
de tags, estilos e 
formatações
Se o cliente pedisse 
alteração você tinha 
que alterar página 
por página.
Programação 
em Três Partes
Html: Conteúdo
CSS: Estilo
Javascript: 
Inteligência
SEM PADRÕES
 ✗ Extensão da Mídia Impressa
 ✗ Layout baseado em Tabelas
 ✗ Conteúdo, Apresentação e 
Comportamento “aninhados”
 ✗ Código Incompreensível
COM PADRÕES
 ✔ Acessível de qualquer 
dispositivo
 ✔ Layout baseado em CSS
 ✔ Separação entre
Conteúdo, Apresentação e 
Comportamento
 ✔ Código Acessível
VANTAGENS
Carregamento mais rápido
Menores custos com hospedagem
Melhor Consistência Visual
Redesign mais barato e eficiente
Melhores resultados nos 
Mecanismos de Buscas
Maior acessibilidade
Prazer CSS
nome
Define um estilo único para 
um elemento: body, h1...
TÉCNICO
Parte mais 
importante
#nome
Define um estilo único 
para um identificador
#TIME
Seguem as 
ordens do 
técnico
.nome
Define um estilo único para 
uma classe, que pode ser 
utilizada qualquer hora.
.jogador
Joga para 
o #time
Exemplo
body{
background: #ccc;
font: 12pt Arial, Sans-Serif;
color: #000;
}
#topo{
width: 780px;
background: #ccc url(bgtopo.jpg) repeat-x;
font-size: 20pt;
color: #ff0000; 
}
.produto{
float: right;
text-align: center;
font-size: 16pt;
color: #ff0000; 
}
PADRÃO 
DE CORES
COR HEX
É a cor do #
As Fontes também 
merecem atenção
Exemplos de fontes:
Arial, Calibri, Verdana
Trebuchet, Times New 
Roman...
Pode-se colocar mais de 
uma fonte + opção de 
“Sans-serif” ou “Serif”
NA PRÁTICA:
Letras minúsculas
Errado:
<DIV><P>Aqui um texto!</P></DIV>
Correto:
<div><p>Aqui um texto!</p></div>
NA PRÁTICA:
Abre e feche os comandos corretamente!
Errado:
<div><p>Aqui um <em>texto!</p></em></div>
Correto:
<div><p>Aqui um <em>texto! </em></p></div>
NA PRÁTICA:
Feche todos os comandos
Errado:
<p>Um parágrafo.
Correto:
<p>Um parágrafo.</p>
NO CSS E DO HTML:
Definido pelo # ou .
Exemplo:
-no CSS: #header {width:900px;}
- no HTML:
<div id=“header”>…</div>
ANOTE SUAS 
OBSERVAÇÕES
/* Comentário */
DIVIDINDO 
UM SITE
#topo
#bemvindo
#login
#cabecalho
#logo
#box-procura
#menu
#destaque
#slider
AGORA FAÇA 
VOCÊ MESMO!
AULA QUE VEM!
COMEÇAR A 
PRODUÇÃO DO SITE! 
TRAZER SUA 
IMAGINAÇÃO + 
MATERIAL: Exemplo: 
cartolina + tintas + 
canetinhas + água + 
giz de cera.
ESTA AULA ESTÁ
DISPONÍVEL EM:
renatomelo.com.br/slides
ou no grupo do Facebook:
bit.ly/gruporenato