Como esconder um objeto usando CSS

Escrito por ehow contributor | Traduzido por caio amorim
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como esconder um objeto usando CSS
Você pode esconder um objeto utilizando linhas de código (computer image by blaine stiger from Fotolia.com)

Como esconder um objeto usando CSS. O Cascading Style Sheets (CSS) dá aos web designers novas habilidades e maior controle sobre a aparência de suas páginas web. Uma dessas novas habilidades é de poder esconder elementos. Com isto, quando combinado com uma linguagem de script como JavaScript, você pode dar a ilusão de animação. Há três maneiras de esconder um objeto com CSS: estilo em linha, folhas de estilo internas e externas. Nosso exemplo seguirá as duas primeiras formas utilizando uma div (uma tag que define um compartimento dentro de um documento HTML ou XHTML) com o conteúdo “Hello World”.

Nível de dificuldade:
Moderadamente desafiante

Outras pessoas estão lendo

O que você precisa?

  • Cascading Style Sheets (CSS)
  • Computador

Lista completaMinimizar

Instruções

    Usando estilo em linha

  1. 1

    Encontre o código do elemento que você deseja esconder. Neste caso o código será: Hello World

  2. 2

    Insira o código a seguir entre o fim da tag de abertura do elemento, mas antes do colchete de fechamento.

    style = “visibility: hidden;”

    Então, no nosso exemplo, nossa div seria:

    Hello world

  3. 3

    Caso não queira utilizar este método, você pode usar o da próxima seção.

    Utilizando uma Folha de Estilos Interna

  1. 1

    Encontre a tag dentro do código de sua página Web. A tag head deve estar no topo de seu código.

  2. 2

    Mova a tag uma linha para baixo. Se a tag estiver em uma linha com outro código, mova-a para baixo, assim ela estará em sua própria linha. Depois, mova-a para baixo mais uma vez.

  3. 3

    Insira o código a seguir na linha acima da tag:

    .invisible { visibility: hidden; }

  4. 4

    Encontre o código do elemento que você deseja esconder.

  5. 5

    Insira o código a seguir entre o fim da tag de abertura do elemento, mas antes do colchete de fechamento.

    class = “invisible”

    Então, em nosso exemplo, nossa div seria:

    Hello World

Dicas & Advertências

  • Use estilos em linha se você deseja esconder apenas um elemento.
  • Use folhas de estilo internas se você quer esconder mais de um elemento. Neste caso, você deve dar o atributo class = “invisible” para todo elemento que você quer escondido. Fazendo isto, você pode adicionar outras tags CSS à classe “invisible” sem ter que mudá-la em cada elemento, exatamente no topo de seu documento. Você também pode usar folhas de estilo externas, colocando o código de dentro de sua folha interna (ou seja, as tags) em um documento separado. Assim, ao invés de colocar estas tags antes de sua tag, coloque:
  • NOMEDOARQUIVO.css é o nome do arquivo de sua nova folha de
  • estilo. Isto permite que você use a mesma folha para várias páginas. O que é ótimo se você deseja utilizar os mesmos estilos em todas as suas páginas!
  • Se você, na verdade, quer esconder um elemento em resposta a um usuário, precisa usar JavaScript, que está além do alcance deste guia.
  • O usuário não pode interagir com um elemento escondido enquanto ele não estiver visível. Os conteúdos de um elemento escondido não estão apenas invisíveis, mas simplesmente não existem em código enquanto assim estiverem.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível