Apostila_HTML_CSS_E-Jovem 11

ocupado pela imagem:
• visibility: hidden | visible
Exemplo:
       IMG {visibility: hidden}               // torna invisíveis todas as imagens
Logo   abaixo,   encontra­se   uma   tabela   com   propriedades   e   valores   estilísticos   para 
posicionamento:
Propriedade  Descrição  Valores  Exemplo 
clip   Especifica a área do elemento que aparece como transparente 
rect (top right left  
bottom) onde top right 
left bottom são definidas 
como auto ou como 
valores de extensão (pt, 
in, cm, px) 
{ clip: rect (5pt 
auto auto auto) } 
height 
Especifica a altura de um elemento 
(é mais útil para o escalonamento 
de imagens; a média da aparência 
será mantida se a width for 
especificada como auto) 
auto ou valores de 
extensão (pt, in, cm, px) 
ou porcentagem 
{ height: 50px } 
width
Especifica a largura de um 
elemento (é mais útil para o 
escalonamento de imagens; a média 
da aparência será mantida, se 
height for especificada como auto) 
auto ou valores de 
extensão (pt, in, cm, px) 
or porcentagem 
{ width: 50% } 
Projeto e­Jovem ­ Módulo II: CSS 67
left 
Especifica a posição esquerda de 
um elemento relativamente ou 
absolutamente posicionado 
auto ou valores de 
extensão (pt, in, cm, px) 
or porcentagem 
{ left: 2pt } 
top  
Especifica a posição da parte de 
cima de um elemento 
relativamente ou absolutamente 
posicionado 
auto ou valores de 
extensão (pt, in, cm, px) 
or porcentagem 
{ top: ­2pt } 
overflow (não 
herdado) 
Especifica o manejo da porção 
de um elemento relativamente 
ou absolutamente posicionado, 
que se derrama sobre outro 
elemento 
clip (a porção 
inundada é oculta) ou 
none (a porção 
inundada aparece) ou 
scroll (para revelar a 
porção inundada) 
{ overflow: clip } 
position  Especifica se o elemento pode ser posicionado 
absolute (em relação 
ao documento); 
relative (em relação 
ao elemento pai); 
static (default­­não 
posicionado) 
{ position: 
relative } 
visibility  
Especifica se o elemento é visível 
(espaço para o elemento é 
reservado em ambos os casos) 
visible; hidden  { visibility: hidden } 
z­index 
Especifica se o elemento é mostrado 
acima ou abaixo de outros 
elementos com os quais faz 
entelhamento (observe que o 
Netscape 4.0 lida com isso através 
do atributo layer) 
number (positivo para 
cima, negativo para 
baixo, começando do 
1; por default a 
elementos sucessivos 
são assignados 
números superiores 
aos elementos 
antecedentes) 
{ z­index: 2 } 
white­space  
Especifica se um elemento vai 
ser mostrado normalmente ou 
num texto pré­formatado 
normal; pre 
{ white­space: 
pre } 
pt = pontos; in = polegadas; cm = centímetros; px = pixels;
2.11.  Classes e IDs
Às vezes, um parágrafo tem uma aparência diferente dos outros parágrafos em uma certa 
parte do texto. Para mudar o estilo dele, podem­se incluir as declarações em um atributo 
STYLE.
Mas, se tal procedimento torna difícil a localização e a gerência dos estilos, pode­se usar 
um recurso para marcá­lo,  de forma que seja considerado diferente.   Isto pode ser feito 
atribuindo­lhe uma identificação única. Em HTML 3.2, pode­se usar o atributo ID:
<P ID=w779>Texto especial</P>
Projeto e­Jovem ­ Módulo II: CSS 68
Para alterar as características deste parágrafo agora, pode­se usar o seu ID como seletor, da 
forma:
#w779 {color: cyan }
Se   isto   estiver   em um arquivo  CSS,   todas   as   páginas  que  o  usam e  que   tiverem um 
elemento com o ID #w779 serão afetadas. Se houver mais de um com o mesmo ID, apenas 
o primeiro será afetado.
Melhor que usar ID é agrupar características semelhantes em classes. Uma classe é uma 
variação de um determinado objeto. Por exemplo, um texto teatral pode ter três parágrafos 
com apresentação diferente, representando as falas de três personagens. Se quiséssemos 
que cada um tivesse uma cor diferente, poderíamos declarar cada um como sendo de uma 
classe distinta:
<p class=padre>Eu retiro o que disse, João</p>
<p   class=grilo>Retirando  ou  não   retirando,   o   fato  é   que   o   cachorro   enterrou­se   em 
latim</p>
<p class=bispo>Um cachorro? Enterrado em latim? </p>
<p class=padre>Enterrado latindo, Senhor Bispo, Au, au, au, não sabe? </p>
Para dar a cada parágrafo de um mesmo personagem (mesma classe) os mesmos atributos, 
usa­se:
P.grilo { color: maroon }
P.padre { color: black }
P.bispo { color: navy }
Desta maneira, todos os textos que deverão ser lidos pelo personagem "Bispo" estarão em 
azul marinho.
Uma classe também pode conter descritores diferentes. Se todos os textos citados por um 
certo autor tivessem que estar em outra cor ou fonte, poderíamos criar uma classe sem citar 
o descritor:
.verde { color: green }
Todos os descritores que tiverem o atributo CLASS=verde serão afetados, por exemplo:
<P class=verde>, <h3 class=verde>, <table class=verde>, etc.
2.12.  Links (pseudo­classes e pseudo­elementos)
Para seletores especiais que mudam de estado, como o texto marcado com <A>, é possível 
atribuir propriedades diferentes para cada estado:
Projeto e­Jovem ­ Módulo II: CSS 69
O que vemos é  o que muda as características dos links não­visitados, ativos e visitados. 
Assim como qualquer seletor, os links podem ser combinados com outros descritores:
P, A:link, H2 {color: red}
2.13.  Agrupando elementos (span e div)
Os elementos <span> e <div> são usados para agrupar e estruturar um documento e são 
freqüentemente usados em conjunto com os atributos class e id.
Nesta lição, veremos com detalhes o uso dos elementos HTML <span> e <div>, no que se 
refere a sua vital importância para as CSS.
• Agrupando com <span>
• Agrupando com<div>
2.13.1.  Agrupando com <span>
O elemento <span> é um elemento neutro e que não adiciona qualquer tipo de semântica 
ao documento. Contudo, <span> pode ser usado pelas CSS para adicionar efeitos visuais a 
partes específicas do texto no seu documento.
Um exemplo deste uso é mostrado na citação abaixo:
<p>Dormir cedo e acordar cedo faz o homem saudável, rico e sábio.</p>
Vamos supor que queremos enfatizar na cor vermelha os benefícios apontados na frase. 
Para   isto,  marcamos  os  benefícios   com <span>.  A  cada  span,  atribuímos uma class  e 
estilizamos na folha de estilos:
Para ver o resultado, digite as linhas acima!
É claro que você pode usar id para estilizar o elemento <span>. Mas, como você deve estar 
lembrado, deverá usar uma única id para cada um dos três elementos <span>, conforme 
foi explicado na lição anterior.
2.13.2.  Agrupando com <div>
Enquanto <span> é usado dentro de um elemento nível de bloco, como vimos no exemplo 
anterior, <div> é usado para agrupar um ou mais elementos nível de bloco.
Diferenças   à   parte,   o   agrupamento   com  <div>   funciona  mais   ou  menos   da  mesma 
maneira. Vamos ver um exemplo tomando duas listas de presidentes dos Estados Unidos 
agrupados segundo suas filiações políticas:
Projeto e­Jovem ­ Módulo II: CSS 70
E na folha de estilos, podemos agrupar a estilização da seguinte forma:
E o fazer o agrupamento da seguinte forma:
Como resultado, temos:
Nos   exemplos   mostrados   acima   usamos   somente   <div>   e   <span>   para   simples 
estilizações,   tais   como   cores   de   textos   e   de   fundos.   Contudo,   estes   dois   elementos 
possibilitam estilizações bem mais avançadas.
Atributos do CSS
Atributo de CSS O que ele formata Atributo de CSS O que ele formata
background
Cor de fundo, imagem, 
transparência. border­left­color Cor da borda citada.
background­ Rolagem do fundo /  border­left­style Estilo da borda citada.
Projeto e­Jovem ­ Módulo II: CSS 71
attachment Marca d'água.
background­
image Imagem de fundo. border­left­width Largura da borda citada.
background­color
Cor de fundo ou 
transparência. border­right
Largura, estilo e cor da 
borda direita.
background­
position
Posicionamento da 
imagem de fundo. border­right­color Cor da borda citada.
background­
repeat
Configuração lado­a­lado 
da imagem de fundo.
border­right­style