Apostila_HTML_CSS_E-Jovem 11
73 pág.

Apostila_HTML_CSS_E-Jovem 11

Disciplina:Análise Textual7.870 materiais279.829 seguidores
Pré-visualização17 páginas
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­