Autoria Web

Professor: Diego Oliveira

Aula 10 – CSS5
 <DIV>
• É uma tag HTML utilizada para agrupar
elementos
• Suporta o atributo align
• Com a utilização de CSS, pode ser
posicionada em qualquer lugar da página,
normalmente utilizando position: absolute;
• Criando classes e IDs, é possível alterar
DIVs específicas, facilitando a configuração
do site
2
 <DIV>
• No site abaixo temos um exemplo de
utilização de <DIV>. Cada uma de uma cor:

• http://www.w3schools.com/tags/tag_div.asp
3
 <DIV>
• Como ficaria o CSS para reproduzir o layout
de uma página como a do slide anterior?

4
 <DIV>
• O HTML e os arquivos da página:

• Vemos o resultado no
próximo slide!

5
<DIV>

6
 <SPAN>
• Também é utilizada para agrupar elementos
de uma página HTML
• Normalmente não se utiliza um position para
este elemento
• Suporta a inserção de CSS diretamente pelo
atributo style ou utilizando-se classes e IDs
• Diferencia-se da <DIV> por não suportar
quebra de linha
• É utilizado para pequenas partes da página
7
 <SPAN>
• Exemplo:

8
 Atividade
• Faça um site com um dos seguintes layouts:

9
 Atividade
• Layout 2:

10
 Atividade
• Layout 3:

11
Perguntas?

12