Apostila_HTML_CSS_E-Jovem 11

cores sentido horário
Projeto e­Jovem ­ Módulo II: CSS 59
2.8.4.  border­style
O estilo de cada uma das quatro bordas pode ser alterado com border­style. Também é 
possível  defini­los   individualmente  usando border­top­style,  border­bottom­style,  border­
right­style e border­left­style. São vários os estilos disponíveis (tracejado, pontilhado, várias 
versões de 3D, etc.).
• border­top­style: none | dotted | dashed | solid | double | groove | ridge | inset | 
outset
• border­bottom­style: nome de estilo (um dos nomes acima)
• border­right­style: nome de estilo
• border­left­style: nome de estilo
       Exemplos:
       border­bottom­style: none border­right­style: solid;
       border­left­style: inset
As propriedades das bordas podem ser tratadas em grupo, com border­style. A ordem dos 
fatores é   importante. Podem ser  incluídos todos os quatro valores,  dois (referindo­se às 
bordas horizontais e verticais) ou apenas um (afetando todas as bordas). Sintaxe:
•border­style:  border­top­style | border­right­style | border­bottom­style | border­left­style
       Exemplos:
       border­style: solid none inset outset;
       border­style: solid
       border­style: inset outset
Cada um dos border­xxx­style acima é  um dos seguintes valores:  none, dotted, dashed, 
solid, double, groove, ridge, inset, outset. No Netscape e Internet Explorer funcionam os 
estilos: solid, inset (efeito baixo­relevo) e outset (efeito alto­relevo). No Netscape solid é 
default,   mas   no   Explorer,   o   default   é   none.   Portanto,   uma   borda   não   aparece   se   a 
propriedade border­style não for definida antes.
2.8.5.  Border
As   propriedades   border­top,   border­bottom,   border­left   e   border­right   agrupam   as 
propriedades de cor, estilo e espessura para cada uma das quatro bordas.
       border­top: border­width | border­style | border­color
       border­bottom: border­width | border­style | border­color
       border­left: border­width | border­style | border­color
       border­right: border­width | border­style | border­color
A propriedade border é uma forma reduzida de definir tudo isto de uma vez só para todas 
as bordas e de forma idêntica (não é possível especificar valores diferentes para as bordas, 
neste caso). Todos os itens não precisam aparecer, mas a ordem dos fatores é importante:
       border:  border­width | border­style | border­color
Projeto e­Jovem ­ Módulo II: CSS 60
2.8.6.  width e height
As propriedades width e height modificam a altura e largura de um bloco da mesma forma 
que atributos HTML width e height usados em imagens e applets no HTML. Com folhas de 
estilos  podem ser  usados para redimensionar a   "caixa"  de qualquer elemento de bloco. 
Sintaxe:
• width: comprimento | auto
• height: comprimento | auto
2.8.7.  float
A propriedade float permite que um bloco qualquer seja posicionado à direita ou esquerda 
da janela do browser, fazendo com que o texto restante flua em sua volta. Permite que 
qualquer  bloco se  comporte  como uma imagem que faz uso dos atributos  align=left  e 
align=right no HTML. Sintaxe:
• float: left | right | none
2.8.8.  clear
E finalmente, para evitar que um bloco flua em torno de uma imagem ou bloco que utiliza a 
propriedade float,  existe  a  propriedade clear,  a  qual  deve ser  atribuída a um bloco ou 
parágrafo que é afetado pela flutuação de um bloco. Faz a mesma coisa que o atributo clear, 
usado no <BR> em HTML, só que aqui ela é suportada em qualquer elemento (bloco ou 
não).
• clear: none | left | right | both
Logo abaixo, encontram­se propriedades e valores para caixas. 
Propriedade  Descrição  Valores  Exemplo 
margin­left  Ajusta a distância a partir do lado esquerdo da página  tamanho (pt, in, cm, px)  { margin­left: 1in } 
margin­right 
Ajusta a distância a partir do 
lado direito da página  tamanho (pt, in, cm, px) 
{ margin­right: 
1in } 
margin­top  
Ajusta a distância a partir da 
parte de baixo do elemento 
prévio 
tamanho (pt, in, cm, px) 
{ margin­top: 
­20pt } 
margin­bottom 
Ajusta a distância a partir da 
parte de cima do próximo 
elemento 
tamanho (pt, in, cm, px)  { margin­bottom: 20pt } 
margin  
Ajustas as margens em todos 
os quatro lados de um 
elemento (Se houver 
somente um valor, ele se 
aplica a todos os lados; se 
houver dois ou três, o valor 
que falta será tomado do 
lado oposto.) 
tamanho (pt, in, cm, px) 
ou porcentagem do 
tamanho da fonte na 
ordem: alto, direita, 
baixo, esquerda 
{ margin: .5cm .
5cm 1cm .5cm } 
Projeto e­Jovem ­ Módulo II: CSS 61
padding  
Ajusta o preenchimento em 
todos os quatro lados do 
conteúdo de um elemento 
(Se houver somente um 
valor, ele se aplica a todos os 
lados; se houver dois ou 
três, o valor que falta será 
tomado do lado oposto.) 
tamanho (pt, in, cm, px) 
ou porcentagem do 
tamanho da fonte na 
ordem: alto, direita, 
baixo, esquerda 
{ padding: .5cm .
5cm 1cm .5cm } 
padding­top  
Ajusta o preenchimento na 
parte de cima do conteúdo 
de um elemento 
tamanho (pt, in, cm, px) 
ou porcentagem do 
tamanho da fonte 
{ padding­top: 5pt } 
padding­right  
Ajusta o preenchimento no 
lado direito do conteúdo de 
um elemento 
tamanho (pt, in, cm, px) 
ou porcentagem do 
tamanho da fonte 
{ padding­right: 
5pt } 
padding­
bottom  
Ajusta o preenchimento na 
parte de baixo do conteúdo 
de um elemento 
tamanho (pt, in, cm, px) 
ou porcentagem do 
tamanho da fonte 
{ padding­bottom: 
5pt } 
padding­left  
Ajusta o preenchimento no 
lado esquerdo do conteúdo 
de um elemento 
tamanho (pt, in, cm, px) 
ou porcentagem do 
tamanho da fonte 
{ padding­left: 5pt } 
border­top­
width  
Ajusta a largura da borda ao 
longo da parte de cima de 
um elemento 
tamanho (pt, in, cm, 
px); thin, medium, thick 
{ border­top­width: 
thin } 
border­right­
width  
Ajusta a largura da borda ao 
longo do lado direito de um 
elemento 
tamanho (pt, in, cm, 
px); thin, medium, thick 
{ border­right­
width: thin } 
border­bottom­
width  
Ajusta a largura da borda ao 
longo da parte de baixo de 
um elemento 
tamanho (pt, in, cm, 
px); thin, medium, thick 
{ border­bottom­
width: thin } 
border­left­
width  
Ajusta a largura da borda ao 
longo do lado esquerdo de 
um elemento 
tamanho (pt, in, cm, 
px); thin, medium, thick 
{ border­left­width: 
thin } 
border­width  
Ajusta a largura da borda 
em cada lado de um 
elemento na ordem parte de 
cima, lado direito, parte de 
baixo, lado esquerdo (Se 
houver só um valor, ele se 
aplica a todos os lados; se 
houver dois ou três, os 
valores que faltam serão 
tomados do lado oposto.) 
tamanho (pt, in, cm, 
px); thin, medium, thick 
{ border­width: thin 
thin thick thin } 
border­top­
color  
Ajusta a cor da borda ao 
longo do lado de cima de 
um elemento 
nome da cor ou código 
hex 
{ border­top­color: 
green } 
Projeto e­Jovem ­ Módulo II: CSS 62
border­right­
color  
Ajusta a cor da borda ao 
longo do lado direito de um 
elemento 
nome da cor ou código 
hex 
{ border­right­color: 
green } 
border­bottom­
color  
Ajusta a cor da borda ao 
longo do lado de baixo de 
um elemento 
nome da cor ou código 
hex 
{ border­bottom­
color: #00FF00 } 
border­left­
color  
Ajusta a cor da borda ao 
longo do lado esquerdo de 
um elemento 
nome da cor ou código 
hex 
{ border­left­color: 
thin } 
border­color  
Ajusta a cor da borda em cada 
lado de um elemento na ordem 
parte de cima, lado direito, 
parte de baixo, lado esquerdo 
(Se houver só um valor, ele se 
aplica a todos os lados; se 
houver dois ou três, os valores 
que faltam serão tomados do 
lado oposto; note que o 
Netscape só permite um valor) 
nome da cor ou código 
hex 
{ border­color: green 
#FFFF00 #00FFFF 
green } (IE4) 
{ border­color: 
green } (IE4 or 
Netscape 4) 
border­top­
style  
Ajusta o estilo da borda ao 
longo do lado de cima de 
um elemento 
nome do estilo (none, 
solid, double, groove, 
ridge, inset, outset) 
{ border­top­style: 
ridge } 
border­right­