css básico

CSSBÁSICO

RENATO MELO - 2014

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

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

Prazer CSS

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

TÉCNICOParte mais importante

#nomeDefine um estilo único para um identificador

#TIMESeguem as ordens do técnico

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

.jogadorJoga para o #time

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;

}

PADRÃO DE

CORES

COR HEXÉ a cor do #

As Fontes também merecem atenção

Exemplos de fontes:Arial, Calibri, VerdanaTrebuchet, 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!

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

FACEBOOK.COM/RENATOMELOMKT

renato@iskadigital.com.br