Apostila_HTML_CSS_E-Jovem 11
Pré-visualização17 páginas
ocupado pela imagem:
\u2022 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.
\u2022 Agrupando com <span>
\u2022 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