Ir ao conteúdo
  • Cadastre-se
Entre para seguir isso  
chaccaall

DICAS CSS

Posts recomendados

:-BEER Pessoal Nesse pequeno artigo, pretendo passar algumas dicas de como manipular CSS. Mexer com CSS não tem nenhuma dificiculdade, mas tem alguns pontos que precisam ser esclarecidos. <_<

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:

<div id="box"></div>

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:

<div id="box" class="caixa"></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; } :palmas:

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 (

</p>).

O Efeito Cascata.

Alguém já se perguntou por quê o nome é Folhas de Estilos em Cascata? :tantan:

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 :muro: 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 bomb_ie.gif(como colocaria o amigo bermonruf) ainda era uma terra selvagem a ser explorada. Era uma terra praticamente sem leis, :bravo:

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 em aplicar CSS hacks, normalmente essa dificuldade é gerada pelo Efeito Cascata. Acompanhe.

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:

#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:

#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:

#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.

Isso foi um incompleto só tem uma função, é despertar o interesse para o uso correto e abundante de

CSS no design de um web site. :bye::bandeira:

Compartilhar este post


Link para o post
Compartilhar em outros sites

Muito bom o tutorial! Acho q poderia ser reservado à somente dicas de CSS, e se der certo, talvez, destacado..

Parabens..

só uns detalhes

Suponha que eu tenha uma div, e aplico a ela um identificador:

<div>

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:

<div></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; } clap1.gif

Pronto. Sua caixa está criada. o Seletor de ID deve começar com #. Apenas isso.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Acho que o que esta em vermelho deveria ser assim:

<div id="box">

;

<div id="box" class="caixa"></div>.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Hehehe.. isso aê!

E dai surgiram navegadores como o Firefox e o Opera, esse último passa 100% no Acid.

Bom para por aqui, q ta ficando muito off topic...

Flwss :-BEER

Compartilhar este post


Link para o post
Compartilhar em outros sites

hahahahahaha

gostei das explicações ai galerinha, além de já mexer um tanto com css, mas os hacks ali ao menos agora sei do q chamar hehehe...

pois já sabia do tratamento diferente.

######, bem interessante o tópico ai, vou tá passando com freqüência.

valeu...

Compartilhar este post


Link para o post
Compartilhar em outros sites

eu sei que o tópic é pré-histórico, mas eu to com uma dúvida...

como eu faço pra ter, no IE, o mesmo efeito da dsiplay:table?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar agora
Entre para seguir isso  





Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×
×
  • Criar novo...

minicurso-montagem-popup.jpg

MINICURSO GRÁTIS!

Como ganhar dinheiro montando computadores!

CLIQUE AQUI E INSCREVA-SE AGORA MESMO!