Desenvolvimento Front End

Por: Anderson de Castro

Cronograma

• O que é CSS• Tableless• Referenciando!• Seletores– Intervalo :: 10 minutos

• Elementos e Atributos• Classes– Intervalo :: 10 minutos

• Posicionamento• Encerramento 1º Dia

O que é CSS

Cascading Style Sheets-Folha de Estilos em Cascata

Objetivo: Separar CONTEÚDO(HTML) do LAYOUT(formatação)

TableLess

“Sem Tabela!” CERTO???

Não utilizar tabelas <table>para estruturar o layout do site. NÃO é BANIRo uso de <table>

Referenciando CSS

• Inline– <p style=“color: green;”> Aqui paragráfo </p>

• No próprio arquivo– <style> p { color: green; } </style>

• Arquivo Externo– <link rel=“stylesheet” href=“estilos.css” />

Seletores

Elementos e Atributos

Vamos à PRÁTICA!

Classes

Usadas para formatar um ou vários elementos, atribuindo-lhes mesma características.

p.cor_azu { color: #09F; }

<p class=“cor_azul”>Parágrafo com cor azul </p>

Posicionamento

Positions, Floats, Z-indexes , etc ....

Por HOJE é só!

... No próxima semana :

O tão esperado 960 Grid System

E mais dicas e técnicas para agilizar o desenvolvimento Front-End