[Rapidinha] Como usar o !important em CSS

Escrito por Gustavo Bordoni em Rapidinha no dia 14 de julho, 2009

Bom nesta rapidinha pretendo falar como esse marcador se comporta e para que o seu uso. Vamos lá ver…

Se você faz marcação de sites, com XHTML e CSS provavelmente já deve ter visto o marcador !important em algum site ou código de CSS que mexeu.

Primeiramente você deve saber que quando é colocado em um site um arquivo de estilos em cascata, ele vai modificar os padrões que o browser do usuário já havia definido, dai muitos problemas com fontes na web, então todas as ordens de estilo CSS vem de algum lugar, um arquivo, no próprio cabeçalho da página ou até na própria tag, e isso pode causar confusões em diferentes navegadores.

Existe uma maneira de sobrepor as regras que foram dadas anteriormente, basta usar o marcador !important que o estilo que estiver marcado com o dito cujo será interpretado com o de valor maior, logo será o usado. Ele deve ser aplicado desta forma:

.sumir { display:none!important; }

Bom o código acima é usado para fazer com que uma caixa suma, ou seja, mostre:nada; e o !important antes do ponto e vírgula é para definir que não importe a regra de display usada anteriormente, a que irá contar é esta.

Qualquer dúvida ou pedido de rapidinha diga eu que procuro na internet como fazer e vejo se encaixo na série de artigos!

  • Responder
    Vitor Gomes Pires
    04/10/2009 às 09:56

    cara preciso muito de uma ajuda sua, eu sei que é bem nob a pergunta mais eu so bem novo tbm em webdesign, to querendo saber como eu insiro um texto sobre uma imagem, pq meu amigo tah fods. vlw ai pço

    • Responder
      Gustavo Bordoni
      04/10/2009 às 11:07

      Bom Vitor, como assim sobre uma imagem? Tipo sobrepor?

      Você pode usar da seguinte forma:

      HTML

      <div class="Posicao_relativa">
      <div class="texto">Texto Sobreposto</div>
      <img src="http://webord.net/wp-content/uploads/2009/09/preview.jpg" title="Imagem">
      </div>

      CSS

      <style type="text/css">
      .posicao_relativa {
      Position:relative;
      }
      .texto {
      Position:absolute;
      z-index:5;
      top: 5px;
      left: 100px;
      color:#fff
      }
      </style>

Decodifique seus pensamentos abaixo