css básico

37
CSS BÁSICO RENATO MELO - 2014

Upload: renato-melo

Post on 29-Jun-2015

474 views

Category:

Design


4 download

DESCRIPTION

A importância do CSS e como ele funciona dentro da programação de um site. Esta aula mostra de maneira clara como o CSS facilita a vida do usuário final.

TRANSCRIPT

Page 1: CSS Básico

CSSBÁSICO

RENATO MELO - 2014

Page 2: CSS Básico

Antigamente: Site com

emaranhado de tags, estilos e

formatações

Page 3: CSS Básico

Se o cliente pedisse alteração

você tinha que alterar página

por página.

Page 4: CSS Básico
Page 5: CSS Básico

Programação em Três Partes

Html: Conteúdo

CSS: Estilo

Javascript: Inteligência

Page 6: CSS Básico

SEM PADRÕES

✗ Extensão da Mídia Impressa

✗ Layout baseado em Tabelas

✗ Conteúdo, Apresentação e Comportamento “aninhados”

✗ Código Incompreensível

Page 7: CSS Básico

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

Page 8: CSS Básico

VANTAGENSCarregamento mais rápido

Menores custos com hospedagem

Melhor Consistência Visual

Redesign mais barato e eficiente

Melhores resultados nos Mecanismos de Buscas

Maior acessibilidade

Page 9: CSS Básico

Prazer CSS

Page 10: CSS Básico

nomeDefine um estilo único para um elemento: body, h1...

TÉCNICOParte mais importante

Page 11: CSS Básico

#nomeDefine um estilo único para um identificador

#TIMESeguem as ordens do técnico

Page 12: CSS Básico

.nomeDefine um estilo único para uma classe, que pode ser utilizada qualquer hora.

.jogadorJoga para o #time

Page 13: CSS Básico

Exemplobody{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;

}

Page 14: CSS Básico

PADRÃO DE

CORES

Page 15: CSS Básico

COR HEXÉ a cor do #

Page 16: CSS Básico

As Fontes também merecem atenção

Page 17: CSS Básico

Exemplos de fontes:Arial, Calibri, VerdanaTrebuchet, Times New Roman...

Page 18: CSS Básico

Pode-se colocar mais de uma fonte + opção de “Sans-serif” ou “Serif”

Page 19: CSS Básico

NA PRÁTICA:

Letras minúsculas

Errado:<DIV><P>Aqui um texto!</P></DIV>

Correto:<div><p>Aqui um texto!</p></div>

Page 20: CSS Básico

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>

Page 21: CSS Básico

NA PRÁTICA:

Feche todos os comandos

Errado:<p>Um parágrafo.

Correto:<p>Um parágrafo.</p>

Page 22: CSS Básico

NO CSS E DO HTML:

Definido pelo # ou .

Exemplo:

-no CSS: #header {width:900px;}

- no HTML:<div id=“header”>…</div>

Page 23: CSS Básico

ANOTE SUAS OBSERVAÇÕES

/* Comentário */

Page 24: CSS Básico

DIVIDINDO UM SITE

Page 25: CSS Básico
Page 26: CSS Básico

#topo

Page 27: CSS Básico

#bemvindo

Page 28: CSS Básico

#login

Page 29: CSS Básico

#cabecalho

Page 30: CSS Básico

#logo

Page 31: CSS Básico

#box-procura

Page 32: CSS Básico

#menu

Page 33: CSS Básico

#destaque

Page 34: CSS Básico

#slider

Page 35: CSS Básico

AGORA FAÇA VOCÊ

MESMO!

Page 36: CSS Básico

FAÇA A DIVISÃO DO SITE DA ESAMC: ESAMC.BR

Page 37: CSS Básico

FACEBOOK.COM/RENATOMELOMKT

[email protected]