html e css

Aula 05

A. Propriedades CSS: painel box, border e list

A expressão box aí se refere ao box model, que veremos na próxima aula. Em resumo, você pode determinar a largura (width) e a altura (height) dos blocos, e definir tanto sua margem interna quanto externa. A propriedade padding determina a margem interna ao elemento selecionado, margin é a margem externa. Veja o esquema publicado neste tutorial, também do Maujor.

B. Propriedades CSS: painel border

Quanto às bordas, elas estão exatamente entre a padding e a margin... Confuso? Veja novamente a imagem do tutorial do Maujor e siga o exemplo abaixo.

.exemplo {
   margin: 50px;
   padding: 10px;
   border: 5px solid #0066CC;
}
Este é um box de exemplo...

Aqui o padding (margem interna) vale 10px; o espaço entre o texto e a borda azul é de 10px. Porisso este texto não encosta na borda azul.

A propriedade border (borda colorida) vale 5px, é sólida e é azul (#0066CC).

E a propriedade margin (margem externa) vale 50px; é o espaço entre a borda do box e outros elementos.

Neste outro exemplo, determino diferentes valores para os lados do box:

.exemplo2 {
   border-style: solid;
   border-color: #0066CC;
   border-width: 1px 1px 1px 5px;
   padding: 10px;
}
Este é outro box de exemplo...

Aqui o border tem valor 1px para todos os lados, menos o esquerdo, que tem 5px.

Assim, podem existir um, dois, três ou quatro argumentos quando aplicamos uma regra na propriedade margin, padding ou border.

  topo direita rodapé esquerda
um argumento: 10px 10 10 10 10
dois argumentos: 10px 20px 10 20 10 20
três argumentos: 10px 20px 30px 10 20 30 20
quatro argumentos: 10px 20px 30px 40px 10 20 30 40

C. Propriedades CSS: painel list

No painel list você tem as opções ligadas às listas, ou seja, às tags <ul> e <ol>. Veja os exemplos:

Abaixo, uma lista não-ordenada <ul> com este CSS:

.listainside {
   list-style-position: inside;
   list-style-type: square;
}

A mesma lista, com outro CSS:

.listaoutside {
   list-style-position: outside;
   list-style-type: disc;
}

O mesmo vale para as listas ordenadas <ol>, que podem ter bullets diversos:

números romanos em minúsculas:

.romanosmin {
   list-style-type: lower-roman;
}
  1. mamão
  2. melão
  3. agrião
  4. camarão

ou ordem alfabética...

.alpha {
   list-style-type: lower-alpha;
}
  1. mamão
  2. melão
  3. agrião
  4. camarão