HTML e CSS 05: Mais painéis CSS do Dreamweaver

 1. Propriedades CSS: painel box

curso-html-css-painel-box

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 margeminterna ao elemento selecionado, margin é a margem externa. 

2. Propriedades CSS: painel border

curso-html-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

3. Propridades CSS: painel list

curso-html-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;
}
  • mamão
  • melão
  • agrião
  • camarão

A mesma lista, com outro CSS:

.listaoutside {
   list-style-position: outside;
   list-style-type: disc;
}
  • mamão
  • melão
  • agrião
  • camarão

O mesmo vale para as listas ordenadas

    , 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