Ir ao conteúdo
  • Cadastre-se

DICAS CSS


chaccaall

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:

Link para o comentário
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.

Link para o comentário
Compartilhar em outros sites

  • 2 anos depois...

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas comunidades 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...