Material Didático

Defina caixa com suas palavras e defina os elementos padding, margin e border.
Explique qual a diferença entre os 4 métodos de posicionamento.
Explique qual o efeito de se aplicar a propriedade “display:inline;” aos itens de uma lista.
Com as propriedades associadas a caixas, listas e links crie o CSS referente ao título, barra de navegação e menu das figuras abaixo. Retorne à Aula 5 e 6 para relembrar as propriedades associadas à estilização de listas e links. A seguir, você pode copiar o HTML referente a essas figuras.
1. Título
2. Menu
3. Barra de navegação
<html> <head> <title>Exemplo de menu</title> </head> <body> <ul id="menu"> <li><a href="#" title="Página inicial">Home</a></li> <li><a href="#" title="Item 2">Item 2</a></li> <li><a href="#" title="Item 3">Item 3</a></li> <li><a href="#" title="Item 4">Item 4</a></li> <li><a href="#" title="Item 5">Item 5</a></li> <li><a href="#" title="Imprimir">Imprimir</a></li> <li><a href="#" title="Fale conosco">Contato</a></li> </ul> </body> </html>
Use as propriedades referentes às caixas, dimensões e posicionamento para estilizar o site que você definiu para um colecionador (na aula passada). Coloque nesse site um menu e títulos similares aos que você criou na questão anterior e aplique uma única paleta de cores para todos os elementos desse site. Por exemplo, a figura a seguir ilustra uma forma de organizar os elementos da questão anterior.

arrow_back Aula 07 - CSS: modelo de caixas, bordas, dimensões e posicionamento