Posicionamento.
Muitas pessoas tem problemas para posicionar elementos utilizando position:absolute e position:relative. Não existe uma técnica para posicionar os elementos corretamente usando essa propriedade, basta entender o conceito de cada valor.
Position:absolute - um objeto com posicionamento absoluto tem sua posição definida pelo ponto (0,0) do navegador, ou seja, o canto superior esquerdo. A sua posição não irá variar, independendo do local onde a tag HTML está. Um objeto absoluto que esteja dentro de outro objeto absoluto terá sua posição definida a partir do ponto (0,0) do objeto pai.
Position:relative - um objeto definido com posição relativa terá sua posição definida a partir do ponto em q inicialmente ele se encontrava. Se por um motivo qualquer a tag muda de lugar, a posição do objeto também mudará.
Seletor Id.
Quem conhece alguma coisa de CSS, já deve ter usado um seletor de classe, mas conhece pouco, ou desconhece o que é um seletor de id. Bom é o seguinte. A partir da versão 4 do HTML, praticamente qualquer tag pode ter um atributo id. O atributo id serve, além de identificação, para a aplicação de folhas de estilo.
Suponha que eu tenha uma div, e aplico a ela um identificador:
Agora, eu gostaria q essa DIV se transformasse numa caixa. eu poderia fazer isso:
.caixa {witdh: 100px; height: 100px; bacground-color: #000000; }
e aplicar essa classe na DIV:
Contudo, isso seria poluir seu código HTML. Para transformar isso em uma caixa, basta fazer isso:
#box {witdh: 100px; height: 100px; bacground-color: #000000; } 
almas:
Pronto. Sua caixa está criada. o Seletor de ID deve começar com #. Apenas isso.
Layer.
Apenas um Esclarecimento. É muito comum usuários do Dreamweaver chamar a tag DIV de layer
(camada), pois quando se cria uma layer usando as ferramentas do DW ele utiliza essa tag. o Dreamweaver
subestima o CSS. Qualquer tag no CSS pode ser uma layer. Um link, uma imagem, uma lista, uma tabela,
um paragrafo, qualquer coisa. a DIV é apenas um elemento de bloco, assim como o paragrafo (
O Efeito Cascata.
Alguém já se perguntou por quê o nome é Folhas de Estilos em Cascata?
Bom, é mais ou menos isso:
suponha que você tenha criado uma classe qualquer logo no começo do seu arquivo CSS:
.classe { font-size:12px; background-color: #EFEFEF; color: #FF0000; }
Lá no final do seu arquivo você repete a mesma classe, mas mudando alguns atributos:
.classe { font-size:10px; font-weight: bold; text-decoration: underline; }
E agora, qual das declarações estará valendo? A Resposta é: as duas. Segundo o efeito Cascata, o resultado final vai ser a soma dos atributos das duas declarações. Caso ambas declarações possuam atributos iguais com valores diferentes, o valor válido será o último que foi declarado. Assim, teremos a seguinte Regra no fim das contas:
.class { font-size:10px; background-color: #EFEFEF; color: #FF0000; font-weight:bold; text-decoration: underline; }.
CSS Hack.
Aqui o caldo engrossa um pouco. Pra endender por que precisamos de hacks no CSS, vou tentar contar histórinha:
A muito tempo atrás (nem tanto assim), quando o nosso amigo IE (como colocaria o amigo bermonruf) ainda era uma terra selvagem a ser explorada. Era uma terra praticamente sem leis,
pelo fato de que um site desenvolvido com CSS pode ficar ótimo no Mozilla, e totalmente bagunçado no IE, e vice-versa. Então temos o CSS hack, que nada mais é que uma linha de código não usual que é
interpretada por alguns navegadores, mas é ignorada por outros. Em termos leigos, é um CSS que é interpretado por um navegador qualquer, mas em todos os outros ele é ignorado. Alguns Hacks:
* width: valor - Funciona em qualquer versão do IE. Serve para definir um valor para a largura que apenas o IE interpreta.
Body>HTML #box {... } - Funciona em todos os navegadores, menos no IE. na verdade, isso é um padrão definido, mas que o IE não obedece, então virou um hack, em termos praticos.
w\idth: valor - funciona em todos os navegadores, menos no Internet Explorer 5.x. Serve para consertar bugs que o IE 5.0 apresenta na renderização de widths.
"Underscore hack" - um hack muito util. Qualquer regra de CSS, Seletor ou atributo q apresente o underscore ( _ ) só será interpretado pelo Internet Explorer. Segundo as regras de sintaxe do CSS, o underscore não é permitido dentro do CSS. Como o IE tem o péssimo costume de ignorar regras, ele é exceção a regra, ou seja, ele interpreta o _ dentro do CSS!.
Como usar CSS Hacks. Talvez alguém sinta dificuldades
Imagine que eu quero criar uma caixa na minha página, e quero q essa caixa apresente cor de fundo azul no mozilla e e vermelho no IE:
Código:
#box {
width: 200px;
height: 200px;
_background-color: #FF0000;**************
background-color: #0000FF;
}
Dai você olha nos navegadores, OPA! Tanto o Mozilla quanto o IE estão com a cor de fundo azul. O que aconteceu? Simples, você ignorou a regra do Efeito Cascata. Os atributos que forem iguais dentro da mesma regra, tem prioridade o ultimo atributo declarado. Assim:
Código:
#box {
width: 200px;
height: 200px;
_background-color: #FF0000; <= (vai ser ignorado
pelo Mozilla e interpretado pelo IE. A cor de fundo
no IE será vermelha)
background-color: #0000FF; <= ( vai ser
interpretado tanto pelo Mozilla quanto pelo IE,
resultando na cor de fundo azul para Ambos)
}
O resultado final, o fundo ficará azul tanto no IE quanto no Mozilla. Isso pode ser resolvido apenas invertendo a ordem dos atributos:
Código:
#box {
width: 200px;
height: 200px;
background-color: #0000FF; /* Aceito por todos */
_background-color: #FF0000; /* aceito apenas pelo
IE */
}
Como o atributo que começa com underscore vai ser ignorado pelo Mozilla (e também pelo Opera, e pelo Mozilla Firefox), a cor de fundo no IE ficará Vermelha, e no Mozilla será azul.
Font: forum.clubedohardware.com.br por: chaccaall
Compare e veja os preços dos melhores computadores do momento, preços incriveis. Clique aqui
0 comentários
Postar um comentário