ocupado pela imagem: • visibility: hidden | visible Exemplo: IMG {visibility: hidden} // torna invisíveis todas as imagens Logo abaixo, encontrase 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 eJovem 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 (defaultnã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 } zindex 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) { zindex: 2 } whitespace Especifica se um elemento vai ser mostrado normalmente ou num texto préformatado normal; pre { whitespace: 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, podemse incluir as declarações em um atributo STYLE. Mas, se tal procedimento torna difícil a localização e a gerência dos estilos, podese usar um recurso para marcálo, de forma que seja considerado diferente. Isto pode ser feito atribuindolhe uma identificação única. Em HTML 3.2, podese usar o atributo ID: <P ID=w779>Texto especial</P> Projeto eJovem Módulo II: CSS 68 Para alterar as características deste parágrafo agora, podese 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 enterrouse 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, usase: 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 (pseudoclasses e pseudoelementos) Para seletores especiais que mudam de estado, como o texto marcado com <A>, é possível atribuir propriedades diferentes para cada estado: Projeto eJovem Módulo II: CSS 69 O que vemos é o que muda as características dos links nãovisitados, 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 eJovem 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. borderleftcolor Cor da borda citada. background Rolagem do fundo / borderleftstyle Estilo da borda citada. Projeto eJovem Módulo II: CSS 71 attachment Marca d'água. background image Imagem de fundo. borderleftwidth Largura da borda citada. backgroundcolor Cor de fundo ou transparência. borderright Largura, estilo e cor da borda direita. background position Posicionamento da imagem de fundo. borderrightcolor Cor da borda citada. background repeat Configuração ladoalado da imagem de fundo. borderrightstyle