Apostila_HTML_CSS_E-Jovem 11

style  
Ajusta o estilo da borda ao 
longo do lado direito de um 
elemento 
nome do estilo (none, 
solid, double, groove, 
ridge, inset, outset) 
{ border­right­style: 
solid } 
border­bottom­
style  
Ajusta o estilo da borda ao 
longo do lado de baixo de 
um elemento 
nome do estilo (none, 
solid, double, groove, 
ridge, inset, outset) 
{ border­bottom­
style: groove } 
border­left­
style  
Ajusta o estilo da borda ao 
longo do lado esquerdo de 
um elemento 
nome do estilo (none, 
solid, double, groove, 
ridge, inset, outset) 
{ border­left­style: 
inset } 
border­style  
Ajusta o estilo da borda em 
todos os lados de um 
elemento 
nome do estilo (none, 
solid, double, groove, 
ridge, inset, outset) 
{ border­style: 
outset } 
border­top  
Ajusta a largura, cor, e estilo 
da borda ao longo do lado 
de cima de um elemento 
largura, cor, e estilo  { border­top: thin green ridge } 
border­right  
Ajusta a largura, cor, e estilo 
da borda ao longo do lado 
direito de um elemento 
largura, cor, e estilo  { border­right: thin 
green ridge } 
border­bottom 
Ajusta a largura, cor, e estilo 
da borda ao longo do lado 
de baixo de um elemento 
largura, cor, e estilo 
{ border­bottom: 
thin green ridge } 
Projeto e­Jovem ­ Módulo II: CSS 63
border­left  
Ajusta a largura, cor, e estilo 
da borda ao longo do lado 
esquerdo de um elemento 
largura, cor, e estilo  { border­left: thin 
green ridge } 
border  
Ajusta a largura, cor, e estilo 
da borda em todos os lados 
de um elemento 
largura, cor, e estilo 
{ border: thin green 
ridge } 
float  
Faz com que o elemento flutue 
para um lado e outro do texto e 
o envolva. (Usado nos 
elementos DIV e SPAN.) 
left, right, ou none  { float: left } 
clear  
Especifica se o elemento pode 
ter elementos flutuando à sua 
volta ­ faz com que o elemento 
se posicione por baixo de 
qualquer elemento que esteja 
flutuando no lado especificado. 
left, right, ou both  { clear: left } 
pt = pontos; in = polegadas; cm = centímetros; px = pixels; 
2.9.  Propriedades de classificação
Estas   propriedades   classificam os   elementos   em  categorias   que  podem  receber   estilos. 
Categorias podem ser: listas, blocos, trechos de blocos ou itens invisíveis.
2.9.1.  display
Esta propriedade define como um elemento é  mostrado.  A propriedade none desliga o 
elemento e fecha o espaço que o objeto antes ocupava (torna o objeto invisível); block abre 
uma nova caixa onde o objeto é  posicionado, relativo aos outros blocos; list­item é  um 
bloco com um marcador de lista e inline define um elemento como parte de um bloco.
       Sintaxe:
• display: block | inline | list­item | none
       Exemplo:
       P {display: list­item}
       IMG {display: none}             // desliga todas as imagens
2.9.2.  white­space
Define   como  o   espaço   em branco  do   elemento  é   gerenciado   (se   as   linhas  devem  ser 
quebradas  para  que  apareçam na   tela  ou  não   (nowrap)  ou   se  os   espaços  em branco, 
tabulações, etc. devem ser considerados (pre).
• white­space: normal | pre | nowrap
Projeto e­Jovem ­ Módulo II: CSS 64
2.9.3.  list­style
Esta   propriedade   e   as   propriedades   list­style­type,   list­style­image   e   list­style­position 
definem atributos para objetos de lista, como tipo de marcador, imagem do marcador e 
posição. Esses elementos não são suportados no Netscape.
• list­style­type: disc | circle | square | decimal | lower­roman
• list­style­type: upper­roman | lower­alpha | upper­alpha | none
• list­style­image: url(url_da_imagem)
• list­style­position: inside | outside
     Exemplo:
     list­style­image: url(bullet.gif)
É possível definir as três propriedades através de um atalho usando list­type. A ordem dos 
fatores é importante neste caso.
• list­style: list­style­type | list­style­image | list­style­position
     Exemplo:
     list­style: url(bullet.gif)
     list­style: square outside
Logo abaixo se encontra uma tabela de propriedades e valores estilísticos de classificação
Propriedade  Descrição  Valores  Exemplo 
display  faz com que o elemento não apareça none  { display: none } 
list­style­type 
especifica a aparência de 
marcadores de item de lista
 (uso com elementos LI) 
disk; circle; square; 
decimal; lower­
roman; upper­roman; 
lower­alpha; upper­
alpha; none 
{ list­style­type: 
square } 
list­style­image 
especifica uma imagem para ser 
usada como marcador de item de 
lista (uso com elementos LI) 
url(URL); none 
{ list­style­
image: 
url(redball.jpg) } 
list­style­
position 
especifica a posição de 
marcadores de item de lista ( uso 
com elementos LI) 
inside; outside  { list­style­
position: inside } 
list­style 
especifica a posição, estilo,e URL 
da imagem a ser usada como 
marcador de item de lista ( uso 
com elementos LI) 
inside; outside disk; 
circle; square; 
decimal; lower­
roman; upper­roman; 
lower­alpha; upper­
alpha; none URL 
{ list­style: inside 
disk 
url(redball.jpg) } 
pt = pontos; in = polegadas; cm = centímetros; px = pixels; 
Projeto e­Jovem ­ Módulo II: CSS 65
2.10.  Posicionamento
O posicionamento  de  objetos   em HTML pode   ser   conseguido  em  termos  absolutos  ou 
relativos usando CSS 2. As propriedades permitem o posicionamento em três dimensões 
(horizontal,  vertical  e em camadas).  Embora os  recursos de posicionamento não façam 
parte do CSS1, tanto o Netscape Navigator 4 como o Internet Explorer 4 o suportam.
2.10.1.  position, top e left
Esta propriedade precisa de mais duas propriedades que definem o posicionamento de um 
objeto. Os atributos localizam o objeto na tela de forma absoluta ou de forma relativa. A 
origem da posição absoluta será a posição do objeto no nível imediatamente superior. O 
posicionamento relativo refere­se à posição anterior do objeto. Sintaxe:
• position: absolute | relative
• left: comprimento | porcentagem | auto
• top: comprimento | porcentagem | auto
Exemplo: considere as quatro imagens a seguir:
       <div class="imagem1">
       <img src="T1.gif" width=150 height=72 border=1> 1 Posição 0 0
       </div>
       <div class="imagem2">
       <img src="T2.gif" width=150 height=72 border=1> 2 Posição 0 200
       </div>
       <div class="imagem3">
       <img src="T3.gif" width=150 height=72 border=1> 3 Posição ­25 ­25
       </div>
       <div class="imagem4">
       <img src="T4.gif" width=150 height=72 border=1> 4 Posição 100 0
       </div>
Aplicando a seguinte folha de estilos para posicionar as quatro imagens relativamente à sua 
localização  original,   obtemos  a   imagem ao   lado  (qual   imagem?).  Os   retângulos   claros 
indicam a posição original da imagem:
       DIV.imagem1 { position: relative; top: 0px; left: 0px; }
       DIV.imagem2 { position: relative; top: 0px; left: 200px; }
       DIV.imagem3 { position: relative; top: ­25px; left: ­25px; }
       DIV.imagem4 { position: relative; top: 100px; left: 0px; }
Usando posicionamento absoluto, o bloco é movido em relação ao canto superior esquerdo 
do browser.
Projeto e­Jovem ­ Módulo II: CSS 66
       DIV.imagem1 { position: absolute; top: 0px; left: 250px; }
       DIV.imagem2 { position: absolute; top: 100px; left: 0px; }
       DIV.imagem3 { position: absolute; top: 160px; left: 120px; }
       DIV.imagem4 { position: absolute; top: 200px; left: ­80px; }
2.10.2.  z­index
A propriedade z­index permite ordenar os objetos em camadas. É um eixo de profundidade. 
Para usá­la, basta definir em cada objeto:
• z­index: número
onde número é a camada de exibição. Quanto maior o número, mais alta a camada. O 
corresponde à camada do texto. Se um objeto tiver z­index menor que zero aparecerá atrás 
do texto. Se z­index for maior que zero, aparecerá na frente. Quando não é definido ou 
quando z­index: 0  o bloco ocupará a mesma camada que o texto.
2.10.3.  visibility
Esta propriedade serve para tornar um bloco visível ou invisível. Difere de display porque 
não remove o espaço antes