Autoria Web

Professor: Diego Oliveira

Aula 08 – CSS3
 Margin, Padding e Border
• Há três componentes que circundam cada
elemento do HTML:
– Margin
– Padding
– Border

2
 Tipos de Borda
• border-style:

3
 Largura de Borda
• border-width:
– thin

– medium

– thick

– 2px

– 10px
4
 Bordas da Tabela

Propósito Atributo da Propriedades do

Tabela CSS
Bordas border border properties
Espaço dentro da cellpadding padding
célula
Espaço entre as cellspacing border-spacing
células
Moldura da tabela frame border properties
Alinhamento align, valign text-alignment,
vertical-alignment

5
 Alinhamento de Elementos
• O posicionamento do elementos pode ser:
– position: static;
– position: relative;
– position: absolute;
– position: fixed;
• Também pode ser:
– float left;
– float right;
– float none;
6
 Sobreposição de Elementos
• Para controlar a sobreposição de elementos,
utiliza-se a propriedade overflow, que
possui os valores:
– visible
– hidden
– scroll
– auto

7
 Elementos em Camadas
• A propriedade z-
index define em
qual camada o
elemento se
encontra, os
valores são
inteiros:

8
 Exemplo de Camadas
• Como fica o CSS?

9
 Exemplo de Camadas
• Como fica o HTML?

• E o resultado?

10
 Atividade
• Colocar 3 elementos contidos em 3:
– Box diferentes (cores e bordas)
– Overflows diferentes
– Positions diferentes
– Camadas diferentes (z-index)
– Bordas diferentes (estilo e largura)
• OBS.: entregar até o final da aula

11
Perguntas?

12